@alpaca-editor/core 1.0.3767 → 1.0.3768

package/dist/config/types.d.ts

@@ -0,0 +1,223 @@
+import { ComponentType, ReactNode, Dispatch, SetStateAction } from "react";
+import { EditContextType } from "../editor/client/editContext";
+import { Command, CommandData } from "../editor/commands/commands";
+import { EditorWarningProps } from "../editor/EditorWarnings";
+import { Field, FieldButton, FullItem, ItemDescriptor } from "../editor/pageModel";
+import { InsertItemCommand, ItemCommand } from "../editor/commands/itemCommands";
+import { User } from "../types";
+import { WizardData, WizardPageModel } from "../page-wizard/PageWizard";
+import { Wizard } from "../page-wizard/PageWizard";
+import { DialogContextValue } from "../editor/client/DialogContext";
+export type RichTextEditorProfile = {
+    toolbar: {
+        groups: RichTextEditorToolbarGroup[];
+    };
+};
+export type ClientFieldButton = FieldButton & {
+    clientAction?: FieldAction;
+};
+export type FieldAction = ({ editContext, dialogContext, }: FieldActionProps) => Promise<any> | void;
+export type FieldActionProps = {
+    editContext: EditContextType;
+    dialogContext: DialogContextValue;
+    field: Field;
+};
+export type RichTextEditorToolbarGroup = {
+    items: RichTextEditorToolbarItem[];
+};
+export type RichTextEditorToolbarItem = string | {};
+export type EditorClientBuilderProps = {
+    configuration: EditorConfiguration;
+    buildClient: (configuration: EditorConfiguration) => ReactNode;
+    user: User;
+};
+export type Panel = {
+    name: string;
+    title: string;
+    icon?: string | React.JSX.Element;
+    header?: ComponentType;
+    content: ReactNode;
+    initialSize: number;
+    noOverflow?: boolean;
+};
+export type PanelFactory = (editContext: EditContextType) => Panel;
+export type Sidebar = {
+    panels: (Panel | PanelFactory)[];
+    title?: string;
+};
+export type EditorView = {
+    name: string;
+    extends?: string;
+    title?: string;
+    icon?: string | React.JSX.Element;
+    defaultCenterPanelView?: ReactNode;
+    menuBar?: ReactNode;
+    leftSidebar?: Sidebar;
+    rightSidebar?: Sidebar;
+    hidden?: boolean;
+    primaryControls?: ReactNode;
+    secondaryControls?: ReactNode;
+    hideViewSelector?: boolean;
+};
+export type ViewPanel = {
+    name: string;
+    content: ReactNode;
+};
+export type MenuItem = {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    items?: MenuItem[];
+    command?: (event: any) => Promise<void>;
+};
+export type EditorConfiguration = {
+    extensions: {
+        [key: string]: unknown;
+    };
+    commands: {
+        renameItem: ItemCommand;
+        deleteItem: ItemCommand;
+        insertItem: InsertItemCommand;
+        publishItem: ItemCommand;
+        allItemCommands: ItemCommand[];
+        reviewcommands: Command<CommandData>[];
+    };
+    events: {
+        onUnauthorized?: () => void;
+    };
+    services: {
+        renderService: {
+            path?: string;
+        };
+        editorService: {};
+        aiService: {
+            promptUrl: string;
+        };
+    };
+    editorWarnings: ComponentType<EditorWarningProps>[];
+    fieldTypes: {
+        [key: string]: FieldTypeConfiguration;
+    };
+    outline: {
+        width: number;
+    };
+    debounceFieldEditsInterval: number;
+    devices: Device[];
+    pageWizard: {
+        getWizards: (parentItem: ItemDescriptor) => Promise<Wizard[]>;
+        startWizardCommand: Command<{
+            wizard: Wizard;
+            item: ItemDescriptor;
+        }>;
+        stepComponents: {
+            [key: string]: ComponentType<StepComponentProps>;
+        };
+    };
+    editor: {
+        defaultPanelSizes: [number, number];
+        dialogs: {
+            newPage: {
+                expandTreeNode?: string;
+            };
+        };
+        views: EditorView[];
+        actionsMenu?: {
+            itemsFactory: (editContext: EditContextType) => MenuItem[];
+        };
+        mainNavigation?: (MenuItem | Command<any>)[];
+        embedded?: boolean;
+        titlebar: ReactNode;
+        contentTree: {
+            contextMenu: {
+                factory: (props: {
+                    items: FullItem[];
+                    editContext: EditContextType;
+                    commandCallback?: (command: ItemCommand, result: any) => void;
+                }) => Promise<MenuItem[] | undefined>;
+            };
+        };
+    };
+    controlCenter: {
+        groups: {
+            title: string;
+            icon: ReactNode;
+            panels: ControlCenterPanel[];
+        }[];
+    };
+    tours: {
+        default: Tour;
+        preview: Tour;
+    };
+    activeTour: string;
+};
+export type Tour = {
+    getSteps: (params: GetEditorTourStepsParams) => Record<string, TourStep>;
+};
+export type ControlCenterPanel = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    content: ReactNode;
+};
+export type Device = {
+    name: string;
+    width: number | undefined;
+    height: number | undefined;
+};
+export type FieldTypeConfiguration = {
+    editor: React.ComponentType<any>;
+    buttons?: FieldButton[];
+    custom?: any;
+};
+export type TourButton = {
+    label: ReactNode;
+    onClick: () => void;
+    className?: string;
+};
+export type TourStep = {
+    title?: ReactNode;
+    description?: ReactNode;
+    focusElement?: string;
+    extendFocus?: number;
+    prepareAction?: () => Promise<void>;
+    action?: () => Promise<void>;
+    bubblePosition?: "left" | "right" | "bottom" | "top-right";
+    flipArrow?: boolean;
+    waitForUserInput?: () => Promise<string | void>;
+    buttons?: TourButton[];
+    nextStep?: string;
+    waitForElement?: string;
+    getPointTo?: () => DOMRect | undefined;
+    pointToElement?: string;
+};
+export type GetEditorTourStepsParams = {
+    editContext: EditContextType;
+    nextStep: (stepId: string) => void;
+    stopTour: () => void;
+    waitForElement: (selector: string, timeout?: number) => Promise<DOMRect | undefined>;
+    waitForElementToDisappear: (selector: string) => Promise<void>;
+    setFocusRect: (rect: DOMRect) => void;
+    delay: (ms: number) => Promise<void>;
+    waitForInput: (selector: string, minNumberOfCharacters: number) => Promise<void>;
+    simulateTyping: (element: HTMLInputElement | HTMLTextAreaElement, text: string, interval?: number) => Promise<void>;
+};
+export type TranslationStatus = {
+    itemId: string;
+    targetLanguage: string;
+    sourceLanguage: string;
+    status: string;
+    timestamp: string;
+    message?: string;
+};
+export interface StepComponentProps {
+    step: any;
+    data: WizardData;
+    setData: React.Dispatch<React.SetStateAction<WizardData>>;
+    wizard: Wizard;
+    parentItem?: ItemDescriptor;
+    setStepCompleted: (completed: boolean) => void;
+    internalState: any;
+    setInternalState: Dispatch<SetStateAction<any>>;
+    pageModel: WizardPageModel;
+    setPageModel: Dispatch<SetStateAction<WizardPageModel>>;
+}

package/dist/config/types.js

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

package/dist/editor/ComponentInfo.d.ts

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

package/dist/editor/ComponentInfo.js

@@ -1,18 +1,15 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentInfo = ComponentInfo;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const CopyToClipboardButton_1 = require("./ui/CopyToClipboardButton");
-const Section_1 = require("./ui/Section");
-const editContext_1 = require("./client/editContext");
-function ComponentInfo({ component }) {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
+import { Section } from "./ui/Section";
+import { useEditContext } from "./client/editContext";
+export function ComponentInfo({ component }) {
     if (!component)
         return null;
-    const editContext = (0, editContext_1.useEditContext)();
-    const [layoutItem, setLayoutItem] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
+    const editContext = useEditContext();
+    const [layoutItem, setLayoutItem] = useState();
+    useEffect(() => {
         if (!component.layoutId) {
             setLayoutItem(undefined);
             return;
@@ -25,7 +22,7 @@ function ComponentInfo({ component }) {
         })
             .then(setLayoutItem);
     }, [component.layoutId]);
-    const hostingPageItem = layoutItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Source:" }), (0, jsx_runtime_1.jsxs)("div", { children: [layoutItem.path, " ID: ", layoutItem.id] })] })) : null;
-    const linkedComponent = component.datasourceItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Source:" }), (0, jsx_runtime_1.jsxs)("div", { children: [component.datasourceItem.path, " (", component.datasourceItem.id, ")"] })] })) : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "py-3 px-3 text-l font-bold my-2", children: component.name }), (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 bg-gray-100", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "ID:" }), (0, jsx_runtime_1.jsxs)("div", { children: [component.id, " ", (0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: component.id })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Template" }), (0, jsx_runtime_1.jsxs)("div", { children: ["(", component.datasourceItem?.templateId, component.datasourceItem && ((0, jsx_runtime_1.jsx)(CopyToClipboardButton_1.CopyToClipboardButton, { text: component.datasourceItem.templateId })), ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: "Languages" }), (0, jsx_runtime_1.jsx)("div", { children: component.datasourceItem?.translations?.join(", ") }), hostingPageItem, linkedComponent] }) })] }));
+    const hostingPageItem = layoutItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-bold", children: "Source:" }), _jsxs("div", { children: [layoutItem.path, " ID: ", layoutItem.id] })] })) : null;
+    const linkedComponent = component.datasourceItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-bold", children: "Source:" }), _jsxs("div", { children: [component.datasourceItem.path, " (", component.datasourceItem.id, ")"] })] })) : null;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "py-3 px-3 text-l font-bold my-2", children: component.name }), _jsx(Section, { title: "Info", children: _jsxs("div", { className: "grid grid-cols-[min-content_1fr] gap-3 text-xs bg-gray-100", children: [_jsx("div", { className: "font-bold", children: "ID:" }), _jsxs("div", { children: [component.id, " ", _jsx(CopyToClipboardButton, { text: component.id })] }), _jsx("div", { className: "font-bold", children: "Template" }), _jsxs("div", { children: ["(", component.datasourceItem?.templateId, component.datasourceItem && (_jsx(CopyToClipboardButton, { text: component.datasourceItem.templateId })), ")"] }), _jsx("div", { className: "font-bold", children: "Languages" }), _jsx("div", { children: component.datasourceItem?.translations?.join(", ") }), hostingPageItem, linkedComponent] }) })] }));
 }

package/dist/editor/ConfirmationDialog.d.ts

@@ -0,0 +1,19 @@
+export type ConfirmationDialogProps = {};
+export type ConfirmationProps = {
+    message: React.ReactNode;
+    acceptIcon?: string;
+    rejectIcon?: string;
+    header?: React.ReactNode;
+    acceptLabel?: string;
+    rejectLabel?: string;
+    icon?: string;
+    accept: () => void;
+    reject?: () => void;
+    showCancel?: boolean;
+    showAccept?: boolean;
+};
+export interface ConfirmationDialogHandle {
+    confirm: (props: ConfirmationProps) => void;
+}
+declare const ConfirmationDialog: import("react").ForwardRefExoticComponent<import("react").RefAttributes<ConfirmationDialogHandle>>;
+export default ConfirmationDialog;

package/dist/editor/ConfirmationDialog.js

@@ -1,14 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dialog_1 = require("primereact/dialog");
-const button_1 = require("primereact/button");
-const ConfirmationDialog = (0, react_1.forwardRef)((_props, ref) => {
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    const [props, setProps] = (0, react_1.useState)();
+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();
     const showAccept = props?.accept === undefined ? true : props.accept;
-    (0, react_1.useImperativeHandle)(ref, () => ({
+    useImperativeHandle(ref, () => ({
         confirm: (props) => {
             setVisible(true);
             setProps(props);
@@ -26,7 +24,7 @@ const ConfirmationDialog = (0, react_1.forwardRef)((_props, ref) => {
     const handleCancel = () => {
         setVisible(false);
     };
-    const dialogFooter = ((0, jsx_runtime_1.jsxs)("div", { children: [showAccept && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: props?.acceptLabel || "Yes", icon: props?.acceptIcon || "pi pi-check", onClick: handleAccept, className: "p-button-text" })), props?.rejectLabel && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: props?.rejectLabel, icon: props?.rejectIcon || "pi pi-times", onClick: handleReject, className: "p-button-text" })), props?.showCancel && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Cancel", icon: "pi pi-ban", onClick: handleCancel, className: "p-button-text" }))] }));
-    return (visible && ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: props?.header || "Confirm", visible: visible, style: { maxWidth: "50vw" }, footer: dialogFooter, onHide: handleCancel, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 p-3", children: [props?.icon && (0, jsx_runtime_1.jsx)("i", { className: props.icon + " text-3xl" }), props?.message] }) })));
+    const dialogFooter = (_jsxs("div", { children: [showAccept && (_jsx(Button, { label: props?.acceptLabel || "Yes", icon: props?.acceptIcon || "pi pi-check", onClick: handleAccept, className: "p-button-text" })), props?.rejectLabel && (_jsx(Button, { label: props?.rejectLabel, icon: props?.rejectIcon || "pi pi-times", onClick: handleReject, className: "p-button-text" })), props?.showCancel && (_jsx(Button, { label: "Cancel", icon: "pi pi-ban", onClick: handleCancel, className: "p-button-text" }))] }));
+    return (visible && (_jsx(Dialog, { header: props?.header || "Confirm", visible: visible, style: { maxWidth: "50vw" }, footer: dialogFooter, onHide: handleCancel, children: _jsxs("div", { className: "flex items-center gap-2 p-3", children: [props?.icon && _jsx("i", { className: props.icon + " text-3xl" }), props?.message] }) })));
 });
-exports.default = ConfirmationDialog;
+export default ConfirmationDialog;

package/dist/editor/ContentTree.d.ts

@@ -0,0 +1,35 @@
+import { ItemTreeNodeData } from "./services/contentService";
+import { ItemDescriptor } from "./pageModel";
+import { TreeNode } from "./ui/PerfectTree";
+type CustomTreeNode = TreeNode & {
+    isDraggable?: boolean;
+    iconUrl?: string;
+    url?: string;
+    loading?: boolean;
+    parent?: CustomTreeNode;
+    selectable?: boolean;
+    className?: string;
+};
+export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, rootItemIds, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, selectPagesOnly, renderNode, onItemInserted, language, includeItemPath, }: {
+    isDraggable?: (item: ItemTreeNodeData) => boolean;
+    dragStart?: (item: ItemTreeNodeData) => void;
+    dragEnd?: () => void;
+    expandIdPath?: string;
+    selectionMode?: "single" | "multiple" | "none";
+    rootItemId?: string;
+    rootItemIds?: string[];
+    selectedItemIds?: string[];
+    onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
+    onNodeClick?: (item: ItemTreeNodeData) => void;
+    filter?: (items: ItemTreeNodeData[]) => ItemTreeNodeData[];
+    templateIds?: string[];
+    className?: string;
+    includeEmbeddedItems?: boolean;
+    onDoubleClick?: (item: ItemTreeNodeData) => void;
+    selectPagesOnly?: boolean;
+    onItemInserted?: (item: ItemDescriptor) => void;
+    renderNode?: (node: CustomTreeNode, defaultRenderer: (node: CustomTreeNode) => React.ReactNode) => React.ReactNode;
+    language: string;
+    includeItemPath?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor/ContentTree.js

@@ -1,41 +1,38 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ContentTree;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const editContext_1 = require("./client/editContext");
-const react_1 = require("react");
-const contentService_1 = require("./services/contentService");
-const contextmenu_1 = require("primereact/contextmenu");
-const ItemNameDialog_1 = require("./ui/ItemNameDialog");
-const utils_1 = require("./utils");
-const Spinner_1 = require("./ui/Spinner");
-const PerfectTree_1 = require("./ui/PerfectTree");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext, useEditContextRef } from "./client/editContext";
+import { useCallback, useEffect, useRef, useState, useMemo, memo } from "react";
+import { getChildren } from "./services/contentService";
+import { ContextMenu } from "primereact/contextmenu";
+import { ItemNameDialog } from "./ui/ItemNameDialog";
+import { getAbsoluteIconUrl } from "./utils";
+import { Spinner } from "./ui/Spinner";
+import { PerfectTree } from "./ui/PerfectTree";
 // Create a memoized version of PerfectTree
-const MemoizedPerfectTree = (0, react_1.memo)(PerfectTree_1.PerfectTree);
-function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, rootItemIds, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, selectPagesOnly, renderNode, onItemInserted, language, includeItemPath, }) {
-    const [treeNodes, setTreeNodes] = (0, react_1.useState)([]);
-    const [selectedNodeElement, setSelectedNodeElement] = (0, react_1.useState)(null);
-    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)([]);
-    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)([]);
-    const treeContainerRef = (0, react_1.useRef)(null);
-    const editContext = (0, editContext_1.useEditContext)();
-    const nodeDictionary = (0, react_1.useRef)({});
-    const cm = (0, react_1.useRef)(null);
-    const [menu, setMenu] = (0, react_1.useState)([]);
-    const itemNameDialogRef = (0, react_1.useRef)(null);
-    const editContextRef = (0, editContext_1.useEditContextRef)();
-    const lastSelectedItemId = (0, react_1.useRef)(undefined);
-    const loadNodeChildren = (0, react_1.useCallback)(async (node) => {
+const MemoizedPerfectTree = memo(PerfectTree);
+export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, rootItemIds, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, selectPagesOnly, renderNode, onItemInserted, language, includeItemPath, }) {
+    const [treeNodes, setTreeNodes] = useState([]);
+    const [selectedNodeElement, setSelectedNodeElement] = useState(null);
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const treeContainerRef = useRef(null);
+    const editContext = useEditContext();
+    const nodeDictionary = useRef({});
+    const cm = useRef(null);
+    const [menu, setMenu] = useState([]);
+    const itemNameDialogRef = useRef(null);
+    const editContextRef = useEditContextRef();
+    const lastSelectedItemId = useRef(undefined);
+    const loadNodeChildren = useCallback(async (node) => {
         if (!editContext)
             return [];
-        let children = await (0, contentService_1.getChildren)(node.key, editContext.sessionId, templateIds, includeEmbeddedItems ?? false, language, includeItemPath ? "path,idPath" : undefined);
+        let children = await getChildren(node.key, editContext.sessionId, templateIds, includeEmbeddedItems ?? false, language, includeItemPath ? "path,idPath" : undefined);
         if (filter)
             children = filter(children);
         return children.map((x) => ({
             key: x.id,
             label: x.name,
-            iconUrl: (0, utils_1.getAbsoluteIconUrl)(x.icon),
+            iconUrl: getAbsoluteIconUrl(x.icon),
             isDraggable: isDraggable && isDraggable(x),
             selectable: !selectPagesOnly || x.hasLayout,
             data: x,
@@ -52,12 +49,12 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         templateIds,
         includeItemPath,
     ]);
-    const updateCorrespondingNode = (0, react_1.useCallback)((x, parent) => {
+    const updateCorrespondingNode = useCallback((x, parent) => {
         const node = nodeDictionary.current[x.id];
         if (!node)
             return;
         node.label = x.name;
-        node.iconUrl = (0, utils_1.getAbsoluteIconUrl)(x.icon);
+        node.iconUrl = getAbsoluteIconUrl(x.icon);
         node.isDraggable =
             isDraggable &&
                 isDraggable({
@@ -71,14 +68,14 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         node.hasChildren = x.hasChildren;
         node.parent = parent;
     }, [isDraggable, selectPagesOnly]);
-    const loadNode = (0, react_1.useCallback)(async (descriptor) => {
+    const loadNode = useCallback(async (descriptor) => {
         const item = await editContext?.itemsRepository.getItem(descriptor);
         if (!item)
             return;
         return {
             key: item.id,
             label: item.name,
-            iconUrl: (0, utils_1.getAbsoluteIconUrl)(item.icon),
+            iconUrl: getAbsoluteIconUrl(item.icon),
             isDraggable: isDraggable &&
                 isDraggable({
                     ...item,
@@ -91,7 +88,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
             hasChildren: item.hasChildren,
         };
     }, [editContext?.itemsRepository, isDraggable, selectPagesOnly]);
-    const loadRootNodes = (0, react_1.useCallback)(async (force = false) => {
+    const loadRootNodes = useCallback(async (force = false) => {
         if (!force && treeNodes.length > 0)
             return treeNodes;
         if (rootItemId)
@@ -104,7 +101,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         }))
             .filter((x) => x) || []);
     }, [loadNode, loadNodeChildren, rootItemId, rootItemIds, language]);
-    const doPreloadNodes = (0, react_1.useCallback)(async (expandedKeys, treeNodes) => {
+    const doPreloadNodes = useCallback(async (expandedKeys, treeNodes) => {
         for (let i = 0; i < treeNodes.length; i++) {
             const node = treeNodes[i];
             if (!node)
@@ -121,12 +118,12 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
             }
         }
     }, [loadNodeChildren]);
-    const preLoadNodes = (0, react_1.useCallback)(async (expandedKeys, force) => {
+    const preLoadNodes = useCallback(async (expandedKeys, force) => {
         const rootNodes = await loadRootNodes(force);
         await doPreloadNodes(expandedKeys, rootNodes);
         setTreeNodes([...rootNodes.filter((x) => x)]);
     }, [doPreloadNodes, loadRootNodes]);
-    const refreshNode = (0, react_1.useCallback)(async (node) => {
+    const refreshNode = useCallback(async (node) => {
         const tempNode = { ...node };
         tempNode.children = undefined;
         await doPreloadNodes(expandedKeys || [], [tempNode]);
@@ -140,10 +137,10 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         doPreloadNodes,
         updateCorrespondingNode,
     ]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         preLoadNodes(expandedKeys || [], false);
     }, [language, preLoadNodes, expandedKeys]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!editContext?.itemsRepository)
             return;
         const unsubscribe = editContext.itemsRepository.subscribeItemsChanged(async (items) => {
@@ -177,14 +174,14 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         });
         return newExpandedKeys;
     }
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const newExpandedKeys = getExpandedKeys();
         const hasNewKeys = newExpandedKeys.some((key) => !expandedKeys.includes(key));
         if (hasNewKeys) {
             setExpandedKeys([...new Set([...expandedKeys, ...newExpandedKeys])]);
         }
     }, [expandIdPath, preLoadNodes]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const newNodeDictionary = {};
         createMap(treeNodes, newNodeDictionary);
         nodeDictionary.current = newNodeDictionary;
@@ -197,23 +194,23 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
                 createMap(n.children, nodeDictionary);
         });
     }
-    const nodeTemplate = (0, react_1.useCallback)((node) => {
-        let label = (0, jsx_runtime_1.jsx)("span", { children: node.label });
+    const nodeTemplate = useCallback((node) => {
+        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: "text-primary font-semibold hover:underline", children: node.label }));
+            label = (_jsx("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "text-primary font-semibold hover:underline", children: node.label }));
         }
         const getNodeCursor = (node) => {
             if (node.isDraggable)
                 return "cursor-grab";
             return "";
         };
-        return ((0, jsx_runtime_1.jsxs)("span", { 
+        return (_jsxs("span", { 
             // onDragStart={(event: React.DragEvent<HTMLDivElement>) => {
             //   handleDragStart(node, event);
             // }}
             // onDragEnd={handleDragEnd}
             // draggable={node.isDraggable}
-            className: `flex items-center gap-2 text-xs ${getNodeCursor(node)} ${node.className}`, children: [(0, jsx_runtime_1.jsx)("img", { src: node.iconUrl, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), label] }));
+            className: `flex items-center gap-2 text-xs ${getNodeCursor(node)} ${node.className}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), label] }));
     }, []);
     function handleDragStart(data) {
         const items = data.isMultiSelect
@@ -243,7 +240,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         if (dragEnd)
             dragEnd();
     }
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!selectedNodeElement)
             return;
         const container = treeContainerRef.current;
@@ -262,11 +259,11 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
             });
         }
     }, [selectedNodeElement]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setSelectedKeys(selectedItemIds || []);
     }, [selectedItemIds]);
     const itemCommands = editContext?.configuration.commands.allItemCommands || [];
-    const onContextMenu = (0, react_1.useCallback)(async (node, originalEvent) => {
+    const onContextMenu = useCallback(async (node, originalEvent) => {
         console.log("CONTEXT MENU", node);
         const key = node.key;
         let itemIds = selectedItemIds;
@@ -310,7 +307,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         onItemInserted,
     ]);
     // Memoize the toggle expand handler
-    const handleToggleExpand = (0, react_1.useCallback)((nodeKey) => {
+    const handleToggleExpand = useCallback((nodeKey) => {
         setExpandedKeys((value) => {
             if (value.includes(nodeKey))
                 return value.filter((x) => x !== nodeKey);
@@ -319,7 +316,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         });
     }, []);
     // Memoize the node selection handler
-    const handleNodeSelect = (0, react_1.useCallback)((nodeKey, ev) => {
+    const handleNodeSelect = useCallback((nodeKey, ev) => {
         let newSelection = [...selectedKeys];
         if (selectionMode == "multiple" &&
             ev.shiftKey &&
@@ -369,19 +366,19 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         }
     }, [onSelectionChange, selectionMode, selectedKeys]);
     // Memoize the renderNode function
-    const memoizedRenderNode = (0, react_1.useMemo)(() => {
+    const memoizedRenderNode = useMemo(() => {
         if (renderNode) {
             return (node) => renderNode(node, (n) => nodeTemplate(n));
         }
         return nodeTemplate;
     }, [renderNode, nodeTemplate]);
     // Memoize the double click handler
-    const handleDoubleClick = (0, react_1.useCallback)((node) => {
+    const handleDoubleClick = useCallback((node) => {
         onDoubleClick?.(nodeDictionary.current[node.key]?.data);
     }, [onDoubleClick]);
     // Memoize treeNodes to prevent unnecessary re-renders
-    const memoizedTreeNodes = (0, react_1.useMemo)(() => treeNodes, [treeNodes]);
-    const loadChildren = (0, react_1.useCallback)(async (node, forceReload = false) => {
+    const memoizedTreeNodes = useMemo(() => treeNodes, [treeNodes]);
+    const loadChildren = useCallback(async (node, forceReload = false) => {
         if (!node.children || forceReload) {
             const nodes = await loadNodeChildren(node);
             node.children = nodes;
@@ -389,17 +386,17 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
             setTreeNodes((prev) => [...prev]);
         }
     }, [loadNodeChildren]);
-    const loadOnExpand = (0, react_1.useCallback)(async (node) => {
+    const loadOnExpand = useCallback(async (node) => {
         node.children = null;
         setTreeNodes([...treeNodes]);
         await loadChildren(node);
     }, [loadChildren, treeNodes]);
-    const handleDragOverZone = (0, react_1.useCallback)((node, index, event) => {
+    const handleDragOverZone = useCallback((node, index, event) => {
         return true;
     }, []);
     if (!memoizedTreeNodes.length)
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full items-center justify-center gap-2 bg-gray-50 text-sm text-gray-500", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "3xl" }), " Loading..."] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ItemNameDialog_1.ItemNameDialog, { ref: itemNameDialogRef }), (0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menu, ref: cm, className: "text-sm" }), (0, jsx_runtime_1.jsx)("div", { className: className, ref: treeContainerRef, children: (0, jsx_runtime_1.jsx)(MemoizedPerfectTree, { nodes: memoizedTreeNodes, expandedKeys: expandedKeys, onToggleExpand: handleToggleExpand, renderNode: memoizedRenderNode, onLazyLoad: loadOnExpand, onDoubleClick: handleDoubleClick, onSelect: handleNodeSelect, selectedKeys: selectedKeys, onContextMenu: onContextMenu, enableDragAndDrop: true, onStartDrag: handleDragStart, onDragOverZone: handleDragOverZone, onDragEnd: handleDragEnd, isDragging: editContext?.dragObject !== undefined, onDrop: (parent, index, event) => {
+        return (_jsxs("div", { className: "flex h-full items-center justify-center gap-2 bg-gray-50 text-sm text-gray-500", children: [_jsx(Spinner, { size: "3xl" }), " Loading..."] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ItemNameDialog, { ref: itemNameDialogRef }), _jsx(ContextMenu, { model: menu, ref: cm, className: "text-sm" }), _jsx("div", { className: className, ref: treeContainerRef, children: _jsx(MemoizedPerfectTree, { nodes: memoizedTreeNodes, expandedKeys: expandedKeys, onToggleExpand: handleToggleExpand, renderNode: memoizedRenderNode, onLazyLoad: loadOnExpand, onDoubleClick: handleDoubleClick, onSelect: handleNodeSelect, selectedKeys: selectedKeys, onContextMenu: onContextMenu, enableDragAndDrop: true, onStartDrag: handleDragStart, onDragOverZone: handleDragOverZone, onDragEnd: handleDragEnd, isDragging: editContext?.dragObject !== undefined, onDrop: (parent, index, event) => {
                         console.log("DROP", parent, index, event);
                         handleDrop(parent, index, event);
                     } }) })] }));