@alpaca-editor/core 1.0.3762-mono

package/dist/editor/ComponentInfo.js

@@ -0,0 +1,31 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentInfo = ComponentInfo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CopyToClipboardButton_1 = require("./ui/CopyToClipboardButton");
+const Section_1 = require("./ui/Section");
+const editContext_1 = require("./client/editContext");
+function ComponentInfo({ component }) {
+    if (!component)
+        return null;
+    const editContext = (0, editContext_1.useEditContext)();
+    const [layoutItem, setLayoutItem] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (!component.layoutId) {
+            setLayoutItem(undefined);
+            return;
+        }
+        editContext.itemsRepository
+            .getItem({
+            id: component.layoutId,
+            language: editContext.currentItemDescriptor.language,
+            version: 0,
+        })
+            .then(setLayoutItem);
+    }, [component.layoutId]);
+    const hostingPageItem = layoutItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Source:" }), (0, jsx_runtime_1.jsxs)("div", { children: [layoutItem.path, " ID: ", layoutItem.id] })] })) : null;
+    const linkedComponent = component.datasourceItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Source:" }), (0, jsx_runtime_1.jsxs)("div", { children: [component.datasourceItem.path, " (", component.datasourceItem.id, ")"] })] })) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "py-3 px-3 text-l font-bold my-2", children: component.name }), (0, jsx_runtime_1.jsx)(Section_1.Section, { title: "Info", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-[min-content_1fr] gap-3 text-xs bg-gray-100", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "ID:" }), (0, jsx_runtime_1.jsxs)("div", { children: [component.id, " ", (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: component.id })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Template" }), (0, jsx_runtime_1.jsxs)("div", { children: ["(", component.datasourceItem?.templateId, component.datasourceItem && ((0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: component.datasourceItem.templateId })), ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Languages" }), (0, jsx_runtime_1.jsx)("div", { children: component.datasourceItem?.translations?.join(", ") }), hostingPageItem, linkedComponent] }) })] }));
+}

package/dist/editor/ConfirmationDialog.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dialog_1 = require("primereact/dialog");
+const button_1 = require("primereact/button");
+const ConfirmationDialog = (0, react_1.forwardRef)((_props, ref) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [props, setProps] = (0, react_1.useState)();
+    const showAccept = props?.accept === undefined ? true : props.accept;
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        confirm: (props) => {
+            setVisible(true);
+            setProps(props);
+        },
+    }));
+    const handleAccept = () => {
+        props?.accept();
+        setVisible(false);
+    };
+    const handleReject = () => {
+        if (props?.reject)
+            props.reject();
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+    const dialogFooter = ((0, jsx_runtime_1.jsxs)("div", { children: [showAccept && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: props?.acceptLabel || "Yes", icon: props?.acceptIcon || "pi pi-check", onClick: handleAccept, className: "p-button-text" })), props?.rejectLabel && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: props?.rejectLabel, icon: props?.rejectIcon || "pi pi-times", onClick: handleReject, className: "p-button-text" })), props?.showCancel && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Cancel", icon: "pi pi-ban", onClick: handleCancel, className: "p-button-text" }))] }));
+    return (visible && ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: props?.header || "Confirm", visible: visible, style: { maxWidth: "50vw" }, footer: dialogFooter, onHide: handleCancel, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 p-3", children: [props?.icon && (0, jsx_runtime_1.jsx)("i", { className: props.icon + " text-3xl" }), props?.message] }) })));
+});
+exports.default = ConfirmationDialog;

package/dist/editor/ContentTree.js

@@ -0,0 +1,406 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ContentTree;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("./client/editContext");
+const react_1 = require("react");
+const contentService_1 = require("./services/contentService");
+const contextmenu_1 = require("primereact/contextmenu");
+const ItemNameDialog_1 = require("./ui/ItemNameDialog");
+const utils_1 = require("./utils");
+const Spinner_1 = require("./ui/Spinner");
+const PerfectTree_1 = require("./ui/PerfectTree");
+// Create a memoized version of PerfectTree
+const MemoizedPerfectTree = (0, react_1.memo)(PerfectTree_1.PerfectTree);
+function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, rootItemIds, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, selectPagesOnly, renderNode, onItemInserted, language, includeItemPath, }) {
+    const [treeNodes, setTreeNodes] = (0, react_1.useState)([]);
+    const [selectedNodeElement, setSelectedNodeElement] = (0, react_1.useState)(null);
+    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)([]);
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)([]);
+    const treeContainerRef = (0, react_1.useRef)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    const nodeDictionary = (0, react_1.useRef)({});
+    const cm = (0, react_1.useRef)(null);
+    const [menu, setMenu] = (0, react_1.useState)([]);
+    const itemNameDialogRef = (0, react_1.useRef)(null);
+    const editContextRef = (0, editContext_1.useEditContextRef)();
+    const lastSelectedItemId = (0, react_1.useRef)(undefined);
+    const loadNodeChildren = (0, react_1.useCallback)(async (node) => {
+        if (!editContext)
+            return [];
+        let children = await (0, contentService_1.getChildren)(node.key, editContext.sessionId, templateIds, includeEmbeddedItems ?? false, language, includeItemPath ? "path,idPath" : undefined);
+        if (filter)
+            children = filter(children);
+        return children.map((x) => ({
+            key: x.id,
+            label: x.name,
+            iconUrl: (0, utils_1.getAbsoluteIconUrl)(x.icon),
+            isDraggable: isDraggable && isDraggable(x),
+            selectable: !selectPagesOnly || x.hasLayout,
+            data: x,
+            hasChildren: x.hasChildren,
+            parent: node,
+        }));
+    }, [
+        editContext,
+        filter,
+        includeEmbeddedItems,
+        isDraggable,
+        language,
+        selectPagesOnly,
+        templateIds,
+        includeItemPath,
+    ]);
+    const updateCorrespondingNode = (0, react_1.useCallback)((x, parent) => {
+        const node = nodeDictionary.current[x.id];
+        if (!node)
+            return;
+        node.label = x.name;
+        node.iconUrl = (0, utils_1.getAbsoluteIconUrl)(x.icon);
+        node.isDraggable =
+            isDraggable &&
+                isDraggable({
+                    ...x,
+                    isComponent: !x.hasLayout,
+                    thumbUrl: "",
+                    previewUrl: "",
+                });
+        node.selectable = !selectPagesOnly || x.hasLayout;
+        node.data = x;
+        node.hasChildren = x.hasChildren;
+        node.parent = parent;
+    }, [isDraggable, selectPagesOnly]);
+    const loadNode = (0, react_1.useCallback)(async (descriptor) => {
+        const item = await editContext?.itemsRepository.getItem(descriptor);
+        if (!item)
+            return;
+        return {
+            key: item.id,
+            label: item.name,
+            iconUrl: (0, utils_1.getAbsoluteIconUrl)(item.icon),
+            isDraggable: isDraggable &&
+                isDraggable({
+                    ...item,
+                    isComponent: !item.hasLayout,
+                    thumbUrl: "",
+                    previewUrl: "",
+                }),
+            selectable: !selectPagesOnly || item.hasLayout,
+            data: item,
+            hasChildren: item.hasChildren,
+        };
+    }, [editContext?.itemsRepository, isDraggable, selectPagesOnly]);
+    const loadRootNodes = (0, react_1.useCallback)(async (force = false) => {
+        if (!force && treeNodes.length > 0)
+            return treeNodes;
+        if (rootItemId)
+            return await loadNodeChildren({ key: rootItemId, label: "" });
+        return await Promise.all(rootItemIds
+            ?.map((rootItemId) => loadNode({
+            id: rootItemId,
+            language,
+            version: 0,
+        }))
+            .filter((x) => x) || []);
+    }, [loadNode, loadNodeChildren, rootItemId, rootItemIds, language]);
+    const doPreloadNodes = (0, react_1.useCallback)(async (expandedKeys, treeNodes) => {
+        for (let i = 0; i < treeNodes.length; i++) {
+            const node = treeNodes[i];
+            if (!node)
+                continue;
+            let children = node.children;
+            if (expandedKeys.includes(node.key) && !children) {
+                children = node.data.hasChildren ? await loadNodeChildren(node) : [];
+                node.children = children;
+            }
+            if (expandedKeys.includes(node.key) &&
+                children &&
+                children.length > 0) {
+                await doPreloadNodes(expandedKeys, children);
+            }
+        }
+    }, [loadNodeChildren]);
+    const preLoadNodes = (0, react_1.useCallback)(async (expandedKeys, force) => {
+        const rootNodes = await loadRootNodes(force);
+        await doPreloadNodes(expandedKeys, rootNodes);
+        setTreeNodes([...rootNodes.filter((x) => x)]);
+    }, [doPreloadNodes, loadRootNodes]);
+    const refreshNode = (0, react_1.useCallback)(async (node) => {
+        const tempNode = { ...node };
+        tempNode.children = undefined;
+        await doPreloadNodes(expandedKeys || [], [tempNode]);
+        const item = await editContext?.itemsRepository.getItem(node.data);
+        if (item)
+            updateCorrespondingNode(item, node);
+        node.children = tempNode.children;
+    }, [
+        editContext?.itemsRepository,
+        expandedKeys,
+        doPreloadNodes,
+        updateCorrespondingNode,
+    ]);
+    (0, react_1.useEffect)(() => {
+        preLoadNodes(expandedKeys || [], false);
+    }, [language, preLoadNodes, expandedKeys]);
+    (0, react_1.useEffect)(() => {
+        if (!editContext?.itemsRepository)
+            return;
+        const unsubscribe = editContext.itemsRepository.subscribeItemsChanged(async (items) => {
+            const nodes = items
+                .map((x) => x.action === "delete" && x.parentId
+                ? nodeDictionary.current[x.parentId]
+                : nodeDictionary.current[x.item.id])
+                .filter((x) => x);
+            if (nodes.length === 0)
+                return;
+            await Promise.all(nodes.map(async (x) => {
+                if (x)
+                    await refreshNode(x);
+            }));
+            setTreeNodes((prev) => [...prev]);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [editContext?.itemsRepository, refreshNode]);
+    function getExpandedKeys() {
+        const newExpandedKeys = [];
+        if (rootItemId)
+            newExpandedKeys.push(rootItemId.toLowerCase().replace(/[{}]/g, ""));
+        if (!expandIdPath)
+            return newExpandedKeys;
+        const idPathArray = expandIdPath.toLowerCase().split("/");
+        idPathArray.forEach((x) => {
+            if (x !== "")
+                newExpandedKeys.push(x.substring(1, x.length - 1));
+        });
+        return newExpandedKeys;
+    }
+    (0, react_1.useEffect)(() => {
+        const newExpandedKeys = getExpandedKeys();
+        const hasNewKeys = newExpandedKeys.some((key) => !expandedKeys.includes(key));
+        if (hasNewKeys) {
+            setExpandedKeys([...new Set([...expandedKeys, ...newExpandedKeys])]);
+        }
+    }, [expandIdPath, preLoadNodes]);
+    (0, react_1.useEffect)(() => {
+        const newNodeDictionary = {};
+        createMap(treeNodes, newNodeDictionary);
+        nodeDictionary.current = newNodeDictionary;
+    }, [treeNodes]);
+    function createMap(treeNodes, nodeDictionary) {
+        treeNodes.forEach((n) => {
+            if (n.key)
+                nodeDictionary[n.key] = n;
+            if (n.children)
+                createMap(n.children, nodeDictionary);
+        });
+    }
+    const nodeTemplate = (0, react_1.useCallback)((node) => {
+        let label = (0, jsx_runtime_1.jsx)("span", { children: node.label });
+        if (node.url) {
+            label = ((0, jsx_runtime_1.jsx)("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "text-primary font-semibold hover:underline", children: node.label }));
+        }
+        const getNodeCursor = (node) => {
+            if (node.isDraggable)
+                return "cursor-grab";
+            return "";
+        };
+        return ((0, jsx_runtime_1.jsxs)("span", { 
+            // onDragStart={(event: React.DragEvent<HTMLDivElement>) => {
+            //   handleDragStart(node, event);
+            // }}
+            // onDragEnd={handleDragEnd}
+            // draggable={node.isDraggable}
+            className: `flex items-center gap-2 text-xs ${getNodeCursor(node)} ${node.className}`, children: [(0, jsx_runtime_1.jsx)("img", { src: node.iconUrl, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), label] }));
+    }, []);
+    function handleDragStart(data) {
+        const items = data.isMultiSelect
+            ? selectedItemIds?.map((x) => nodeDictionary.current[x]?.data)
+            : [data.node.data];
+        setTimeout(() => {
+            editContextRef.current?.dragStart({
+                type: "items",
+                typeId: data.node.data.templateId,
+                items: items,
+            });
+        }, 10);
+        //dragStart?.(data.node.data);
+        data.event.stopPropagation();
+    }
+    function handleDrop(parent, index, event) {
+        const object = editContextRef.current?.dragObject;
+        if (!object)
+            return;
+        if (object.type === "items" && object.items) {
+            editContextRef.current?.operations.moveItems(object.items, parent.data, index);
+        }
+        event.stopPropagation();
+    }
+    function handleDragEnd() {
+        editContextRef.current?.dragEnd();
+        if (dragEnd)
+            dragEnd();
+    }
+    (0, react_1.useEffect)(() => {
+        if (!selectedNodeElement)
+            return;
+        const container = treeContainerRef.current;
+        if (!container)
+            return;
+        if (!treeContainerRef.current)
+            return;
+        const containerRect = treeContainerRef.current.getBoundingClientRect();
+        const nodeRect = selectedNodeElement.getBoundingClientRect();
+        if (nodeRect.top < containerRect.top ||
+            nodeRect.top > containerRect.bottom) {
+            selectedNodeElement.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+        }
+    }, [selectedNodeElement]);
+    (0, react_1.useEffect)(() => {
+        setSelectedKeys(selectedItemIds || []);
+    }, [selectedItemIds]);
+    const itemCommands = editContext?.configuration.commands.allItemCommands || [];
+    const onContextMenu = (0, react_1.useCallback)(async (node, originalEvent) => {
+        console.log("CONTEXT MENU", node);
+        const key = node.key;
+        let itemIds = selectedItemIds;
+        if (!itemIds || !itemIds.includes(key)) {
+            if (onSelectionChange && selectionMode == "single") {
+                onSelectionChange([node.data]);
+            }
+            itemIds = [key];
+        }
+        const items = await editContext?.itemsRepository.getItems(itemIds.map((x) => ({
+            id: x,
+            language: editContext.contentEditorItem?.language || "en",
+            version: 0,
+        })));
+        console.log("ITEMS", items);
+        if (!items || items.length === 0)
+            return;
+        const menuItems = await editContext?.configuration.editor.contentTree.contextMenu.factory({
+            items: items,
+            editContext: editContext,
+            commandCallback: (command, result) => {
+                if (command.id === "insertItem") {
+                    const item = result;
+                    if (item) {
+                        setExpandedKeys((keys) => [...keys, item.id]);
+                        onItemInserted?.(item);
+                    }
+                }
+            },
+        });
+        if (menuItems)
+            setMenu(menuItems);
+        console.log("SHOWING CONTEXT MENU", originalEvent);
+        cm.current?.show(originalEvent);
+    }, [
+        itemCommands,
+        editContext,
+        selectedItemIds,
+        onSelectionChange,
+        selectionMode,
+        onItemInserted,
+    ]);
+    // Memoize the toggle expand handler
+    const handleToggleExpand = (0, react_1.useCallback)((nodeKey) => {
+        setExpandedKeys((value) => {
+            if (value.includes(nodeKey))
+                return value.filter((x) => x !== nodeKey);
+            else
+                return [...value, nodeKey];
+        });
+    }, []);
+    // Memoize the node selection handler
+    const handleNodeSelect = (0, react_1.useCallback)((nodeKey, ev) => {
+        let newSelection = [...selectedKeys];
+        if (selectionMode == "multiple" &&
+            ev.shiftKey &&
+            lastSelectedItemId.current) {
+            // Get the nodes
+            const lastNode = nodeDictionary.current[lastSelectedItemId.current];
+            const currentNode = nodeDictionary.current[nodeKey];
+            // Check if both nodes exist and have the same parent
+            if (lastNode &&
+                currentNode &&
+                lastNode.parent?.key === currentNode.parent?.key) {
+                const parentNode = lastNode.parent;
+                // Get all children of the parent
+                const siblings = parentNode?.children || [];
+                // Find indices of selected nodes
+                const siblingKeys = siblings.map((node) => node.key);
+                const lastNodeIndex = siblingKeys.indexOf(lastSelectedItemId.current);
+                const currentNodeIndex = siblingKeys.indexOf(nodeKey);
+                // Determine start and end indices
+                const startIdx = Math.min(lastNodeIndex, currentNodeIndex);
+                const endIdx = Math.max(lastNodeIndex, currentNodeIndex);
+                // Get all nodes between (inclusive)
+                const nodesToSelect = siblingKeys.slice(startIdx, endIdx + 1);
+                // Combine with existing selection
+                newSelection = [...new Set([...newSelection, ...nodesToSelect])];
+            }
+            else {
+                // If not on same level, just select the current node
+                newSelection = [nodeKey];
+            }
+        }
+        else if (selectionMode === "multiple" && ev.ctrlKey) {
+            newSelection = selectedKeys.includes(nodeKey)
+                ? selectedKeys.filter((x) => x !== nodeKey)
+                : [...selectedKeys, nodeKey];
+        }
+        else {
+            lastSelectedItemId.current = nodeKey;
+            newSelection = [nodeKey];
+        }
+        setSelectedKeys(newSelection);
+        if (onSelectionChange) {
+            const selectedNodes = newSelection
+                .filter((key) => nodeDictionary.current[key])
+                .map((key) => nodeDictionary.current[key]);
+            onSelectionChange(selectedNodes.map((x) => x?.data));
+        }
+    }, [onSelectionChange, selectionMode, selectedKeys]);
+    // Memoize the renderNode function
+    const memoizedRenderNode = (0, react_1.useMemo)(() => {
+        if (renderNode) {
+            return (node) => renderNode(node, (n) => nodeTemplate(n));
+        }
+        return nodeTemplate;
+    }, [renderNode, nodeTemplate]);
+    // Memoize the double click handler
+    const handleDoubleClick = (0, react_1.useCallback)((node) => {
+        onDoubleClick?.(nodeDictionary.current[node.key]?.data);
+    }, [onDoubleClick]);
+    // Memoize treeNodes to prevent unnecessary re-renders
+    const memoizedTreeNodes = (0, react_1.useMemo)(() => treeNodes, [treeNodes]);
+    const loadChildren = (0, react_1.useCallback)(async (node, forceReload = false) => {
+        if (!node.children || forceReload) {
+            const nodes = await loadNodeChildren(node);
+            node.children = nodes;
+            console.log("LOAD CHILDREN COMPLETED", node.key, nodes);
+            setTreeNodes((prev) => [...prev]);
+        }
+    }, [loadNodeChildren]);
+    const loadOnExpand = (0, react_1.useCallback)(async (node) => {
+        node.children = null;
+        setTreeNodes([...treeNodes]);
+        await loadChildren(node);
+    }, [loadChildren, treeNodes]);
+    const handleDragOverZone = (0, react_1.useCallback)((node, index, event) => {
+        return true;
+    }, []);
+    if (!memoizedTreeNodes.length)
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full items-center justify-center gap-2 bg-gray-50 text-sm text-gray-500", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "3xl" }), " Loading..."] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ItemNameDialog_1.ItemNameDialog, { ref: itemNameDialogRef }), (0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menu, ref: cm, className: "text-sm" }), (0, jsx_runtime_1.jsx)("div", { className: className, ref: treeContainerRef, children: (0, jsx_runtime_1.jsx)(MemoizedPerfectTree, { nodes: memoizedTreeNodes, expandedKeys: expandedKeys, onToggleExpand: handleToggleExpand, renderNode: memoizedRenderNode, onLazyLoad: loadOnExpand, onDoubleClick: handleDoubleClick, onSelect: handleNodeSelect, selectedKeys: selectedKeys, onContextMenu: onContextMenu, enableDragAndDrop: true, onStartDrag: handleDragStart, onDragOverZone: handleDragOverZone, onDragEnd: handleDragEnd, isDragging: editContext?.dragObject !== undefined, onDrop: (parent, index, event) => {
+                        console.log("DROP", parent, index, event);
+                        handleDrop(parent, index, event);
+                    } }) })] }));
+}

package/dist/editor/ContextMenu.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditContextMenu = void 0;
+exports.showComponentContextMenu = showComponentContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const contextmenu_1 = require("primereact/contextmenu");
+// export function getFieldContextMenu(
+//   field: Field,
+//   editContext: EditContextType,
+//   customButtons: EditButton[] = []
+// ) {
+//   return (e: any) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     const menuItems: MenuItem[] = getComponentMenuItems(
+//       editContext,
+//       getComponentById(field._editor!.descriptor.item.id, editContext.page!)!
+//     );
+//     if (customButtons.length) {
+//       if (menuItems.length)
+//         menuItems.push({
+//           separator: true,
+//         });
+//       customButtons.forEach((button) => {
+//         menuItems.push({
+//           label: button.label,
+//           command: (ev) => button.onClick(ev.originalEvent as any),
+//           icon: button.icon,
+//         });
+//       });
+//     }
+//     if (field._editor?.buttons?.length) {
+//       if (menuItems.length)
+//         menuItems.push({
+//           separator: true,
+//         });
+//       field._editor?.buttons.forEach((button: FieldButton) => {
+//         menuItems.push({
+//           label: button.label,
+//           command: () => {
+//             editContext!.triggerFieldAction(field._editor!.descriptor, button);
+//           },
+//           icon: button.icon ? "pi " + button.icon : undefined,
+//         });
+//       });
+//     }
+//     if (!e.ctrlKey && !e.shiftKey && !e.altKey && menuItems.length) {
+//       editContext.select([field._editor!.descriptor.item.id]);
+//       editContext!.setFocusedField(field._editor!.descriptor, false);
+//       editContext!.showContextMenu(e, menuItems);
+//     }
+//   };
+// }
+function showComponentContextMenu(components, editContext, field, fieldButtons) {
+    const componentCommandMenuItems = getComponentMenuItems(editContext, components);
+    const menuItems = componentCommandMenuItems;
+    if (!editContext.readonly && field && fieldButtons?.length) {
+        if (menuItems.length)
+            menuItems.push({
+                separator: true,
+            });
+        fieldButtons.forEach((button) => {
+            menuItems.push({
+                label: button.label,
+                command: () => {
+                    editContext.triggerFieldAction(field, button);
+                },
+                icon: button.icon ? "pi " + button.icon : undefined,
+            });
+        });
+    }
+    return (e) => {
+        if (!e.shiftKey && !e.altKey) {
+            if (menuItems.length) {
+                //        editContext.select([component.id]);
+                editContext.showContextMenu(e, menuItems);
+            }
+            return true;
+        }
+        return false;
+    };
+}
+exports.EditContextMenu = (0, react_1.forwardRef)((props, ref) => {
+    const cm = (0, react_1.useRef)(null);
+    const [menuItems, setMenuItems] = (0, react_1.useState)([]);
+    if (!props)
+        return;
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        show: (e, items) => {
+            if (!e.ctrlKey && !e.shiftKey && !e.altKey) {
+                setMenuItems(items);
+                e.preventDefault();
+                cm.current?.show(e);
+            }
+        },
+        close: (event) => {
+            cm.current?.hide(event);
+        },
+    }));
+    return (0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menuItems, ref: cm });
+});
+function getComponentMenuItems(editContext, components) {
+    const componentCommands = editContext.getComponentCommands(components);
+    const componentCommandMenuItems = componentCommands.map((x) => {
+        return {
+            label: x.label,
+            icon: x.icon,
+            command: (ev) => editContext.executeCommand({
+                command: x,
+                event: ev.originalEvent,
+            }),
+            disabled: editContext.isCommandDisabled({ command: x }),
+        };
+    });
+    return componentCommandMenuItems;
+}

package/dist/editor/Editor.js

@@ -0,0 +1,55 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = Editor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditorClient_1 = require("./client/EditorClient");
+const DialogContext_1 = require("./client/DialogContext");
+const react_1 = require("react");
+const editService_1 = require("./services/editService");
+const systemService_1 = require("./services/systemService");
+const react_uuid_1 = __importDefault(require("react-uuid"));
+const config_1 = require("../config/config");
+function Editor({ configure, className, page, }) {
+    const [config, setConfig] = (0, react_1.useState)();
+    const [userInfo, setUserInfo] = (0, react_1.useState)();
+    const [systemStatus, setSystemStatus] = (0, react_1.useState)();
+    const sessionId = typeof window !== "undefined"
+        ? sessionStorage.getItem("sessionId") || (0, react_uuid_1.default)()
+        : (0, react_uuid_1.default)();
+    (0, react_1.useEffect)(() => {
+        // Get user info and system status
+        (0, editService_1.getUserInfo)().then((userInfo) => {
+            if (!userInfo) {
+                window.location.href = "/sitecore/login";
+                return;
+            }
+            setUserInfo(userInfo);
+        });
+        (0, systemService_1.getSystemStatus)().then((status) => {
+            if (status.data) {
+                setSystemStatus(status.data);
+            }
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!userInfo || !systemStatus)
+            return;
+        const config = configure({
+            configuration: (0, config_1.getConfiguration)(),
+            user: userInfo,
+        });
+        setConfig(config);
+    }, [userInfo, systemStatus]);
+    if (!userInfo || !systemStatus)
+        return null;
+    if (systemStatus.messages.some((m) => m.severity === "error")) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 flex flex-col items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl", children: "Please fix the following issues:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-red-500", children: systemStatus.messages.map((m) => ((0, jsx_runtime_1.jsx)("div", { children: m.message }, m.message))) }), (0, jsx_runtime_1.jsx)("p", { children: "Check the logs for more details." })] }));
+    }
+    if (!config)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(DialogContext_1.DialogProvider, { children: (0, jsx_runtime_1.jsx)(EditorClient_1.EditorClient, { configuration: config, className: className, item: page, sessionId: sessionId }) }));
+}

package/dist/editor/EditorWarning.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorWarning = EditorWarning;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+function EditorWarning({ title, severity = "warning", children, }) {
+    const background = severity === "info"
+        ? "bg-blue-100"
+        : severity === "error"
+            ? "bg-red-100"
+            : "bg-yellow-100";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)(background, "text-sm text-gray-500 border-b border-yellow-300 flex gap-2 items-stretch"), children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-yellow-200 px-4 flex items-center text-gray-900", children: (0, jsx_runtime_1.jsx)("span", { className: "pi pi-exclamation-triangle text-2xl" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: children })] })] }));
+}