@alpaca-editor/core 1.0.3762-mono

package/dist/editor/page-editor-chrome/NoLayout.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoLayout = NoLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+function NoLayout() {
+    const [lastPageItem, setLastPageItem] = (0, react_1.useState)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    (0, react_1.useEffect)(() => {
+        const updateLastPage = async () => {
+            if (!editContext?.pageView.pageItemDescriptor)
+                return;
+            const lastPage = await editContext.itemsRepository.getItem(editContext.pageView.pageItemDescriptor);
+            if (lastPage)
+                setLastPageItem(lastPage);
+        };
+        updateLastPage();
+    }, [editContext?.currentItemDescriptor]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-full w-full flex flex-col items-center justify-center text-sm", children: ["Item has no layout.", lastPageItem && ((0, jsx_runtime_1.jsxs)("div", { className: "cursor-pointer hover:underline p-2", onClick: () => editContext?.loadItem(lastPageItem.descriptor), children: ["Load ", lastPageItem?.name, "?"] }))] }));
+}

package/dist/editor/page-editor-chrome/PageEditorChrome.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEditorChrome = PageEditorChrome;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const InlineEditor_1 = require("./InlineEditor");
+const FieldActionIndicators_1 = require("./FieldActionIndicators");
+const PlaceholderDropZones_1 = require("./PlaceholderDropZones");
+const PictureEditorOverlay_1 = require("./PictureEditorOverlay");
+const react_1 = require("react");
+const LockedFieldIndicator_1 = require("./LockedFieldIndicator");
+const FrameMenus_1 = require("./FrameMenus");
+const FieldEditedIndicators_1 = require("./FieldEditedIndicators");
+const CommentHighlightings_1 = require("./CommentHighlightings");
+function PageEditorChrome({ iframe, mode, pageViewContext, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [insertingStyle, setInsertingStyle] = (0, react_1.useState)();
+    if (!editContext?.pageView || !iframe?.contentDocument)
+        return null;
+    (0, react_1.useEffect)(() => {
+        if (!editContext.inserting)
+            setInsertingStyle(undefined);
+        let insertingPosition;
+        const insertingRect = editContext.inserting
+            ? editContext.inserting.positionElement.getBoundingClientRect()
+            : null;
+        if (insertingRect) {
+            if (editContext.inserting?.positionAnchor === "top")
+                insertingPosition = {
+                    y: insertingRect.y,
+                    x: insertingRect.x + insertingRect.width / 2,
+                };
+            if (editContext.inserting?.positionAnchor === "bottom")
+                insertingPosition = {
+                    y: insertingRect.y + insertingRect.height,
+                    x: insertingRect.x + insertingRect.width / 2,
+                };
+            if (editContext.inserting?.positionAnchor === "left")
+                insertingPosition = {
+                    y: insertingRect.y + insertingRect.height / 2,
+                    x: insertingRect.x,
+                };
+            if (editContext.inserting?.positionAnchor === "right")
+                insertingPosition = {
+                    y: insertingRect.y + insertingRect.height / 2,
+                    x: insertingRect.x + insertingRect.width,
+                };
+        }
+        const getInsertingStyle = () => {
+            if (!insertingPosition)
+                return;
+            const scale = pageViewContext.zoom;
+            const x = Math.min(pageViewContext.viewport.width - 20, Math.max(20, insertingPosition.x * (scale || 1)));
+            const y = Math.min(pageViewContext.viewport.height - 20, Math.max(20, insertingPosition.y * (scale || 1)));
+            return {
+                top: y - 16 + "px",
+                left: x - 16 + "px",
+                zIndex: 1000,
+            };
+        };
+        const insertingStyle = getInsertingStyle();
+        setInsertingStyle(insertingStyle);
+    }, [editContext.inserting, pageViewContext.viewport]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FrameMenus_1.FrameMenus, { mode: mode, pageViewContext: pageViewContext }), (0, jsx_runtime_1.jsx)(InlineEditor_1.InlineEditor, { mode: mode === "edit" ? "edit" : "view", pageViewContext: pageViewContext }), (0, jsx_runtime_1.jsx)(LockedFieldIndicator_1.LockedFieldIndicator, {}), (0, jsx_runtime_1.jsx)(FieldActionIndicators_1.FieldActionsIndicators, {}), editContext.showComments && ((0, jsx_runtime_1.jsx)(CommentHighlightings_1.CommentHighlightings, { iframe: pageViewContext?.editorIframeRef.current, scale: 1 })), (0, jsx_runtime_1.jsx)(FieldEditedIndicators_1.FieldEditedIndicators, { pageViewContext: pageViewContext }), mode === "edit" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PlaceholderDropZones_1.PlaceholderDropZones, { iframe: pageViewContext?.editorIframeRef.current, size: "large" }), (0, jsx_runtime_1.jsx)(PictureEditorOverlay_1.PictureEditorOverlay, {}), insertingStyle && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute flex h-8 w-8", style: insertingStyle, children: [(0, jsx_runtime_1.jsx)("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75" }), (0, jsx_runtime_1.jsx)("span", { className: "relative inline-flex rounded-full h-8 w-8 bg-sky-500" })] }))] }))] }));
+}

package/dist/editor/page-editor-chrome/PictureEditorOverlay.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PictureEditorOverlay = PictureEditorOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const PictureEditor_1 = require("../PictureEditor");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+function PictureEditorOverlay() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const pageViewContext = editContext?.pageView;
+    const iframe = pageViewContext?.editorIframeRef.current;
+    const [field, setField] = (0, react_1.useState)();
+    const [variantName, setVariantName] = (0, react_1.useState)();
+    const [element, setElement] = (0, react_1.useState)();
+    const editContextRef = (0, react_1.useRef)(editContext);
+    (0, react_1.useEffect)(() => {
+        editContextRef.current = editContext;
+    }, [editContext]);
+    const onMouseEnter = (0, react_1.useCallback)((e) => {
+        if (!e.target)
+            return;
+        if (!("closest" in e.target))
+            return;
+        const target = e.target;
+        const pictureElement = target.closest("picture") || target.closest("img");
+        setElement(pictureElement || undefined);
+    }, [iframe, editContext]);
+    (0, react_1.useEffect)(() => {
+        if (element) {
+            const itemId = element.getAttribute("data-itemid");
+            const language = element.getAttribute("data-language");
+            const version = element.getAttribute("data-version");
+            const fieldId = element.getAttribute("data-fieldid");
+            if (!itemId ||
+                !language ||
+                !version ||
+                !fieldId ||
+                !pageViewContext?.page ||
+                !iframe?.contentWindow)
+                return;
+            const component = (0, componentTreeHelper_1.getComponentById)(itemId, pageViewContext.page);
+            if (component == null)
+                return;
+            const pictureField = component.datasourceItem?.fields.find((f) => f.id === fieldId);
+            if (!pictureField)
+                return;
+            setField(pictureField);
+        }
+        else {
+            setField(undefined);
+        }
+    }, [element, pageViewContext?.page]);
+    (0, react_1.useEffect)(() => {
+        if (!element || !iframe?.contentWindow)
+            return;
+        const sourceELement = getCurrentPictureSource(element, iframe.contentWindow);
+        if (sourceELement) {
+            const variantName = sourceELement.getAttribute("data-variant");
+            if (variantName) {
+                setVariantName(variantName);
+            }
+        }
+    }, [pageViewContext?.viewport, element]);
+    const handleLoad = () => {
+        if (iframe?.contentDocument) {
+            iframe.contentDocument.addEventListener("mouseenter", onMouseEnter, true);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (iframe) {
+            // Ensure the iframe is loaded and accessible
+            iframe.addEventListener("load", handleLoad);
+            return () => {
+                if (iframe?.contentDocument) {
+                    iframe?.contentDocument.removeEventListener("mouseenter", onMouseEnter);
+                }
+                if (iframe) {
+                    iframe.removeEventListener("load", handleLoad);
+                }
+            };
+        }
+    }, [iframe, editContext?.refreshCompletedFlag]);
+    if (!field || !variantName || !element)
+        return null;
+    const bounds = element.getBoundingClientRect();
+    const style = {
+        left: bounds.x + "px",
+        top: bounds.y + "px",
+        width: bounds.width + "px",
+        height: bounds.height + "px",
+    };
+    return ((0, jsx_runtime_1.jsx)(PictureEditor_1.PictureEditor, { field: field, variantName: variantName, style: style, forwardScrollevents: true, isPageEditor: true }));
+}
+function getCurrentPictureSource(pictureElement, iframeWindow) {
+    if (pictureElement.tagName === "IMG")
+        return pictureElement;
+    const sources = pictureElement.querySelectorAll("source");
+    let currentSrc = null;
+    sources.forEach((source) => {
+        const media = source.getAttribute("media");
+        if (!media)
+            return;
+        if (media && iframeWindow.matchMedia(media).matches) {
+            currentSrc = source;
+        }
+    });
+    return currentSrc || pictureElement.querySelector("img") || null;
+}

package/dist/editor/page-editor-chrome/PlaceholderDropZone.js

@@ -0,0 +1,82 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholderDropZone = PlaceholderDropZone;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const utils_1 = require("primereact/utils");
+const utils_2 = require("../utils");
+function PlaceholderDropZone({ placeholder, description, index, parentName, spotPosition, spotPositionElement, spotPositionAnchor, size, }) {
+    const [isHovering, setIsHovering] = (0, react_1.useState)(false);
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    function dragOver(ev) {
+        ev.dataTransfer.dropEffect =
+            editContext?.dragObject?.type == "template" ? "copy" : "move";
+        setIsHovering(true);
+        ev.preventDefault();
+    }
+    function drop(ev) {
+        ev.preventDefault();
+        setIsHovering(false);
+        editContext.setStatusMessage("");
+        editContext.droppedInPlaceholder(placeholder.key, index, spotPositionElement, spotPositionAnchor);
+    }
+    const overlayStyle = {
+        top: spotPosition.y,
+        left: spotPosition.x,
+        zIndex: isHovering ? 40 : 30,
+        transform: "none",
+    };
+    if (size === "small")
+        overlayStyle.transform = "scale(0.5)";
+    (0, react_1.useEffect)(() => {
+        if (isHovering) {
+            editContext.setStatusMessage((0, jsx_runtime_1.jsxs)("div", { children: ["Drop into placeholder", " ", (0, jsx_runtime_1.jsx)("span", { className: "font-bold", children: parentName }), " /", " ", (0, jsx_runtime_1.jsx)("span", { className: "font-bold", children: description || placeholder.name }), " ", "at position ", (0, jsx_runtime_1.jsx)("span", { className: "font-bold", children: index + 1 })] }));
+        }
+        else {
+            editContext.setStatusMessage("");
+        }
+    }, [isHovering]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "absolute", style: overlayStyle, children: (0, jsx_runtime_1.jsx)("div", { onDragOver: dragOver, title: (description ?? placeholder.name) + " (" + index + ")", "data-testid": "placeholder-dropzone", "data-testindex": index, onDrop: drop, onDragLeave: () => setIsHovering(false), onClick: (e) => {
+                //const placeholderKeyComponents = placeholder.key.split("_");
+                // const parentId =
+                //   placeholderKeyComponents.length === 1
+                //     ? undefined
+                //     : placeholderKeyComponents[0];
+                const insertOption = placeholder.insertOptions.find((x) => x.typeId === editContext.selectedForInsertion);
+                if (insertOption) {
+                    editContext.droppedInPlaceholder(placeholder.key, index, spotPositionElement, spotPositionAnchor, insertOption);
+                    return;
+                }
+                const insertOptions = placeholder.insertOptions
+                    ?.filter((x) => !x.isHidden && !x.isInvalid)
+                    .map((x) => ({
+                    id: x.typeId,
+                    icon: ((0, jsx_runtime_1.jsx)("img", { src: (0, utils_2.getAbsoluteIconUrl)(x.icon), width: "16", height: "16", className: "m-1" })),
+                    label: x.name,
+                    command: () => {
+                        editContext.operations.addComponent(x.typeId, placeholder.key, index);
+                    },
+                })) || [];
+                if (insertOptions.length > 0)
+                    editContext.showContextMenu(e, [
+                        {
+                            label: "Insert",
+                            disabled: true,
+                            className: "border-b border-gray-400 pb-2 pl-2",
+                            template: () => {
+                                return ((0, jsx_runtime_1.jsx)("span", { className: "text-black text-sm ", children: "Insert" }));
+                            },
+                        },
+                        ...insertOptions,
+                    ]);
+                e.preventDefault();
+            }, className: "placeholder cursor-pointer placeholder-dropzone", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)(isHovering
+                    ? "z-30 shadow-xl shadow-black w-20 h-20 shadow-blue-500/50"
+                    : "z-30 w-10 h-10 hover:scale-[1.1]", "transition-all duration-200 text-white text-center p-2 text-sm flex justify-center items-center bg-blue-500 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 test-ph-dropzone tour-placeholder-dropzone"), "data-testid": "placeholder-dropzone-button", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-plus block" }) }) }) })
+    // </div>
+    );
+}

package/dist/editor/page-editor-chrome/PlaceholderDropZones.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholderDropZones = PlaceholderDropZones;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+const utils_1 = require("../utils");
+const PlaceholderDropZone_1 = require("./PlaceholderDropZone");
+function PlaceholderDropZones({ scale, iframe, size, }) {
+    const [placeholders, setPlaceholders] = (0, react_1.useState)([]);
+    const editContext = (0, editContext_1.useEditContext)();
+    const pageViewContext = editContext?.pageView;
+    (0, react_1.useEffect)(() => {
+        if (!pageViewContext?.page)
+            return;
+        setPlaceholders((0, componentTreeHelper_1.getAllPlaceholders)(pageViewContext.page));
+    }, [pageViewContext?.page]);
+    if (!pageViewContext ||
+        (!editContext?.dragObject && !editContext.selectedForInsertion) ||
+        !placeholders)
+        return null;
+    const matchingPlaceholders = placeholders.filter((x) => x.parentComponent?.id === editContext.selectedForInsertion ||
+        x.insertOptions?.find((y) => y.typeId === editContext.selectedForInsertion ||
+            y.typeId === editContext.dragObject?.typeId ||
+            y.typeId === editContext.dragObject?.templateId ||
+            y.compatibleTemplates?.find((z) => z == editContext.dragObject?.typeId) !== undefined ||
+            y.typeId === editContext.dragObject?.templateId ||
+            y.compatibleTemplates?.find((z) => z == editContext.dragObject?.templateId) !== undefined));
+    if (!iframe)
+        return;
+    const zones = [];
+    const scrollHeight = editContext.pageView.editorIframeRef?.current?.contentWindow?.document
+        .documentElement.scrollHeight || 0;
+    matchingPlaceholders.forEach((placeholder) => {
+        const placeholderElement = iframe.contentWindow?.document.body.querySelector("[data-placeholder-start='" + placeholder.key + "']");
+        if (!placeholderElement)
+            return;
+        const prev = getPreviousElement(placeholderElement);
+        const nextOrParent = getNextElement(placeholderElement) || placeholderElement.parentElement;
+        const orientation = placeholderElement?.getAttribute("data-orientation");
+        const rect = (prev ?? nextOrParent).getBoundingClientRect();
+        const zoom = pageViewContext.zoom;
+        const position = orientation === "horizontal"
+            ? {
+                x: (prev ? rect.x + rect.width : rect.x) * zoom,
+                y: (rect.y + rect.height / 2) * zoom,
+            }
+            : {
+                x: (rect.x + rect.width / 2) * zoom,
+                y: (prev ? rect.y + rect.height : rect.y) * zoom,
+            };
+        let index = 0;
+        const description = placeholderElement.getAttribute("data-description");
+        let anchor = "top";
+        if (prev && orientation === "horizontal") {
+            anchor = "right";
+        }
+        if (prev && orientation !== "horizontal") {
+            anchor = "bottom";
+        }
+        if (!prev && orientation === "horizontal") {
+            anchor = "left";
+        }
+        if (!prev && orientation !== "horizontal") {
+            anchor = "top";
+        }
+        zones.push({
+            placeholder,
+            position,
+            index,
+            element: prev ?? nextOrParent,
+            anchor,
+            description,
+        });
+        let nextElement = placeholderElement?.nextElementSibling;
+        while (nextElement) {
+            nextElement = nextElement?.nextElementSibling;
+            if (nextElement) {
+                if (nextElement.getAttribute("data-placeholder-end") === placeholder.key) {
+                    break;
+                }
+                if (nextElement.getAttribute("data-component-end")) {
+                    const componentRect = (0, utils_1.findComponentRect)(iframe, (nextElement.getAttribute("data-component-end") ||
+                        nextElement.getAttribute("data-dropzone")));
+                    if (!componentRect)
+                        continue;
+                    const position = getPositionFromRect(componentRect.rect, pageViewContext.zoom, orientation);
+                    index++;
+                    zones.push({
+                        placeholder,
+                        position,
+                        index,
+                        anchor: orientation === "horizontal" ? "right" : "bottom",
+                        element: componentRect.elements[componentRect.elements.length - 1],
+                    });
+                }
+                else if (nextElement.getAttribute("data-dropzone")) {
+                    const rect = nextElement.getBoundingClientRect();
+                    const position = getPositionFromRect(rect, pageViewContext.zoom);
+                    index++;
+                    zones.push({
+                        placeholder,
+                        position,
+                        index,
+                        anchor: orientation === "horizontal" ? "left" : "top",
+                        element: nextElement,
+                    });
+                }
+            }
+        }
+    });
+    return zones.map((zone, index) => {
+        const x = Math.min(pageViewContext.viewport.width - 20, Math.max(20, zone.position.x * (scale || 1)));
+        const y = Math.min(scrollHeight - 20, Math.max(20 - pageViewContext.scroll, zone.position.y * (scale || 1)));
+        return ((0, jsx_runtime_1.jsx)(PlaceholderDropZone_1.PlaceholderDropZone, { placeholder: zone.placeholder, spotPosition: {
+                x,
+                y,
+            }, index: zone.index, size: size, spotPositionElement: zone.element, spotPositionAnchor: zone.anchor, parentName: zone.placeholder.parentComponent?.name, description: zone.description || undefined }, index));
+    });
+}
+function getPreviousElement(element) {
+    let prev = element.previousElementSibling;
+    while (prev && prev.tagName === "SCRIPT") {
+        prev = prev.previousElementSibling;
+    }
+    return prev;
+}
+function getNextElement(element) {
+    let next = element.nextElementSibling;
+    while (next && next.tagName === "SCRIPT") {
+        next = next.nextElementSibling;
+    }
+    return next;
+}
+function getPositionFromRect(rect, zoom, orientation) {
+    const position = orientation === "horizontal"
+        ? {
+            x: rect.x + rect.width * zoom,
+            y: (rect.y + rect.height / 2) * zoom,
+        }
+        : {
+            x: (rect.x + rect.width / 2) * zoom,
+            y: rect.y + rect.height * zoom,
+        };
+    return position;
+}

package/dist/editor/page-viewer/DeviceToolbar.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceToolbar = DeviceToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+const inputnumber_1 = require("primereact/inputnumber");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+const Icons_1 = require("../ui/Icons");
+const use_debounce_1 = require("use-debounce");
+function DeviceToolbar({ pageViewContext, configuration, }) {
+    const debouncedSetDeviceWidth = (0, use_debounce_1.useDebouncedCallback)((width) => {
+        pageViewContext.setDeviceWidth(width);
+    }, 400);
+    const debouncedSetDeviceHeight = (0, use_debounce_1.useDebouncedCallback)((height) => {
+        pageViewContext.setDeviceHeight(height);
+    }, 400);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center w-full items-center bg-gray-100 p-1 z-1000 text-sm gap-2 border-b", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: configuration.devices.map((x) => ({
+                    label: x.name,
+                    value: x.name,
+                })), value: pageViewContext.device, onChange: (e) => pageViewContext.setDevice(e.value) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { size: 4, max: 10000, className: "text-sm", value: pageViewContext.deviceWidth, onChange: (e) => debouncedSetDeviceWidth(e.value || undefined) }), "x", (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { size: 4, max: 10000, className: "text-sm", value: pageViewContext.deviceHeight, onChange: (e) => debouncedSetDeviceHeight(e.value || undefined) }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-lock", selected: pageViewContext.lockHeight || false, onClick: () => pageViewContext.setLockHeight(!pageViewContext.lockHeight), label: "Lock Height" }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: (0, jsx_runtime_1.jsx)(Icons_1.RotateDeviceIcon, { className: "w-4 h-4" }), selected: pageViewContext.rotate || false, onClick: () => pageViewContext.setRotate(!pageViewContext.rotate), label: "Rotate" })] }));
+}

package/dist/editor/page-viewer/EditorForm.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorForm = EditorForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+const FieldList_1 = require("../FieldList");
+const ItemInfo_1 = require("../ItemInfo");
+const Insert_1 = require("../sidebar/Insert");
+const react_1 = require("react");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+const Spinner_1 = require("../ui/Spinner");
+const SimpleTabs_1 = require("../ui/SimpleTabs");
+function EditorForm({ pageViewContext, readonly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!pageViewContext)
+        pageViewContext = editContext.pageView;
+    const setInsertMode = editContext.setInsertMode;
+    const insertMode = editContext.insertMode;
+    const [activeTabKey, setActiveTabKey] = (0, react_1.useState)("content");
+    const [item, setItem] = (0, react_1.useState)();
+    const [component, setComponent] = (0, react_1.useState)();
+    const toggleInsertMode = () => {
+        if (insertMode) {
+            setInsertMode(false);
+        }
+        else {
+            // if (editContext.selection.length > 0)
+            //   editContext.setSelectedForInsertion(editContext.selection[0]);
+            setInsertMode(true);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (editContext.selectedForInsertion)
+            setInsertMode(true);
+    }, [editContext.selectedForInsertion]);
+    let isShared = false;
+    (0, react_1.useEffect)(() => {
+        if (!pageViewContext.page)
+            return;
+        let newSelectedItem;
+        if (editContext.selection.length === 1) {
+            const component = (0, componentTreeHelper_1.getComponentById)(editContext.selection[0], pageViewContext.page);
+            setComponent(component);
+            newSelectedItem = component?.datasourceItem;
+            if (component?.datasourceItem &&
+                component?.datasourceItem?.id !== component?.id)
+                isShared = true;
+        }
+        else {
+            newSelectedItem = pageViewContext.page.rootComponent.datasourceItem;
+            setComponent(pageViewContext.page.rootComponent);
+        }
+        // if (
+        //   newSelectedItem?.id !== item?.id ||
+        //   newSelectedItem?.language !== item?.language ||
+        //   newSelectedItem?.version !== item?.version
+        // ) {
+        //   setInsertMode(false);
+        // }
+        setItem(newSelectedItem || pageViewContext.page.rootComponent.datasourceItem);
+    }, [
+        editContext.selection,
+        pageViewContext.page,
+        pageViewContext.pageItemDescriptor,
+    ]);
+    if (!item)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "grid h-full w-full items-center justify-center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }));
+    const validators = editContext.validationResult?.find((x) => x.item.id === item?.id &&
+        x.item.language === item?.language &&
+        x.item.version === item?.version)?.results || [];
+    let designFields = Object.values(item?.fields).filter((x) => x.section === "Design" || x.section === "Rendering");
+    const editorFields = component?.editorFields;
+    if (editorFields && editorFields["Design"]) {
+        editorFields["Design"]?.addFields.forEach((fieldName) => {
+            const field = item?.fields.find((x) => x.name === fieldName);
+            if (field)
+                designFields.push(field);
+        });
+        editorFields["Design"]?.removeFields.forEach((fieldName) => {
+            designFields = designFields.filter((x) => x.name !== fieldName);
+        });
+    }
+    const itemFields = [];
+    const contentFields = Object.values(item?.fields).filter((x) => ((editorFields && editorFields["Content"]?.addFields.includes(x.name)) ||
+        item.renderedFieldIds.indexOf(x.id) >= 0) &&
+        !(editorFields && editorFields["Content"]?.removeFields.includes(x.name)));
+    if (contentFields.length > 0)
+        itemFields.push({ fields: contentFields });
+    component?.items
+        .filter((x) => x.id !== item.id)
+        .forEach((i) => {
+        const fields = [];
+        i.renderedFieldIds.forEach((id) => {
+            const field = Object.values(i?.fields).find((x) => x.id === id);
+            if (field)
+                fields.push(field);
+        });
+        if (fields.length > 0)
+            itemFields.push({ headline: i.name, fields });
+    });
+    const getFieldsTab = (fields, headline, id) => {
+        return {
+            label: headline,
+            content: ((0, jsx_runtime_1.jsx)("div", { className: "relative h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto px-3", children: (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: fields, validators: validators, simplified: true, readonly: readonly }) }) })),
+            id,
+        };
+    };
+    const tabPanels = [];
+    if (itemFields.length > 0)
+        tabPanels.push(getFieldsTab(itemFields, "Content", "content"));
+    //TODO: generalize this
+    if (editorFields) {
+        Object.keys(editorFields).forEach((key) => {
+            if (key !== "Content" && key !== "Design") {
+                const fields = item?.fields.filter((x) => editorFields[key]?.addFields.includes(x.name));
+                if (fields?.length)
+                    tabPanels.push(getFieldsTab([{ fields }], key, key));
+            }
+        });
+    }
+    if (designFields?.length)
+        tabPanels.push(getFieldsTab([{ fields: designFields }], "Design", "design"));
+    tabPanels.push({
+        label: "Advanced",
+        content: ((0, jsx_runtime_1.jsx)("div", { className: "relative h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 overflow-auto px-3", children: [(0, jsx_runtime_1.jsx)(ItemInfo_1.ItemInfo, { item: item }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: [{ fields: item.fields }], validators: validators, showStandardFieldsEnabled: true, readonly: readonly })] }) })),
+        id: "advanced",
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col bg-gray-50", "data-testid": "editor-sidepanel", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "flex h-12 items-center justify-center border-b border-gray-200 p-2", children: [editContext.selection.length > 0 && ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-angle-left", onClick: () => editContext.select([]), label: "Back to page", size: "large" })), editContext.selection.length === 0 && (0, jsx_runtime_1.jsx)("div", { className: "w-12" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", id: "item-name", "data-testid": "component-name", children: [item?.name, isShared && ((0, jsx_runtime_1.jsx)("span", { className: "ml-2 rounded-md bg-orange-400 p-2 text-sm text-black", children: "Shared" }))] }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { id: "insert-component-button", icon: insertMode ? "pi pi-pencil" : "pi pi-plus", onClick: () => toggleInsertMode(), label: insertMode ? "Continue editing" : "Insert component", size: "large", disabled: !editContext.page?.item.canWriteItem || !item?.canWriteItem })] }), insertMode && (0, jsx_runtime_1.jsx)(Insert_1.Insert, {}), !insertMode && ((0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { tabs: tabPanels, className: "flex flex-1 items-center justify-center border-b border-gray-200 bg-gray-50 py-3 text-sm", activeTab: tabPanels.findIndex((x) => x.id === activeTabKey) || 0, setActiveTab: (index) => setActiveTabKey(tabPanels[index]?.id) }, "editor-tabs"))] }));
+}