@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/control-center/ControlCenterMenu.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlCenterMenu = ControlCenterMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const navigation_1 = require("next/navigation");
+const navigation_2 = require("next/navigation");
+const editContext_1 = require("../client/editContext");
+const SimpleMenu_1 = require("../ui/SimpleMenu");
+const react_1 = require("react");
+function ControlCenterMenu() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const config = editContext?.configuration;
+    const searchParams = (0, navigation_2.useSearchParams)();
+    const urlActiveItemKey = searchParams.get("ccpanel");
+    const [activeItemKey, setActiveItemKey] = (0, react_1.useState)(urlActiveItemKey);
+    const router = (0, navigation_1.useRouter)();
+    const pathname = (0, navigation_2.usePathname)();
+    const updateUrl = (key) => {
+        if (urlActiveItemKey === key)
+            return;
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        if (key) {
+            current.set("ccpanel", key);
+        }
+        else {
+            current.delete("ccpanel");
+        }
+        router.push(`${pathname}?${current.toString()}`, { scroll: false });
+    };
+    (0, react_1.useEffect)(() => {
+        updateUrl(activeItemKey);
+    }, [activeItemKey]);
+    const items = config?.controlCenter.groups.map((group) => {
+        return {
+            key: group.title,
+            label: group.title,
+            icon: group.icon,
+            items: group.panels.map((panel) => ({
+                key: panel.id,
+                label: panel.title,
+            })) || [],
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        const groups = config?.controlCenter.groups;
+        const item = groups
+            ?.flatMap((x) => x.panels)
+            ?.find((item) => item.id === activeItemKey);
+        if (item) {
+            editContext?.setCenterPanelView(item.content);
+        }
+    }, [activeItemKey]);
+    if (!items) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(SimpleMenu_1.SimpleMenu, { items: items, activeItemKey: activeItemKey, onItemClick: (item) => {
+            setActiveItemKey(item.key);
+        } }));
+}

package/dist/editor/control-center/IndexOverview.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndexOverview = IndexOverview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const indexService_1 = require("../services/indexService");
+const IndexSettings_1 = require("./IndexSettings");
+const utils_1 = require("primereact/utils");
+function IndexOverview() {
+    const [indexes, setIndexes] = (0, react_2.useState)(undefined);
+    const [selectedIndex, setSelectedIndex] = (0, react_2.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        async function loadIndexes() {
+            const indexes = await (0, indexService_1.getIndexes)();
+            if (indexes.indexOf("master") === -1) {
+                indexes.push("master");
+            }
+            if (indexes.indexOf("media") === -1) {
+                indexes.push("media");
+            }
+            setIndexes(indexes);
+        }
+        loadIndexes();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-stretch h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 border-r border-gray-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center p-2 min-w-40 border-b border-gray-200", children: "Index" }), indexes?.map((index) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => setSelectedIndex(index), className: (0, utils_1.classNames)("cursor-pointer p-2 px-6 hover:bg-gray-100 text-sm", selectedIndex === index && "bg-gray-100"), children: index }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-2", children: selectedIndex && (0, jsx_runtime_1.jsx)(IndexSettings_1.IndexSettings, { index: { name: selectedIndex } }) })] }));
+}

package/dist/editor/control-center/IndexSettings.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndexSettings = IndexSettings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const indexService_1 = require("../services/indexService");
+const button_1 = require("primereact/button");
+const Spinner_1 = require("../ui/Spinner");
+const editContext_1 = require("../client/editContext");
+const progressspinner_1 = require("primereact/progressspinner");
+function IndexSettings({ index }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [indexStatus, setIndexStatus] = (0, react_1.useState)(undefined);
+    const [settingsItem, setSettingsItem] = (0, react_1.useState)(undefined);
+    const [rebuildJobItem, setRebuildJobItem] = (0, react_1.useState)(undefined);
+    const fetchStatus = (0, react_1.useCallback)(() => {
+        (0, indexService_1.getIndexStatus)(index.name).then(async (result) => {
+            setIndexStatus(result);
+            if (result?.settingsItemId) {
+                const settingsItem = await editContext?.itemsRepository.getItem({
+                    id: result.settingsItemId,
+                    language: "en",
+                    version: 0,
+                });
+                setSettingsItem(settingsItem);
+                if (result.rebuildJobItemId) {
+                    const rebuildJobItem = await editContext?.itemsRepository.getItem({
+                        id: result.rebuildJobItemId,
+                        language: "en",
+                        version: 0,
+                    });
+                    setRebuildJobItem(rebuildJobItem);
+                }
+                else {
+                    setRebuildJobItem(undefined);
+                }
+            }
+            else {
+                setSettingsItem(undefined);
+                setRebuildJobItem(undefined);
+            }
+        });
+    }, [index]);
+    (0, react_1.useEffect)(() => {
+        let interval;
+        if (indexStatus?.isRunning) {
+            interval = setInterval(() => {
+                fetchStatus();
+            }, 1000);
+        }
+        return () => {
+            if (interval) {
+                clearInterval(interval);
+            }
+        };
+    }, [indexStatus?.isRunning, fetchStatus]);
+    (0, react_1.useEffect)(() => {
+        fetchStatus();
+    }, [fetchStatus]);
+    (0, react_1.useEffect)(() => {
+        setIndexStatus(undefined);
+    }, [index]);
+    if (!indexStatus) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full justify-center items-center gap-2 text-gray-500", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}), "Loading..."] }));
+    }
+    async function setupIndexAndRefresh(index) {
+        await (0, indexService_1.setupIndex)(index);
+        setIndexStatus(undefined);
+        fetchStatus();
+    }
+    async function setupRebuildJobAndRefresh(index) {
+        await (0, indexService_1.setupRebuildJob)(index);
+        setIndexStatus(undefined);
+        fetchStatus();
+    }
+    async function rebuildIndexAndRefresh(index) {
+        await (0, indexService_1.rebuildIndex)(index);
+        setTimeout(() => {
+            fetchStatus();
+        }, 1000);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col px-2 py-1 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-row items-center border-b p-1 mb-3", children: (0, jsx_runtime_1.jsx)("div", { className: "", children: index.name }) }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-2", children: [settingsItem && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IndexProp, { headline: "Settings", children: (0, jsx_runtime_1.jsx)("a", { className: "cursor-pointer underline", onClick: () => {
+                                        if (indexStatus.settingsItemId) {
+                                            editContext?.loadItem(indexStatus.settingsItemId);
+                                            editContext?.switchView("content-editor");
+                                        }
+                                    }, children: settingsItem.path }) }), (0, jsx_runtime_1.jsx)(IndexProp, { headline: "Service", children: indexStatus.serviceUrl }), (0, jsx_runtime_1.jsx)(IndexProp, { headline: "Name", children: indexStatus.name }), (0, jsx_runtime_1.jsxs)(IndexProp, { headline: "Rebuild Job", children: [rebuildJobItem && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { className: "cursor-pointer underline", onClick: () => {
+                                                    if (indexStatus.rebuildJobItemId) {
+                                                        editContext?.loadItem(indexStatus.rebuildJobItemId);
+                                                        editContext?.switchView("content-editor");
+                                                    }
+                                                }, children: rebuildJobItem.path }), indexStatus.canRebuild && !indexStatus.isRunning && ((0, jsx_runtime_1.jsx)("div", { className: "my-2", children: (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Rebuild Index", onClick: () => {
+                                                        rebuildIndexAndRefresh(index.name);
+                                                    } }) })), indexStatus.isRunning && ((0, jsx_runtime_1.jsxs)("div", { className: "my-2 flex flex-row items-center justify-start", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mr-2", style: { width: "20px" }, children: [(0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "20px", height: "20px" } }), " "] }), "Rebuilding... ", indexStatus.rebuildCount.toLocaleString(), " ", "items, ", indexStatus.rebuildTokensCount.toLocaleString(), " ", "tokens"] }))] })), !rebuildJobItem && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500 mb-2", children: "No rebuild job found for this index" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Setup Rebuild Job", onClick: () => {
+                                                    setupRebuildJobAndRefresh(index.name);
+                                                } })] }))] }), (0, jsx_runtime_1.jsx)(IndexProp, { headline: "Last Rebuild", children: indexStatus.lastRebuildStartDateTime
+                                    ? new Date(indexStatus.lastRebuildStartDateTime).toLocaleString()
+                                    : "Never" }), indexStatus.exists && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(IndexProp, { headline: "Index Status", children: Object.entries(indexStatus.languages).map(([language, { numberOfItems, lastUpdated, status }]) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "font-bold", children: [language, ":"] }), (0, jsx_runtime_1.jsx)("span", { className: `text-gray-500 ml-2 ${status === "Available"
+                                                    ? "text-green-500"
+                                                    : "text-yellow-500"}`, children: status }), (0, jsx_runtime_1.jsxs)("span", { className: "text-gray-500", children: ["Items: ", numberOfItems.toLocaleString(), " "] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-gray-500", children: ["Last updated: ", new Date(lastUpdated).toLocaleString()] })] }, language))) }) })), indexStatus.errors?.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: "Errors:" }), indexStatus.errors.map((error, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2 p-2 bg-red-100 rounded-md text-red-800 border border-red-300 ", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: error.message }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: error.details })] }, index)))] }))] })), !indexStatus?.exists && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500 mb-2", children: "Index does not exist" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Setup index", onClick: () => {
+                                    setupIndexAndRefresh(index.name);
+                                } })] })), " "] })] }));
+}
+function IndexProp({ headline, children, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold text-sm", children: headline }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: children })] }));
+}

package/dist/editor/control-center/Status.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Status = Status;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Status() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col justify-center items-center h-full", children: "Status" }));
+}

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemLocked = ItemLocked;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditorWarning_1 = require("../EditorWarning");
+const editContext_1 = require("../client/editContext");
+function ItemLocked({ item }) {
+    if (!item.canLock)
+        return;
+    var editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    if (item.hasLock) {
+        return ((0, jsx_runtime_1.jsx)(EditorWarning_1.EditorWarning, { title: "Item locked", severity: "warning", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    const items = [item];
+                    editContext.operations.unlockItems(items);
+                }, children: "Release lock" }) }));
+    }
+    if (item.lockedBy == null) {
+        return ((0, jsx_runtime_1.jsx)(EditorWarning_1.EditorWarning, { title: "Item is locked", severity: "warning", children: (0, jsx_runtime_1.jsxs)("div", { children: ["Locked by ", item.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/editor/editor-warnings/NoLanguageWriteAccess.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoWriteLanguageAccess = NoWriteLanguageAccess;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditorWarning_1 = require("../EditorWarning");
+const editContext_1 = require("../client/editContext");
+function NoWriteLanguageAccess({ item }) {
+    var editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    if (!item.canWriteItem)
+        return;
+    if (!item.canWriteLanguage) {
+        return ((0, jsx_runtime_1.jsx)(EditorWarning_1.EditorWarning, { title: "You dont have language write access.", severity: "warning", children: (0, jsx_runtime_1.jsxs)("p", { children: ["You can't edit this item because you don't have write access for language ", editContext.page?.item.language, "."] }) }));
+    }
+}

package/dist/editor/editor-warnings/NoWorkflowWriteAccess.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoWorkflowWriteAccess = NoWorkflowWriteAccess;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditorWarning_1 = require("../EditorWarning");
+const editContext_1 = require("../client/editContext");
+function NoWorkflowWriteAccess({ item }) {
+    var editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    if (!item.canWriteItem || !item.canWriteLanguage)
+        return;
+    if (!item.canWriteWorkflow) {
+        return ((0, jsx_runtime_1.jsx)(EditorWarning_1.EditorWarning, { title: "You dont have write access in the current workflow state.", severity: "warning", children: (0, jsx_runtime_1.jsxs)("p", { children: ["The item is in the workflow state", " ", (0, jsx_runtime_1.jsx)("span", { className: "font-bold", children: item.workflowState }), " which prevents you from editing."] }) }));
+    }
+}

package/dist/editor/editor-warnings/NoWriteAccess.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoWriteAccess = NoWriteAccess;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditorWarning_1 = require("../EditorWarning");
+const editContext_1 = require("../client/editContext");
+function NoWriteAccess({ item }) {
+    var editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    if (!item.canWriteItem) {
+        return ((0, jsx_runtime_1.jsx)(EditorWarning_1.EditorWarning, { title: "You dont have write access.", severity: "warning", children: (0, jsx_runtime_1.jsx)("p", { children: "You can't edit this item because you don't have write access." }) }));
+    }
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidationErrors = ValidationErrors;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditorWarning_1 = require("../EditorWarning");
+function ValidationErrors({ item, editContext }) {
+    let validationResult = editContext.validationResult
+        ?.find((x) => x.item.id === item.id &&
+        x.item.language === item.language &&
+        x.item.version === item.version)
+        ?.results.filter((x) => x.itemId === item.id);
+    if (!validationResult) {
+        const pageResult = editContext.validationResult?.find((x) => x.item.id === editContext?.page?.item.id);
+        if (pageResult)
+            validationResult = pageResult.results.filter((x) => x.itemId === item.id);
+    }
+    if (!validationResult?.length)
+        return null;
+    const fields = validationResult?.filter((x) => x.fieldId);
+    return ((0, jsx_runtime_1.jsxs)(EditorWarning_1.EditorWarning, { title: "Validation", severity: "warning", children: [validationResult
+                ?.filter((x) => !x.fieldId)
+                .map((x) => ((0, jsx_runtime_1.jsx)("div", { children: x.message }, x.validator))), fields?.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: ["The following fields have validation messages:", " ", fields.map((x) => ((0, jsx_runtime_1.jsx)("span", { className: "cursor-pointer font-bold", onClick: () => {
+                            const field = Object.values(item.fields).find((f) => f.id === x.fieldId);
+                            if (field)
+                                editContext.setFocusedField(field.descriptor, false);
+                        }, children: x.fieldName }, x.validator + x.fieldId)))] }))] }));
+}

package/dist/editor/field-types/AttachmentEditor.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachmentEditor = AttachmentEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function AttachmentEditor({ field }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("img", { src: field.value.src }) }));
+}

package/dist/editor/field-types/CheckboxEditor.js

@@ -0,0 +1,32 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxEditor = CheckboxEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const checkbox_1 = require("primereact/checkbox");
+const react_1 = require("react");
+const progressspinner_1 = require("primereact/progressspinner");
+function CheckboxEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [isUpdating, setIsUpdating] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsUpdating(false);
+    }, [field]);
+    if (!editContext)
+        return;
+    const fieldItem = field.descriptor.item;
+    if (!fieldItem)
+        return;
+    if (isUpdating) {
+        return (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "18px", height: "18px" } });
+    }
+    return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: field.value, disabled: readOnly, onClick: () => {
+            setIsUpdating(true);
+            editContext.operations.editField({
+                field: field.descriptor,
+                rawValue: field.value ? "0" : "1",
+                refresh: "immediate",
+            });
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/editor/field-types/DropLinkEditor.js

@@ -0,0 +1,51 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropLinkEditor = DropLinkEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const editService_1 = require("../services/editService");
+const utils_1 = require("../utils");
+function DropLinkEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [lazyItems, setLazyItems] = (0, react_1.useState)([]);
+    const [lazyLoading, setLazyLoading] = (0, react_1.useState)(true);
+    if (!field)
+        return;
+    if (!editContext)
+        return;
+    (0, react_1.useEffect)(() => {
+        onLazyLoad();
+    }, [field.descriptor]);
+    const onLazyLoad = async () => {
+        setLazyLoading(true);
+        const options = await (0, editService_1.getLookupSources)(field, editContext.sessionId);
+        setLazyItems(options);
+        setLazyLoading(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: field.value?.targetItemId, disabled: readOnly, onChange: (e) => {
+            editContext?.operations.editField({
+                field: field.descriptor,
+                rawValue: (0, utils_1.normalizeGuid)(e.value), // typeof e.value === "string" ? e.value : e.value.id, // This has changed in primereact
+            });
+        }, 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 (
+            //     <div
+            //       className="flex align-items-center p-2"
+            //       style={{ height: "38px" }}
+            //     >
+            //       <Skeleton width={options.even ? "60%" : "50%"} height="1rem" />
+            //     </div>
+            //   );
+            // },
+        } }));
+}

package/dist/editor/field-types/DropListEditor.js

@@ -0,0 +1,58 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropListEditor = DropListEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const editService_1 = require("../services/editService");
+function DropListEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [lazyItems, setLazyItems] = (0, react_1.useState)([]);
+    const [lazyLoading, setLazyLoading] = (0, react_1.useState)(true);
+    if (!field)
+        return;
+    if (!editContext)
+        return;
+    (0, react_1.useEffect)(() => {
+        onLazyLoad();
+    }, [field.descriptor]);
+    const onLazyLoad = async () => {
+        setLazyLoading(true);
+        const options = await (0, editService_1.getLookupSources)(field, editContext.sessionId);
+        if (field.value && !options.find((o) => o.name === field.value)) {
+            console.log("Adding unknown option", field.value);
+            options.unshift({
+                id: "unknown",
+                name: `[Unknown: ${field.value}]`,
+            });
+        }
+        setLazyItems(options);
+        setLazyLoading(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: lazyItems.find((o) => o.name === field.value)?.name ||
+            "[Unknown: " + field.value + "]", disabled: readOnly, onChange: (e) => {
+            editContext?.operations.editField({
+                field: field.descriptor,
+                rawValue: e.value,
+            });
+        }, options: lazyItems, optionLabel: "name", optionValue: "name", placeholder: "Select", className: "w-full md:w-14rem", virtualScrollerOptions: {
+            lazy: true,
+            onLazyLoad: onLazyLoad,
+            itemSize: 38,
+            // showLoader: true,
+            loading: lazyLoading,
+            //delay: 250,
+            // loadingTemplate: (options) => {
+            //   return (
+            //     <div
+            //       className="flex align-items-center p-2"
+            //       style={{ height: "38px" }}
+            //     >
+            //       <Skeleton width={options.even ? "60%" : "50%"} height="1rem" />
+            //     </div>
+            //   );
+            // },
+        } }));
+}

package/dist/editor/field-types/ImageFieldEditor.js

@@ -0,0 +1,36 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageFieldEditor = ImageFieldEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+const ImageEditor_1 = require("../ImageEditor");
+function ImageFieldEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [altText, setAltText] = (0, react_1.useState)("");
+    if (!field || !editContext)
+        return null;
+    function updateAltText(rawValue, newAltText) {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(rawValue, 'text/xml');
+        const imageElement = xmlDoc.documentElement;
+        imageElement.setAttribute('alt', newAltText);
+        return new XMLSerializer().serializeToString(xmlDoc);
+    }
+    var item = field.descriptor.item;
+    (0, react_1.useEffect)(() => {
+        setAltText(field.value?.alt || "");
+    }, [field.value?.alt]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 h-full focus-shadow flex-wrap", children: (0, jsx_runtime_1.jsx)("div", { className: "h-48 w-48 border border-gray-300 relative cursor-pointer flex justify-center items-center", children: !readOnly && (0, jsx_runtime_1.jsx)(ImageEditor_1.ImageEditor, { field: field }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-1", children: "Alt Text" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: altText, disabled: readOnly, className: "p-2 focus-shadow text-sm", style: { width: "100%" }, onChange: (e) => {
+                            setAltText(e.target.value);
+                            if (field.value)
+                                field.value.alt = e.target.value;
+                            editContext.operations.editField({
+                                field: field.descriptor,
+                                rawValue: updateAltText(field.rawValue || "", e.target.value),
+                                refresh: "waitForQuietPeriod",
+                            });
+                        } }, item.id + field.id + item.language + item.version)] })] }));
+}

package/dist/editor/field-types/InternalLinkFieldEditor.js

@@ -0,0 +1,64 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalLinkFieldEditor = InternalLinkFieldEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const ContentTree_1 = __importDefault(require("../ContentTree"));
+const overlaypanel_1 = require("primereact/overlaypanel");
+const editService_1 = require("../services/editService");
+const utils_1 = require("primereact/utils");
+function InternalLinkFieldEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [link, setLink] = (0, react_1.useState)();
+    const [showTree, setShowTree] = (0, react_1.useState)(false);
+    const [rootItemIds, setRootItemIds] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        setLink({
+            url: field.value.url,
+            target: field.value.target,
+            targetItemName: field.value.targetItemName,
+            targetItemLongId: field.value.targetItemLongId,
+            type: field.value.type,
+            itemId: field.value.targetItemLongId?.split("/").pop(),
+            queryString: field.value.queryString,
+        });
+    }, [field]);
+    const overlayPanelRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const texboxRef = (0, react_1.useRef)(null);
+    if (!editContext)
+        return;
+    const selection = [];
+    if (link?.itemId)
+        selection.push(link.itemId);
+    (0, react_1.useEffect)(() => {
+        const loadLookupSources = async () => {
+            const datasources = await (0, editService_1.getLookupSources)(field, editContext.sessionId);
+            if (datasources.length > 0) {
+                setRootItemIds(datasources.map((x) => x.id));
+            }
+            else
+                setRootItemIds(["11111111-1111-1111-1111-111111111111"]);
+        };
+        loadLookupSources();
+    }, [field.descriptor]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { ref: texboxRef, className: (0, utils_1.classNames)("p-1.5 border flex justify-between text-sm cursor-pointer justiy-between focus-shadow", readOnly ? "bg-gray-50" : " bg-white"), onClick: (e) => {
+                            if (readOnly)
+                                return;
+                            overlayPanelRef.current?.toggle(null, texboxRef.current);
+                            setShowTree((show) => !show);
+                            e.preventDefault();
+                        }, children: [link?.targetItemName ? ((0, jsx_runtime_1.jsx)("span", { children: link.targetItemName })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })), !readOnly && ((0, jsx_runtime_1.jsx)("i", { className: `pi ${showTree ? "pi-angle-up" : "pi-angle-down"} ` }))] }), (0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, className: "w-0" })] }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: overlayPanelRef, children: (0, jsx_runtime_1.jsx)("div", { className: "h-64 overflow-auto resize border-b border-x p-2", style: { width: `${texboxRef.current?.offsetWidth || 100}px` }, children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { language: editContext.contentEditorItem.language, expandIdPath: link?.targetItemLongId, rootItemIds: rootItemIds, selectionMode: "single", selectedItemIds: selection, onNodeClick: (node) => {
+                            setShowTree(false);
+                            overlayPanelRef.current?.hide();
+                            editContext?.operations.editField({
+                                field: field.descriptor,
+                                rawValue: node.id,
+                            });
+                        } }) }) })] }));
+}

package/dist/editor/field-types/LinkFieldEditor.js

@@ -0,0 +1,58 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkFieldEditor = LinkFieldEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const LinkEditorDialog_1 = require("../LinkEditorDialog");
+const editContext_1 = require("../client/editContext");
+const utils_1 = require("primereact/utils");
+function LinkFieldEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [showDialog, setShowDialog] = (0, react_1.useState)(false);
+    const [link, setLink] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (!field.value)
+            return;
+        setLink({
+            url: field.value.url,
+            target: field.value.target,
+            targetItemLongId: field.value.targetItemLongId,
+            type: field.value.type,
+            itemId: field.value.targetItemLongId?.split("/").pop(),
+            queryString: field.value.queryString,
+        });
+    }, [field]);
+    if (!field.value)
+        return;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)("focus-shadow flex justify-between border border-gray-300 p-2", readOnly ? "bg-gray-100" : "cursor-pointer bg-white"), onClick: (e) => {
+                    if (readOnly)
+                        return;
+                    setShowDialog(true);
+                    e.preventDefault();
+                }, children: [(0, jsx_runtime_1.jsx)("div", { children: field.value.url }), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-link" })] }), showDialog && ((0, jsx_runtime_1.jsx)(LinkEditorDialog_1.LinkEditorDialog, { linkValue: link || { type: "internal" }, onOk: (link) => {
+                    const xml = link.type == "internal"
+                        ? '<link linktype="internal" querystring="' +
+                            (link.queryString ?? "") +
+                            '" id="' +
+                            link.itemId +
+                            '" target="' +
+                            link.target +
+                            '" />'
+                        : '<link linktype="external" querystring="' +
+                            (link.queryString ?? "") +
+                            '" url="' +
+                            link.url +
+                            '" target="' +
+                            link.target +
+                            '" />';
+                    editContext?.operations.editField({
+                        field: field.descriptor,
+                        rawValue: xml,
+                        refresh: "immediate",
+                    });
+                    setShowDialog(false);
+                }, onCancel: () => {
+                    setShowDialog(false);
+                } }))] }));
+}