84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import { useCallback, useMemo, useRef, useState } from "react";
|
|
import { App as ReactEditorApp } from "@reacteditor/core";
|
|
import "@reacteditor/core/react-editor.css";
|
|
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
|
|
import { mediaPlugin } from "@reacteditor/plugin-media";
|
|
import "@reacteditor/plugin-media/styles.css";
|
|
import { aiPlugin } from "@reacteditor/plugin-ai";
|
|
import "@reacteditor/plugin-ai/styles.css";
|
|
import { createConfig } from "@/react-editor.config";
|
|
import { ShopifyProvider } from "@/contexts/shopify-context";
|
|
import { frontendAiMediaAdapter } from "@/services/media-adapter";
|
|
import schemaJson from "../app.schema.json";
|
|
|
|
const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
|
|
|
|
type Pages = Record<string, { root: any; content: any[] }>;
|
|
|
|
const SHOPIFY_DOMAIN =
|
|
(import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
|
|
const STOREFRONT_TOKEN =
|
|
(import.meta.env.VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN as
|
|
| string
|
|
| undefined) ?? "";
|
|
|
|
function readPathname() {
|
|
if (typeof window === "undefined") return "/";
|
|
const p = window.location.pathname;
|
|
return p === "" ? "/" : p;
|
|
}
|
|
|
|
export default function App() {
|
|
const pages = schemaJson as Pages;
|
|
const [currentPath, setCurrentPath] = useState<string>(readPathname);
|
|
const latestDataRef = useRef<any>(null);
|
|
|
|
const handleChange = useCallback((data: any) => {
|
|
latestDataRef.current = data;
|
|
}, []);
|
|
|
|
const config = useMemo(
|
|
() =>
|
|
createConfig({
|
|
domain: SHOPIFY_DOMAIN,
|
|
token: STOREFRONT_TOKEN || null,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const handlePublish = async (data: any, route?: { key: string }) => {
|
|
console.log({ type: "PUBLISH", data: { data, route: JSON.stringify(route) } });
|
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
window.parent.postMessage(
|
|
{ type: "PUBLISH", data: { data, route } },
|
|
"*",
|
|
);
|
|
}
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
};
|
|
|
|
const plugins = useMemo(
|
|
() => [createTailwindCdnPlugin()],
|
|
[pages, currentPath, handlePublish],
|
|
);
|
|
|
|
return (
|
|
<div className="h-screen w-screen">
|
|
<ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
|
|
<ReactEditorApp
|
|
config={config as any}
|
|
pages={pages as any}
|
|
currentPath={currentPath}
|
|
plugins={plugins}
|
|
iframe={{ enabled: true }}
|
|
ui={{
|
|
leftSideBarVisible: false,
|
|
}}
|
|
onPublish={handlePublish}
|
|
onChange={handleChange}
|
|
/>
|
|
</ShopifyProvider>
|
|
</div>
|
|
);
|
|
}
|