@alpaca-headless/alpaca-headless-nextjs 1.0.129 → 1.0.246

package/dist/esm/components/RichText.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
+import React from "react";
+import { useAlpacaContext } from "../alpacaContext";
+import { RichTextEditorWrapper } from "./RichTextEditorWrapper";
+export function RichText(_a) {
+    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
+    if (!field)
+        return;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
+    const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
+            __html: field.value,
+        } });
+    if (useAlpacaContext().pageContext.pageEditing)
+        return (_jsx(RichTextEditorWrapper, Object.assign({ field: field, tag: tag }, props)));
+    return React.createElement(tag || "div", Object.assign(props, internalProps));
+}

package/dist/esm/components/RichTextEditor.js

@@ -0,0 +1,92 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useMemo, useCallback, useRef, } from "react";
+import { useEditContext } from "../editor/editContext";
+import { isFieldActionExecuting } from "../editor/utils";
+import { getFieldContextMenu } from "../editor/ContextMenu";
+import { LockedFieldIndicator } from "./LockedFieldIndicator";
+export function RichTextEditor(_a) {
+    var _b, _c, _d, _e;
+    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
+    const editContext = useEditContext();
+    const [value, setValue] = useState("");
+    const [editedValue, setEditedValue] = useState();
+    const ref = useRef(null);
+    if (!editContext)
+        return;
+    const { updateContentEditingFields } = editContext;
+    const liveField = editContext.getLiveField(field);
+    useEffect(() => {
+        if (!liveField)
+            return;
+        if (editedValue != liveField.value &&
+            "<p>" + editedValue + "</p>" != liveField.value) {
+            // console.log(
+            //   "editedValue:" + editedValue + " liveField.value " + liveField.value
+            // );
+            setValue(liveField.value);
+        }
+    }, [liveField === null || liveField === void 0 ? void 0 : liveField.value]);
+    useEffect(() => {
+        if (!liveField)
+            return;
+        setValue(liveField.value); // Otherwise react would not update the field after the refresh
+    }, [updateContentEditingFields]);
+    useEffect(() => {
+        if (liveField) {
+            setValue(field.value);
+            liveField.value = field.value;
+        }
+        editContext.registerAsRenderedField(field);
+    }, [field]);
+    const setFieldValue = (val) => {
+        if (val != editedValue) {
+            setEditedValue(val);
+            if (editContext)
+                editContext.editField({ field, value: val, refresh: "none" });
+        }
+    };
+    const eventHandler = useCallback((e) => {
+        setFieldValue(e.currentTarget.innerHTML);
+    }, [editContext.editField]);
+    let className = (_b = props.className) !== null && _b !== void 0 ? _b : "";
+    className += " a-cursor-text";
+    if (isFieldActionExecuting(field, editContext))
+        className += " a-executing-action a-focus-shadow ";
+    const isLocked = (((_c = liveField._editor) === null || _c === void 0 ? void 0 : _c.lockedBy) &&
+        ((_e = (_d = liveField._editor) === null || _d === void 0 ? void 0 : _d.lockedBy) === null || _e === void 0 ? void 0 : _e.sessionId) != editContext.sessionId) ||
+        false;
+    const onContextMenu = getFieldContextMenu(field, editContext, []);
+    return useMemo(() => {
+        var _a, _b;
+        const properies = Object.assign(Object.assign({}, props), { className, contentEditable: ((_a = field._editor) === null || _a === void 0 ? void 0 : _a.canWrite) && !isLocked, suppressContentEditableWarning: true, onInput: eventHandler, placeholder: "[" + ((_b = field._editor) === null || _b === void 0 ? void 0 : _b.name) + "]", dangerouslySetInnerHTML: {
+                __html: value,
+            }, onFocus: () => {
+                var _a;
+                editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
+            }, onBlur: () => {
+                editContext.setFocusedField(undefined, false);
+            }, onClick: () => {
+                var _a, _b, _c;
+                if (!((_a = field._editor) === null || _a === void 0 ? void 0 : _a.canWrite) || !((_b = field._editor) === null || _b === void 0 ? void 0 : _b.hasLock))
+                    editContext.setFocusedField((_c = field._editor) === null || _c === void 0 ? void 0 : _c.descriptor, true);
+            }, onContextMenu,
+            ref });
+        const element = React.createElement(tag || "div", properies);
+        if (isLocked) {
+            return (_jsxs(_Fragment, { children: [_jsx(LockedFieldIndicator, { field: liveField, elementRef: ref }), " ", element] }));
+        }
+        return element;
+    }, [value, className, isLocked, ref]);
+}

package/dist/esm/components/RichTextEditorWrapper.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const RichTextEditor = dynamic(() => import("./RichTextEditor").then((dnd) => dnd.RichTextEditor), { ssr: false });
+export function RichTextEditorWrapper(props) {
+    return _jsx(RichTextEditor, Object.assign({}, props));
+}

package/dist/esm/components/Slot.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import "server-only";
+import { Placeholder } from "./Placeholder";
+export default function Section({ component }) {
+    return (_jsx(_Fragment, { children: _jsx(Placeholder, { name: "ph-slot-content", content: component }) }));
+}

package/dist/esm/components/Text.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
+import React from "react";
+import { useAlpacaContext } from "../alpacaContext";
+import { TextEditorWrapper } from "./TextEditorWrapper";
+export function Text(_a) {
+    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
+    if (!field)
+        return;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
+    if (useAlpacaContext().pageContext.pageEditing) {
+        return (_jsx("div", { children: _jsx(TextEditorWrapper, Object.assign({ field: field, tag: tag }, props)) }));
+    }
+    else
+        return React.createElement(tag || "div", props, field.value);
+}

package/dist/esm/components/TextEditor.js

@@ -0,0 +1,78 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../editor/editContext";
+import { isFieldActionExecuting } from "../editor/utils";
+import { getFieldContextMenu } from "../editor/ContextMenu";
+import { LockedFieldIndicator } from "./LockedFieldIndicator";
+export function TextEditor(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
+    const editContext = useEditContext();
+    const [value, setValue] = useState("");
+    const [editedValue, setEditedValue] = useState();
+    const ref = useRef(null);
+    if (!editContext)
+        return;
+    const { updateContentEditingFields } = editContext;
+    const liveField = editContext.getLiveField(field);
+    useEffect(() => {
+        if (!liveField)
+            return;
+        if (editedValue != liveField.value)
+            setValue(liveField.value);
+    }, [liveField === null || liveField === void 0 ? void 0 : liveField.value]);
+    useEffect(() => {
+        if (liveField) {
+            setValue(field.value);
+            liveField.value = field.value;
+        }
+        editContext.registerAsRenderedField(field);
+    }, [field]);
+    useEffect(() => {
+        if (!liveField)
+            return;
+        setValue(liveField.value); // Otherwise react would not update the field after the refresh
+    }, [updateContentEditingFields]);
+    let className = (_b = props.className) !== null && _b !== void 0 ? _b : "";
+    className += " a-cursor-text";
+    if (isFieldActionExecuting(field, editContext)) {
+        className += " a-executing-action a-focus-shadow ";
+    }
+    const onContextMenu = getFieldContextMenu(field, editContext, []);
+    const isLocked = (((_c = liveField._editor) === null || _c === void 0 ? void 0 : _c.lockedBy) &&
+        ((_e = (_d = liveField._editor) === null || _d === void 0 ? void 0 : _d.lockedBy) === null || _e === void 0 ? void 0 : _e.sessionId) != editContext.sessionId) ||
+        false;
+    const properies = Object.assign(Object.assign({}, props), { className, contentEditable: ((_f = field._editor) === null || _f === void 0 ? void 0 : _f.canWrite) && !isLocked, suppressContentEditableWarning: true, onInput: (e) => setFieldValue(e.currentTarget.textContent), placeholder: "[" + ((_g = field._editor) === null || _g === void 0 ? void 0 : _g.name) + "]", onFocus: () => {
+            var _a;
+            editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
+        }, onBlur: () => {
+            editContext.setFocusedField(undefined, false);
+        }, onClick: () => {
+            var _a, _b, _c;
+            if (!((_a = field._editor) === null || _a === void 0 ? void 0 : _a.canWrite) || !((_b = field._editor) === null || _b === void 0 ? void 0 : _b.hasLock))
+                editContext.setFocusedField((_c = field._editor) === null || _c === void 0 ? void 0 : _c.descriptor, true);
+        }, ref,
+        onContextMenu });
+    const setFieldValue = (val) => {
+        setEditedValue(val);
+        if (editContext)
+            editContext.editField({ field, value: val, refresh: "none" });
+    };
+    const element = React.createElement(tag || "div", properies, value);
+    if (isLocked) {
+        return (_jsxs(_Fragment, { children: [_jsx(LockedFieldIndicator, { elementRef: ref, field: liveField }), " ", element] }));
+    }
+    return element;
+}

package/dist/esm/components/TextEditorWrapper.js

@@ -0,0 +1,19 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const TextEditor = dynamic(() => import("./TextEditor").then((dnd) => dnd.TextEditor), { ssr: false });
+export function TextEditorWrapper(_a) {
+    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
+    return _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props));
+}

package/dist/esm/components/Translate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
+import { useAlpacaContext } from "../alpacaContext";
+import dynamic from "next/dynamic";
+const TranslateEditor = dynamic(() => import("./TranslateEditor").then((dnd) => dnd.TranslateEditor), { ssr: false });
+export function Translate({ text }) {
+    const context = useAlpacaContext();
+    const dictionary = context.dictionary;
+    if (context.pageContext.pageEditing)
+        return _jsx(TranslateEditor, { text: text });
+    return dictionary[text] || text;
+}

package/dist/esm/components/TranslateEditor.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useEditContext } from "../editor/editContext";
+import { TextEditor } from "./TextEditor";
+export function TranslateEditor({ text }) {
+    const context = useEditContext();
+    if (!context || !context.dictionary)
+        return text;
+    const dictionary = context.dictionary;
+    useEffect(() => {
+        if (Object.keys(dictionary).indexOf(text) < 0 &&
+            context.unresolvedDictionaryKeys.indexOf(text) < 0) {
+            context.setUnresolvedDictionaryKeys([
+                ...context.unresolvedDictionaryKeys,
+                text,
+            ]);
+        }
+    }, []);
+    if (dictionary[text]) {
+        return _jsx(TextEditor, { field: dictionary[text] });
+    }
+    return (_jsx("span", { className: "a-p-1 a-ring-2 a-ring-red-500", onClick: () => console.log("create dictionary entry"), children: text }));
+}

package/dist/esm/components/index.js

@@ -0,0 +1,7 @@
+export * from "./Placeholder";
+export * from "./Text";
+export * from "./Picture";
+export * from "./RichText";
+export * from "./Image";
+export * from "./Link";
+export * from "./Translate";

package/dist/esm/components/picture-shared.js

@@ -0,0 +1,26 @@
+export function getRenderedPictureVariant(params, variants) {
+    var _a, _b;
+    const variantName = (_a = params.variant) !== null && _a !== void 0 ? _a : "auto";
+    const variant = variantName.toLocaleLowerCase() === "auto" && params.aspectRatio
+        ? getBestMatchingVariant(variants, params.aspectRatio)
+        : (_b = variants.find((v) => v.name.toLowerCase() == variantName.toLowerCase())) !== null && _b !== void 0 ? _b : variants[0];
+    return variant;
+}
+export function getBestMatchingVariant(variants, aspectRatio) {
+    var _a;
+    if (!aspectRatio)
+        return ((_a = variants.find((v) => v.name.toLowerCase() == "default")) !== null && _a !== void 0 ? _a : variants[0]);
+    let minDistance = 1000000;
+    let bestMatch = undefined;
+    for (let i = 0; i < variants.length; i++) {
+        const variant = variants[i];
+        if (!variant.src)
+            continue;
+        const distance = Math.abs(aspectRatio - variant.aspectRatio);
+        if (distance < minDistance) {
+            minDistance = distance;
+            bestMatch = variant;
+        }
+    }
+    return bestMatch !== null && bestMatch !== void 0 ? bestMatch : variants[0];
+}

package/dist/esm/editor/ComponentInfo.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
+import { Section } from "./ui/Section";
+export function ComponentInfo({ component, }) {
+    var _a;
+    if (!(component === null || component === void 0 ? void 0 : component.fields))
+        return;
+    const hostingPageItem = component._editor.hostingPageItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "a-font-bold", children: "Source:" }), _jsxs("div", { children: [component._editor.hostingPageItem.path, " (ID:", " ", component._editor.hostingPageItem.id, ")"] })] })) : null;
+    const linkedComponent = component._editor.linkedComponentItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "a-font-bold", children: "Source:" }), _jsxs("div", { children: [component._editor.linkedComponentItem.path, " (", component._editor.linkedComponentItem.id, ")"] })] })) : null;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "a-py-3 a-px-3 a-text-l a-font-bold a-my-2", children: component.name }), _jsx(Section, { title: "Info", children: _jsxs("div", { className: "a-grid a-grid-cols-[min-content_1fr] a-gap-3 a-text-xs a-bg-gray-100", children: [_jsx("div", { className: "a-font-bold", children: "ID:" }), _jsxs("div", { children: [component.id, " ", _jsx(CopyToClipboardButton, { text: component.id })] }), _jsx("div", { className: "a-font-bold", children: "Template" }), _jsxs("div", { children: [component.componentType, " (", component.templateId, _jsx(CopyToClipboardButton, { text: component.templateId }), ")"] }), _jsx("div", { className: "a-font-bold", children: "Languages" }), _jsx("div", { children: (_a = component._editor.translations) === null || _a === void 0 ? void 0 : _a.join(", ") }), hostingPageItem, linkedComponent] }) })] }));
+}

package/dist/esm/editor/ConfirmationDialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useImperativeHandle } from "react";
+import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
+const ConfirmationDialog = forwardRef((_props, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [props, setProps] = useState();
+    useImperativeHandle(ref, () => ({
+        confirm: (props) => {
+            setVisible(true);
+            setProps(props);
+        },
+    }));
+    const handleAccept = () => {
+        props === null || props === void 0 ? void 0 : props.accept();
+        setVisible(false);
+    };
+    const handleReject = () => {
+        if (props === null || props === void 0 ? void 0 : props.reject)
+            props.reject();
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+    const dialogFooter = (_jsxs("div", { children: [_jsx(Button, { label: (props === null || props === void 0 ? void 0 : props.acceptLabel) || "Yes", icon: (props === null || props === void 0 ? void 0 : props.acceptIcon) || "pi pi-check", onClick: handleAccept, className: "p-button-text" }), (props === null || props === void 0 ? void 0 : props.rejectLabel) && (_jsx(Button, { label: props === null || props === void 0 ? void 0 : props.rejectLabel, icon: (props === null || props === void 0 ? void 0 : props.rejectIcon) || "pi pi-times", onClick: handleReject, className: "p-button-text" })), (props === null || props === void 0 ? void 0 : props.showCancel) && (_jsx(Button, { label: "Cancel", icon: "pi pi-ban", onClick: handleCancel, className: "p-button-text" }))] }));
+    return (_jsx(Dialog, { header: (props === null || props === void 0 ? void 0 : props.header) || "Confirm", visible: visible, style: { width: "50vw" }, footer: dialogFooter, onHide: handleCancel, children: _jsxs("div", { className: "a-pt-3 a-flex a-items-center a-gap-2", children: [(props === null || props === void 0 ? void 0 : props.icon) && _jsx("i", { className: props.icon + " a-text-3xl" }), props === null || props === void 0 ? void 0 : props.message] }) }));
+});
+export default ConfirmationDialog;

package/dist/{cjs → esm}/editor/ContentTree.js

@@ -1,4 +1,3 @@
-"use strict";
 "use client";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -9,29 +8,26 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const progressspinner_1 = require("primereact/progressspinner");
-const __1 = require("..");
-const tree_1 = require("primereact/tree");
-const react_1 = require("react");
-const contentService_1 = require("./contentService");
-const contextmenu_1 = require("primereact/contextmenu");
-const editService_1 = require("./editService");
-const ItemNameDialog_1 = __importDefault(require("./ItemNameDialog"));
-function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, secondarySelectedItemId, }) {
-    const [treeNodes, setTreeNodes] = (0, react_1.useState)([]);
-    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)();
-    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)();
-    const treeContainerRef = (0, react_1.useRef)(null);
-    const editContext = (0, __1.useEditContext)();
-    const [selectedNodeScrolledIntoView, setSelectedNodeScrolledIntoView] = (0, react_1.useState)(false);
-    const cm = (0, react_1.useRef)(null);
-    const [menu, setMenu] = (0, react_1.useState)([]);
-    const itemNameDialogRef = (0, react_1.useRef)(null);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { useEditContext } from ".";
+import { Tree, } from "primereact/tree";
+import { useEffect, useRef, useState } from "react";
+import { getChildren } from "./services/contentService";
+import { ContextMenu } from "primereact/contextmenu";
+import { createItem, loadInsertOptions } from "./services/editService";
+import ItemNameDialog from "./ItemNameDialog";
+import { getDeleteItemCommand } from "./itemCommands";
+export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, secondarySelectedItemId, }) {
+    const [treeNodes, setTreeNodes] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState();
+    const [expandedKeys, setExpandedKeys] = useState();
+    const treeContainerRef = useRef(null);
+    const editContext = useEditContext();
+    const [selectedNodeScrolledIntoView, setSelectedNodeScrolledIntoView] = useState(false);
+    const cm = useRef(null);
+    const [menu, setMenu] = useState([]);
+    const itemNameDialogRef = useRef(null);
     const loadOnExpand = (event) => __awaiter(this, void 0, void 0, function* () {
         const node = event.node;
         yield loadChildren(node);
@@ -40,7 +36,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         return __awaiter(this, void 0, void 0, function* () {
             if (!node.children) {
                 node.loading = true;
-                const nodes = yield loadNodeChildren(node.key);
+                const nodes = yield loadNodeChildren(node);
                 node.children = nodes;
                 let value = [...treeNodes];
                 setTreeNodes(value);
@@ -52,10 +48,10 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         node.children = undefined;
         loadChildren(node);
     }
-    const loadNodeChildren = (id) => __awaiter(this, void 0, void 0, function* () {
+    const loadNodeChildren = (node) => __awaiter(this, void 0, void 0, function* () {
         if (!editContext)
             return [];
-        let children = yield (0, contentService_1.getChildren)(id, editContext.sessionId, templateIds, includeEmbeddedItems !== null && includeEmbeddedItems !== void 0 ? includeEmbeddedItems : false);
+        let children = yield getChildren(node.key, editContext.sessionId, templateIds, includeEmbeddedItems !== null && includeEmbeddedItems !== void 0 ? includeEmbeddedItems : false);
         if (filter)
             children = filter(children);
         return children.map((x) => ({
@@ -65,9 +61,10 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
             isDraggable: isDraggable && isDraggable(x),
             data: x,
             leaf: !x.hasChildren,
+            parent: node,
         }));
     });
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const newExpandedKeys = getExpandedKeys();
         setExpandedKeys(newExpandedKeys);
         preLoadNodes(newExpandedKeys);
@@ -87,7 +84,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
     }
     function preLoadNodes(expandedKeys) {
         return __awaiter(this, void 0, void 0, function* () {
-            const rootNodes = yield loadNodeChildren(rootItemId);
+            const rootNodes = yield loadNodeChildren({ key: rootItemId });
             yield doPreloadNodes(expandedKeys, rootNodes);
             setExpandedKeys(Object.assign({}, expandedKeys));
             setTreeNodes([...rootNodes]);
@@ -97,7 +94,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         return __awaiter(this, void 0, void 0, function* () {
             for (let i = 0; i < treeNodes.length; i++) {
                 if (expandedKeys[treeNodes[i].key]) {
-                    const children = yield loadNodeChildren(treeNodes[i].key);
+                    const children = yield loadNodeChildren(treeNodes[i]);
                     treeNodes[i].children = children;
                     yield doPreloadNodes(expandedKeys, children);
                 }
@@ -115,13 +112,13 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         });
     }
     const nodeTemplate = (node, options) => {
-        let label = (0, jsx_runtime_1.jsx)("span", { children: node.label });
+        let label = _jsx("span", { children: node.label });
         if (node.url) {
-            label = ((0, jsx_runtime_1.jsx)("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
+            label = (_jsx("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
         }
-        return ((0, jsx_runtime_1.jsxs)("span", { onDragStart: (event) => {
+        return (_jsxs("span", { onDragStart: (event) => {
                 handleDragStart(event, node.data);
-            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-items-center a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}   ${node.data.id == secondarySelectedItemId ? "a-selected-secondary" : ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && ((0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
+            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-items-center a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}   ${node.data.id == secondarySelectedItemId ? "a-selected-secondary" : ""}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), label, node.loading && (_jsx(ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
     };
     function handleDragStart(event, item) {
         if (dragStart)
@@ -132,7 +129,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         if (dragEnd)
             dragEnd();
     }
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const newSelectedKeys = {};
         selectedItemIds === null || selectedItemIds === void 0 ? void 0 : selectedItemIds.forEach((x) => {
             if (x.startsWith("{") && x.endsWith("}") && x.length > 2)
@@ -146,7 +143,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         else
             setSelectedKeys(newSelectedKeys);
     }, [selectedItemIds]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const scrollNodeIntoView = () => {
             if (!treeContainerRef.current)
                 return;
@@ -167,16 +164,16 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         var _a;
         (_a = itemNameDialogRef.current) === null || _a === void 0 ? void 0 : _a.show({
             accept: (name) => __awaiter(this, void 0, void 0, function* () {
-                yield (0, editService_1.createItem)(parent, templateId, name);
+                yield createItem(parent, templateId, name);
                 editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
                 node.expanded = true;
                 refreshNode(node);
             }),
         });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ItemNameDialog_1.default, { ref: itemNameDialogRef }), (0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menu, ref: cm, className: "a-text-sm" }), (0, jsx_runtime_1.jsx)("div", { className: className, onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), ref: treeContainerRef, children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeNodes, expandedKeys: expandedKeys, onToggle: (e) => setExpandedKeys(e.value), nodeTemplate: nodeTemplate, 
+    return (_jsxs(_Fragment, { children: [_jsx(ItemNameDialog, { ref: itemNameDialogRef }), _jsx(ContextMenu, { model: menu, ref: cm, className: "a-text-sm" }), _jsx("div", { className: className, onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), ref: treeContainerRef, children: _jsx(Tree, { value: treeNodes, expandedKeys: expandedKeys, onToggle: (e) => setExpandedKeys(e.value), nodeTemplate: nodeTemplate, 
                     //dragdropScope={isDraggable ? "alpaca" : undefined}
-                    className: "a-w-full a-h-full alpaca-no-border a-p-0 a-text-xs", onExpand: loadOnExpand, selectionMode: selectionMode, pt: { container: { className: "a-h-full" } }, onNodeDoubleClick: (e) => {
+                    className: "a-w-full a-h-full alpaca-no-border a-p-0 a-text-xs", onExpand: loadOnExpand, selectionMode: selectionMode == "none" ? undefined : selectionMode, pt: { container: { className: "a-h-full" } }, onNodeDoubleClick: (e) => {
                         onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e.node.data);
                     }, onSelectionChange: (ev) => {
                         if (onSelectionChange && selectionMode == "multiple") {
@@ -190,26 +187,38 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
                             onSelectionChange(nodeDictionary[ev.value].data);
                         }
                     }, selectionKeys: selectedKeys, onContextMenu: (e) => __awaiter(this, void 0, void 0, function* () {
-                        var _a;
+                        var _a, _b;
                         e.originalEvent.preventDefault();
                         const item = e.node.data;
-                        var insertOptions = yield (0, editService_1.loadInsertOptions)(item);
-                        setMenu([
+                        const insertOptions = yield loadInsertOptions(item);
+                        const contextMenuItems = [
                             {
                                 label: "Insert",
                                 disabled: insertOptions.length == 0,
+                                icon: "pi pi-plus",
                                 items: insertOptions.length === 0
                                     ? undefined
                                     : insertOptions.map((x) => ({
                                         label: x.name,
-                                        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: () => {
                                             insertItem(e.node, item, x.id);
                                         },
                                     })),
                             },
-                        ]);
-                        (_a = cm.current) === null || _a === void 0 ? void 0 : _a.show(e.originalEvent);
+                            {
+                                label: "Delete",
+                                icon: "pi pi-trash",
+                                command: getDeleteItemCommand(item, editContext, () => {
+                                    const parent = e.node.parent;
+                                    if (parent) {
+                                        refreshNode(parent);
+                                    }
+                                }),
+                                disabled: item.id == ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.page) === null || _a === void 0 ? void 0 : _a.id),
+                            },
+                        ];
+                        setMenu(contextMenuItems);
+                        (_b = cm.current) === null || _b === void 0 ? void 0 : _b.show(e.originalEvent);
                     }) }) })] }));
 }
-exports.default = ContentTree;