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

package/dist/esm/editor/component-designer/ComponentRenderingEditor.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+import "@uiw/react-textarea-code-editor/dist.css";
+import { useEffect } from "react";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+import { useEditContext } from "../editContext";
+const CodeEditor = dynamic(() => import("@uiw/react-textarea-code-editor").then((mod) => mod.default), { ssr: false });
+export function ComponentRenderingEditor() {
+    const context = useComponentDesignerContext();
+    if (!context)
+        return null;
+    const editContext = useEditContext();
+    if (!editContext)
+        return null;
+    useEffect(() => {
+        var _a, _b, _c;
+        context.setCode(((_c = (_b = (_a = context.componentRenderingItem) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.value) || "");
+    }, [context.componentRenderingItem]);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            if (context.componentRenderingItem) {
+                context.componentRenderingItem.fields.code.value = context.code;
+                editContext.editField({
+                    field: context.componentRenderingItem.fields.code,
+                    value: context.code,
+                });
+            }
+        }, 600);
+        return () => clearTimeout(timeout);
+    }, [context.code]);
+    if (!context.componentRenderingItem)
+        return null;
+    return (_jsx("div", { children: _jsx(CodeEditor, { value: context.code, language: "js", placeholder: "Please enter TSX code.", onChange: (evn) => context.setCode(evn.target.value), padding: 15, style: {
+                fontSize: 12,
+                backgroundColor: "#f5f5f5",
+                fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+            } }) }));
+}

package/dist/esm/editor/component-designer/ComponentSelectionTree.js

@@ -0,0 +1,56 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import ContentTree from "../ContentTree";
+import { getItem } from "../services/contentService";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+export function ComponentSelectionTree() {
+    var _a, _b, _c;
+    const context = useComponentDesignerContext();
+    if (!context)
+        return;
+    const loadItem = (item) => __awaiter(this, void 0, void 0, function* () {
+        const itemData = yield getItem({
+            id: item.id,
+            language: item.language,
+            version: item.version,
+        });
+        if (!itemData)
+            return;
+        if (itemData.templateId === "d7dd274d-69ee-4686-9171-21c89a088fd8") {
+            context.setComponentRenderingItem(itemData);
+            context.setComponentRenderingFolder(undefined);
+            context.setSampleItem(undefined);
+        }
+        if (itemData.templateId === "dcfdeb8f-c2a6-4046-a7fc-23296b2d4569") {
+            context.setComponentRenderingFolder(itemData);
+            context.setComponentRenderingItem(undefined);
+            context.setSampleItem(undefined);
+        }
+        if (itemData.templateId === "e85ffcff-38b8-4a0b-844e-17f6faf745fe") {
+            context.setSampleItem(itemData);
+            const parent = yield getItem({
+                id: itemData._editor.parentId,
+                language: item.language,
+                version: 0,
+            });
+            context.setComponentRenderingItem(parent);
+        }
+    });
+    return (_jsx(ContentTree, { rootItemId: "{11111111-1111-1111-1111-111111111111}", expandIdPath: "{11111111-1111-1111-1111-111111111111}/{0de95ae4-41ab-4d01-9eb0-67441b7c2450}/{c8c7b950-e876-448e-991f-5eaf756a1db2}/{5f2dcc67-d9c1-451f-ad14-85244c9cca41}", className: "a-p-1", selectionMode: "single", selectedItemIds: [
+            ((_a = context.sampleItem) === null || _a === void 0 ? void 0 : _a.id) ||
+                ((_b = context.componentRenderingItem) === null || _b === void 0 ? void 0 : _b.id) ||
+                ((_c = context.componentRenderingFolder) === null || _c === void 0 ? void 0 : _c.id) ||
+                "11111111-1111-1111-1111-111111111111",
+        ], onSelectionChange: (selection) => {
+            const selectedItem = selection;
+            loadItem(selectedItem);
+        } }));
+}

package/dist/esm/editor/component-designer/componentDesignerContext.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { useEditContext } from "../editContext";
+export function getComponentDesignerContext() {
+    const [componentRenderingItem, setComponentRenderingItem] = useState();
+    const [componentRenderingFolder, setComponentRenderingFolder] = useState();
+    const [sampleItem, setSampleItem] = useState();
+    const [code, setCode] = useState();
+    return {
+        componentRenderingItem,
+        setComponentRenderingItem,
+        componentRenderingFolder,
+        setComponentRenderingFolder,
+        sampleItem,
+        setSampleItem,
+        code,
+        setCode,
+    };
+}
+export function useComponentDesignerContext() {
+    var _a;
+    return (_a = useEditContext()) === null || _a === void 0 ? void 0 : _a.componentDesignerContext;
+}

package/dist/esm/editor/componentTreeHelper.js

@@ -0,0 +1,20 @@
+export function findComponent(id, placeholders) {
+    var _a;
+    for (const p of placeholders) {
+        for (const c of p.components) {
+            if (c.id === id || ((_a = c._editor.linkedComponentItem) === null || _a === void 0 ? void 0 : _a.id) === id) {
+                return c;
+            }
+            const match = findComponent(id, c.placeholders);
+            if (match) {
+                return match;
+            }
+        }
+    }
+    return null;
+}
+export function getComponentById(id, page) {
+    if (!page)
+        return null;
+    return findComponent(id, page.placeholders);
+}

package/dist/esm/editor/config/config.js

@@ -0,0 +1,327 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichTextEditor } from "../fieldTypes/RichTextEditor";
+import { LinkFieldEditor } from "../fieldTypes/LinkFieldEditor";
+import { PictureFieldEditor } from "../fieldTypes/PictureFieldEditor";
+import { InternalLinkFieldEditor } from "../fieldTypes/InternalLinkFieldEditor";
+import TreeListEditor from "../fieldTypes/TreeListEditor";
+import { SingleLineText } from "../fieldTypes/SingleLineText";
+import { MultiLineText } from "../fieldTypes/MultiLineText";
+import { DropLinkEditor } from "../fieldTypes/DropLinkEditor";
+import { RawEditor } from "../fieldTypes/RawEditor";
+import { CheckboxEditor } from "../fieldTypes/CheckboxEditor";
+import { ItemLocked } from "../editor-warnings/ItemLocked";
+import { ValidationErrors } from "../editor-warnings/ValidationErrors";
+import { MainContentTree } from "../sidebar/MainContentTree";
+import { ComponentTree } from "../sidebar/ComponentTree";
+import { EditHistory } from "../sidebar/EditHistory";
+import { Sessions } from "../sidebar/Sessions";
+import { Workbox } from "../sidebar/Workbox";
+import { DictionaryEditor } from "../DictionaryEditor";
+import { BugIcon, EditIcon, GraphQLIcon, JsonIcon, WizardIcon, } from "../ui/Icons";
+import { Debug } from "../sidebar/Debug";
+import { GraphQL } from "../sidebar/GraphQL";
+import { PageViewer } from "../PageViewer";
+import { ItemEditor } from "../views/ItemEditor";
+import { EditorForm } from "../sidebar/EditorForm";
+import { EditorAiTerminal } from "../ai/EditorAiTerminal";
+import { Insert } from "../sidebar/Insert";
+import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
+import { getSelectedComponentCommands } from "../commands/componentCommands";
+import { getRedoCommand, getUndoCommand } from "../commands/undo";
+import { ComponentSelectionTree } from "../component-designer/ComponentSelectionTree";
+import { ComponentDesigner } from "../component-designer/ComponentDesigner";
+import { ComponentDesignerMenu } from "../component-designer/ComponentDesignerMenu";
+import { ComponentDesignerAiTerminal } from "../component-designer/ComponentDesignerAiTerminal";
+const defaultRichTextEditorProfile = {
+    toolbar: {
+        groups: [
+            {
+                items: ["bold", "italic", "underline", "strikethrough"],
+            },
+        ],
+    },
+};
+export const configuration = {
+    alwaysVisiblePageFields: [],
+    fieldTypes: {
+        raw: {
+            editor: RawEditor,
+        },
+        "single-line text": {
+            editor: SingleLineText,
+        },
+        "multi-line text": {
+            editor: MultiLineText,
+        },
+        "rich text": {
+            editor: RichTextEditor,
+            custom: {
+                profiles: { default: defaultRichTextEditorProfile },
+            },
+        },
+        "general link": {
+            editor: LinkFieldEditor,
+        },
+        picture: {
+            editor: PictureFieldEditor,
+        },
+        droplink: {
+            editor: DropLinkEditor,
+        },
+        "enhanced internal link": {
+            editor: InternalLinkFieldEditor,
+        },
+        treelist: {
+            editor: TreeListEditor,
+        },
+        "enhanced treelist": {
+            editor: TreeListEditor,
+        },
+        checkbox: {
+            editor: CheckboxEditor,
+        },
+    },
+    editorWarnings: [ItemLocked, ValidationErrors],
+    outline: {
+        width: 100,
+    },
+    chrome: {
+        editor: {
+            views: [
+                {
+                    name: "edit",
+                    title: "Edit",
+                    centerPanelView: "page",
+                    icon: _jsx(EditIcon, {}),
+                    leftSidebar: [
+                        {
+                            name: "form",
+                            icon: "pi pi-plus",
+                            title: "Form",
+                            header: () => null,
+                            content: _jsx(EditorForm, {}),
+                            initialSize: 65,
+                        },
+                        {
+                            name: "component-tree",
+                            icon: "pi pi-list",
+                            title: "Outline",
+                            content: _jsx(ComponentTree, {}),
+                            initialSize: 20,
+                        },
+                        {
+                            name: "history",
+                            icon: "pi pi-clock",
+                            title: "History",
+                            content: _jsx(EditHistory, {}),
+                            initialSize: 15,
+                        },
+                    ],
+                },
+                {
+                    name: "insert",
+                    title: "Insert",
+                    icon: "pi pi-plus",
+                    centerPanelView: "page",
+                    leftSidebar: [
+                        {
+                            name: "component-palette",
+                            icon: "pi pi-plus",
+                            header: () => null,
+                            title: "Insert",
+                            content: _jsx(Insert, {}),
+                            initialSize: 15,
+                        },
+                    ],
+                },
+                {
+                    name: "navigate",
+                    title: "Navigate",
+                    icon: "pi pi-sitemap",
+                    centerPanelView: "page",
+                    leftSidebar: [
+                        {
+                            name: "tree",
+                            icon: "pi pi-list",
+                            title: "Select Page",
+                            content: _jsx(MainContentTree, { mode: "select-page" }),
+                            initialSize: 100,
+                        },
+                    ],
+                },
+                {
+                    name: "workbox",
+                    title: "Workbox",
+                    icon: "pi pi-inbox",
+                    leftSidebar: [
+                        {
+                            name: "Workbox",
+                            title: "Workbox",
+                            icon: "pi-inbox",
+                            content: _jsx(Workbox, {}),
+                            initialSize: 100,
+                        },
+                    ],
+                },
+                {
+                    name: "ai",
+                    title: "AI",
+                    icon: _jsx(WizardIcon, {}),
+                    leftSidebar: [
+                        {
+                            name: "ai-terminal",
+                            icon: "pi pi-comments",
+                            title: "AI",
+                            content: _jsx(EditorAiTerminal, {}),
+                            initialSize: 20,
+                        },
+                        {
+                            name: "history",
+                            icon: "pi pi-clock",
+                            title: "History",
+                            content: _jsx(EditHistory, {}),
+                            initialSize: 0,
+                        },
+                    ],
+                },
+                {
+                    name: "content-editor",
+                    title: "Content Editor",
+                    icon: "pi pi-list",
+                    centerPanelView: "form",
+                    leftSidebar: [
+                        {
+                            name: "tree",
+                            icon: "pi pi-sitemap",
+                            title: "Content",
+                            content: _jsx(MainContentTree, { mode: "normal" }),
+                            initialSize: 100,
+                        },
+                        {
+                            name: "history",
+                            icon: "pi pi-clock",
+                            title: "History",
+                            content: _jsx(EditHistory, {}),
+                            initialSize: 0,
+                        },
+                    ],
+                },
+                {
+                    name: "dictionary",
+                    title: "Dictionary",
+                    icon: "pi pi-book",
+                    leftSidebar: [
+                        {
+                            name: "dictionary",
+                            icon: "pi pi-book",
+                            title: "Dictionary",
+                            content: _jsx(DictionaryEditor, {}),
+                            initialSize: 100,
+                        },
+                    ],
+                },
+                {
+                    name: "sessions",
+                    title: "Sessions",
+                    icon: "pi pi-users",
+                    leftSidebar: [
+                        {
+                            name: "sessions",
+                            icon: "pi pi-users",
+                            title: "Sessions",
+                            content: _jsx(Sessions, {}),
+                            initialSize: 100,
+                        },
+                    ],
+                },
+                {
+                    name: "debug",
+                    title: "Debug",
+                    icon: _jsx(BugIcon, {}),
+                    centerPanelView: "page",
+                    leftSidebar: [
+                        {
+                            name: "debug",
+                            icon: _jsx(JsonIcon, {}),
+                            title: "JSON",
+                            content: _jsx(Debug, {}),
+                            initialSize: 60,
+                        },
+                        {
+                            name: "graphql",
+                            icon: _jsx(GraphQLIcon, {}),
+                            title: "GraphQL",
+                            content: _jsx(GraphQL, {}),
+                            initialSize: 40,
+                        },
+                    ],
+                },
+                {
+                    name: "component-designer",
+                    title: "Component Designer",
+                    icon: "pi pi-palette",
+                    centerPanelView: "component-designer",
+                    menuBar: _jsx(ComponentDesignerMenu, {}),
+                    leftSidebar: [
+                        {
+                            name: "component-designer",
+                            icon: "pi pi-palette",
+                            title: "Component List",
+                            initialSize: 60,
+                            content: _jsx(ComponentSelectionTree, {}),
+                        },
+                        {
+                            name: "ai-terminal",
+                            icon: "pi pi-comments",
+                            title: "AI",
+                            content: _jsx(ComponentDesignerAiTerminal, {}),
+                            initialSize: 40,
+                        },
+                    ],
+                },
+            ],
+            centerPanelViews: [
+                { name: "page", content: _jsx(PageViewer, {}) },
+                { name: "form", content: _jsx(ItemEditor, {}) },
+                { name: "component-designer", content: _jsx(ComponentDesigner, {}) },
+            ],
+            mainNavigation: [
+                getUndoCommand(),
+                getRedoCommand(),
+                {
+                    label: "Version",
+                    icon: "pi pi-fw",
+                    items: [getCreateAndSwitchToNewVersionCommand()],
+                },
+                {
+                    label: "Selection",
+                    icon: "pi pi-fw",
+                    items: (editContext) => getSelectedComponentCommands(editContext),
+                },
+                {
+                    name: "preview",
+                    disabled: () => false,
+                    label: "Preview",
+                    icon: "pi pi-fw pi-external-link",
+                    execute: () => __awaiter(void 0, void 0, void 0, function* () {
+                        const currentUrl = new URL(window.location.href);
+                        const searchParams = currentUrl.searchParams;
+                        if (searchParams.get("mode") === "edit") {
+                            searchParams.set("mode", "preview");
+                        }
+                        window.open(currentUrl.href);
+                    }),
+                },
+            ],
+        },
+    },
+};

package/dist/esm/editor/config/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/editor/editContext.js

@@ -0,0 +1,11 @@
+"use client";
+import React, { useContext } from "react";
+const EditContext = React.createContext(undefined);
+export const EditContextProvider = EditContext.Provider;
+export const useEditContext = () => useContext(EditContext);
+const EditFrameContext = React.createContext(undefined);
+export const useEditFrameContext = () => useContext(EditFrameContext);
+export const EditFrameContextProvider = EditFrameContext.Provider;
+const EditFilterChildrenContext = React.createContext(undefined);
+export const useEditFilterChildrenContext = () => useContext(EditFilterChildrenContext);
+export const EditFilterChildrenContextProvider = EditFilterChildrenContext.Provider;

package/dist/esm/editor/editor-warnings/ItemLocked.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorWarning } from "../EditorWarning";
+import { useEditContext } from "../editContext";
+export function ItemLocked({ item }) {
+    var _a;
+    if (!((_a = item._editor) === null || _a === void 0 ? void 0 : _a.canLock))
+        return;
+    var editContext = useEditContext();
+    if (!editContext)
+        return;
+    if (item._editor.hasLock) {
+        return (_jsx(EditorWarning, { title: "Item locked", severity: "warning", children: _jsx("button", { onClick: () => {
+                    const items = [item];
+                    if (item._editor.linkedComponentItem)
+                        items.push(item._editor.linkedComponentItem);
+                    editContext.unlockItems(items);
+                }, children: "Release lock" }) }));
+    }
+    if (item._editor.lockedBy == null) {
+        return (_jsx(EditorWarning, { title: "Item is locked", severity: "warning", children: _jsxs("div", { children: ["Locked by ", item._editor.lockedBy] }) }));
+    }
+    // else {
+    //   return (
+    //     <EditorWarning title="Item not locked" severity="warning">
+    //       {item.canLock && (
+    //         <button
+    //           onClick={() => {
+    //             const items: ItemDescriptor[] = [item];
+    //             if ((item as ComponentData).linkedComponentItem)
+    //               items.push((item as ComponentData).linkedComponentItem);
+    //             editContext!.lockItems(items);
+    //           }}
+    //         >
+    //           Lock item
+    //         </button>
+    //       )}
+    //     </EditorWarning>
+    //   );
+    // }
+}

package/dist/esm/editor/editor-warnings/ValidationErrors.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorWarning } from "../EditorWarning";
+export function ValidationErrors({ item, editContext }) {
+    var _a, _b, _c;
+    let validationResult = (_b = (_a = editContext.pageValidationResult) === null || _a === void 0 ? void 0 : _a.find((x) => x.item.id === item.id &&
+        x.item.language === item.language &&
+        x.item.version === item.version)) === null || _b === void 0 ? void 0 : _b.results.filter((x) => x.itemId === item.id);
+    if (!validationResult) {
+        const pageResult = (_c = editContext.pageValidationResult) === null || _c === void 0 ? void 0 : _c.find((x) => { var _a; return x.item.id === ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.page) === null || _a === void 0 ? void 0 : _a.id); });
+        if (pageResult)
+            validationResult = pageResult.results.filter((x) => x.itemId === item.id);
+    }
+    if (!(validationResult === null || validationResult === void 0 ? void 0 : validationResult.length))
+        return null;
+    const fields = validationResult === null || validationResult === void 0 ? void 0 : validationResult.filter((x) => x.fieldId);
+    return (_jsxs(EditorWarning, { title: "Validation", severity: "warning", children: [validationResult === null || validationResult === void 0 ? void 0 : validationResult.filter((x) => !x.fieldId).map((x) => _jsx("div", { children: x.message }, x.validator)), (fields === null || fields === void 0 ? void 0 : fields.length) > 0 && (_jsxs("div", { children: ["The following fields have validation messages:", " ", fields.map((x) => (_jsx("span", { className: "a-cursor-pointer a-font-bold", onClick: () => {
+                            var _a;
+                            const field = Object.values(item.fields).find((f) => f.id === x.fieldId);
+                            if (field)
+                                editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, false);
+                        }, children: x.fieldName }, x.validator + x.fieldId)))] }))] }));
+}

package/dist/esm/editor/fieldTypes/CheckboxEditor.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditContext } from "../editContext";
+import { Checkbox } from "primereact/checkbox";
+export function CheckboxEditor({ field, readOnly, }) {
+    var _a;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const fieldItem = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
+    if (!fieldItem)
+        return;
+    return (_jsx(Checkbox, { checked: field.value, disabled: readOnly, onChange: (e) => {
+            editContext.editField({
+                field,
+                rawValue: e.checked ? "1" : "0",
+                refresh: "immediate",
+            });
+            // field.value = e.target.value;
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/esm/editor/fieldTypes/DropLinkEditor.js

@@ -0,0 +1,50 @@
+"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); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+import { useEditContext } from "../editContext";
+import { useEffect, useState } from "react";
+import { loadDropLinkOptions } from "../services/editService";
+import { Skeleton } from "primereact/skeleton";
+export function DropLinkEditor({ field, readOnly, }) {
+    const editContext = useEditContext();
+    const [lazyItems, setLazyItems] = useState([]);
+    const [lazyLoading, setLazyLoading] = useState(true);
+    if (!field)
+        return;
+    if (!editContext)
+        return;
+    useEffect(() => {
+        onLazyLoad();
+    }, []);
+    const onLazyLoad = () => __awaiter(this, void 0, void 0, function* () {
+        setLazyLoading(true);
+        const options = yield loadDropLinkOptions(field, editContext.sessionId);
+        setLazyItems(options);
+        setLazyLoading(false);
+    });
+    return (_jsx(Dropdown, { value: field.value.targetItemId, disabled: readOnly, onChange: (e) => {
+            editContext === null || editContext === void 0 ? void 0 : editContext.editField({
+                field,
+                rawValue: e.value,
+            });
+        }, options: lazyItems, optionLabel: "name", optionValue: "id", placeholder: "Select", className: "w-full md:w-14rem", virtualScrollerOptions: {
+            lazy: true,
+            onLazyLoad: onLazyLoad,
+            itemSize: 38,
+            showLoader: true,
+            loading: lazyLoading,
+            delay: 250,
+            loadingTemplate: (options) => {
+                return (_jsx("div", { className: "flex align-items-center p-2", style: { height: "38px" }, children: _jsx(Skeleton, { width: options.even ? "60%" : "50%", height: "1rem" }) }));
+            },
+        } }));
+}

package/dist/esm/editor/fieldTypes/InternalLinkFieldEditor.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../editContext";
+import ContentTree from "../ContentTree";
+export function InternalLinkFieldEditor({ field, readOnly, }) {
+    const editContext = useEditContext();
+    const [link, setLink] = useState();
+    const [showTree, setShowTree] = useState(false);
+    useEffect(() => {
+        var _a;
+        setLink({
+            url: field.value.url,
+            target: field.value.target,
+            targetItemName: field.value.targetItemName,
+            targetItemLongId: field.value.targetItemLongId,
+            type: field.value.type,
+            itemId: (_a = field.value.targetItemLongId) === null || _a === void 0 ? void 0 : _a.split("/").pop(),
+            queryString: field.value.queryString,
+        });
+    }, [field]);
+    if (!field)
+        return;
+    if (!editContext)
+        return;
+    const selection = [];
+    if (link === null || link === void 0 ? void 0 : link.itemId)
+        selection.push(link.itemId);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "a-p-2 a-border a-bg-gray-50 a-flex a-justify-between a-text-sm a-cursor-pointer a-justiy-between a-focus-shadow", onClick: (e) => {
+                    if (readOnly)
+                        return;
+                    setShowTree(!showTree);
+                    e.preventDefault();
+                }, children: [_jsx("span", { children: link === null || link === void 0 ? void 0 : link.targetItemName }), !readOnly && (_jsx("i", { className: `pi ${showTree ? "pi-angle-up" : "pi-angle-down"} ` }))] }), showTree && (_jsx("div", { className: "a-h-64 a-overflow-scroll a-resize", children: _jsx(ContentTree, { expandIdPath: link === null || link === void 0 ? void 0 : link.targetItemLongId, rootItemId: "{11111111-1111-1111-1111-111111111111}", selectionMode: "single", selectedItemIds: selection, onSelectionChange: (selection) => {
+                        setShowTree(false);
+                        editContext === null || editContext === void 0 ? void 0 : editContext.editField({
+                            field,
+                            rawValue: selection.id,
+                        });
+                    } }) }))] }));
+}