Initial commit

src/App.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  App as ReactEditorApp,
+  blocksPlugin,
+  outlinePlugin,
+} from "@reacteditor/core";
+import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
+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(), blocksPlugin(), outlinePlugin()],
+    [],
+  );
+
+  const handlePublish = useCallback((data: any, route?: string) => {
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "PUBLISH", data: { data, route } },
+        "*",
+      );
+    }
+  }, []);
+
+  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>
+  );
+}