@alpaca-editor/core 1.0.3767 → 1.0.3769

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

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FrameMenu = FrameMenu;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const editContext_1 = require("../client/editContext");
-const utils_1 = require("../utils");
-const use_debounce_1 = require("use-debounce");
-function FrameMenu({ component, mode, pageViewContext, }) {
-    const editContext = (0, editContext_1.useEditContext)();
-    const resizeObserverRef = (0, react_1.useRef)(null);
-    const mutationObserverRef = (0, react_1.useRef)(null);
-    const [componentRect, setComponentRect] = (0, react_1.useState)();
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { findComponentRect } from "../utils";
+import { useThrottledCallback } from "use-debounce";
+export function FrameMenu({ component, mode, pageViewContext, }) {
+    const editContext = useEditContext();
+    const resizeObserverRef = useRef(null);
+    const mutationObserverRef = useRef(null);
+    const [componentRect, setComponentRect] = useState();
     const updatePosition = () => {
         if (!component || !editContext || !pageViewContext)
             return;
@@ -20,16 +17,16 @@ function FrameMenu({ component, mode, pageViewContext, }) {
         const resetSelection = () => {
             setComponentRect(undefined);
         };
-        const componentRect = (0, utils_1.findComponentRect)(iframe, component.id)?.rect;
+        const componentRect = findComponentRect(iframe, component.id)?.rect;
         if (!componentRect) {
             resetSelection();
             return;
         }
         setComponentRect(componentRect);
     };
-    const updatePositionThrottled = (0, use_debounce_1.useThrottledCallback)(updatePosition, 30);
+    const updatePositionThrottled = useThrottledCallback(updatePosition, 30);
     // Effect to handle changes in the observed element
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (component) {
             const iframe = pageViewContext.editorIframeRef.current;
             if (!iframe)
@@ -53,7 +50,7 @@ function FrameMenu({ component, mode, pageViewContext, }) {
                 iframe.contentWindow?.document.body;
             scrollContainer?.addEventListener("scroll", updatePositionThrottled);
             iframe.contentWindow?.addEventListener("scroll", updatePositionThrottled);
-            const componentRect = (0, utils_1.findComponentRect)(iframe, component.id);
+            const componentRect = findComponentRect(iframe, component.id);
             if (!componentRect) {
                 updatePosition();
                 return;
@@ -73,7 +70,7 @@ function FrameMenu({ component, mode, pageViewContext, }) {
             }
         };
     }, [component]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setTimeout(() => {
             updatePosition();
         }, 100);
@@ -159,13 +156,13 @@ function FrameMenu({ component, mode, pageViewContext, }) {
     if (!componentRect)
         return null;
     const isMultiSelected = editContext.selection.length > 1;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `pointer-events-none absolute inset-0 border-2 ${colorVariants[color]} tour-frame-menu opacity-50 hover:opacity-100`, style: {
+    return (_jsx(_Fragment, { children: _jsx("div", { className: `pointer-events-none absolute inset-0 border-2 ${colorVariants[color]} tour-frame-menu opacity-50 hover:opacity-100`, style: {
                 left: componentRect.x,
                 top: componentRect.y,
                 width: componentRect.width,
                 height: componentRect.height,
                 zIndex: 8,
-            }, "data-testid": "frame-menu", children: !isMultiSelected && ((0, jsx_runtime_1.jsxs)("div", { className: `editframe-menu pointer-events-auto absolute z-1000 flex items-center pr-4 text-base text-white ${bgColorVariants[color]} ` +
+            }, "data-testid": "frame-menu", children: !isMultiSelected && (_jsxs("div", { className: `editframe-menu pointer-events-auto absolute z-1000 flex items-center pr-4 text-base text-white ${bgColorVariants[color]} ` +
                     (componentRect.y - 36 < 0 ? "rounded-bl-lg" : "rounded-t-lg"), style: {
                     right: "-2px",
                     top: componentRect.y - 36 < 0 ? "0" : undefined,
@@ -174,5 +171,5 @@ function FrameMenu({ component, mode, pageViewContext, }) {
                         : undefined,
                     zIndex: 800,
                     height: "36px",
-                }, children: [(0, jsx_runtime_1.jsx)("div", { draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: `px-4 ${isDraggable ? "cursor-move" : "cursor-default"} `, children: component.name }), mode === "edit" && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: buttons.map((b, i) => ((0, jsx_runtime_1.jsx)("div", { className: "cursor-pointer p-1", children: typeof b.icon === "string" ? ((0, jsx_runtime_1.jsx)("i", { className: b.icon + " cursor-pointer", onClick: b.onClick, title: b.label })) : (b.icon) }, i))) }))] })) }) }));
+                }, children: [_jsx("div", { draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: `px-4 ${isDraggable ? "cursor-move" : "cursor-default"} `, children: component.name }), mode === "edit" && (_jsx("div", { className: "flex items-center gap-2", children: buttons.map((b, i) => (_jsx("div", { className: "cursor-pointer p-1", children: typeof b.icon === "string" ? (_jsx("i", { className: b.icon + " cursor-pointer", onClick: b.onClick, title: b.label })) : (b.icon) }, i))) }))] })) }) }));
 }

package/dist/editor/page-editor-chrome/FrameMenus.d.ts

@@ -0,0 +1,5 @@
+import { PageViewContext } from "../page-viewer/pageViewContext";
+export declare function FrameMenus({ mode, pageViewContext, }: {
+    mode: "edit" | "compare" | "view";
+    pageViewContext: PageViewContext;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,24 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FrameMenus = FrameMenus;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const componentTreeHelper_1 = require("../componentTreeHelper");
-const editContext_1 = require("../client/editContext");
-const FrameMenu_1 = require("./FrameMenu");
-function FrameMenus({ mode, pageViewContext, }) {
-    const editContext = (0, editContext_1.useEditContext)();
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { findComponent } from "../componentTreeHelper";
+import { useEditContext } from "../client/editContext";
+import { FrameMenu } from "./FrameMenu";
+export function FrameMenus({ mode, pageViewContext, }) {
+    const editContext = useEditContext();
     const selection = editContext?.selection;
-    const [components, setComponents] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
+    const [components, setComponents] = useState([]);
+    useEffect(() => {
         if (!pageViewContext.page)
             return;
         const comps = selection
             ? selection
-                .map((id) => (0, componentTreeHelper_1.findComponent)(id, pageViewContext.page?.rootComponent.placeholders || []))
+                .map((id) => findComponent(id, pageViewContext.page?.rootComponent.placeholders || []))
                 .filter((c) => c !== undefined)
             : [];
         setComponents(comps);
     }, [selection, pageViewContext.page]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [components.map((c) => ((0, jsx_runtime_1.jsx)(FrameMenu_1.FrameMenu, { component: c, mode: mode, pageViewContext: pageViewContext }, c.id))), " "] }));
+    return (_jsxs(_Fragment, { children: [components.map((c) => (_jsx(FrameMenu, { component: c, mode: mode, pageViewContext: pageViewContext }, c.id))), " "] }));
 }

package/dist/editor/page-editor-chrome/InlineEditor.d.ts

@@ -0,0 +1,5 @@
+import { PageViewContext } from "../page-viewer/pageViewContext";
+export declare function InlineEditor({ pageViewContext, mode, }: {
+    pageViewContext: PageViewContext;
+    mode: "edit" | "view";
+}): null | undefined;

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

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InlineEditor = InlineEditor;
-const react_1 = require("react");
-const editContext_1 = require("../client/editContext");
-const use_debounce_1 = require("use-debounce");
-const utils_1 = require("../utils");
-function InlineEditor({ pageViewContext, mode, }) {
-    const context = (0, editContext_1.useEditContext)();
-    const modifiedFieldsContext = (0, editContext_1.useModifiedFieldsContext)();
+import { useEffect, useRef } from "react";
+import { useEditContext, useModifiedFieldsContext, } from "../client/editContext";
+import { useThrottledCallback } from "use-debounce";
+import { getFieldDescriptorFromElement, hasFieldLock } from "../utils";
+export function InlineEditor({ pageViewContext, mode, }) {
+    const context = useEditContext();
+    const modifiedFieldsContext = useModifiedFieldsContext();
     if (!context)
         return;
-    const mutationObserverRef = (0, react_1.useRef)(null);
-    const debouncedSetFieldvalue = (0, use_debounce_1.useThrottledCallback)((value, fieldId, fieldName, itemId, language, version) => {
+    const mutationObserverRef = useRef(null);
+    const debouncedSetFieldvalue = useThrottledCallback((value, fieldId, fieldName, itemId, language, version) => {
         var modifiedFieldValue = modifiedFieldsContext?.modifiedFields.find((x) => x.fieldId === fieldId &&
             x.item.id === itemId &&
             x.item.language === language &&
@@ -32,7 +29,7 @@ function InlineEditor({ pageViewContext, mode, }) {
             value: value,
         });
     }, context.configuration.debounceFieldEditsInterval);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!context || mode === "view")
             return;
         const element = context.inlineEditingFieldElement;
@@ -51,8 +48,8 @@ function InlineEditor({ pageViewContext, mode, }) {
             const isRichText = element.getAttribute("data-is-richtext") === "true";
             if (!fieldId || !itemId || !language || !version)
                 return;
-            const fieldDescriptor = (0, utils_1.getFieldDescriptorFromElement)(element);
-            const hasFielLock = (0, utils_1.hasFieldLock)(fieldDescriptor, context);
+            const fieldDescriptor = getFieldDescriptorFromElement(element);
+            const hasFielLock = hasFieldLock(fieldDescriptor, context);
             if (!hasFielLock)
                 return;
             element.setAttribute("contenteditable", "true");
@@ -74,7 +71,7 @@ function InlineEditor({ pageViewContext, mode, }) {
             }
         };
     }, [context?.inlineEditingFieldElement]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const updateFields = async () => {
             modifiedFieldsContext?.modifiedFields.forEach((field) => {
                 const elements = pageViewContext.editorIframeRef.current.contentWindow?.document.querySelectorAll(`[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`);

package/dist/editor/page-editor-chrome/LockedFieldIndicator.d.ts

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

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

@@ -1,31 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LockedFieldIndicator = LockedFieldIndicator;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const editContext_1 = require("../client/editContext");
-const utils_1 = require("../utils");
-function LockedFieldIndicator() {
-    const editContext = (0, editContext_1.useEditContext)();
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext } from "../client/editContext";
+import { findFieldElement } from "../utils";
+export function LockedFieldIndicator() {
+    const editContext = useEditContext();
     if (!editContext)
         return;
     const sessionsWithFieldLock = editContext.activeSessions.filter((x) => x.fieldLock && x.sessionId !== editContext.sessionId);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sessionsWithFieldLock.map((session) => {
+    return (_jsx(_Fragment, { children: sessionsWithFieldLock.map((session) => {
             if (!session.fieldLock)
                 return;
             const iframe = editContext.pageView.editorIframeRef.current;
             if (!iframe)
                 return;
-            const element = (0, utils_1.findFieldElement)(iframe, session.fieldLock);
+            const element = findFieldElement(iframe, session.fieldLock);
             if (!element)
                 return;
-            return ((0, jsx_runtime_1.jsx)(FieldLock, { element: element, iframe: iframe, session: session }, session.sessionId));
+            return (_jsx(FieldLock, { element: element, iframe: iframe, session: session }, session.sessionId));
         }) }));
 }
 function FieldLock({ element, iframe, session, }) {
     const rect = element.getBoundingClientRect();
     const editorRect = iframe.getBoundingClientRect();
     if (rect && editorRect) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "absolute  text-xs text-white p-0.5 rounded hover:opacity-100 opacity-90", style: {
+        return (_jsx("div", { className: "absolute  text-xs text-white p-0.5 rounded hover:opacity-100 opacity-90", style: {
                 left: rect.left + "px",
                 top: rect.top + "px",
                 background: session.color,

package/dist/editor/page-editor-chrome/NoLayout.d.ts

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

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

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

package/dist/editor/page-editor-chrome/PageEditorChrome.d.ts

@@ -0,0 +1,6 @@
+import { PageViewContext } from "../page-viewer/pageViewContext";
+export declare function PageEditorChrome({ iframe, mode, pageViewContext, }: {
+    iframe: HTMLIFrameElement;
+    mode: "edit" | "compare" | "view";
+    pageViewContext: PageViewContext;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageEditorChrome = PageEditorChrome;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const editContext_1 = require("../client/editContext");
-const InlineEditor_1 = require("./InlineEditor");
-const FieldActionIndicators_1 = require("./FieldActionIndicators");
-const PlaceholderDropZones_1 = require("./PlaceholderDropZones");
-const PictureEditorOverlay_1 = require("./PictureEditorOverlay");
-const react_1 = require("react");
-const LockedFieldIndicator_1 = require("./LockedFieldIndicator");
-const FrameMenus_1 = require("./FrameMenus");
-const FieldEditedIndicators_1 = require("./FieldEditedIndicators");
-const CommentHighlightings_1 = require("./CommentHighlightings");
-function PageEditorChrome({ iframe, mode, pageViewContext, }) {
-    const editContext = (0, editContext_1.useEditContext)();
-    const [insertingStyle, setInsertingStyle] = (0, react_1.useState)();
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext } from "../client/editContext";
+import { InlineEditor } from "./InlineEditor";
+import { FieldActionsIndicators } from "./FieldActionIndicators";
+import { PlaceholderDropZones } from "./PlaceholderDropZones";
+import { PictureEditorOverlay } from "./PictureEditorOverlay";
+import { useEffect, useState } from "react";
+import { LockedFieldIndicator } from "./LockedFieldIndicator";
+import { FrameMenus } from "./FrameMenus";
+import { FieldEditedIndicators } from "./FieldEditedIndicators";
+import { CommentHighlightings } from "./CommentHighlightings";
+export function PageEditorChrome({ iframe, mode, pageViewContext, }) {
+    const editContext = useEditContext();
+    const [insertingStyle, setInsertingStyle] = useState();
     if (!editContext?.pageView || !iframe?.contentDocument)
         return null;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!editContext.inserting)
             setInsertingStyle(undefined);
         let insertingPosition;
@@ -61,5 +58,5 @@ function PageEditorChrome({ iframe, mode, pageViewContext, }) {
         const insertingStyle = getInsertingStyle();
         setInsertingStyle(insertingStyle);
     }, [editContext.inserting, pageViewContext.viewport]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FrameMenus_1.FrameMenus, { mode: mode, pageViewContext: pageViewContext }), (0, jsx_runtime_1.jsx)(InlineEditor_1.InlineEditor, { mode: mode === "edit" ? "edit" : "view", pageViewContext: pageViewContext }), (0, jsx_runtime_1.jsx)(LockedFieldIndicator_1.LockedFieldIndicator, {}), (0, jsx_runtime_1.jsx)(FieldActionIndicators_1.FieldActionsIndicators, {}), editContext.showComments && ((0, jsx_runtime_1.jsx)(CommentHighlightings_1.CommentHighlightings, { iframe: pageViewContext?.editorIframeRef.current, scale: 1 })), (0, jsx_runtime_1.jsx)(FieldEditedIndicators_1.FieldEditedIndicators, { pageViewContext: pageViewContext }), mode === "edit" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PlaceholderDropZones_1.PlaceholderDropZones, { iframe: pageViewContext?.editorIframeRef.current, size: "large" }), (0, jsx_runtime_1.jsx)(PictureEditorOverlay_1.PictureEditorOverlay, {}), insertingStyle && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute flex h-8 w-8", style: insertingStyle, children: [(0, jsx_runtime_1.jsx)("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75" }), (0, jsx_runtime_1.jsx)("span", { className: "relative inline-flex rounded-full h-8 w-8 bg-sky-500" })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FrameMenus, { mode: mode, pageViewContext: pageViewContext }), _jsx(InlineEditor, { mode: mode === "edit" ? "edit" : "view", pageViewContext: pageViewContext }), _jsx(LockedFieldIndicator, {}), _jsx(FieldActionsIndicators, {}), editContext.showComments && (_jsx(CommentHighlightings, { iframe: pageViewContext?.editorIframeRef.current, scale: 1 })), _jsx(FieldEditedIndicators, { pageViewContext: pageViewContext }), mode === "edit" && (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZones, { iframe: pageViewContext?.editorIframeRef.current, size: "large" }), _jsx(PictureEditorOverlay, {}), insertingStyle && (_jsxs("div", { className: "absolute flex h-8 w-8", style: insertingStyle, children: [_jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75" }), _jsx("span", { className: "relative inline-flex rounded-full h-8 w-8 bg-sky-500" })] }))] }))] }));
 }

package/dist/editor/page-editor-chrome/PictureEditorOverlay.d.ts

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

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

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PictureEditorOverlay = PictureEditorOverlay;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const editContext_1 = require("../client/editContext");
-const PictureEditor_1 = require("../PictureEditor");
-const componentTreeHelper_1 = require("../componentTreeHelper");
-function PictureEditorOverlay() {
-    const editContext = (0, editContext_1.useEditContext)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { PictureEditor } from "../PictureEditor";
+import { getComponentById } from "../componentTreeHelper";
+export function PictureEditorOverlay() {
+    const editContext = useEditContext();
     const pageViewContext = editContext?.pageView;
     const iframe = pageViewContext?.editorIframeRef.current;
-    const [field, setField] = (0, react_1.useState)();
-    const [variantName, setVariantName] = (0, react_1.useState)();
-    const [element, setElement] = (0, react_1.useState)();
-    const editContextRef = (0, react_1.useRef)(editContext);
-    (0, react_1.useEffect)(() => {
+    const [field, setField] = useState();
+    const [variantName, setVariantName] = useState();
+    const [element, setElement] = useState();
+    const editContextRef = useRef(editContext);
+    useEffect(() => {
         editContextRef.current = editContext;
     }, [editContext]);
-    const onMouseEnter = (0, react_1.useCallback)((e) => {
+    const onMouseEnter = useCallback((e) => {
         if (!e.target)
             return;
         if (!("closest" in e.target))
@@ -26,7 +23,7 @@ function PictureEditorOverlay() {
         const pictureElement = target.closest("picture") || target.closest("img");
         setElement(pictureElement || undefined);
     }, [iframe, editContext]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (element) {
             const itemId = element.getAttribute("data-itemid");
             const language = element.getAttribute("data-language");
@@ -39,7 +36,7 @@ function PictureEditorOverlay() {
                 !pageViewContext?.page ||
                 !iframe?.contentWindow)
                 return;
-            const component = (0, componentTreeHelper_1.getComponentById)(itemId, pageViewContext.page);
+            const component = getComponentById(itemId, pageViewContext.page);
             if (component == null)
                 return;
             const pictureField = component.datasourceItem?.fields.find((f) => f.id === fieldId);
@@ -51,7 +48,7 @@ function PictureEditorOverlay() {
             setField(undefined);
         }
     }, [element, pageViewContext?.page]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!element || !iframe?.contentWindow)
             return;
         const sourceELement = getCurrentPictureSource(element, iframe.contentWindow);
@@ -67,7 +64,7 @@ function PictureEditorOverlay() {
             iframe.contentDocument.addEventListener("mouseenter", onMouseEnter, true);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (iframe) {
             // Ensure the iframe is loaded and accessible
             iframe.addEventListener("load", handleLoad);
@@ -90,7 +87,7 @@ function PictureEditorOverlay() {
         width: bounds.width + "px",
         height: bounds.height + "px",
     };
-    return ((0, jsx_runtime_1.jsx)(PictureEditor_1.PictureEditor, { field: field, variantName: variantName, style: style, forwardScrollevents: true, isPageEditor: true }));
+    return (_jsx(PictureEditor, { field: field, variantName: variantName, style: style, forwardScrollevents: true, isPageEditor: true }));
 }
 function getCurrentPictureSource(pictureElement, iframeWindow) {
     if (pictureElement.tagName === "IMG")

package/dist/editor/page-editor-chrome/PlaceholderDropZone.d.ts

@@ -0,0 +1,14 @@
+import { Placeholder } from "../pageModel";
+export declare function PlaceholderDropZone({ placeholder, description, index, parentName, spotPosition, spotPositionElement, spotPositionAnchor, size, }: {
+    placeholder: Placeholder;
+    description?: string;
+    index: number;
+    parentName?: string;
+    spotPosition: {
+        x: number;
+        y: number;
+    };
+    spotPositionElement: Element;
+    size: "large" | "small";
+    spotPositionAnchor: "top" | "bottom" | "left" | "right";
+}): import("react/jsx-runtime").JSX.Element | undefined;

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

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

package/dist/editor/page-editor-chrome/PlaceholderDropZones.d.ts

@@ -0,0 +1,5 @@
+export declare function PlaceholderDropZones({ scale, iframe, size, }: {
+    scale?: number;
+    iframe?: HTMLIFrameElement | null;
+    size: "large" | "small";
+}): import("react/jsx-runtime").JSX.Element[] | null | undefined;

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

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaceholderDropZones = PlaceholderDropZones;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const editContext_1 = require("../client/editContext");
-const componentTreeHelper_1 = require("../componentTreeHelper");
-const utils_1 = require("../utils");
-const PlaceholderDropZone_1 = require("./PlaceholderDropZone");
-function PlaceholderDropZones({ scale, iframe, size, }) {
-    const [placeholders, setPlaceholders] = (0, react_1.useState)([]);
-    const editContext = (0, editContext_1.useEditContext)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { getAllPlaceholders } from "../componentTreeHelper";
+import { findComponentRect } from "../utils";
+import { PlaceholderDropZone } from "./PlaceholderDropZone";
+export function PlaceholderDropZones({ scale, iframe, size, }) {
+    const [placeholders, setPlaceholders] = useState([]);
+    const editContext = useEditContext();
     const pageViewContext = editContext?.pageView;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!pageViewContext?.page)
             return;
-        setPlaceholders((0, componentTreeHelper_1.getAllPlaceholders)(pageViewContext.page));
+        setPlaceholders(getAllPlaceholders(pageViewContext.page));
     }, [pageViewContext?.page]);
     if (!pageViewContext ||
         (!editContext?.dragObject && !editContext.selectedForInsertion) ||
@@ -81,7 +78,7 @@ function PlaceholderDropZones({ scale, iframe, size, }) {
                     break;
                 }
                 if (nextElement.getAttribute("data-component-end")) {
-                    const componentRect = (0, utils_1.findComponentRect)(iframe, (nextElement.getAttribute("data-component-end") ||
+                    const componentRect = findComponentRect(iframe, (nextElement.getAttribute("data-component-end") ||
                         nextElement.getAttribute("data-dropzone")));
                     if (!componentRect)
                         continue;
@@ -113,7 +110,7 @@ function PlaceholderDropZones({ scale, iframe, size, }) {
     return zones.map((zone, index) => {
         const x = Math.min(pageViewContext.viewport.width - 20, Math.max(20, zone.position.x * (scale || 1)));
         const y = Math.min(scrollHeight - 20, Math.max(20 - pageViewContext.scroll, zone.position.y * (scale || 1)));
-        return ((0, jsx_runtime_1.jsx)(PlaceholderDropZone_1.PlaceholderDropZone, { placeholder: zone.placeholder, spotPosition: {
+        return (_jsx(PlaceholderDropZone, { placeholder: zone.placeholder, spotPosition: {
                 x,
                 y,
             }, index: zone.index, size: size, spotPositionElement: zone.element, spotPositionAnchor: zone.anchor, parentName: zone.placeholder.parentComponent?.name, description: zone.description || undefined }, index));

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

@@ -0,0 +1,6 @@
+import { PageViewContext } from "./pageViewContext";
+import { EditorConfiguration } from "../../config/types";
+export declare function DeviceToolbar({ pageViewContext, configuration, }: {
+    pageViewContext: PageViewContext;
+    configuration: EditorConfiguration;
+}): import("react/jsx-runtime").JSX.Element;