@alpaca-editor/core 1.0.3767 → 1.0.3768

package/dist/editor/ui/StackedPanels.js

@@ -1,17 +1,14 @@
-"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)();
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "allotment/dist/style.css";
+import { Allotment } from "allotment";
+import { useEffect, useRef, useState } from "react";
+import { classNames } from "primereact/utils";
+export function StackedPanels({ panels }) {
+    const splitter = useRef(null);
+    const [sizes, setSizes] = useState([]);
+    const [preferredSizes, setPreferredSizes] = useState(undefined);
+    const [panelsExpanded, setPanelsExpanded] = useState([]);
+    const [sizeToSet, setSizeToSet] = useState();
     const panelHeaderSize = 30;
     const toggle = (panelIndex) => {
         const newSize = panelsExpanded[panelIndex]
@@ -24,7 +21,7 @@ function StackedPanels({ panels }) {
             return newState;
         });
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setPanelsExpanded(panels.map(() => true));
         setPreferredSizes(() => panels.map((x) => x.initialSize));
     }, [panels]);
@@ -41,18 +38,18 @@ function StackedPanels({ panels }) {
         setSizes(newSizes);
         setSizeToSet(newSizes);
     };
-    (0, react_1.useEffect)(() => {
+    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") })] }));
+        return (_jsxs("div", { className: 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" ? (_jsx("i", { className: classNames(panel.icon, "pi mr-1.5") })) : (_jsx("div", { className: "w-4 h-4 mr-1.5", children: panel.icon }))), _jsx("div", { className: "mr-auto", children: panel.title }), _jsx("i", { className: 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) => {
+    return (_jsx(Allotment, { vertical: true, snap: true, ref: splitter, defaultSizes: initalSizes, onChange: (s) => {
             if (sizes.join(",") != s.join(","))
                 setSizes(s);
             const newPreferred = [...(preferredSizes || s)];
@@ -61,9 +58,9 @@ function StackedPanels({ panels }) {
                     newPreferred[i] = x;
             });
             setPreferredSizes(newPreferred);
-        }, children: panels.map((panel, index) => ((0, jsx_runtime_1.jsx)(allotment_1.Allotment.Pane, { 
+        }, children: panels.map((panel, index) => (_jsx(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))) }));
+                : panelHeaderSize, children: _jsxs("div", { className: "flex flex-col h-full", children: [getHeader(panel, index), panelsExpanded[index] && (_jsx("div", { className: "overflow-hidden relative flex-1", children: _jsx("div", { className: classNames("inset-0 absolute", panel.noOverflow ? "" : "overflow-y-auto"), children: panel.content }) }))] }) }, index))) }));
 }

package/dist/editor/ui/Toolbar.d.ts

@@ -0,0 +1,3 @@
+export declare function Toolbar({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/ui/Toolbar.js

@@ -1,7 +1,4 @@
-"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 }));
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Toolbar({ children }) {
+    return (_jsx("div", { className: "bg-gray-50 flex gap-1 p-0.5 border-b items-center", children: children }));
 }

package/dist/editor/utils/id-helper.d.ts

@@ -0,0 +1 @@
+export declare function cleanId(id?: string): string | undefined;

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

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

package/dist/editor/utils/insertOptions.d.ts

@@ -0,0 +1,3 @@
+import { InsertOption } from "../../types";
+import { EditContextType } from "../client/editContext";
+export declare function getInsertOptionsForCurrentSelection(editContext: EditContextType): InsertOption[];

package/dist/editor/utils/insertOptions.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInsertOptionsForCurrentSelection = getInsertOptionsForCurrentSelection;
-const componentTreeHelper_1 = require("../componentTreeHelper");
-function getInsertOptionsForCurrentSelection(editContext) {
+import { getComponentById } from "../componentTreeHelper";
+export function getInsertOptionsForCurrentSelection(editContext) {
     const page = editContext.page;
     if (!page)
         return [];
     const insertingPlaceholderKeys = [editContext.selectedForInsertion]
-        .map((x) => (0, componentTreeHelper_1.getComponentById)(x, editContext.page))
+        .map((x) => getComponentById(x, editContext.page))
         .filter((x) => x)
         .reduce((a, x) => a.concat(x.placeholders?.map((y) => y.key) || []), []);
     const selectedPlaceholderKeys = [

package/dist/editor/utils/itemutils.d.ts

@@ -0,0 +1,3 @@
+import { Language } from "../pageModel";
+import { EditContextType } from "../client/editContext";
+export declare const confirmCreateVersion: (editContext: EditContextType, language: Language) => void;

package/dist/editor/utils/itemutils.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.confirmCreateVersion = void 0;
-const createVersionCommand_1 = require("../commands/createVersionCommand");
-const confirmCreateVersion = (editContext, language) => {
+import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
+export const confirmCreateVersion = (editContext, language) => {
     editContext.confirm({
         message: "This page has no version in language " +
             language.name +
@@ -15,11 +12,10 @@ const confirmCreateVersion = (editContext, language) => {
         rejectLabel: "No",
         accept: async () => {
             await editContext?.executeCommand({
-                command: (0, createVersionCommand_1.getCreateAndSwitchToNewVersionCommand)({
+                command: getCreateAndSwitchToNewVersionCommand({
                     language: language.languageCode,
                 }),
             });
         },
     });
 };
-exports.confirmCreateVersion = confirmCreateVersion;

package/dist/editor/utils/useMemoDebug.d.ts

@@ -0,0 +1 @@
+export declare function useMemoWithDebug<T>(factory: () => T, dependencies: any[]): T;

package/dist/editor/utils/useMemoDebug.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMemoWithDebug = useMemoWithDebug;
-const react_1 = require("react");
+import { useMemo, useRef } from "react";
 // Generic type for the return value of the memoized factory
-function useMemoWithDebug(factory, dependencies) {
-    const previousDependenciesRef = (0, react_1.useRef)([]);
+export function useMemoWithDebug(factory, dependencies) {
+    const previousDependenciesRef = useRef([]);
     const hasChanged = dependencies.some((dep, index) => {
         return dep !== previousDependenciesRef.current[index];
     });
@@ -16,5 +13,5 @@ function useMemoWithDebug(factory, dependencies) {
         });
     }
     previousDependenciesRef.current = dependencies;
-    return (0, react_1.useMemo)(factory, dependencies);
+    return useMemo(factory, dependencies);
 }

package/dist/editor/utils.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import { EditContextType } from "./client/editContext";
+import { FieldDescriptor } from "../types";
+import { Field, FullItem, ItemDescriptor } from "./pageModel";
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function useEventListenerExt(eventName: string, handler: any, element: HTMLElement | Window, capture?: boolean): void;
+export declare const useLocalStorage: <T>(storageKey: string, fallbackState: T) => [T, React.Dispatch<React.SetStateAction<T>>];
+export declare function isFieldActionExecuting(field: Field, editContext: EditContextType): boolean;
+export declare function getItemDescriptor(item: FullItem | ItemDescriptor): ItemDescriptor;
+export declare function getAbsoluteIconUrl(url: string): string;
+export declare function findParentWithAttribute(element: HTMLElement, attr: string): HTMLElement | null;
+export declare function parsePlaceholderKey(key: string): {
+    name: string;
+    componentId: string | undefined;
+};
+export declare function hasFieldLock(field: FieldDescriptor, editContext: EditContextType): boolean;
+export declare function getSessionWithFieldLock(field: FieldDescriptor, editContext: EditContextType): import("../types").EditSession | undefined;
+export declare function getFieldDescriptorFromElement(element: Element): FieldDescriptor;
+export declare function findNearestComponentId(startElement: Element): string | undefined;
+export declare function findFieldElement(iframe: HTMLIFrameElement, fieldDescriptor: FieldDescriptor): Element | null | undefined;
+export declare function findComponentRect(iframe: HTMLIFrameElement, componentId: string, takeScrollPositionIntoAccount?: boolean): {
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    elements: Element[];
+} | null | undefined;
+export declare const getAbsolutePosition: (element: HTMLElement, iframe: HTMLIFrameElement) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function findParentComponentId(element: HTMLElement): string | null;
+export declare function normalizeGuid(id: string): string;
+export declare function formatDate(date: Date): string;
+export declare function findClosestFieldElement(node: Node | null): HTMLElement | null;

package/dist/editor/utils.js

@@ -1,36 +1,17 @@
-"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");
+import { useState } from "react";
+import { useEffect, useRef } from "react";
 // Hook
-function useEventListenerExt(eventName, handler, element, capture = false) {
+export function useEventListenerExt(eventName, handler, element, capture = false) {
     // Create a ref that stores handler
-    const savedHandler = (0, react_2.useRef)(undefined);
+    const savedHandler = 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)(() => {
+    useEffect(() => {
         savedHandler.current = handler;
     }, [handler]);
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         // Make sure element supports addEventListener
         // On
         const isSupported = element && element.addEventListener;
@@ -47,18 +28,17 @@ function useEventListenerExt(eventName, handler, element, capture = false) {
     }, [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"
+export const useLocalStorage = (storageKey, fallbackState) => {
+    const [value, setValue] = useState(JSON.parse(typeof window !== "undefined"
         ? localStorage.getItem(storageKey) ?? JSON.stringify(fallbackState)
         : JSON.stringify(fallbackState)));
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         if (typeof window !== "undefined")
             localStorage.setItem(storageKey, JSON.stringify(value));
     }, [value, storageKey]);
     return [value, setValue];
 };
-exports.useLocalStorage = useLocalStorage;
-function isFieldActionExecuting(field, editContext) {
+export function isFieldActionExecuting(field, editContext) {
     const fieldItem = field.descriptor.item;
     if (!fieldItem) {
         return false;
@@ -69,7 +49,7 @@ function isFieldActionExecuting(field, editContext) {
         x.field.item?.version == fieldItem.version);
     return action?.state == "running";
 }
-function getItemDescriptor(item) {
+export function getItemDescriptor(item) {
     if (!item)
         throw new Error("Item is null");
     if ("descriptor" in item) {
@@ -82,11 +62,11 @@ function getItemDescriptor(item) {
         name: item.name,
     };
 }
-function getAbsoluteIconUrl(url) {
+export function getAbsoluteIconUrl(url) {
     //return configuration.services.editorService.baseUrl + url;
     return url;
 }
-function findParentWithAttribute(element, attr) {
+export function findParentWithAttribute(element, attr) {
     while (element && element !== document.documentElement) {
         if (element.hasAttribute(attr)) {
             return element;
@@ -95,7 +75,7 @@ function findParentWithAttribute(element, attr) {
     }
     return null;
 }
-function parsePlaceholderKey(key) {
+export function parsePlaceholderKey(key) {
     const placeholderKeyComponents = key.split("_");
     const placeholderName = placeholderKeyComponents.length === 1
         ? placeholderKeyComponents[0]
@@ -159,7 +139,7 @@ function parsePlaceholderKey(key) {
 //   }
 //   editContext.setModifiedFields([...editContext.modifiedFields]);
 // }
-function hasFieldLock(field, editContext) {
+export function hasFieldLock(field, editContext) {
     if (!editContext.lockedField) {
         return false;
     }
@@ -168,14 +148,14 @@ function hasFieldLock(field, editContext) {
         editContext.lockedField.item.language === field.item.language &&
         editContext.lockedField.item.version === field.item.version);
 }
-function getSessionWithFieldLock(field, editContext) {
+export 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) {
+export function getFieldDescriptorFromElement(element) {
     return {
         item: {
             id: element.getAttribute("data-itemid"),
@@ -185,7 +165,7 @@ function getFieldDescriptorFromElement(element) {
         fieldId: element.getAttribute("data-fieldid"),
     };
 }
-function findNearestComponentId(startElement) {
+export function findNearestComponentId(startElement) {
     let element = startElement;
     while (element) {
         if (element.hasAttribute("data-component-start")) {
@@ -200,7 +180,7 @@ function findNearestComponentId(startElement) {
     }
     return;
 }
-function findFieldElement(iframe, fieldDescriptor) {
+export function findFieldElement(iframe, fieldDescriptor) {
     if (!iframe.contentWindow?.document.body)
         return undefined;
     const fieldElement = iframe.contentWindow?.document.body.querySelector("[data-itemid='" +
@@ -214,7 +194,7 @@ function findFieldElement(iframe, fieldDescriptor) {
         "']");
     return fieldElement;
 }
-function findComponentRect(iframe, componentId, takeScrollPositionIntoAccount = false) {
+export function findComponentRect(iframe, componentId, takeScrollPositionIntoAccount = false) {
     if (!iframe.contentWindow?.document.body)
         return undefined;
     const componentStart = iframe.contentWindow?.document.body.querySelector("[data-component-start='" + componentId + "']");
@@ -231,7 +211,7 @@ function findComponentRect(iframe, componentId, takeScrollPositionIntoAccount =
         return null;
     }
     const startRect = takeScrollPositionIntoAccount
-        ? (0, exports.getAbsolutePosition)(startElement, iframe)
+        ? getAbsolutePosition(startElement, iframe)
         : startElement.getBoundingClientRect();
     let endElement = componentEnd.previousElementSibling;
     while (endElement && endElement.tagName === "SCRIPT") {
@@ -240,7 +220,7 @@ function findComponentRect(iframe, componentId, takeScrollPositionIntoAccount =
     if (!endElement)
         return null;
     const endRect = takeScrollPositionIntoAccount
-        ? (0, exports.getAbsolutePosition)(endElement, iframe)
+        ? getAbsolutePosition(endElement, iframe)
         : endElement.getBoundingClientRect();
     const elements = startElement === endElement ? [startElement] : [startElement, endElement];
     // console.log(
@@ -260,7 +240,7 @@ function findComponentRect(iframe, componentId, takeScrollPositionIntoAccount =
         elements: elements,
     };
 }
-const getAbsolutePosition = (element, iframe) => {
+export const getAbsolutePosition = (element, iframe) => {
     const rect = element.getBoundingClientRect();
     const scrollLeft = iframe.contentWindow?.scrollX ||
         iframe.contentDocument?.documentElement.scrollLeft || 0;
@@ -273,8 +253,7 @@ const getAbsolutePosition = (element, iframe) => {
         height: rect.height,
     };
 };
-exports.getAbsolutePosition = getAbsolutePosition;
-function findParentComponentId(element) {
+export function findParentComponentId(element) {
     while (element && element !== document.documentElement) {
         const startElement = findStartElement(element);
         if (startElement) {
@@ -294,7 +273,7 @@ function findStartElement(element) {
     }
     return null;
 }
-function normalizeGuid(id) {
+export function normalizeGuid(id) {
     id = id.toUpperCase();
     if (id.length && id[0] === "{")
         return id;
@@ -310,10 +289,10 @@ const dateOptions = {
     hour12: false,
 };
 const dateFormat = Intl.DateTimeFormat(typeof navigator !== 'undefined' ? navigator.language : 'en', dateOptions);
-function formatDate(date) {
+export function formatDate(date) {
     return dateFormat.format(date);
 }
-function findClosestFieldElement(node) {
+export function findClosestFieldElement(node) {
     let current = node;
     while (current) {
         if (current.nodeType === Node.ELEMENT_NODE) {

package/dist/editor/views/CompareView.d.ts

@@ -0,0 +1 @@
+export declare function CompareView(): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/editor/views/CompareView.js

@@ -1,34 +1,31 @@
-"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)();
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { LanguageSelector } from "../menubar/LanguageSelector";
+import { VersionSelector } from "../menubar/VersionSelector";
+import { usePageViewContext } from "../page-viewer/pageViewContext";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { SingleEditView } from "./SingleEditView";
+import { getLanguagesAndVersions } from "../services/contentService";
+import { Allotment } from "allotment";
+import { ItemEditor } from "./ItemEditor";
+export function CompareView() {
+    const editContext = useEditContext();
+    const searchParams = useSearchParams();
+    const router = useRouter();
     if (!editContext)
         return;
-    const [compareToItem, setCompareToItem] = (0, react_1.useState)();
-    const [compareToVersions, setCompareToVersions] = (0, react_1.useState)([]);
+    const [compareToItem, setCompareToItem] = useState();
+    const [compareToVersions, setCompareToVersions] = useState([]);
     const compareTo = editContext.compareTo;
     const setCompareTo = editContext.setCompareTo;
-    const comparePageViewContext = (0, pageViewContext_1.usePageViewContext)({
+    const comparePageViewContext = usePageViewContext({
         pageItemDescriptor: compareToItem?.descriptor,
         itemsRepository: editContext.itemsRepository,
         configuration: editContext.configuration,
     });
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         comparePageViewContext.setDevice(editContext.pageView.device);
     }, [editContext.pageView.device]);
     const updateCompareToVersions = async () => {
@@ -36,13 +33,13 @@ function CompareView() {
             setCompareToVersions([]);
             return;
         }
-        const result = await (0, contentService_1.getLanguagesAndVersions)(compareTo);
+        const result = await getLanguagesAndVersions(compareTo);
         if (result?.data) {
             const versions = result.data.versions.reverse();
             setCompareToVersions(versions);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const updateCompareTo = async () => {
             if (!editContext)
                 return;
@@ -59,7 +56,7 @@ function CompareView() {
                     setCompareTo(undefined);
                     return;
                 }
-                const result = await (0, contentService_1.getLanguagesAndVersions)({
+                const result = await getLanguagesAndVersions({
                     id: editContext.currentItemDescriptor?.id,
                     language: language.languageCode,
                     version: 0,
@@ -77,7 +74,7 @@ function CompareView() {
         };
         updateCompareTo();
     }, [searchParams, editContext?.itemLanguages]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const updateCompareToItem = async () => {
             if (!compareTo || !compareTo.id || !compareTo.language) {
                 setCompareToItem(undefined);
@@ -97,7 +94,7 @@ function CompareView() {
             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) => {
+    const originalSelector = (_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: [_jsx(LanguageSelector, { selectedLanguage: editContext.contentEditorItem?.descriptor?.language, showAllLanguagesSwitch: false, darkMode: true, onLanguageSelected: (language) => {
                     if (!editContext.contentEditorItem)
                         return;
                     editContext.loadItem({
@@ -105,7 +102,7 @@ function CompareView() {
                         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) => {
+                } }), compareTo?.language && (_jsx(VersionSelector, { darkMode: true, readOnly: true, versions: editContext.itemVersions, itemDescriptor: editContext.currentItemDescriptor, actualVersion: editContext.contentEditorItem?.version, onVersionSelected: (version) => {
                     if (!editContext.contentEditorItem)
                         return;
                     editContext.loadItem({
@@ -114,7 +111,7 @@ function CompareView() {
                         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) => {
+    const compareToSelector = (_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: [_jsx(LanguageSelector, { selectedLanguage: compareTo?.language, showAllLanguagesSwitch: false, darkMode: true, onLanguageSelected: (language) => {
                     if (!compareTo?.id)
                         return;
                     updateCompareTo({
@@ -122,7 +119,7 @@ function CompareView() {
                         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) => {
+                } }), compareTo?.language && (_jsx(VersionSelector, { darkMode: true, readOnly: true, versions: compareToVersions, itemDescriptor: compareTo, actualVersion: compareToItem?.version, onVersionSelected: (version) => {
                     if (!compareTo?.id)
                         return;
                     updateCompareTo({
@@ -133,8 +130,8 @@ function CompareView() {
                 } }))] }));
     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 ===
+        return (_jsxs("div", { className: "flex flex-col h-full w-full items-stretch", children: [_jsxs("div", { className: "flex w-full", children: [originalSelector, compareToSelector] }), _jsx("div", { className: "flex-1 relative", children: _jsx("div", { className: "absolute w-full h-full", children: _jsx(ItemEditor, { pageViewContext: editContext.pageView, compareToItem: compareToItem }) }) })] }));
+    return (_jsxs(Allotment, { className: "flex h-full w-full", children: [_jsx(Allotment.Pane, { children: _jsxs("div", { className: "flex flex-col h-full w-full items-stretch", children: [originalSelector, _jsx(SingleEditView, { name: "original", mode: editContext?.previewMode ? "view" : "edit", pageViewContext: editContext.pageView, itemDescriptor: editContext.contentEditorItem?.descriptor }, "original")] }) }), _jsx(Allotment.Pane, { children: _jsxs("div", { className: "flex flex-col h-full w-full items-stretch", children: [compareToSelector, compareTo?.language && (_jsx(SingleEditView, { name: "compareTo", mode: compareToItem?.id ===
                                 editContext.contentEditorItem?.descriptor.id &&
                                 compareToItem?.language ===
                                     editContext.contentEditorItem?.descriptor.language &&
@@ -143,5 +140,5 @@ function CompareView() {
                                 ? 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" }) }))] }) })] }));
+                                : "compare", pageViewContext: comparePageViewContext, itemDescriptor: compareTo }, "compareTo")), !compareTo?.language && (_jsx("div", { className: "flex flex-col h-full w-full items-center justify-center", children: _jsx("div", { className: "text-gray-400", children: "Select a language and version to compare" }) }))] }) })] }));
 }

package/dist/editor/views/EditView.d.ts

@@ -0,0 +1 @@
+export declare function EditView(): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/views/EditView.js

@@ -1,17 +1,14 @@
-"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)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditContext } from "../client/editContext";
+import { CompareView } from "./CompareView";
+import { SingleEditView } from "./SingleEditView";
+export function EditView() {
+    const editContext = 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" }) }));
+        return (_jsx("div", { className: "grid items-center justify-center h-full w-full", children: _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"));
+        return _jsx(CompareView, {});
+    return (_jsx(SingleEditView, { name: "single", mode: editContext?.previewMode ? "view" : "edit", pageViewContext: editContext.pageView, itemDescriptor: editContext.contentEditorItem?.descriptor }, "single"));
 }

package/dist/editor/views/ItemEditor.d.ts

@@ -0,0 +1,7 @@
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { FullItem } from "../pageModel";
+export declare function ItemEditor({ item, compareToItem, }: {
+    item?: FullItem;
+    compareToItem?: FullItem;
+    pageViewContext?: PageViewContext;
+}): import("react/jsx-runtime").JSX.Element | undefined;