56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import { Editor } from "@reacteditor/core";
|
|
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
|
|
import createShopifyPlugin from "@reacteditor/plugin-shopify";
|
|
import { collectionsConfig } from "@/editor.config";
|
|
import schema from "@/app.schema.json";
|
|
|
|
const currentRoute = "/collections/:handle";
|
|
|
|
export default function CollectionEditorPage() {
|
|
const params = useParams();
|
|
const handle = typeof params?.handle === "string" ? params.handle : "";
|
|
const data = (schema as any)["/collections/:handle"];
|
|
const plugins = useMemo(
|
|
() => [
|
|
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) => {
|
|
const resolved = route ?? { key: currentRoute };
|
|
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={collectionsConfig as any}
|
|
data={data}
|
|
currentRoute={currentRoute}
|
|
route={{ key: currentRoute, path: `/collections/${handle}`, params: { handle } }}
|
|
plugins={plugins}
|
|
iframe={{ enabled: true }}
|
|
ui={{ leftSideBarVisible: false }}
|
|
onPublish={handlePublish}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|