update options
This commit is contained in:
@@ -24,8 +24,8 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
|
|||||||
tone: "default",
|
tone: "default",
|
||||||
},
|
},
|
||||||
fields: {
|
fields: {
|
||||||
brand: { label: "Brand", type: "text", contentEditable: true },
|
|
||||||
logo: { label: "Logo", ...imageField({ adapter: frontendAiMediaAdapter }) },
|
logo: { label: "Logo", ...imageField({ adapter: frontendAiMediaAdapter }) },
|
||||||
|
brand: { label: "Logo Alt", type: "text", contentEditable: true },
|
||||||
links: {
|
links: {
|
||||||
label: "Links",
|
label: "Links",
|
||||||
type: "array",
|
type: "array",
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
"@radix-ui/react-switch": "^1.2.5",
|
"@radix-ui/react-switch": "^1.2.5",
|
||||||
"@radix-ui/react-tabs": "^1.1.12",
|
"@radix-ui/react-tabs": "^1.1.12",
|
||||||
"@radix-ui/react-tooltip": "^1.2.7",
|
"@radix-ui/react-tooltip": "^1.2.7",
|
||||||
"@reacteditor/core": "0.0.17",
|
"@reacteditor/core": "0.0.18",
|
||||||
"@reacteditor/field-google-fonts": "^0.0.1",
|
"@reacteditor/field-google-fonts": "^0.0.1",
|
||||||
"@reacteditor/field-shopify": "^0.0.1",
|
"@reacteditor/field-shopify": "^0.0.1",
|
||||||
"@reacteditor/plugin-ai": "^0.0.4",
|
"@reacteditor/plugin-ai": "^0.0.4",
|
||||||
|
|||||||
42
src/App.tsx
42
src/App.tsx
@@ -1,5 +1,5 @@
|
|||||||
import { useCallback, useMemo, useRef, useState } from "react";
|
import { useCallback, useMemo, useRef, useState } from "react";
|
||||||
import { App as ReactEditorApp, createUseEditor } from "@reacteditor/core";
|
import { App as ReactEditorApp } from "@reacteditor/core";
|
||||||
import "@reacteditor/core/react-editor.css";
|
import "@reacteditor/core/react-editor.css";
|
||||||
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
|
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
|
||||||
import { mediaPlugin } from "@reacteditor/plugin-media";
|
import { mediaPlugin } from "@reacteditor/plugin-media";
|
||||||
@@ -9,15 +9,12 @@ import "@reacteditor/plugin-ai/styles.css";
|
|||||||
import { createConfig } from "@/react-editor.config";
|
import { createConfig } from "@/react-editor.config";
|
||||||
import { ShopifyProvider } from "@/contexts/shopify-context";
|
import { ShopifyProvider } from "@/contexts/shopify-context";
|
||||||
import { frontendAiMediaAdapter } from "@/services/media-adapter";
|
import { frontendAiMediaAdapter } from "@/services/media-adapter";
|
||||||
import { Loader } from "@/components/ui/loader";
|
|
||||||
import schemaJson from "../app.schema.json";
|
import schemaJson from "../app.schema.json";
|
||||||
|
|
||||||
const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
|
const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
|
||||||
|
|
||||||
type Pages = Record<string, { root: any; content: any[] }>;
|
type Pages = Record<string, { root: any; content: any[] }>;
|
||||||
|
|
||||||
const useEditor = createUseEditor();
|
|
||||||
|
|
||||||
const SHOPIFY_DOMAIN =
|
const SHOPIFY_DOMAIN =
|
||||||
(import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
|
(import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
|
||||||
const STOREFRONT_TOKEN =
|
const STOREFRONT_TOKEN =
|
||||||
@@ -34,7 +31,6 @@ function readPathname() {
|
|||||||
export default function App() {
|
export default function App() {
|
||||||
const pages = schemaJson as Pages;
|
const pages = schemaJson as Pages;
|
||||||
const [currentPath, setCurrentPath] = useState<string>(readPathname);
|
const [currentPath, setCurrentPath] = useState<string>(readPathname);
|
||||||
const [isPublishing, setIsPublishing] = useState(false);
|
|
||||||
const latestDataRef = useRef<any>(null);
|
const latestDataRef = useRef<any>(null);
|
||||||
|
|
||||||
const handleChange = useCallback((data: any) => {
|
const handleChange = useCallback((data: any) => {
|
||||||
@@ -50,17 +46,15 @@ export default function App() {
|
|||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handlePublish = useCallback((data: any, route?: string) => {
|
const handlePublish = async (data: any, route?: { key: string }) => {
|
||||||
console.log(data);
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
setIsPublishing(true);
|
if (typeof window !== "undefined" && window.parent !== window) {
|
||||||
if (typeof window !== "undefined" && window.parent !== window) {
|
window.parent.postMessage(
|
||||||
window.parent.postMessage(
|
{ type: "PUBLISH", data: { data, route: route?.key } },
|
||||||
{ type: "PUBLISH", data: { data, route } },
|
"*",
|
||||||
"*",
|
);
|
||||||
);
|
}
|
||||||
}
|
}
|
||||||
setTimeout(() => setIsPublishing(false), 1000);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const plugins = useMemo(
|
const plugins = useMemo(
|
||||||
() => [createTailwindCdnPlugin()],
|
() => [createTailwindCdnPlugin()],
|
||||||
@@ -81,24 +75,6 @@ export default function App() {
|
|||||||
}}
|
}}
|
||||||
onPublish={handlePublish}
|
onPublish={handlePublish}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
overrides={{
|
|
||||||
headerActions: () => {
|
|
||||||
const appState = useEditor((s: any) => s.appState);
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
disabled={isPublishing}
|
|
||||||
onClick={() => {
|
|
||||||
handlePublish(appState.data, currentPath);
|
|
||||||
}}
|
|
||||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-black px-4 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
|
|
||||||
>
|
|
||||||
{isPublishing && <Loader size={14} />}
|
|
||||||
{isPublishing ? "Saving..." : "Save"}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</ShopifyProvider>
|
</ShopifyProvider>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -981,10 +981,10 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.1.tgz#78244efe12930c56fd255d7923865857c41ac8cb"
|
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.1.tgz#78244efe12930c56fd255d7923865857c41ac8cb"
|
||||||
integrity sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==
|
integrity sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==
|
||||||
|
|
||||||
"@reacteditor/core@0.0.17":
|
"@reacteditor/core@0.0.18":
|
||||||
version "0.0.17"
|
version "0.0.18"
|
||||||
resolved "https://registry.yarnpkg.com/@reacteditor/core/-/core-0.0.17.tgz#9e4abf56b9911c467c2cf1945ba205520eb06f81"
|
resolved "https://registry.yarnpkg.com/@reacteditor/core/-/core-0.0.18.tgz#5505676a97831f5f36870be851d52ed027e84993"
|
||||||
integrity sha512-pnweJLj7s/WnGdWL9Ff/csRYRj8xaEeFPJrlcDQweiXnU0G+wAdSUNXjr0adWfA/WOkzbcxI6BxZg3E4537QHg==
|
integrity sha512-Sj0fWxJJnTPbydY0ImmIX/WYYuOO+LuoYK3ykXx6KL7njqdOxnW5UwQQpXKEhF6aEvuLZGw4seqF4oVwbNrvJQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@base-ui/react" "^1.4.1"
|
"@base-ui/react" "^1.4.1"
|
||||||
"@dnd-kit/abstract" "0.4.0"
|
"@dnd-kit/abstract" "0.4.0"
|
||||||
|
|||||||
Reference in New Issue
Block a user