@oberoncms/core
Version:
OberonCMS is a cloud deployable CMS written in typescript based on the Puck visual editor
111 lines (110 loc) • 3.53 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import "@puckeditor/core/puck.css";
import { Puck } from "@puckeditor/core";
import { useState, useMemo } from "react";
import { useLocalData } from "../hooks/use-local-data.js";
import { INITIAL_DATA } from "../lib/dtd.js";
import { useOberonActions } from "../hooks/use-oberon.js";
import { useViewPort, PreviewHeading, Preview } from "./editor/preview.js";
import { Header } from "./editor/header.js";
import { useSidebarTab, DrawerItem, Drawer, SidebarHeading, SidebarTabs, Sidebar } from "./editor/sidebar.js";
import { PreviewIframe } from "./editor/preview-iframe.js";
function Editor({
path,
data,
config
}) {
const { publishPageData } = useOberonActions();
const [localData, setLocalData] = useLocalData(path, config);
const { activeTab, setActiveTab } = useSidebarTab();
const { currentViewport, setCurrentViewport } = useViewPort();
const [previewMode, setPreviewMode] = useState("follow");
const editorOverrides = useMemo(
() => ({
drawer: Drawer,
drawerItem: DrawerItem,
iframe: ({
children,
document: iframeDocument
}) => /* @__PURE__ */ jsx(
PreviewIframe,
{
iframeDocument,
previewMode,
children
}
)
}),
[previewMode]
);
const onPublish = async (data2) => {
await publishPageData({
key: path,
data: data2
});
};
return /* @__PURE__ */ jsx(
Puck,
{
config,
data: data || localData || INITIAL_DATA,
onChange: (data2) => {
setLocalData(data2);
},
onAction: (action) => {
if (action.type === "insert") {
setActiveTab("fields");
}
},
onPublish,
overrides: editorOverrides,
children: /* @__PURE__ */ jsxs(
"div",
{
className: "\n grid h-dvh grid-cols-[minmax(0,1fr)_auto_300px]\n grid-rows-[auto_auto_1fr] overflow-hidden bg-card\n ",
children: [
/* @__PURE__ */ jsx("span", { className: "col-span-3", children: /* @__PURE__ */ jsx(Header, { path, onPublish }) }),
/* @__PURE__ */ jsx(
PreviewHeading,
{
className: "flex flex-row items-center justify-center gap-6 pt-0.5",
currentViewport,
setCurrentViewport,
previewMode,
setPreviewMode
}
),
/* @__PURE__ */ jsx("div", { className: "" }),
/* @__PURE__ */ jsx(
SidebarHeading,
{
className: "\n rounded-tl-lg bg-sidebar-primary text-sidebar-primary-foreground\n ",
activeTab
}
),
/* @__PURE__ */ jsx(Preview, { className: "p-1", currentViewport }),
/* @__PURE__ */ jsx(
SidebarTabs,
{
className: "\n flex flex-col pt-2\n [&>button]:aria-selected:bg-sidebar-primary\n ",
activeTab,
setActiveTab
}
),
/* @__PURE__ */ jsx(
Sidebar,
{
className: "\n border-t-2 border-l-2 border-sidebar-primary bg-sidebar-background\n text-sidebar-foreground\n ",
activeTab
}
)
]
}
)
}
);
}
export {
Editor
};