@alpaca-editor/core 1.0.3767 → 1.0.3768

package/dist/editor/InsertMenu.js

@@ -1,35 +1,29 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InsertMenuTemplate = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_components_1 = require("../client-components");
-const react_1 = require("react");
-const inputtext_1 = require("primereact/inputtext");
-const ScrollingContentTree_1 = require("./ScrollingContentTree");
-const SimpleTabs_1 = require("./ui/SimpleTabs");
-const ItemSearch_1 = __importDefault(require("./ui/ItemSearch"));
-const config_1 = require("../config/config");
-const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
-    const editContext = (0, client_components_1.useEditContext)();
-    const opRef = (0, react_1.useRef)(null);
-    const [filter, setFilter] = (0, react_1.useState)("");
-    const filterRef = (0, react_1.useRef)(null);
-    const [activeTab, setActiveTab] = (0, react_1.useState)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "../client-components";
+import { useRef, useState, useEffect } from "react";
+import { InputText } from "primereact/inputtext";
+import { ScrollingContentTree } from "./ScrollingContentTree";
+import { SimpleTabs } from "./ui/SimpleTabs";
+import ItemSearch from "./ui/ItemSearch";
+import { templatesRootItemId } from "../config/config";
+export const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
+    const editContext = useEditContext();
+    const opRef = useRef(null);
+    const [filter, setFilter] = useState("");
+    const filterRef = useRef(null);
+    const [activeTab, setActiveTab] = useState(() => {
         const stored = localStorage.getItem("editor.defaultInsertTab");
         return stored ? parseInt(stored) : 0;
     });
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         localStorage.setItem("editor.defaultInsertTab", activeTab.toString());
     }, [activeTab]);
-    const [recentTemplates, setRecentTemplates] = (0, react_1.useState)([]);
-    const [recentItems, setRecentItems] = (0, react_1.useState)([]);
-    const [hoveredItem, setHoveredItem] = (0, react_1.useState)();
-    const [wizards, setWizards] = (0, react_1.useState)([]);
-    const hideTimeoutRef = (0, react_1.useRef)(undefined);
-    (0, react_1.useEffect)(() => {
+    const [recentTemplates, setRecentTemplates] = useState([]);
+    const [recentItems, setRecentItems] = useState([]);
+    const [hoveredItem, setHoveredItem] = useState();
+    const [wizards, setWizards] = useState([]);
+    const hideTimeoutRef = useRef(undefined);
+    useEffect(() => {
         const loadRecentItems = async () => {
             const items = await editContext?.itemsRepository.getItems(recentTemplates.map((id) => ({
                 id,
@@ -41,14 +35,14 @@ const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
         };
         loadRecentItems();
     }, [recentTemplates]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const stored = localStorage.getItem("editor.recentTemplates");
         if (stored) {
             const parsed = JSON.parse(stored);
             setRecentTemplates(parsed);
         }
     }, [insertOptions]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const loadWizards = async () => {
             const wizards = await editContext?.configuration.pageWizard.getWizards(item.descriptor);
             setWizards(wizards ?? []);
@@ -79,37 +73,37 @@ const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
         : insertOptions.map((x) => ({
             label: x.name,
             id: x.id,
-            icon: ((0, jsx_runtime_1.jsx)("img", { className: "p-menuitem-icon", src: x.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() })),
+            icon: (_jsx("img", { className: "p-menuitem-icon", src: x.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() })),
             command: getCommand(x),
         }));
     const tabs = [
         {
             label: "Options",
-            content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 h-full", children: [(0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: filterRef, className: "w-full", placeholder: "Filter", onChange: (e) => setFilter(e.target.value) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: options
+            content: (_jsxs("div", { className: "flex flex-col gap-2 h-full", children: [_jsx(InputText, { ref: filterRef, className: "w-full", placeholder: "Filter", onChange: (e) => setFilter(e.target.value) }), _jsx("div", { className: "flex-1 relative", children: _jsx("div", { className: "absolute inset-0 overflow-auto", children: options
                                 ?.filter((x) => x.label.toLowerCase().indexOf(filter.toLowerCase()) > -1)
-                                .map((option) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
+                                .map((option) => (_jsxs("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
                                     ev.stopPropagation();
                                     ev.preventDefault();
                                     option.command(ev);
-                                }, children: [option.icon, (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: option.label
+                                }, children: [option.icon, _jsx("span", { className: "flex-1", children: option.label
                                             .split(new RegExp(`(${filter})`, "i"))
-                                            .map((part, i) => part.toLowerCase() === filter.toLowerCase() ? ((0, jsx_runtime_1.jsx)("u", { className: "font-bold", children: part }, i)) : (part)) })] }, option.id))) }) })] })),
+                                            .map((part, i) => part.toLowerCase() === filter.toLowerCase() ? (_jsx("u", { className: "font-bold", children: part }, i)) : (part)) })] }, option.id))) }) })] })),
             id: "options",
         },
         {
             label: "Recent",
-            content: ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full", children: recentItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500 p-2", children: "No recent templates" })) : (recentItems.map((template) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
+            content: (_jsx("div", { className: "flex flex-col h-full", children: recentItems.length === 0 ? (_jsx("div", { className: "text-sm text-gray-500 p-2", children: "No recent templates" })) : (recentItems.map((template) => (_jsxs("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
                         ev.stopPropagation();
                         ev.preventDefault();
                         getCommand(template)(ev);
-                    }, children: [(0, jsx_runtime_1.jsx)("img", { className: "p-menuitem-icon", src: template.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: template.name })] }, template.id)))) })),
+                    }, children: [_jsx("img", { className: "p-menuitem-icon", src: template.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), _jsx("span", { className: "flex-1", children: template.name })] }, template.id)))) })),
             id: "recent",
         },
         {
             label: "From Template",
-            content: ((0, jsx_runtime_1.jsxs)("div", { className: " h-full w-full flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(ItemSearch_1.default, { setHoveredItem: setHoveredItem, rootItemIds: [config_1.templatesRootItemId], itemSelected: (item) => {
+            content: (_jsxs("div", { className: " h-full w-full flex flex-col gap-2", children: [_jsx(ItemSearch, { setHoveredItem: setHoveredItem, rootItemIds: [templatesRootItemId], itemSelected: (item) => {
                             getCommand(item)(null);
-                        } }), (0, jsx_runtime_1.jsx)("div", { className: "flex-2 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-auto absolute inset-0", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: hoveredItem?.id ?? item?.id, rootItemId: config_1.templatesRootItemId, onSelectionChange: (node) => {
+                        } }), _jsx("div", { className: "flex-2 relative", children: _jsx("div", { className: "overflow-auto absolute inset-0", children: _jsx(ScrollingContentTree, { selectedItemId: hoveredItem?.id ?? item?.id, rootItemId: templatesRootItemId, onSelectionChange: (node) => {
                                     if (Array.isArray(node) && node[0]) {
                                         node = node[0];
                                     }
@@ -123,7 +117,7 @@ const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
     if (wizards.length > 0) {
         tabs.push({
             label: "Wizards",
-            content: ((0, jsx_runtime_1.jsx)("div", { children: wizards.map((wizard) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
+            content: (_jsx("div", { children: wizards.map((wizard) => (_jsxs("div", { className: "flex items-center p-1 cursor-pointer hover:bg-gray-100 gap-2 text-xs", onClick: (ev) => {
                         ev.stopPropagation();
                         ev.preventDefault();
                         editContext?.executeCommand({
@@ -131,11 +125,11 @@ const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
                             data: { wizard, item: item.descriptor },
                             event: ev,
                         });
-                    }, children: [(0, jsx_runtime_1.jsx)("img", { className: "p-menuitem-icon", src: wizard.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: wizard.name })] }, wizard.id))) })),
+                    }, children: [_jsx("img", { className: "p-menuitem-icon", src: wizard.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), _jsx("span", { className: "flex-1", children: wizard.name })] }, wizard.id))) })),
             id: "wizards",
         });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-2", style: { display: "flex", alignItems: "center", cursor: "pointer" }, onMouseEnter: () => {
+    return (_jsxs("div", { className: "p-2", style: { display: "flex", alignItems: "center", cursor: "pointer" }, onMouseEnter: () => {
             if (hideTimeoutRef.current) {
                 clearTimeout(hideTimeoutRef.current);
             }
@@ -148,7 +142,7 @@ const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
         }, onClick: (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
-        }, children: [(0, jsx_runtime_1.jsx)("i", { className: "mr-2 pi pi-plus" }), (0, jsx_runtime_1.jsx)("span", { className: "p-menuitem-text", children: "Insert" }), (0, jsx_runtime_1.jsx)("div", { ref: opRef, className: "absolute bg-white shadow-lg rounded-md z-50 p-2", onKeyDownCapture: (ev) => {
+        }, children: [_jsx("i", { className: "mr-2 pi pi-plus" }), _jsx("span", { className: "p-menuitem-text", children: "Insert" }), _jsx("div", { ref: opRef, className: "absolute bg-white shadow-lg rounded-md z-50 p-2", onKeyDownCapture: (ev) => {
                     ev.stopPropagation();
                 }, onKeyUpCapture: (ev) => {
                     ev.stopPropagation();
@@ -159,6 +153,5 @@ const InsertMenuTemplate = ({ insertOptions, item, commandCallback, }) => {
                     minWidth: "450px",
                     minHeight: "380px",
                     border: "1px solid #ddd",
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-4 flex flex-col", children: (0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { tabs: tabs, setActiveTab: setActiveTab, activeTab: activeTab }) }) })] }));
+                }, children: _jsx("div", { className: "absolute inset-4 flex flex-col", children: _jsx(SimpleTabs, { tabs: tabs, setActiveTab: setActiveTab, activeTab: activeTab }) }) })] }));
 };
-exports.InsertMenuTemplate = InsertMenuTemplate;

package/dist/editor/ItemInfo.d.ts

@@ -0,0 +1,4 @@
+import { FullItem } from "./pageModel";
+export declare function ItemInfo({ item }: {
+    item: FullItem | null;
+}): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/editor/ItemInfo.js

@@ -1,30 +1,27 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemInfo = ItemInfo;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const editContext_1 = require("./client/editContext");
-const CopyToClipboardButton_1 = require("./ui/CopyToClipboardButton");
-const Section_1 = require("./ui/Section");
-function ItemInfo({ item }) {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "./client/editContext";
+import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
+import { Section } from "./ui/Section";
+export function ItemInfo({ item }) {
     if (!item?.fields)
         return;
-    const editContext = (0, editContext_1.useEditContext)();
+    const editContext = useEditContext();
     function formatRow(label, value) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: label }), (0, jsx_runtime_1.jsx)("div", { children: value })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-bold", children: label }), _jsx("div", { children: value })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center py-2 px-3 my-2", children: [(0, jsx_runtime_1.jsx)("img", { src: item.largeIcon, alt: "Icon", className: "mr-2", style: { height: "32px", width: "32px" } }), (0, jsx_runtime_1.jsxs)("h2", { className: "text-l font-bold", children: [item.name, (0, jsx_runtime_1.jsx)("button", { className: "ml-2", onClick: () => {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center py-2 px-3 my-2", children: [_jsx("img", { src: item.largeIcon, alt: "Icon", className: "mr-2", style: { height: "32px", width: "32px" } }), _jsxs("h2", { className: "text-l font-bold", children: [item.name, _jsx("button", { className: "ml-2", onClick: () => {
                                     editContext?.executeCommand({
                                         command: editContext.configuration.commands.renameItem,
                                         data: { items: [item] },
                                     });
-                                }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil" }) })] })] }), (0, jsx_runtime_1.jsx)(Section_1.Section, { title: "Info", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-[min-content_1fr] gap-3 text-xs", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "ID:" }), (0, jsx_runtime_1.jsxs)("div", { children: [item.id, " ", (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: item.id })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Path:" }), (0, jsx_runtime_1.jsxs)("div", { children: [item.path, " ", (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: item.path })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Language:" }), (0, jsx_runtime_1.jsx)("div", { children: item.language }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Version:" }), (0, jsx_runtime_1.jsx)("div", { children: item.versions > 0 ? item.version : "No versions" }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Template:" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "cursor-pointer hover:underline", onClick: () => {
+                                }, children: _jsx("i", { className: "pi pi-pencil" }) })] })] }), _jsx(Section, { title: "Info", children: _jsxs("div", { className: "grid grid-cols-[min-content_1fr] gap-3 text-xs", children: [_jsx("div", { className: "font-bold", children: "ID:" }), _jsxs("div", { children: [item.id, " ", _jsx(CopyToClipboardButton, { text: item.id })] }), _jsx("div", { className: "font-bold", children: "Path:" }), _jsxs("div", { children: [item.path, " ", _jsx(CopyToClipboardButton, { text: item.path })] }), _jsx("div", { className: "font-bold", children: "Language:" }), _jsx("div", { children: item.language }), _jsx("div", { className: "font-bold", children: "Version:" }), _jsx("div", { children: item.versions > 0 ? item.version : "No versions" }), _jsx("div", { className: "font-bold", children: "Template:" }), _jsxs("div", { children: [_jsxs("span", { className: "cursor-pointer hover:underline", onClick: () => {
                                         editContext?.loadItem({
                                             id: item.templateId,
                                             language: "en",
                                             version: 0,
                                         });
                                         editContext?.switchView("content-editor");
-                                    }, children: [" ", item.templateName, " (", item.templateId, " "] }), (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: item.templateId }), ")"] }), item.masterLanguages &&
-                            formatRow("Master languages", item.masterLanguages.join(", ")), item.translations && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Languages" }), (0, jsx_runtime_1.jsx)("div", { children: item.translations?.join(", ") })] }))] }) })] }));
+                                    }, children: [" ", item.templateName, " (", item.templateId, " "] }), _jsx(CopyToClipboardButton, { text: item.templateId }), ")"] }), item.masterLanguages &&
+                            formatRow("Master languages", item.masterLanguages.join(", ")), item.translations && (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-bold", children: "Languages" }), _jsx("div", { children: item.translations?.join(", ") })] }))] }) })] }));
 }

package/dist/editor/LinkEditorDialog.d.ts

@@ -0,0 +1,15 @@
+export type Link = {
+    url?: string;
+    itemId?: string;
+    queryString?: string;
+    target?: string;
+    customTarget?: string;
+    type: string;
+    targetItemLongId?: string;
+    targetItemName?: string;
+};
+export declare function LinkEditorDialog({ linkValue, onCancel, onOk, }: {
+    linkValue: Link;
+    onOk: (link: Link) => void;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/LinkEditorDialog.js

@@ -1,29 +1,23 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkEditorDialog = LinkEditorDialog;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const dialog_1 = require("primereact/dialog");
-const inputtext_1 = require("primereact/inputtext");
-const react_1 = require("react");
-const dropdown_1 = require("primereact/dropdown");
-const divider_1 = require("primereact/divider");
-const button_1 = require("primereact/button");
-const splitter_1 = require("primereact/splitter");
-const ItemSearch_1 = __importDefault(require("./ui/ItemSearch"));
-const SimpleTabs_1 = require("./ui/SimpleTabs");
-const ScrollingContentTree_1 = require("./ScrollingContentTree");
-function LinkEditorDialog({ linkValue, onCancel, onOk, }) {
-    const [url, setUrl] = (0, react_1.useState)();
-    const [targetWindow, setTargetWindow] = (0, react_1.useState)();
-    const [customTarget, setCustomTarget] = (0, react_1.useState)();
-    const [queryString, setQueryString] = (0, react_1.useState)();
-    const [activeTabIndex, setActiveTabIndex] = (0, react_1.useState)(0);
-    const [selectedItemId, setSelectedItemId] = (0, react_1.useState)("");
-    const [hoveredItemId, setHoveredItemId] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "primereact/dialog";
+import { InputText } from "primereact/inputtext";
+import { useEffect, useState } from "react";
+import { Dropdown } from "primereact/dropdown";
+import { Divider } from "primereact/divider";
+import { Button } from "primereact/button";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import ItemSearch from "./ui/ItemSearch";
+import { SimpleTabs } from "./ui/SimpleTabs";
+import { ScrollingContentTree } from "./ScrollingContentTree";
+export function LinkEditorDialog({ linkValue, onCancel, onOk, }) {
+    const [url, setUrl] = useState();
+    const [targetWindow, setTargetWindow] = useState();
+    const [customTarget, setCustomTarget] = useState();
+    const [queryString, setQueryString] = useState();
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const [selectedItemId, setSelectedItemId] = useState("");
+    const [hoveredItemId, setHoveredItemId] = useState();
+    useEffect(() => {
         setUrl(linkValue.url);
         setTargetWindow(linkValue.target);
         if (linkValue.type == "external")
@@ -53,9 +47,9 @@ function LinkEditorDialog({ linkValue, onCancel, onOk, }) {
         {
             id: "internal",
             label: "Internal",
-            content: ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "mt-4 flex-1", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "relative h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: hoveredItemId || selectedItemId, onSelectionChange: (selection) => {
+            content: (_jsxs(Splitter, { className: "mt-4 flex-1", children: [_jsx(SplitterPanel, { className: "relative h-full", children: _jsx("div", { className: "absolute inset-0 overflow-auto", children: _jsx(ScrollingContentTree, { selectedItemId: hoveredItemId || selectedItemId, onSelectionChange: (selection) => {
                                     setSelectedItemId(selection[0]?.id || "");
-                                } }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: (0, jsx_runtime_1.jsx)("div", { className: "relative ml-2 h-full w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ItemSearch_1.default, { itemSelected: (item) => {
+                                } }) }) }), _jsx(SplitterPanel, { children: _jsx("div", { className: "relative ml-2 h-full w-full", children: _jsx("div", { className: "absolute inset-0 overflow-auto", children: _jsx(ItemSearch, { itemSelected: (item) => {
                                         setSelectedItemId(item.id);
                                     }, setHoveredItem: (item) => ((item) => {
                                         if (!item)
@@ -66,17 +60,17 @@ function LinkEditorDialog({ linkValue, onCancel, onOk, }) {
         {
             id: "external",
             label: "External",
-            content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [" ", (0, jsx_runtime_1.jsx)("label", { className: "mt-4 block text-sm", children: "Url:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: url || "", onChange: (e) => {
+            content: (_jsxs("div", { className: "flex-1", children: [" ", _jsx("label", { className: "mt-4 block text-sm", children: "Url:" }), _jsx(InputText, { value: url || "", onChange: (e) => {
                             setUrl(e.target.value);
                         }, className: "w-full text-sm" })] })),
         },
     ];
-    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "60%", height: "70%" }, onHide: onCancel, header: "Select link target", visible: true, onShow: () => {
+    return (_jsx(Dialog, { style: { width: "60%", height: "70%" }, onHide: onCancel, header: "Select link target", visible: true, onShow: () => {
             // Trigger a resize event to recalculate TabView layout
             window.dispatchEvent(new Event("resize"));
-        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-4", children: [linkValue && ((0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { tabs: tabs, activeTab: activeTabIndex, setActiveTab: setActiveTabIndex })), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsx)("label", { className: "text-xs", children: "QueryString" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: queryString, onChange: (e) => setQueryString(e.target.value), className: "text-sm" }), (0, jsx_runtime_1.jsx)("label", { className: "mt-4 text-xs", children: "Window" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: targetWindows, optionLabel: "name", optionValue: "code", value: targetWindow, onChange: (e) => setTargetWindow(e.value), className: "text-sm" }), targetWindow === "custom" && ((0, jsx_runtime_1.jsxs)("div", { className: "m-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-xs", children: "Custom:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: customTarget || "", onChange: (e) => {
+        }, children: _jsxs("div", { className: "flex h-full flex-col p-4", children: [linkValue && (_jsx(SimpleTabs, { tabs: tabs, activeTab: activeTabIndex, setActiveTab: setActiveTabIndex })), _jsx(Divider, {}), _jsx("label", { className: "text-xs", children: "QueryString" }), _jsx(InputText, { value: queryString, onChange: (e) => setQueryString(e.target.value), className: "text-sm" }), _jsx("label", { className: "mt-4 text-xs", children: "Window" }), _jsx(Dropdown, { options: targetWindows, optionLabel: "name", optionValue: "code", value: targetWindow, onChange: (e) => setTargetWindow(e.value), className: "text-sm" }), targetWindow === "custom" && (_jsxs("div", { className: "m-2", children: [_jsx("label", { className: "block text-xs", children: "Custom:" }), _jsx(InputText, { value: customTarget || "", onChange: (e) => {
                                 setCustomTarget(e.target.value);
-                            }, className: "text-sm" })] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
+                            }, className: "text-sm" })] })), _jsx(Divider, {}), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => {
                                 onOk({
                                     url,
                                     target: getTargetWindow(),
@@ -85,5 +79,5 @@ function LinkEditorDialog({ linkValue, onCancel, onOk, }) {
                                     queryString: queryString,
                                     type: activeTabIndex === 1 ? "external" : "internal",
                                 });
-                            }, children: "Select" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancel, children: "Cancel" })] })] }) }));
+                            }, children: "Select" }), _jsx(Button, { onClick: onCancel, children: "Cancel" })] })] }) }));
 }

package/dist/editor/MainLayout.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { EditorView } from "../config/types";
+export default function MainLayout({ view, centerPanelView, rightSidebar, rightSidebarTitle, className, }: {
+    rightSidebar?: ReactNode;
+    rightSidebarTitle?: string;
+    view: EditorView;
+    centerPanelView: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/MainLayout.js

@@ -1,30 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = MainLayout;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importDefault(require("react"));
-const utils_1 = require("primereact/utils");
-const editContext_1 = require("./client/editContext");
-const Icons_1 = require("./ui/Icons");
-const SidebarView_1 = require("./sidebar/SidebarView");
-const Splitter_1 = require("./ui/Splitter");
-const ViewSelector_1 = require("./sidebar/ViewSelector");
-function MainLayout({ view, centerPanelView, rightSidebar, rightSidebarTitle, className, }) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import React from "react";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "./client/editContext";
+import { NavigatorIcon } from "./ui/Icons";
+import { SidebarView } from "./sidebar/SidebarView";
+import { Splitter } from "./ui/Splitter";
+import { ViewSelector } from "./sidebar/ViewSelector";
+export default function MainLayout({ view, centerPanelView, rightSidebar, rightSidebarTitle, className, }) {
     const panels = [];
-    const editContext = (0, editContext_1.useEditContext)();
-    const mainLayoutDivRef = (0, react_1.useRef)(null);
-    const leftSidebarRef = react_2.default.useRef(null);
+    const editContext = useEditContext();
+    const mainLayoutDivRef = useRef(null);
+    const leftSidebarRef = React.useRef(null);
     if (!editContext)
         return null;
     if (view.leftSidebar)
         panels.push({
             name: "leftSidebar",
             defaultSize: 350,
-            content: ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-full", ref: leftSidebarRef, style: { wordBreak: "normal" }, children: (0, jsx_runtime_1.jsx)(SidebarView_1.SidebarView, { sidebar: view.leftSidebar, editContext: editContext, active: true }) })),
+            content: (_jsx("div", { className: "w-full h-full", ref: leftSidebarRef, style: { wordBreak: "normal" }, children: _jsx(SidebarView, { sidebar: view.leftSidebar, editContext: editContext, active: true }) })),
         });
     panels.push({
         name: "center",
@@ -40,7 +34,7 @@ function MainLayout({ view, centerPanelView, rightSidebar, rightSidebarTitle, cl
         });
     }
     if (!editContext?.configuration.editor.embedded) {
-        className = (0, utils_1.classNames)("fixed inset-0", className);
+        className = classNames("fixed inset-0", className);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)("flex flex-col select-none", className), ref: mainLayoutDivRef, children: [editContext?.configuration.editor.titlebar, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1", children: [!view.hideViewSelector && (0, jsx_runtime_1.jsx)(ViewSelector_1.ViewSelector, {}), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { localStorageKey: "editor.panelSizes", expandLabel: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)(Icons_1.NavigatorIcon, {}), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [rightSidebarTitle, " "] })] }), panels: panels }) })] })] }));
+    return (_jsxs("div", { className: classNames("flex flex-col select-none", className), ref: mainLayoutDivRef, children: [editContext?.configuration.editor.titlebar, _jsxs("div", { className: "flex flex-1", children: [!view.hideViewSelector && _jsx(ViewSelector, {}), _jsx("div", { className: "flex-1", children: _jsx(Splitter, { localStorageKey: "editor.panelSizes", expandLabel: _jsxs("div", { className: "flex items-center justify-center", children: [_jsx(NavigatorIcon, {}), _jsxs("div", { className: "mt-3", children: [rightSidebarTitle, " "] })] }), panels: panels }) })] })] }));
 }

package/dist/editor/NewEditorClient.d.ts

@@ -0,0 +1,5 @@
+import { EditorConfiguration } from "../config/types";
+export declare function NewEditorClient(props: {
+    className?: string;
+    configuration: EditorConfiguration;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/NewEditorClient.js

@@ -1,9 +1,6 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewEditorClient = NewEditorClient;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function NewEditorClient(props) {
+import { jsx as _jsx } from "react/jsx-runtime";
+export function NewEditorClient(props) {
     console.log(props);
-    return (0, jsx_runtime_1.jsx)("div", { children: "Hello" });
+    return _jsx("div", { children: "Hello" });
 }

package/dist/editor/PictureCropper.d.ts

@@ -0,0 +1,6 @@
+import { PictureField } from "./fieldTypes";
+export declare function PictureCropper({ field, onClose, variantName: selectedVariantName, }: {
+    field: PictureField;
+    variantName: string;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/PictureCropper.js

@@ -1,33 +1,27 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PictureCropper = PictureCropper;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const dialog_1 = require("primereact/dialog");
-const editContext_1 = require("./client/editContext");
-const react_1 = require("react");
-const button_1 = require("primereact/button");
-const DialogButtons_1 = __importDefault(require("./ui/DialogButtons"));
-const utils_1 = require("primereact/utils");
-function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
-    const [pictureValue, setPictureValue] = (0, react_1.useState)();
-    const [isValid, setIsValid] = (0, react_1.useState)(true);
-    const [rawValue, setRawValue] = (0, react_1.useState)();
-    const imageRef = (0, react_1.useRef)(null);
-    const [rect, setRect] = (0, react_1.useState)();
-    const rectRef = (0, react_1.useRef)(rect);
-    const movingRef = (0, react_1.useRef)(false);
-    const [startPos, setStartPos] = (0, react_1.useState)({
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "primereact/dialog";
+import { useEditContext } from "./client/editContext";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "primereact/button";
+import DialogButtons from "./ui/DialogButtons";
+import { classNames } from "primereact/utils";
+export function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
+    const [pictureValue, setPictureValue] = useState();
+    const [isValid, setIsValid] = useState(true);
+    const [rawValue, setRawValue] = useState();
+    const imageRef = useRef(null);
+    const [rect, setRect] = useState();
+    const rectRef = useRef(rect);
+    const movingRef = useRef(false);
+    const [startPos, setStartPos] = useState({
         x: 0,
         y: 0,
     });
-    const offset = (0, react_1.useRef)({ x: 0, y: 0 });
-    const editContext = (0, editContext_1.useEditContext)();
+    const offset = useRef({ x: 0, y: 0 });
+    const editContext = useEditContext();
     const EDGE_THRESHOLD = 10; // pixels from edge to detect resize
-    const [resizeEdge, setResizeEdge] = (0, react_1.useState)(null);
-    const resizeEdgeRef = (0, react_1.useRef)(null);
+    const [resizeEdge, setResizeEdge] = useState(null);
+    const resizeEdgeRef = useRef(null);
     const getResizeEdge = (pos, rect, bounds) => {
         if (!rect || !bounds)
             return null;
@@ -59,7 +53,7 @@ function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
             return "s";
         return null;
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const deepCopy = JSON.parse(JSON.stringify(field.value));
         setPictureValue(deepCopy);
         const raw = field?.rawValue
@@ -70,7 +64,7 @@ function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
     const selectedVariant = pictureValue && pictureValue.variants
         ? pictureValue.variants?.find((x) => x.name == selectedVariantName)
         : null;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (selectedVariant?.region &&
             (!selectedVariant.aspectRatioLock ||
                 Math.abs(selectedVariant.aspectRatioLock -
@@ -89,7 +83,7 @@ function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
             setRect(undefined);
         }
     }, [selectedVariant]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!rect)
             return;
         if ((selectedVariant?.minWidth && selectedVariant.minWidth > widthPx) ||
@@ -100,7 +94,7 @@ function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
             setIsValid(true);
         rectRef.current = rect;
     }, [rect]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!rawValue)
             return;
         if (!selectedVariantName)
@@ -298,11 +292,11 @@ function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
     const scale = imageBounds ? selectedVariant.width / imageBounds.width : 0;
     const widthPx = rect ? Math.round(rect.width * selectedVariant.width) : 0;
     const heightPx = rect ? Math.round(rect.height * selectedVariant.height) : 0;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Crop " + field.name + " - " + selectedVariantName, pt: { content: { style: { paddingLeft: "0" } } }, visible: true, style: { width: "75vw", height: "75vh" }, onHide: onClose, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 flex-col justify h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-56 text-sm p-4 bg-gray-100 flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Variant:", value: selectedVariantName }), (0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Image Dimensions:", value: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedVariant.width, " x ", selectedVariant.height] }) }), selectedVariant.aspectRatioLock && ((0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Required Aspect Ratio:", value: selectedVariant.aspectRatioLockText })), selectedVariant.minWidth && ((0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Minimum Width:", value: selectedVariant.minWidth })), selectedVariant.minHeight && ((0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Minimum Height:", value: selectedVariant.minHeight })), rect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Selection:", value: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [widthPx, " x ", heightPx] }) }), selectedVariant.minWidth &&
-                                                widthPx < selectedVariant.minWidth && ((0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: "Minimum width not met!" })), selectedVariant.minHeight &&
-                                                heightPx < selectedVariant.minHeight && ((0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: "Minimum height not met!" }))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative p-3", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 top-3 select-none flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { ref: imageRef, className: "relative cursor-crosshair max-h-full", style: {
+    return (_jsx(_Fragment, { children: _jsx(Dialog, { header: "Crop " + field.name + " - " + selectedVariantName, pt: { content: { style: { paddingLeft: "0" } } }, visible: true, style: { width: "75vw", height: "75vh" }, onHide: onClose, children: _jsxs("div", { className: "flex gap-1 flex-col justify h-full", children: [_jsxs("div", { className: "flex-1 flex gap-2", children: [_jsxs("div", { className: "w-56 text-sm p-4 bg-gray-100 flex flex-col gap-3", children: [_jsx(LabelAndValue, { label: "Variant:", value: selectedVariantName }), _jsx(LabelAndValue, { label: "Image Dimensions:", value: _jsxs(_Fragment, { children: [selectedVariant.width, " x ", selectedVariant.height] }) }), selectedVariant.aspectRatioLock && (_jsx(LabelAndValue, { label: "Required Aspect Ratio:", value: selectedVariant.aspectRatioLockText })), selectedVariant.minWidth && (_jsx(LabelAndValue, { label: "Minimum Width:", value: selectedVariant.minWidth })), selectedVariant.minHeight && (_jsx(LabelAndValue, { label: "Minimum Height:", value: selectedVariant.minHeight })), rect && (_jsxs(_Fragment, { children: [_jsx(LabelAndValue, { label: "Selection:", value: _jsxs(_Fragment, { children: [widthPx, " x ", heightPx] }) }), selectedVariant.minWidth &&
+                                                widthPx < selectedVariant.minWidth && (_jsx("div", { className: "text-red-500", children: "Minimum width not met!" })), selectedVariant.minHeight &&
+                                                heightPx < selectedVariant.minHeight && (_jsx("div", { className: "text-red-500", children: "Minimum height not met!" }))] }))] }), _jsx("div", { className: "flex-1 relative p-3", children: _jsx("div", { className: "absolute inset-0 top-3 select-none flex items-center justify-center", children: _jsxs("div", { ref: imageRef, className: "relative cursor-crosshair max-h-full", style: {
                                             aspectRatio: `${selectedVariant.width}/${selectedVariant.height}`,
-                                        }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, children: [(0, jsx_runtime_1.jsx)("img", { className: "object-scale-down", src: selectedVariant.originalSrc ?? selectedVariant.src }), rect && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("absolute bg-opacity-70 border text-xs cursor-move", isValid
+                                        }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, children: [_jsx("img", { className: "object-scale-down", src: selectedVariant.originalSrc ?? selectedVariant.src }), rect && (_jsx("div", { className: classNames("absolute bg-opacity-70 border text-xs cursor-move", isValid
                                                     ? "bg-blue-200 border-blue-400 text-blue-500"
                                                     : "bg-red-200 border-red-400 text-red-500"), style: {
                                                     left: rect.x * 100 + "%",
@@ -314,7 +308,7 @@ function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
                                                             ? `${resizeEdge}-resize`
                                                             : `${resizeEdge}-resize`
                                                         : "move",
-                                                }, children: widthPx / scale > 50 && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-1 right-2 text-nowrap", style: { textShadow: "white 1px 1px" }, children: [widthPx, " x ", heightPx] })) }))] }) }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setRect(undefined), children: "Reset" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", disabled: !isValid, onClick: () => {
+                                                }, children: widthPx / scale > 50 && (_jsxs("div", { className: "absolute bottom-1 right-2 text-nowrap", style: { textShadow: "white 1px 1px" }, children: [widthPx, " x ", heightPx] })) }))] }) }) })] }), _jsxs(DialogButtons, { children: [_jsx(Button, { onClick: () => setRect(undefined), children: "Reset" }), _jsx(Button, { size: "small", disabled: !isValid, onClick: () => {
                                     if (pictureValue) {
                                         if (field) {
                                             editContext?.operations.editField({
@@ -325,8 +319,8 @@ function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
                                         }
                                     }
                                     onClose();
-                                }, children: "Ok" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onClose, size: "small", children: "Cancel" })] })] }) }) }));
+                                }, children: "Ok" }), _jsx(Button, { onClick: onClose, size: "small", children: "Cancel" })] })] }) }) }));
 }
 function LabelAndValue({ label, value, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: label }), (0, jsx_runtime_1.jsx)("div", { children: value })] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: "font-bold", children: label }), _jsx("div", { children: value })] }));
 }

package/dist/editor/PictureEditor.d.ts

@@ -0,0 +1,8 @@
+import { PictureField } from "./fieldTypes";
+export declare function PictureEditor({ field, variantName, style, forwardScrollevents, isPageEditor, }: {
+    field: PictureField;
+    variantName: string;
+    style?: React.CSSProperties;
+    forwardScrollevents?: boolean;
+    isPageEditor?: boolean;
+}): import("react/jsx-runtime").JSX.Element;