86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import {
|
|
App as ReactEditorApp,
|
|
blocksPlugin,
|
|
outlinePlugin,
|
|
} from "@reacteditor/core";
|
|
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
|
|
import { aiPlugin } from "@reacteditor/plugin-ai";
|
|
import { createConfig } from "@/editor/config";
|
|
import { ShopifyProvider } from "@/editor/contexts/shopify-context";
|
|
import schemaJson from "../app.schema.json";
|
|
|
|
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);
|
|
|
|
useEffect(() => {
|
|
const onPop = () => setCurrentPath(readPathname());
|
|
window.addEventListener("popstate", onPop);
|
|
return () => window.removeEventListener("popstate", onPop);
|
|
}, []);
|
|
|
|
const config = useMemo(
|
|
() =>
|
|
createConfig({
|
|
domain: SHOPIFY_DOMAIN,
|
|
token: STOREFRONT_TOKEN || null,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const plugins = useMemo(
|
|
() => [
|
|
createTailwindCdnPlugin(),
|
|
aiPlugin({
|
|
api: "/api/chat",
|
|
attachments: true,
|
|
body: { route: currentPath },
|
|
}),
|
|
blocksPlugin(),
|
|
outlinePlugin(),
|
|
],
|
|
[currentPath],
|
|
);
|
|
|
|
const handlePublish = useCallback(
|
|
(data: any, route?: string) => {
|
|
const path = route ?? currentPath;
|
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
window.parent.postMessage({ type: "PUBLISH", path, data }, "*");
|
|
}
|
|
},
|
|
[currentPath],
|
|
);
|
|
|
|
return (
|
|
<div style={{ height: "100vh", width: "100vw" }}>
|
|
<ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
|
|
<ReactEditorApp
|
|
config={config as any}
|
|
pages={pages as any}
|
|
currentPath={currentPath}
|
|
plugins={plugins}
|
|
iframe={{ enabled: true }}
|
|
onPublish={handlePublish}
|
|
/>
|
|
</ShopifyProvider>
|
|
</div>
|
|
);
|
|
}
|