@alpaca-editor/core 1.0.3767 → 1.0.3769

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

@@ -1,50 +1,43 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageViewerFrame = PageViewerFrame;
-exports.injectEditorCSS = injectEditorCSS;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const MiniMap_1 = require("./MiniMap");
-const editContext_1 = require("../client/editContext");
-const use_debounce_1 = require("use-debounce");
-const PageEditorChrome_1 = require("../page-editor-chrome/PageEditorChrome");
-const morphdom_1 = __importDefault(require("morphdom"));
-const react_uuid_1 = __importDefault(require("react-uuid"));
-const utils_1 = require("../utils");
-const componentTreeHelper_1 = require("../componentTreeHelper");
-const ContextMenu_1 = require("../ContextMenu");
-const editService_1 = require("../services/editService");
-const navigation_1 = require("next/navigation");
-const EditorWarnings_1 = require("../EditorWarnings");
-const NoLayout_1 = require("../page-editor-chrome/NoLayout");
-const Spinner_1 = require("../ui/Spinner");
-const DeviceToolbar_1 = require("./DeviceToolbar");
-function PageViewerFrame({ mode, pageViewContext, }) {
-    const editContext = (0, editContext_1.useEditContext)();
-    const pathname = (0, navigation_1.usePathname)();
-    const pageViewContextRef = (0, react_1.useRef)(undefined);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { MiniMap } from "./MiniMap";
+import { useEditContext, useEditContextRef } from "../client/editContext";
+import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
+import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
+import morphdom from "morphdom";
+import uuid from "react-uuid";
+import { findComponentRect, findFieldElement, findNearestComponentId, findParentComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, } from "../utils";
+import { getComponentById } from "../componentTreeHelper";
+import { showComponentContextMenu } from "../ContextMenu";
+import { loadFieldButtons } from "../services/editService";
+import { usePathname } from "next/navigation";
+import { EditorWarnings } from "../EditorWarnings";
+import { NoLayout } from "../page-editor-chrome/NoLayout";
+import { Spinner } from "../ui/Spinner";
+import { DeviceToolbar } from "./DeviceToolbar";
+export function PageViewerFrame({ mode, pageViewContext, }) {
+    const editContext = useEditContext();
+    const pathname = usePathname();
+    const pageViewContextRef = useRef(undefined);
     if (!editContext || !pageViewContext)
         return null;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         pageViewContextRef.current = pageViewContext;
     }, [pageViewContext]);
-    const editContextRef = (0, editContext_1.useEditContextRef)();
+    const editContextRef = useEditContextRef();
     const iframeRef = pageViewContext.editorIframeRef;
-    const [showSpinner, setShowSpinner] = (0, react_1.useState)(false);
-    const [scroll, setScroll] = (0, react_1.useState)(0);
-    const [showMiniMap, setShowMiniMap] = (0, react_1.useState)(false);
+    const [showSpinner, setShowSpinner] = useState(false);
+    const [scroll, setScroll] = useState(0);
+    const [showMiniMap, setShowMiniMap] = useState(false);
     const zoom = pageViewContext.zoom;
-    const blockBlurEventRef = (0, react_1.useRef)(0);
-    const [currentItemDescriptor, setCurrentItemDescriptor] = (0, react_1.useState)(undefined);
+    const blockBlurEventRef = useRef(0);
+    const [currentItemDescriptor, setCurrentItemDescriptor] = useState(undefined);
     const pageItemDescriptor = pageViewContext.pageItemDescriptor;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         //Workaround for iframeref updates not propagating to usePageViewContext
         pageViewContext.setWorkaround((x) => !x);
     }, [iframeRef.current]);
-    const updateMiniMapVisibility = (0, use_debounce_1.useDebouncedCallback)(() => {
+    const updateMiniMapVisibility = useDebouncedCallback(() => {
         if (!iframeRef.current)
             return;
         const iframe = iframeRef.current;
@@ -271,9 +264,9 @@ function PageViewerFrame({ mode, pageViewContext, }) {
         console.log("PAGE MODEL SKELETON", page, time);
         pageViewContextRef.current?.setPageSkeleton(page);
     }
-    const buildPageModelThrottled = (0, use_debounce_1.useThrottledCallback)(buildPageModel, 1000);
-    const [iframeSrc, setIframeSrc] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
+    const buildPageModelThrottled = useThrottledCallback(buildPageModel, 1000);
+    const [iframeSrc, setIframeSrc] = useState();
+    useEffect(() => {
         const isHeadless = pageViewContext.isHeadless;
         if (!pageItemDescriptor || isHeadless === undefined)
             return;
@@ -306,7 +299,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
             renderUrl.searchParams.set("site", editContext.pageView.site?.name || "website");
             renderUrl.searchParams.set("mode", editContext.previewMode ? "preview" : "edit");
         }
-        renderUrl.searchParams.set("edit_rev", editContext.revision ?? (0, react_uuid_1.default)());
+        renderUrl.searchParams.set("edit_rev", editContext.revision ?? uuid());
         if (iframeRef.current?.contentWindow?.requestRefresh) {
             console.log("Integration - requesting refresh");
             iframeRef.current?.contentWindow.requestRefresh(renderUrl.toString());
@@ -333,14 +326,14 @@ function PageViewerFrame({ mode, pageViewContext, }) {
         pageViewContext.isHeadless,
         editContext.previewMode,
     ]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (editContext.focusedField) {
             if (editContext.selection.length > 0 &&
                 editContext.focusedField.item.id !== editContext.selection[0])
                 return;
-            const fieldElement = (0, utils_1.findFieldElement)(iframeRef.current, editContext.focusedField);
+            const fieldElement = findFieldElement(iframeRef.current, editContext.focusedField);
             if (fieldElement) {
-                const rect = (0, utils_1.getAbsolutePosition)(fieldElement, iframeRef.current);
+                const rect = getAbsolutePosition(fieldElement, iframeRef.current);
                 const scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
                 const iframeHeight = iframeRef.current?.getBoundingClientRect().height;
                 const isInViewport = rect.y >= scrollTop && rect.y <= scrollTop + (iframeHeight || 0);
@@ -354,7 +347,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
         }
         else {
             if (editContext.selection.length > 0) {
-                const lastSelectedComponent = (0, componentTreeHelper_1.getComponentById)(editContext.selection[editContext.selection.length - 1], pageViewContextRef.current.page);
+                const lastSelectedComponent = getComponentById(editContext.selection[editContext.selection.length - 1], pageViewContextRef.current.page);
                 if (lastSelectedComponent) {
                     editContext.setScrollIntoView(lastSelectedComponent.id);
                 }
@@ -379,7 +372,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
             else {
                 const parser = new DOMParser();
                 const newDoc = parser.parseFromString(text, "text/html");
-                (0, morphdom_1.default)(doc.documentElement, newDoc.documentElement);
+                morphdom(doc.documentElement, newDoc.documentElement);
                 setShowSpinner(false);
             }
             if (mode === "edit" && !editContext.previewMode)
@@ -387,11 +380,11 @@ function PageViewerFrame({ mode, pageViewContext, }) {
             buildPageModel(doc);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!editContext.scrollIntoView ||
             !iframeRef.current?.contentDocument?.documentElement)
             return;
-        const rect = (0, utils_1.findComponentRect)(iframeRef.current, editContext.scrollIntoView, true);
+        const rect = findComponentRect(iframeRef.current, editContext.scrollIntoView, true);
         if (!rect)
             return;
         // Check if element is already in viewport
@@ -411,7 +404,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
         });
         editContext.setScrollIntoView(undefined);
     }, [editContext.scrollIntoView, pageViewContext.page]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const handleMessage = (message) => {
             if (message.data.type === "editor-exitFullscreen") {
                 editContext.pageView.setFullscreen(false);
@@ -425,11 +418,11 @@ function PageViewerFrame({ mode, pageViewContext, }) {
             window.removeEventListener("message", handleMessage);
         };
     }, []);
-    const selecionChangeHandler = (0, use_debounce_1.useThrottledCallback)(() => {
+    const selecionChangeHandler = useThrottledCallback(() => {
         const sel = iframeRef.current?.contentDocument?.getSelection();
         if (sel && sel.rangeCount > 0) {
             // Find the field element containing the selection
-            const fieldElement = (0, utils_1.findClosestFieldElement)(sel.anchorNode);
+            const fieldElement = findClosestFieldElement(sel.anchorNode);
             if (!fieldElement)
                 return;
             const fieldId = fieldElement.getAttribute("data-fieldid");
@@ -455,7 +448,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
             });
         }
     }, 100);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const iframe = iframeRef.current;
         if (!iframe)
             return;
@@ -463,7 +456,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
             const target = event.target;
             if (editContextRef.current?.isRefreshing)
                 return;
-            const componentId = (0, utils_1.findParentComponentId)(target);
+            const componentId = findParentComponentId(target);
             editContextRef.current?.setCurrentOverlay(undefined);
             if (componentId) {
                 if (event.ctrlKey) {
@@ -482,9 +475,9 @@ function PageViewerFrame({ mode, pageViewContext, }) {
                 editContextRef.current?.select([]);
             if (mode === "edit" &&
                 pageViewContextRef.current?.page?.item.canWriteItem) {
-                const fieldElement = (0, utils_1.findParentWithAttribute)(target, "data-fieldid");
+                const fieldElement = findParentWithAttribute(target, "data-fieldid");
                 if (fieldElement?.hasAttribute("data-itemid")) {
-                    const hasLock = await editContextRef.current?.setFocusedField((0, utils_1.getFieldDescriptorFromElement)(fieldElement), true);
+                    const hasLock = await editContextRef.current?.setFocusedField(getFieldDescriptorFromElement(fieldElement), true);
                     blockBlurEventRef.current = Date.now() + 500;
                     if (hasLock) {
                         editContextRef.current?.setInlineEditingFieldElement(fieldElement);
@@ -524,16 +517,16 @@ function PageViewerFrame({ mode, pageViewContext, }) {
                 return;
             event.preventDefault();
             event.stopPropagation();
-            const componentId = (0, utils_1.findNearestComponentId)(target);
+            const componentId = findNearestComponentId(target);
             if (componentId) {
                 if (!editContextRef.current?.selection.includes(componentId)) {
                     console.log("Selecting component CONTEXT MENU", componentId);
                     editContextRef.current.select([componentId]);
                 }
             }
-            const fieldElement = (0, utils_1.findParentWithAttribute)(target, "data-fieldid");
+            const fieldElement = findParentWithAttribute(target, "data-fieldid");
             const selectedComponents = editContextRef.current?.selection
-                .map((id) => (0, componentTreeHelper_1.getComponentById)(id, pageViewContextRef.current.page))
+                .map((id) => getComponentById(id, pageViewContextRef.current.page))
                 .filter((x) => x);
             const iframeRect = iframe.getBoundingClientRect();
             const adjustedEvent = new MouseEvent("contextmenu", {
@@ -547,10 +540,10 @@ function PageViewerFrame({ mode, pageViewContext, }) {
                 clientY: event.clientY + iframeRect.y,
             });
             const field = fieldElement
-                ? (0, utils_1.getFieldDescriptorFromElement)(fieldElement)
+                ? getFieldDescriptorFromElement(fieldElement)
                 : undefined;
-            const fieldButtons = field ? await (0, editService_1.loadFieldButtons)(field) : [];
-            if ((0, ContextMenu_1.showComponentContextMenu)(selectedComponents, editContextRef.current, field, fieldButtons)(adjustedEvent)) {
+            const fieldButtons = field ? await loadFieldButtons(field) : [];
+            if (showComponentContextMenu(selectedComponents, editContextRef.current, field, fieldButtons)(adjustedEvent)) {
             }
         };
         const handleLoad = () => {
@@ -617,7 +610,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
             }
         };
     }, [iframeRef.current]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         iframeRef.current?.contentWindow?.postMessage({ type: "componentsSelected", componentIds: editContext.selection }, "*");
     }, [editContext.selection]);
     const updateScrollPosition = (e) => {
@@ -625,7 +618,7 @@ function PageViewerFrame({ mode, pageViewContext, }) {
         if (mode === "edit")
             pageViewContextRef.current?.setScroll(e);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!iframeRef.current)
             return;
         const body = iframeRef.current.contentWindow?.document.documentElement;
@@ -636,25 +629,25 @@ function PageViewerFrame({ mode, pageViewContext, }) {
         body.style.overflow = "auto";
         //body.style.height = `${body.scrollHeight / zoom}px`;
     }, [zoom]);
-    const scrollHandler = (0, use_debounce_1.useThrottledCallback)(updateScrollPosition, 100);
+    const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
     if (pageViewContext.page?.item && !pageViewContext.page?.item.hasLayout) {
-        return (0, jsx_runtime_1.jsx)(NoLayout_1.NoLayout, {});
+        return _jsx(NoLayout, {});
     }
     const deviceHeight = pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
         ? "100%"
         : pageViewContext.deviceHeight || 640;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex h-full w-full flex-col items-center bg-slate-100 select-none", children: [!editContext.pageView.fullscreen && ((0, jsx_runtime_1.jsx)(EditorWarnings_1.EditorWarnings, { item: pageViewContext.page?.item })), pageViewContext.device !== "desktop" && ((0, jsx_runtime_1.jsx)(DeviceToolbar_1.DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-1 select-none", style: {
+    return (_jsxs("div", { className: "relative flex h-full w-full flex-col items-center bg-slate-100 select-none", children: [!editContext.pageView.fullscreen && (_jsx(EditorWarnings, { item: pageViewContext.page?.item })), pageViewContext.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex flex-1 select-none", style: {
                     width: pageViewContext.device === "desktop" ||
                         pageViewContext.device === "Responsive"
                         ? "100%"
                         : (pageViewContext.deviceWidth || 640) +
                             editContext.configuration.outline.width +
                             "px",
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative h-full w-full", children: [(0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, className: "page-iframe h-full w-full bg-white", style: { height: deviceHeight }, src: iframeSrc, "data-testid": "pageEditoriframe" }), iframeRef.current && ((0, jsx_runtime_1.jsx)(PageEditorChrome_1.PageEditorChrome, { iframe: iframeRef.current, mode: mode || "edit", pageViewContext: pageViewContext })), pageViewContext.deviceHeight && pageViewContext.device && ((0, jsx_runtime_1.jsx)("div", { className: "relative z-40 h-full w-full bg-slate-100" }))] }), !editContext.pageView.fullscreen && showMiniMap && ((0, jsx_runtime_1.jsx)(MiniMap_1.MiniMap, { mode: mode, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext, deviceHeight: pageViewContext.device === "Desktop"
+                }, children: [_jsxs("div", { className: "relative h-full w-full", children: [_jsx("iframe", { ref: iframeRef, className: "page-iframe h-full w-full bg-white", style: { height: deviceHeight }, src: iframeSrc, "data-testid": "pageEditoriframe" }), iframeRef.current && (_jsx(PageEditorChrome, { iframe: iframeRef.current, mode: mode || "edit", pageViewContext: pageViewContext })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "relative z-40 h-full w-full bg-slate-100" }))] }), !editContext.pageView.fullscreen && showMiniMap && (_jsx(MiniMap, { mode: mode, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext, deviceHeight: pageViewContext.device === "Desktop"
                             ? undefined
-                            : pageViewContext.deviceHeight })), showSpinner && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 h-full w-full bg-slate-100/50" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) })] }))] })] }));
+                            : pageViewContext.deviceHeight })), showSpinner && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute top-0 left-0 h-full w-full bg-slate-100/50" }), _jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: _jsx(Spinner, {}) })] }))] })] }));
 }
-function injectEditorCSS(iframeDocument) {
+export function injectEditorCSS(iframeDocument) {
     if (!iframeDocument)
         return;
     const style = iframeDocument.createElement("style");

package/dist/editor/page-viewer/pageViewContext.d.ts

@@ -0,0 +1,38 @@
+import { ItemDescriptor, Page, PageSkeleton } from "../pageModel";
+import { ItemsRepository } from "../client/itemsRepository";
+import { EditorConfiguration } from "../../config/types";
+import { Site } from "../../types";
+export type PageViewContext = {
+    device: string;
+    setDevice: React.Dispatch<React.SetStateAction<string>>;
+    zoom: number;
+    setZoom: React.Dispatch<React.SetStateAction<number>>;
+    scroll: number;
+    setScroll: React.Dispatch<React.SetStateAction<number>>;
+    fullscreen: boolean;
+    setFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
+    editorIframeRef: React.RefObject<HTMLIFrameElement | null>;
+    deviceWidth?: number;
+    deviceHeight?: number;
+    setDeviceWidth: React.Dispatch<React.SetStateAction<number | undefined>>;
+    setDeviceHeight: React.Dispatch<React.SetStateAction<number | undefined>>;
+    lockHeight: boolean;
+    setLockHeight: React.Dispatch<React.SetStateAction<boolean>>;
+    rotate: boolean;
+    setRotate: React.Dispatch<React.SetStateAction<boolean>>;
+    page?: Page;
+    pageItemDescriptor?: ItemDescriptor;
+    setPageSkeleton: React.Dispatch<React.SetStateAction<PageSkeleton | undefined>>;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    setWorkaround: React.Dispatch<React.SetStateAction<boolean>>;
+    isHeadless: boolean;
+    site?: Site;
+};
+export declare function usePageViewContext({ pageItemDescriptor, itemsRepository, configuration, }: {
+    pageItemDescriptor?: ItemDescriptor;
+    itemsRepository?: ItemsRepository;
+    configuration?: EditorConfiguration;
+}): PageViewContext;

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

@@ -1,27 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePageViewContext = usePageViewContext;
-const react_1 = require("react");
-const pageModelBuilder_1 = require("../client/pageModelBuilder");
-const use_debounce_1 = require("use-debounce");
-const contentService_1 = require("../services/contentService");
-function usePageViewContext({ pageItemDescriptor, itemsRepository, configuration, }) {
-    const [device, setDevice] = (0, react_1.useState)("desktop");
-    const [zoom, setZoom] = (0, react_1.useState)(1);
-    const [scroll, setScroll] = (0, react_1.useState)(0);
-    const [fullscreen, setFullscreen] = (0, react_1.useState)(false);
-    const editorIframeRef = (0, react_1.useRef)(null);
-    const [deviceWidth, setDeviceWidth] = (0, react_1.useState)();
-    const [deviceHeight, setDeviceHeight] = (0, react_1.useState)();
-    const [lockHeight, setLockHeight] = (0, react_1.useState)(true);
-    const [rotate, setRotate] = (0, react_1.useState)(false);
-    const [viewportRect, setViewportRect] = (0, react_1.useState)({ width: 0, height: 0 });
-    const [workaround, setWorkaround] = (0, react_1.useState)(false);
-    const [site, setSite] = (0, react_1.useState)();
-    const [resolvedPageItemDescriptor, setResolvedPageItemDescriptor] = (0, react_1.useState)();
-    const [isHeadless, setIsHeadless] = (0, react_1.useState)(false);
-    const { page, setPageSkeleton } = (0, pageModelBuilder_1.usePageModel)(itemsRepository, pageItemDescriptor);
-    (0, react_1.useEffect)(() => {
+import { useEffect, useRef, useState } from "react";
+import { usePageModel } from "../client/pageModelBuilder";
+import { useDebouncedCallback } from "use-debounce";
+import { resolvePageAndSite } from "../services/contentService";
+export function usePageViewContext({ pageItemDescriptor, itemsRepository, configuration, }) {
+    const [device, setDevice] = useState("desktop");
+    const [zoom, setZoom] = useState(1);
+    const [scroll, setScroll] = useState(0);
+    const [fullscreen, setFullscreen] = useState(false);
+    const editorIframeRef = useRef(null);
+    const [deviceWidth, setDeviceWidth] = useState();
+    const [deviceHeight, setDeviceHeight] = useState();
+    const [lockHeight, setLockHeight] = useState(true);
+    const [rotate, setRotate] = useState(false);
+    const [viewportRect, setViewportRect] = useState({ width: 0, height: 0 });
+    const [workaround, setWorkaround] = useState(false);
+    const [site, setSite] = useState();
+    const [resolvedPageItemDescriptor, setResolvedPageItemDescriptor] = useState();
+    const [isHeadless, setIsHeadless] = useState(false);
+    const { page, setPageSkeleton } = usePageModel(itemsRepository, pageItemDescriptor);
+    useEffect(() => {
         var deviceConfig = configuration?.devices.find((x) => x.name === device);
         let width = deviceConfig?.width;
         let height = deviceConfig?.height;
@@ -33,13 +30,13 @@ function usePageViewContext({ pageItemDescriptor, itemsRepository, configuration
             setDeviceHeight(lockHeight ? height : undefined);
         }
     }, [rotate, device, lockHeight, configuration]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         updateViewportRect();
     }, [fullscreen, device, deviceHeight, deviceWidth]);
-    const updateViewportRectDebounced = (0, use_debounce_1.useDebouncedCallback)(() => {
+    const updateViewportRectDebounced = useDebouncedCallback(() => {
         updateViewportRect();
     }, 100);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const resizeObserver = new ResizeObserver(() => {
             updateViewportRectDebounced();
         });
@@ -53,7 +50,7 @@ function usePageViewContext({ pageItemDescriptor, itemsRepository, configuration
             }
         };
     }, [editorIframeRef.current, workaround]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!pageItemDescriptor)
             return;
         async function resolvePage() {
@@ -73,7 +70,7 @@ function usePageViewContext({ pageItemDescriptor, itemsRepository, configuration
                 return;
             }
             console.log("resolve page", pageItemDescriptor.id, pageItemDescriptor.language, pageItemDescriptor.version);
-            const result = await (0, contentService_1.resolvePageAndSite)(pageItemDescriptor.id, pageItemDescriptor.language, pageItemDescriptor.version);
+            const result = await resolvePageAndSite(pageItemDescriptor.id, pageItemDescriptor.language, pageItemDescriptor.version);
             if (result) {
                 setIsHeadless(result.isHeadless);
                 setSite(result.site);

package/dist/editor/pageModel.d.ts

@@ -0,0 +1,171 @@
+import { InsertOption } from "../types";
+export type PageSkeleton = {
+    editRevision: string;
+    item: ItemDescriptor;
+    rootComponent: ComponentSkeleton;
+};
+export type PlaceholderSkeleton = {
+    name: string;
+    key: string;
+    description: string;
+    components: ComponentSkeleton[];
+    parentComponent: ComponentSkeleton;
+};
+export type ComponentSkeleton = {
+    id: string;
+    name: string;
+    type: string;
+    typeId: string;
+    items: RenderedItemSkeleton[];
+    placeholders: PlaceholderSkeleton[];
+    datasourceItem?: RenderedItemSkeleton;
+    isRemovedFromMasterLanguage?: boolean;
+    isInheritedFromMasterLanguage?: boolean;
+    visible?: boolean;
+    parentPlaceholder?: PlaceholderSkeleton;
+    renderedDictionaryKeys: string[];
+    layoutId?: string;
+    editorFields: EditorFields;
+};
+export type RenderedItemSkeleton = ItemDescriptor & {
+    renderedFieldIds: string[];
+};
+export type ItemDescriptor = {
+    id: string;
+    language: string;
+    version: number;
+    name?: string;
+};
+export type Field = {
+    id: string;
+    value: unknown;
+    rawValue?: string | null;
+    name?: string;
+    type: string;
+    descriptor: FieldDescriptor;
+    displayName?: string;
+    sortOrder?: number;
+    sectionSortOrder?: number;
+    customProperties?: any;
+    canWrite?: boolean;
+    hasLock?: boolean;
+    canLock?: boolean;
+    lockedBy?: LockSession;
+    section?: string;
+    isFallback?: boolean;
+    isStandardValue?: boolean;
+    isShared?: boolean;
+    sourceItems: ItemRef[];
+    buttons?: FieldButton[];
+    fallbackChain?: FieldDescriptor[];
+    isHistoric?: boolean;
+};
+export type ItemRef = {
+    id: string;
+    name?: string;
+};
+export type FieldButton = {
+    id: string;
+    label: string;
+    description: string;
+    action?: string;
+    icon?: string;
+    isGenerator: boolean;
+};
+export type LockSession = {
+    sessionId: string;
+    name: string;
+};
+export type FieldDescriptor = {
+    item: ItemDescriptor;
+    fieldId: string;
+};
+export type Language = {
+    name: string;
+    versions: number;
+    icon: string;
+    languageCode: string;
+};
+export type Version = {
+    version: number;
+    updated: Date;
+    updatedBy: string;
+};
+export type Timings = {
+    [key: string]: number;
+};
+export type FullItem = ItemDescriptor & {
+    descriptor: ItemDescriptor;
+    name: string;
+    templateId: string;
+    templateName: string;
+    icon: string;
+    largeIcon: string;
+    thumbnail: string;
+    path: string;
+    masterLanguages?: string[];
+    translations?: string[];
+    fields: Field[];
+    canWriteItem: boolean;
+    canWriteLanguage: boolean;
+    canWriteWorkflow: boolean;
+    workflowState: string;
+    hasLock: boolean;
+    hasLayout: boolean;
+    idPath: string;
+    canLock: boolean;
+    lockedBy: string;
+    isInheritedFromMasterLanguage: boolean;
+    mainItemId?: string;
+    hasChildren: boolean;
+    parentId: string;
+    versions: number;
+};
+export type Page = {
+    editRevision: string;
+    item: FullItem;
+    rootComponent: Component;
+};
+export type RenderedItem = RenderedItemSkeleton & FullItem;
+type EditorFields = {
+    [group: string]: {
+        addFields: string[];
+        removeFields: string[];
+    };
+};
+export type Component = {
+    id: string;
+    name: string;
+    type: string;
+    typeId: string;
+    items: RenderedItem[];
+    placeholders: Placeholder[];
+    datasourceItem?: RenderedItem;
+    isRemovedFromMasterLanguage?: boolean;
+    isInheritedFromMasterLanguage?: boolean;
+    visible?: boolean;
+    parentPlaceholder?: Placeholder;
+    renderedDictionaryKeys: string[];
+    isShared: boolean;
+    rendering?: RenderingReference;
+    layoutId?: string;
+    editorFields: EditorFields;
+};
+export type Placeholder = {
+    key: string;
+    name: string;
+    description: string;
+    components: Component[];
+    parentComponent: Component;
+    canSynchronize: boolean;
+    insertOptions: InsertOption[];
+};
+export interface RenderingReference {
+    id: string;
+    revision: string;
+}
+export type ItemIdAndName = {
+    name: string;
+    id: string;
+};
+export {};

package/dist/editor/pageModel.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/editor/picture-shared.d.ts

@@ -0,0 +1,16 @@
+import { PictureVariant } from "./fieldTypes";
+export type PictureParams = {
+    variant?: string;
+    aspectRatio?: number;
+    scales?: number[];
+    maxWidth?: number;
+    custom?: {
+        [paramName: string]: string | number | boolean | undefined;
+    };
+};
+export type MediaPictureParams = {
+    default: PictureParams;
+    [mediaQuery: string]: PictureParams;
+};
+export declare function getRenderedPictureVariant(params: PictureParams, variants: PictureVariant[]): PictureVariant;
+export declare function getBestMatchingVariant(variants: PictureVariant[], aspectRatio: number | undefined): PictureVariant;

package/dist/editor/picture-shared.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRenderedPictureVariant = getRenderedPictureVariant;
-exports.getBestMatchingVariant = getBestMatchingVariant;
-function getRenderedPictureVariant(params, variants) {
+export function getRenderedPictureVariant(params, variants) {
     const variantName = params.variant ?? "auto";
     const variant = variantName.toLocaleLowerCase() === "auto" && params.aspectRatio
         ? getBestMatchingVariant(variants, params.aspectRatio)
         : variants.find((v) => v.name.toLowerCase() == variantName.toLowerCase()) ?? variants[0];
     return variant;
 }
-function getBestMatchingVariant(variants, aspectRatio) {
+export function getBestMatchingVariant(variants, aspectRatio) {
     if (!aspectRatio)
         return (variants.find((v) => v.name.toLowerCase() == "default") ?? variants[0]);
     let minDistance = 1000000;

package/dist/editor/reviews/Comment.d.ts

@@ -0,0 +1,4 @@
+import { Comment as CommentType } from "../../types";
+export declare function Comment({ comment }: {
+    comment: CommentType;
+}): import("react/jsx-runtime").JSX.Element;