@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/ui/StackedPanels.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackedPanels = StackedPanels;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("allotment/dist/style.css");
+const allotment_1 = require("allotment");
+const react_1 = require("react");
+const utils_1 = require("primereact/utils");
+function StackedPanels({ panels }) {
+    const splitter = (0, react_1.useRef)(null);
+    const [sizes, setSizes] = (0, react_1.useState)([]);
+    const [preferredSizes, setPreferredSizes] = (0, react_1.useState)(undefined);
+    const [panelsExpanded, setPanelsExpanded] = (0, react_1.useState)([]);
+    const [sizeToSet, setSizeToSet] = (0, react_1.useState)();
+    const panelHeaderSize = 30;
+    const toggle = (panelIndex) => {
+        const newSize = panelsExpanded[panelIndex]
+            ? panelHeaderSize
+            : (preferredSizes || sizes)[panelIndex];
+        resizePanel(panelIndex, newSize);
+        setPanelsExpanded((x) => {
+            const newState = [...x];
+            newState[panelIndex] = !newState[panelIndex];
+            return newState;
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        setPanelsExpanded(panels.map(() => true));
+        setPreferredSizes(() => panels.map((x) => x.initialSize));
+    }, [panels]);
+    const resizePanel = (panelIndex, newSize) => {
+        const totalSize = sizes.reduce((a, b) => a + b, 0);
+        const totalOther = totalSize - sizes[panelIndex];
+        const tmpSizes = [...sizes];
+        tmpSizes[panelIndex] = newSize;
+        const percentages = tmpSizes.map((x) => x / totalOther);
+        percentages[panelIndex] = 0;
+        const remaining = totalSize - newSize;
+        const newSizes = percentages.map((x) => x * remaining);
+        newSizes[panelIndex] = newSize;
+        setSizes(newSizes);
+        setSizeToSet(newSizes);
+    };
+    (0, react_1.useEffect)(() => {
+        if (sizeToSet)
+            splitter.current?.resize(sizeToSet);
+    }, [sizeToSet]);
+    const getHeader = (panel, index) => {
+        if (panel.header)
+            return panel.header({ panel, index });
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)("p-1.5 bg-gray-50 uppercase text-gray-500 text-xs flex justify items-center cursor-pointer", panelsExpanded[index] ? "border-b" : ""), onClick: () => toggle(index), children: [panel.icon &&
+                    (typeof panel.icon === "string" ? ((0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(panel.icon, "pi mr-1.5") })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 mr-1.5", children: panel.icon }))), (0, jsx_runtime_1.jsx)("div", { className: "mr-auto", children: panel.title }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down", "pi  text-sm") })] }));
+    };
+    const initalSizes = panels.map((x) => x.initialSize);
+    return ((0, jsx_runtime_1.jsx)(allotment_1.Allotment, { vertical: true, snap: true, ref: splitter, defaultSizes: initalSizes, onChange: (s) => {
+            if (sizes.join(",") != s.join(","))
+                setSizes(s);
+            const newPreferred = [...(preferredSizes || s)];
+            s.forEach((x, i) => {
+                if (x > panelHeaderSize)
+                    newPreferred[i] = x;
+            });
+            setPreferredSizes(newPreferred);
+        }, children: panels.map((panel, index) => ((0, jsx_runtime_1.jsx)(allotment_1.Allotment.Pane, { 
+            //  preferredSize={(preferredSizes || initalSizes)[index] + "%"}
+            maxSize: panelsExpanded.length <= index || panelsExpanded[index]
+                ? 10000
+                : panelHeaderSize, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [getHeader(panel, index), panelsExpanded[index] && ((0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("inset-0 absolute", panel.noOverflow ? "" : "overflow-y-auto"), children: panel.content }) }))] }) }, index))) }));
+}

package/dist/editor/ui/Toolbar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = Toolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Toolbar({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 flex gap-1 p-0.5 border-b items-center", children: children }));
+}

package/dist/editor/utils/id-helper.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanId = cleanId;
+function cleanId(id) {
+    if (id)
+        return id.replace(/[^a-zA-Z0-9_-]/g, "").toLowerCase();
+}

package/dist/editor/utils/insertOptions.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInsertOptionsForCurrentSelection = getInsertOptionsForCurrentSelection;
+const componentTreeHelper_1 = require("../componentTreeHelper");
+function getInsertOptionsForCurrentSelection(editContext) {
+    const page = editContext.page;
+    if (!page)
+        return [];
+    const insertingPlaceholderKeys = [editContext.selectedForInsertion]
+        .map((x) => (0, componentTreeHelper_1.getComponentById)(x, editContext.page))
+        .filter((x) => x)
+        .reduce((a, x) => a.concat(x.placeholders?.map((y) => y.key) || []), []);
+    const selectedPlaceholderKeys = [
+        //...selection.filter((x) => x.indexOf("_") > 0),
+        ...insertingPlaceholderKeys,
+    ];
+    function collectInsertOptions(page, placeholderKeys) {
+        const insertOptionsMap = new Map();
+        function traverse(placeholders) {
+            for (const placeholder of placeholders) {
+                if (placeholder &&
+                    (placeholderKeys.length === 0 ||
+                        placeholderKeys.includes(placeholder.key))) {
+                    for (const option of placeholder.insertOptions) {
+                        insertOptionsMap.set(option.typeId, option);
+                    }
+                }
+                for (const component of placeholder.components) {
+                    if (component.placeholders)
+                        traverse(component.placeholders);
+                }
+            }
+        }
+        traverse(page.rootComponent.placeholders);
+        // Convert the map back into an array of objects
+        const insertOptionsArray = Array.from(insertOptionsMap.values());
+        insertOptionsArray.sort((a, b) => a.name.localeCompare(b.name));
+        return insertOptionsArray;
+    }
+    const currentInsertOptions = page
+        ? collectInsertOptions(page, selectedPlaceholderKeys)
+        : [];
+    // console.log(currentInsertOptions, selectedPlaceholderKeys, page);  
+    return currentInsertOptions;
+}

package/dist/editor/utils/itemutils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.confirmCreateVersion = void 0;
+const createVersionCommand_1 = require("../commands/createVersionCommand");
+const confirmCreateVersion = (editContext, language) => {
+    editContext.confirm({
+        message: "This page has no version in language " +
+            language.name +
+            " (" +
+            language.languageCode +
+            "). Do you want to create a new version?",
+        header: "Create Language Version?",
+        icon: "pi pi-exclamation-triangle",
+        acceptLabel: "Yes, create version",
+        rejectLabel: "No",
+        accept: async () => {
+            await editContext?.executeCommand({
+                command: (0, createVersionCommand_1.getCreateAndSwitchToNewVersionCommand)({
+                    language: language.languageCode,
+                }),
+            });
+        },
+    });
+};
+exports.confirmCreateVersion = confirmCreateVersion;

package/dist/editor/utils/useMemoDebug.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMemoWithDebug = useMemoWithDebug;
+const react_1 = require("react");
+// Generic type for the return value of the memoized factory
+function useMemoWithDebug(factory, dependencies) {
+    const previousDependenciesRef = (0, react_1.useRef)([]);
+    const hasChanged = dependencies.some((dep, index) => {
+        return dep !== previousDependenciesRef.current[index];
+    });
+    if (hasChanged) {
+        dependencies.forEach((dep, index) => {
+            if (dep !== previousDependenciesRef.current[index]) {
+                console.log(`Dependency at index ${index} changed:`, "\nPrevious:", previousDependenciesRef.current[index], "\nCurrent:", dep);
+            }
+        });
+    }
+    previousDependenciesRef.current = dependencies;
+    return (0, react_1.useMemo)(factory, dependencies);
+}

package/dist/editor/utils.js

@@ -0,0 +1,328 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAbsolutePosition = exports.useLocalStorage = void 0;
+exports.useEventListenerExt = useEventListenerExt;
+exports.isFieldActionExecuting = isFieldActionExecuting;
+exports.getItemDescriptor = getItemDescriptor;
+exports.getAbsoluteIconUrl = getAbsoluteIconUrl;
+exports.findParentWithAttribute = findParentWithAttribute;
+exports.parsePlaceholderKey = parsePlaceholderKey;
+exports.hasFieldLock = hasFieldLock;
+exports.getSessionWithFieldLock = getSessionWithFieldLock;
+exports.getFieldDescriptorFromElement = getFieldDescriptorFromElement;
+exports.findNearestComponentId = findNearestComponentId;
+exports.findFieldElement = findFieldElement;
+exports.findComponentRect = findComponentRect;
+exports.findParentComponentId = findParentComponentId;
+exports.normalizeGuid = normalizeGuid;
+exports.formatDate = formatDate;
+exports.findClosestFieldElement = findClosestFieldElement;
+const react_1 = require("react");
+const react_2 = require("react");
+// Hook
+function useEventListenerExt(eventName, handler, element, capture = false) {
+    // Create a ref that stores handler
+    const savedHandler = (0, react_2.useRef)(undefined);
+    // Update ref.current value if handler changes.
+    // This allows our effect below to always get latest handler ...
+    // ... without us needing to pass it in effect deps array ...
+    // ... and potentially cause effect to re-run every render.
+    (0, react_2.useEffect)(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    (0, react_2.useEffect)(() => {
+        // Make sure element supports addEventListener
+        // On
+        const isSupported = element && element.addEventListener;
+        if (!isSupported)
+            return;
+        // Create event listener that calls handler function stored in ref
+        const eventListener = (event) => savedHandler.current(event);
+        // Add event listener
+        element.addEventListener(eventName, eventListener, { capture: capture });
+        // Remove event listener on cleanup
+        return () => {
+            element.removeEventListener(eventName, eventListener);
+        };
+    }, [eventName, element] // Re-run if eventName or element changes
+    );
+}
+const useLocalStorage = (storageKey, fallbackState) => {
+    const [value, setValue] = (0, react_1.useState)(JSON.parse(typeof window !== "undefined"
+        ? localStorage.getItem(storageKey) ?? JSON.stringify(fallbackState)
+        : JSON.stringify(fallbackState)));
+    (0, react_2.useEffect)(() => {
+        if (typeof window !== "undefined")
+            localStorage.setItem(storageKey, JSON.stringify(value));
+    }, [value, storageKey]);
+    return [value, setValue];
+};
+exports.useLocalStorage = useLocalStorage;
+function isFieldActionExecuting(field, editContext) {
+    const fieldItem = field.descriptor.item;
+    if (!fieldItem) {
+        return false;
+    }
+    var action = editContext.activeFieldActions.find((x) => x.field.fieldId == field.id &&
+        x.field.item?.id == fieldItem.id &&
+        x.field.item?.language == fieldItem.language &&
+        x.field.item?.version == fieldItem.version);
+    return action?.state == "running";
+}
+function getItemDescriptor(item) {
+    if (!item)
+        throw new Error("Item is null");
+    if ("descriptor" in item) {
+        return item.descriptor;
+    }
+    return {
+        id: item.id,
+        language: item.language,
+        version: item.version,
+        name: item.name,
+    };
+}
+function getAbsoluteIconUrl(url) {
+    //return configuration.services.editorService.baseUrl + url;
+    return url;
+}
+function findParentWithAttribute(element, attr) {
+    while (element && element !== document.documentElement) {
+        if (element.hasAttribute(attr)) {
+            return element;
+        }
+        element = element.parentElement;
+    }
+    return null;
+}
+function parsePlaceholderKey(key) {
+    const placeholderKeyComponents = key.split("_");
+    const placeholderName = placeholderKeyComponents.length === 1
+        ? placeholderKeyComponents[0]
+        : placeholderKeyComponents[1];
+    const parentId = placeholderKeyComponents.length === 1
+        ? undefined
+        : placeholderKeyComponents[0];
+    return {
+        name: placeholderName,
+        componentId: parentId,
+    };
+}
+// export function getFieldRawValue(field: Field, editContext: EditContextType) {
+//   return (
+//     getModifiedField(field.descriptor, editContext)?.rawValue ??
+//     field.rawValue ??
+//     field.value
+//   );
+// }
+// export function getFieldValue(field: Field, editContext: EditContextType) {
+//   return getModifiedField(field.descriptor, editContext)?.value ?? field.value;
+// }
+// export function getModifiedField(
+//   field: FieldDescriptor,
+//   editContext: EditContextType
+// ) {
+//   const modifiedField = editContext.modifiedFields.find(
+//     (x) =>
+//       x.field.fieldId === field.fieldId &&
+//       x.field.item.id === field.item.id &&
+//       x.field.item.language === field.item.language &&
+//       x.field.item.version === field.item.version
+//   );
+//   return modifiedField;
+// }
+// export function getModifiedFieldValue(
+//   field: FieldDescriptor,
+//   editContext: EditContextType
+// ) {
+//   return getModifiedField(field, editContext)?.value;
+// }
+// export function setModifiedFieldValue(
+//   field: FieldDescriptor,
+//   value: string,
+//   editContext: EditContextType
+// ) {
+//   const modifiedValue = editContext.modifiedFields.find(
+//     (x) =>
+//       x.field.fieldId === field.fieldId &&
+//       x.field.item.id === field.item.id &&
+//       x.field.item.language === field.item.language &&
+//       x.field.item.version === field.item.version
+//   );
+//   if (modifiedValue) {
+//     modifiedValue.value = value;
+//   } else {
+//     editContext.modifiedFields.push({
+//       field: field,
+//       value: value,
+//     });
+//   }
+//   editContext.setModifiedFields([...editContext.modifiedFields]);
+// }
+function hasFieldLock(field, editContext) {
+    if (!editContext.lockedField) {
+        return false;
+    }
+    return (editContext.lockedField.fieldId === field.fieldId &&
+        editContext.lockedField.item.id === field.item.id &&
+        editContext.lockedField.item.language === field.item.language &&
+        editContext.lockedField.item.version === field.item.version);
+}
+function getSessionWithFieldLock(field, editContext) {
+    return editContext.activeSessions.find((s) => s.fieldLock?.fieldId === field.fieldId &&
+        s.fieldLock?.fieldId === field.fieldId &&
+        s.fieldLock?.item.id === field.item.id &&
+        s.fieldLock?.item.language === field.item.language &&
+        s.fieldLock?.item.version === field.item.version);
+}
+function getFieldDescriptorFromElement(element) {
+    return {
+        item: {
+            id: element.getAttribute("data-itemid"),
+            version: parseInt(element.getAttribute("data-version")),
+            language: element.getAttribute("data-language"),
+        },
+        fieldId: element.getAttribute("data-fieldid"),
+    };
+}
+function findNearestComponentId(startElement) {
+    let element = startElement;
+    while (element) {
+        if (element.hasAttribute("data-component-start")) {
+            return element.getAttribute("data-component-start") ?? undefined;
+        }
+        const prev = element.previousElementSibling;
+        if (!prev) {
+            element = element.parentElement;
+        }
+        else
+            element = prev;
+    }
+    return;
+}
+function findFieldElement(iframe, fieldDescriptor) {
+    if (!iframe.contentWindow?.document.body)
+        return undefined;
+    const fieldElement = iframe.contentWindow?.document.body.querySelector("[data-itemid='" +
+        fieldDescriptor.item.id +
+        "'][data-language='" +
+        fieldDescriptor.item.language +
+        "'][data-version='" +
+        fieldDescriptor.item.version +
+        "'][data-fieldid='" +
+        fieldDescriptor.fieldId +
+        "']");
+    return fieldElement;
+}
+function findComponentRect(iframe, componentId, takeScrollPositionIntoAccount = false) {
+    if (!iframe.contentWindow?.document.body)
+        return undefined;
+    const componentStart = iframe.contentWindow?.document.body.querySelector("[data-component-start='" + componentId + "']");
+    const componentEnd = iframe?.contentWindow?.document.body.querySelector("[data-component-end='" + componentId + "']");
+    if (!componentStart || !componentEnd) {
+        return null;
+    }
+    let startElement = componentStart.nextElementSibling;
+    while (startElement && startElement.tagName === "SCRIPT") {
+        startElement = startElement.nextElementSibling;
+    }
+    if (!startElement) {
+        console.error("No start element found for component " + componentId);
+        return null;
+    }
+    const startRect = takeScrollPositionIntoAccount
+        ? (0, exports.getAbsolutePosition)(startElement, iframe)
+        : startElement.getBoundingClientRect();
+    let endElement = componentEnd.previousElementSibling;
+    while (endElement && endElement.tagName === "SCRIPT") {
+        endElement = endElement.previousElementSibling;
+    }
+    if (!endElement)
+        return null;
+    const endRect = takeScrollPositionIntoAccount
+        ? (0, exports.getAbsolutePosition)(endElement, iframe)
+        : endElement.getBoundingClientRect();
+    const elements = startElement === endElement ? [startElement] : [startElement, endElement];
+    // console.log(
+    //   "start rect",
+    //   startRect,
+    //   startElement,
+    //   iframe.contentWindow?.scrollY,
+    //   takeScrollPositionIntoAccount
+    // );
+    return {
+        rect: {
+            x: startRect.x,
+            y: startRect.y,
+            width: endRect.x + endRect.width - startRect.x,
+            height: endRect.y + endRect.height - startRect.y,
+        },
+        elements: elements,
+    };
+}
+const getAbsolutePosition = (element, iframe) => {
+    const rect = element.getBoundingClientRect();
+    const scrollLeft = iframe.contentWindow?.scrollX ||
+        iframe.contentDocument?.documentElement.scrollLeft || 0;
+    const scrollTop = iframe.contentWindow?.scrollY ||
+        iframe.contentDocument?.documentElement.scrollTop || 0;
+    return {
+        x: rect.left + scrollLeft,
+        y: rect.top + scrollTop,
+        width: rect.width,
+        height: rect.height,
+    };
+};
+exports.getAbsolutePosition = getAbsolutePosition;
+function findParentComponentId(element) {
+    while (element && element !== document.documentElement) {
+        const startElement = findStartElement(element);
+        if (startElement) {
+            return startElement.getAttribute("data-component-start");
+        }
+        element = element.parentElement;
+    }
+    return null;
+}
+function findStartElement(element) {
+    let prev = element;
+    while (prev) {
+        prev = prev.previousElementSibling;
+        if (prev?.getAttribute("data-component-start")) {
+            return prev;
+        }
+    }
+    return null;
+}
+function normalizeGuid(id) {
+    id = id.toUpperCase();
+    if (id.length && id[0] === "{")
+        return id;
+    return "{" + id + "}";
+}
+const dateOptions = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: false,
+};
+const dateFormat = Intl.DateTimeFormat(typeof navigator !== 'undefined' ? navigator.language : 'en', dateOptions);
+function formatDate(date) {
+    return dateFormat.format(date);
+}
+function findClosestFieldElement(node) {
+    let current = node;
+    while (current) {
+        if (current.nodeType === Node.ELEMENT_NODE) {
+            const element = current;
+            if (element.hasAttribute("data-fieldid")) {
+                return element;
+            }
+        }
+        current = current.parentNode;
+    }
+    return null;
+}

package/dist/editor/views/CompareView.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompareView = CompareView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const LanguageSelector_1 = require("../menubar/LanguageSelector");
+const VersionSelector_1 = require("../menubar/VersionSelector");
+const pageViewContext_1 = require("../page-viewer/pageViewContext");
+const navigation_1 = require("next/navigation");
+const navigation_2 = require("next/navigation");
+const SingleEditView_1 = require("./SingleEditView");
+const contentService_1 = require("../services/contentService");
+const allotment_1 = require("allotment");
+const ItemEditor_1 = require("./ItemEditor");
+function CompareView() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const searchParams = (0, navigation_1.useSearchParams)();
+    const router = (0, navigation_2.useRouter)();
+    if (!editContext)
+        return;
+    const [compareToItem, setCompareToItem] = (0, react_1.useState)();
+    const [compareToVersions, setCompareToVersions] = (0, react_1.useState)([]);
+    const compareTo = editContext.compareTo;
+    const setCompareTo = editContext.setCompareTo;
+    const comparePageViewContext = (0, pageViewContext_1.usePageViewContext)({
+        pageItemDescriptor: compareToItem?.descriptor,
+        itemsRepository: editContext.itemsRepository,
+        configuration: editContext.configuration,
+    });
+    (0, react_1.useEffect)(() => {
+        comparePageViewContext.setDevice(editContext.pageView.device);
+    }, [editContext.pageView.device]);
+    const updateCompareToVersions = async () => {
+        if (!compareTo || !compareTo.id || !compareTo.language) {
+            setCompareToVersions([]);
+            return;
+        }
+        const result = await (0, contentService_1.getLanguagesAndVersions)(compareTo);
+        if (result?.data) {
+            const versions = result.data.versions.reverse();
+            setCompareToVersions(versions);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const updateCompareTo = async () => {
+            if (!editContext)
+                return;
+            if (editContext.contentEditorItem) {
+                let urlLanguage = searchParams.get("compareLanguage") ||
+                    editContext.contentEditorItem.descriptor.language;
+                let urlVersion = parseInt(searchParams.get("compareVersion") || "0") ||
+                    editContext.currentItemDescriptor?.version;
+                const language = editContext.itemLanguages.find((x) => x.languageCode === urlLanguage);
+                if (!language || !language.versions) {
+                    urlLanguage = "";
+                }
+                if (!editContext.currentItemDescriptor?.id || !language) {
+                    setCompareTo(undefined);
+                    return;
+                }
+                const result = await (0, contentService_1.getLanguagesAndVersions)({
+                    id: editContext.currentItemDescriptor?.id,
+                    language: language.languageCode,
+                    version: 0,
+                });
+                if (result?.data) {
+                    const versions = [...result.data.versions].reverse();
+                    const version = versions.find((x) => x.version === urlVersion);
+                    setCompareTo({
+                        id: editContext.contentEditorItem.descriptor.id,
+                        language: urlLanguage,
+                        version: version?.version || 0,
+                    });
+                }
+            }
+        };
+        updateCompareTo();
+    }, [searchParams, editContext?.itemLanguages]);
+    (0, react_1.useEffect)(() => {
+        const updateCompareToItem = async () => {
+            if (!compareTo || !compareTo.id || !compareTo.language) {
+                setCompareToItem(undefined);
+                return;
+            }
+            const item = await editContext?.itemsRepository.getItem(compareTo);
+            setCompareToItem(item);
+        };
+        updateCompareToItem();
+        updateCompareToVersions();
+    }, [compareTo]);
+    function updateCompareTo(compareToItemDescriptor) {
+        if (compareToItemDescriptor) {
+            const newParams = new URLSearchParams(searchParams.toString());
+            newParams.set("compareLanguage", compareToItemDescriptor.language);
+            newParams.set("compareVersion", compareToItemDescriptor.version.toString());
+            router.push(`?${newParams.toString()}`);
+        }
+    }
+    const originalSelector = ((0, jsx_runtime_1.jsxs)("div", { className: "flex-1 bg-gray-100 border-b flex items-center justify-center flex-shrink-0 text-sm text-gray-600 p-1", children: [(0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { selectedLanguage: editContext.contentEditorItem?.descriptor?.language, showAllLanguagesSwitch: false, darkMode: true, onLanguageSelected: (language) => {
+                    if (!editContext.contentEditorItem)
+                        return;
+                    editContext.loadItem({
+                        id: editContext.contentEditorItem.descriptor.id,
+                        language: language.languageCode,
+                        version: 0,
+                    });
+                } }), compareTo?.language && ((0, jsx_runtime_1.jsx)(VersionSelector_1.VersionSelector, { darkMode: true, readOnly: true, versions: editContext.itemVersions, itemDescriptor: editContext.currentItemDescriptor, actualVersion: editContext.contentEditorItem?.version, onVersionSelected: (version) => {
+                    if (!editContext.contentEditorItem)
+                        return;
+                    editContext.loadItem({
+                        id: editContext.contentEditorItem.descriptor.id,
+                        language: editContext.contentEditorItem.descriptor.language,
+                        version,
+                    });
+                } }))] }));
+    const compareToSelector = ((0, jsx_runtime_1.jsxs)("div", { className: "flex-1 bg-gray-100 border-b flex items-center justify-center flex-shrink-0 text-sm text-gray-600 p-1", children: [(0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { selectedLanguage: compareTo?.language, showAllLanguagesSwitch: false, darkMode: true, onLanguageSelected: (language) => {
+                    if (!compareTo?.id)
+                        return;
+                    updateCompareTo({
+                        id: compareTo.id,
+                        language: language.languageCode,
+                        version: compareTo.version,
+                    });
+                } }), compareTo?.language && ((0, jsx_runtime_1.jsx)(VersionSelector_1.VersionSelector, { darkMode: true, readOnly: true, versions: compareToVersions, itemDescriptor: compareTo, actualVersion: compareToItem?.version, onVersionSelected: (version) => {
+                    if (!compareTo?.id)
+                        return;
+                    updateCompareTo({
+                        id: compareTo.id,
+                        language: compareTo.language,
+                        version,
+                    });
+                } }))] }));
+    if ((compareToItem && !compareToItem.hasLayout) ||
+        comparePageViewContext.device === "")
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full w-full items-stretch", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full", children: [originalSelector, compareToSelector] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute w-full h-full", children: (0, jsx_runtime_1.jsx)(ItemEditor_1.ItemEditor, { pageViewContext: editContext.pageView, compareToItem: compareToItem }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(allotment_1.Allotment, { className: "flex h-full w-full", children: [(0, jsx_runtime_1.jsx)(allotment_1.Allotment.Pane, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full w-full items-stretch", children: [originalSelector, (0, jsx_runtime_1.jsx)(SingleEditView_1.SingleEditView, { name: "original", mode: editContext?.previewMode ? "view" : "edit", pageViewContext: editContext.pageView, itemDescriptor: editContext.contentEditorItem?.descriptor }, "original")] }) }), (0, jsx_runtime_1.jsx)(allotment_1.Allotment.Pane, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full w-full items-stretch", children: [compareToSelector, compareTo?.language && ((0, jsx_runtime_1.jsx)(SingleEditView_1.SingleEditView, { name: "compareTo", mode: compareToItem?.id ===
+                                editContext.contentEditorItem?.descriptor.id &&
+                                compareToItem?.language ===
+                                    editContext.contentEditorItem?.descriptor.language &&
+                                compareToItem?.version ===
+                                    editContext.contentEditorItem?.descriptor.version
+                                ? editContext?.previewMode
+                                    ? "view"
+                                    : "edit"
+                                : "compare", pageViewContext: comparePageViewContext, itemDescriptor: compareTo }, "compareTo")), !compareTo?.language && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full w-full items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "text-gray-400", children: "Select a language and version to compare" }) }))] }) })] }));
+}

package/dist/editor/views/EditView.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditView = EditView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const CompareView_1 = require("./CompareView");
+const SingleEditView_1 = require("./SingleEditView");
+function EditView() {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    if (!editContext.contentEditorItem?.descriptor)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "grid items-center justify-center h-full w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500", children: "Not item selected" }) }));
+    if (editContext.compareMode)
+        return (0, jsx_runtime_1.jsx)(CompareView_1.CompareView, {});
+    return ((0, jsx_runtime_1.jsx)(SingleEditView_1.SingleEditView, { name: "single", mode: editContext?.previewMode ? "view" : "edit", pageViewContext: editContext.pageView, itemDescriptor: editContext.contentEditorItem?.descriptor }, "single"));
+}