Initial react editor Next.js template

components/page-editor.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { Editor, outlinePlugin, type Data } from '@reacteditor/core';
+import createTailwindCdnPlugin from '@reacteditor/plugin-tailwind-cdn';
+import { appConfig } from '@/editor.config';
+import { publishPage } from '@/lib/publish-page';
+import globals from '@/app.globals.json';
+
+const plugins = [outlinePlugin(), createTailwindCdnPlugin()];
+
+export default function PageEditor({ pagePath, page }: { pagePath: string; page: Record<string, unknown> }) {
+  const data = useMemo(() => ({ ...page, globals }) as unknown as Data, [page]);
+  const handlePublish = useCallback(async (published: Data) => {
+    const result = await publishPage(pagePath, published);
+    if (result.error) throw new Error(result.error);
+  }, [pagePath]);
+
+  return <Editor theme="light" config={appConfig as never} data={data} plugins={plugins} onPublish={handlePublish} />;
+}