frontend/react-editor-shopify-nextjs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove editor routes, these will be served by the platform

Browse Source
This commit is contained in:
Rami Bitar
2026-06-06 18:56:07 -04:00
parent ef9e10256d
commit ff2de13f99
7 changed files with 0 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/about/editor/page.tsx
View File

@@ -1,6 +0,0 @@
import PageEditor from "@/components/page-editor";
import page from "../page.json";
export default function EditorPage() {
return <PageEditor page={page} routeKey="/app/about" />;
}

6
app/collections/[handle]/editor/page.tsx
View File

@@ -1,6 +0,0 @@
import PageEditor from "@/components/page-editor";
import page from "../page.json";
export default function EditorPage() {
return <PageEditor page={page} routeKey="/app/collections/[handle]" />;
}

6
app/editor/page.tsx
View File

@@ -1,6 +0,0 @@
import PageEditor from "@/components/page-editor";
import page from "../page.json";
export default function EditorPage() {
return <PageEditor page={page} routeKey="/app" />;
}

6
app/products/[handle]/editor/page.tsx
View File

@@ -1,6 +0,0 @@
import PageEditor from "@/components/page-editor";
import page from "../page.json";
export default function EditorPage() {
return <PageEditor page={page} routeKey="/app/products/[handle]" />;
}

6
app/search/editor/page.tsx
View File

@@ -1,6 +0,0 @@
import PageEditor from "@/components/page-editor";
import page from "../page.json";
export default function EditorPage() {
return <PageEditor page={page} routeKey="/app/search" />;
}

92
components/page-editor.tsx
View File

@@ -1,92 +0,0 @@
"use client";
import { useMemo } from "react";
import { usePathname, useParams } from "next/navigation";
import { Editor, blocksPlugin, outlinePlugin } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import { createShopifyPlugin } from "@reacteditor/plugin-shopify";
import { mediaPlugin } from "@reacteditor/plugin-media";
import { mediaAdapter } from "@/lib/adapters/media-adapter";
import { appConfig } from "@/editor.config";
import globals from "@/app.globals.json";
import type { PageData } from "@/components/page-render";
/**
* Shared editor for a route. In an editor route's `page.tsx`, import the
* sibling public route's `page.json` and pass it through with the route key:
*
* import page from "../page.json";
* export default () => <PageEditor page={page} routeKey="/app/products/[handle]" />;
*
* `routeKey` is the Next.js app-directory path of the route (e.g.
* "/app/products/[handle]"); the host resolves it to `<routeKey>/page.json`
* to know which file to save. The concrete public path and params are derived
* separately from the live URL.
*/
export default function PageEditor({
page,
routeKey,
}: {
page: PageData;
routeKey: string;
}) {
const pathname = usePathname() ?? "/editor";
const params = useParams();
// Each editor route is a `.../editor` child of its public route; the
// published path drops that trailing segment.
const path = pathname.replace(/\/editor$/, "") || "/";
const routeParams: Record<string, string> = {};
for (const [key, value] of Object.entries(params ?? {})) {
if (typeof value === "string") routeParams[key] = value;
}
const data = { root: page.root, content: page.content, globals };
const plugins = useMemo(
() => [
blocksPlugin(),
outlinePlugin(),
mediaPlugin({
adapter: mediaAdapter,
}),
createTailwindCdnPlugin(),
createShopifyPlugin({
storeDomain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop",
publicAccessToken:
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
}),
],
[],
);
const handlePublish = async (nextData: any, route?: any) => {
// The page we save is always the public route — i.e. the live path with
// the trailing `/editor` segment stripped, never the `.../editor` URL.
const resolved = {
key: routeKey,
params: routeParams,
...(route ?? {}),
path,
};
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data: nextData, route: resolved } },
"*",
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
};
return (
<div className="h-screen w-screen">
<Editor
config={appConfig as any}
data={data as any}
route={{ key: routeKey, path, params: routeParams }}
plugins={plugins}
onPublish={handlePublish}
/>
</div>
);
}

54
lib/use-demo-data.ts
View File

@@ -1,54 +0,0 @@
import { useEffect, useState } from "react";
import config, { componentKey } from "../config";
import { getInitialData, initialData } from "../config/initial-data";
import { Metadata, resolveAllData } from "@reacteditor/core";
import { Components, UserData } from "../config/types";
import { RootProps } from "../config/root";
const isBrowser = typeof window !== "undefined";
export const useDemoData = ({
path,
isEdit,
metadata = {},
}: {
path: string;
isEdit: boolean;
metadata?: Metadata;
}) => {
// unique b64 key that updates each time we add / remove components
const key = `react-editor-demo:${componentKey}:${path}`;
const [data] = useState<Partial<UserData>>(() => {
if (isBrowser) {
const dataStr = localStorage.getItem(key);
if (dataStr) {
return JSON.parse(dataStr);
}
return getInitialData(path);
}
});
// Normally this would happen on the server, but we can't
// do that because we're using local storage as a database
const [resolvedData, setResolvedData] = useState<Partial<UserData>>(data);
useEffect(() => {
if (data && !isEdit) {
resolveAllData<Components, RootProps>(data, config, metadata).then(
setResolvedData
);
}
}, [data, isEdit]);
useEffect(() => {
if (!isEdit) {
const title = data?.root?.props?.title || data?.root?.title;
document.title = title || "";
}
}, [data, isEdit]);
return { data, resolvedData, key };
};