Initial commit

components/EditorClient.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Editor,
+  blocksPlugin,
+  outlinePlugin,
+  useGetEditor,
+  type Route,
+} from "@reacteditor/core";
+import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
+import { aiPlugin } from "@reacteditor/plugin-ai";
+import "@reacteditor/core/dist/index.css";
+import "~/editor/vendor/plugin-ai.css";
+import { createConfig } from "~/editor/config";
+import { ShopifyProvider } from "~/editor/contexts/shopify-context";
+import { Button } from "~/editor/components/ui/button";
+
+type Schema = Record<string, { root: any; content: any[] }>;
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+function SaveButton({
+  currentPath,
+  onSave,
+}: {
+  currentPath: string;
+  onSave: (route: string, data: any) => Promise<void>;
+}) {
+  const getEditor = useGetEditor();
+  const [saving, setSaving] = useState(false);
+  return (
+    <Button
+      onClick={async () => {
+        if (saving) return;
+        setSaving(true);
+        const data = (getEditor() as any)?.appState?.data;
+        if (data) await onSave(currentPath, data);
+        await new Promise((r) => setTimeout(r, 1000));
+        setSaving(false);
+      }}
+      disabled={saving}
+    >
+      {saving ? "Saving…" : "Save"}
+    </Button>
+  );
+}
+
+export default function EditorClient({
+  initialSchema,
+  initialPath,
+}: {
+  initialSchema: Schema;
+  initialPath: string;
+}) {
+  const router = useRouter();
+  const [schema, setSchema] = useState<Schema>(initialSchema);
+  const [currentPath, setCurrentPath] = useState<string>(initialPath);
+
+  const data = useMemo(
+    () => schema[currentPath] ?? { root: { props: {} }, content: [] },
+    [schema, currentPath],
+  );
+
+  const routes: Route[] = useMemo(
+    () =>
+      Object.entries(schema).map(([path, page]) => ({
+        path,
+        title:
+          (page?.root as any)?.props?.title ??
+          (path === "/" ? "Home" : path),
+      })),
+    [schema],
+  );
+
+  const config = useMemo(
+    () =>
+      createConfig({
+        domain: SHOPIFY_DOMAIN,
+        token: STOREFRONT_TOKEN || null,
+      }),
+    [],
+  );
+
+  const persist = useCallback(async (route: string, next: any) => {
+    setSchema((s) => ({ ...s, [route]: next }));
+    await fetch("/api/save-schema", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ route, data: next }),
+    });
+  }, []);
+
+  const plugins = useMemo(
+    () => [
+      createTailwindCdnPlugin(),
+      aiPlugin({
+        api: "/api/chat",
+        attachments: true,
+        body: { route: currentPath },
+      }),
+      blocksPlugin(),
+      outlinePlugin(),
+    ],
+    [currentPath],
+  );
+
+  return (
+    <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
+      <Editor
+        key={currentPath}
+        config={config as any}
+        data={data as any}
+        plugins={plugins}
+        headerPath={currentPath}
+        routes={routes}
+        currentPath={currentPath}
+        onRouteChange={(next) => {
+          setCurrentPath(next);
+          router.push(`/edit${next === "/" ? "" : next}`);
+        }}
+        onPublish={async (next) => {
+          await persist(currentPath, next);
+        }}
+        iframe={{ enabled: true }}
+        overrides={{
+          headerActions: () => (
+            <SaveButton currentPath={currentPath} onSave={persist} />
+          ),
+        }}
+      />
+    </ShopifyProvider>
+  );
+}

components/RenderClient.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useMemo } from "react";
+import { Render } from "@reacteditor/core";
+import "@reacteditor/core/dist/index.css";
+import { createConfig } from "~/editor/config";
+import { ShopifyProvider } from "~/editor/contexts/shopify-context";
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+export default function RenderClient({
+  data,
+  route,
+}: {
+  data: { root: any; content: any[] };
+  route: string;
+}) {
+  const config = useMemo(
+    () =>
+      createConfig({
+        domain: SHOPIFY_DOMAIN,
+        token: STOREFRONT_TOKEN || null,
+      }),
+    [],
+  );
+
+  return (
+    <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
+      <Render config={config as any} data={data as any} metadata={{ route }} />
+    </ShopifyProvider>
+  );
+}