@alpaca-editor/core 1.0.3762-mono

package/dist/editor/EditorWarnings.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorWarnings = EditorWarnings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const editContext_1 = require("./client/editContext");
+function EditorWarnings({ item }) {
+    var context = (0, editContext_1.useEditContext)();
+    if (!context || context.previewMode)
+        return;
+    if (!item) {
+        item = context.page?.item;
+    }
+    if (!item)
+        return;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "z-50 w-full", children: context.configuration.editorWarnings.map((x, i) => react_1.default.createElement(x, {
+            item,
+            key: "warning" + i,
+            editContext: context,
+        })) }));
+}

package/dist/editor/FieldEditorPopup.js

@@ -0,0 +1,24 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldEditorPopup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const react_1 = require("react");
+const FieldList_1 = require("./FieldList");
+exports.FieldEditorPopup = (0, react_1.forwardRef)((_, ref) => {
+    const overlayRef = (0, react_1.useRef)(null);
+    const [sections, setSections] = (0, react_1.useState)([]);
+    const [fields, setFields] = (0, react_1.useState)([]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        show: (fields, sections, ev) => {
+            setFields(fields);
+            setSections(sections);
+            overlayRef.current?.toggle(ev, ev.target);
+        },
+        close: () => {
+            overlayRef.current?.hide();
+        },
+    }));
+    return ((0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: overlayRef, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-96 h-96 flex flex-col gap-2 overflow-auto", onClick: (ev) => ev.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-end p-3", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-times cursor-pointer", onClick: () => overlayRef?.current?.hide() }) }), fields && ((0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: [{ fields }], sections: sections, validators: [] }))] }) }));
+});

package/dist/editor/FieldHistory.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldHistory = FieldHistory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editService_1 = require("../editor/services/editService");
+const react_1 = require("react");
+const react_2 = require("react");
+const editContext_1 = require("./client/editContext");
+const utils_1 = require("./utils");
+const SimpleTable_1 = require("./ui/SimpleTable");
+const SimpleIconButton_1 = require("./ui/SimpleIconButton");
+function FieldHistory({ field, onHover, }) {
+    const [fieldHistory, setFieldHistory] = (0, react_2.useState)([]);
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext) {
+        return null;
+    }
+    (0, react_1.useEffect)(() => {
+        (0, editService_1.getFieldHistory)(field.descriptor.item, field.id).then((result) => {
+            setFieldHistory(result.data ?? []);
+        });
+    }, [field]);
+    if (fieldHistory.length === 0)
+        return (0, jsx_runtime_1.jsx)("div", { className: "p-2 text-gray-500 text-xs", children: "No history" });
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs p-2 bg-gray-100 text-gray-500", children: "Field History" }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-96 overflow-auto", children: (0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { items: fieldHistory, onRowHover: onHover, rowClassName: (x) => x.undone
+                        ? "text-gray-300 cursor-pointer hover:bg-gray-50 "
+                        : "cursor-pointer hover:bg-gray-50", columns: [
+                        { header: "Date", body: (x) => (0, utils_1.formatDate)(new Date(x.date)) },
+                        { header: "User", body: (x) => x.user },
+                        { header: "Version", body: (x) => x.version },
+                        {
+                            header: "Revert",
+                            body: (x) => ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-undo", onClick: () => editContext.operations.editField({
+                                    field: field.descriptor,
+                                    rawValue: x.rawValue,
+                                    refresh: "immediate",
+                                }), label: "Revert" })),
+                        },
+                    ] }) })] }));
+}

package/dist/editor/FieldList.js

@@ -0,0 +1,63 @@
+"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.FieldList = FieldList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Section_1 = require("./ui/Section");
+const editContext_1 = require("./client/editContext");
+const FieldListFieldWithFallbacks_1 = require("./FieldListFieldWithFallbacks");
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+const checkbox_1 = require("primereact/checkbox");
+const react_uuid_1 = __importDefault(require("react-uuid"));
+const SimpleIconButton_1 = require("./ui/SimpleIconButton");
+function FieldList({ fields, compareToFields, sections, validators, filter, simplified, showStandardFieldsEnabled, readonly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [searchFilter, setSearchFilter] = (0, react_1.useState)("");
+    const [showStandardFields, setShowStandardFields] = (0, react_1.useState)(false);
+    const uniqueId = (0, react_uuid_1.default)();
+    if (!editContext)
+        return;
+    if (!fields)
+        return;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "sticky  bg-gray-50 top-0 z-10 flex gap-2 border-y border-gray-200 items-center p-2 tour-field-list", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-search" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: "Filter" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "flex-1 text-xs", value: searchFilter, onChange: (x) => setSearchFilter(x.target.value) }), searchFilter && ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-times", onClick: () => setSearchFilter(""), className: "text-xs", label: "Clear" })), showStandardFieldsEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { inputId: uniqueId, checked: showStandardFields, onChange: (e) => setShowStandardFields(e.checked) }), " ", (0, jsx_runtime_1.jsx)("label", { htmlFor: uniqueId, className: "text-xs cursor-pointer", children: "Show standard fields" })] }))] }), fields.map((itemFields, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [itemFields.headline && ((0, jsx_runtime_1.jsxs)("div", { className: "text-sm mt-2 py-2 border-b flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-angle-right" }), " ", itemFields.headline] })), (0, jsx_runtime_1.jsx)(FieldListForSingleItem, { fields: itemFields.fields, validators: validators, filter: filter, searchFilter: searchFilter, showStandardFields: showStandardFields, simplified: simplified, sections: sections, compareToFields: compareToFields, readonly: readonly }, index)] }, index)))] }));
+}
+function FieldListForSingleItem({ fields, validators, filter, searchFilter, simplified, sections, showStandardFields, compareToFields, readonly, }) {
+    let fieldsArray = Array.isArray(fields)
+        ? fields
+        : Object.values(fields);
+    if (filter)
+        fieldsArray = fieldsArray.filter(filter);
+    if (searchFilter) {
+        const searchFilterLower = searchFilter.toLowerCase();
+        fieldsArray = fieldsArray.filter((x) => x.name?.toLowerCase().includes(searchFilterLower) ||
+            x.displayName?.toLowerCase().includes(searchFilterLower));
+    }
+    if (!showStandardFields) {
+        fieldsArray = fieldsArray.filter((x) => !x.name?.startsWith("__"));
+    }
+    const sectionsGrouping = fieldsArray.reduce((acc, value) => {
+        // Group initialization
+        const section = value.section || "Default";
+        if (value.descriptor.item.id)
+            if (!acc[section]) {
+                acc[section] = [];
+            }
+        // Grouping
+        acc[section].push(value);
+        return acc;
+    }, {});
+    const sectionList = Object.values(sectionsGrouping);
+    sectionList.sort((a, b) => (a[0]?.sectionSortOrder || 0) - (b[0]?.sectionSortOrder || 0));
+    function getSectionFields(fields) {
+        fields.sort((a, b) => a?.sortOrder - b?.sortOrder);
+        return fields.map((field) => ((0, jsx_runtime_1.jsx)(FieldListFieldWithFallbacks_1.FieldListFieldWithFallbacks, { fieldDescriptor: field.descriptor, simplified: simplified, validators: validators.filter((x) => x.fieldId === field.id), compareToField: compareToFields?.find((x) => x.id === field.id), readonly: readonly }, field.id)));
+    }
+    return sectionList
+        .map((x) => x[0]?.section)
+        .filter((x) => !sections || sections.includes(x))
+        .map((section) => simplified ? (getSectionFields(sectionsGrouping[section])) : ((0, jsx_runtime_1.jsx)(Section_1.Section, { title: section, children: getSectionFields(sectionsGrouping[section]) }, section)));
+}

package/dist/editor/FieldListField.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FieldListField;
+exports.getFieldEditor = getFieldEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("primereact/tooltip");
+const editContext_1 = require("./client/editContext");
+const react_1 = require("react");
+const Icons_1 = require("./ui/Icons");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const utils_1 = require("./utils");
+const editService_1 = require("./services/editService");
+const use_debounce_1 = require("use-debounce");
+const SimpleIconButton_1 = require("./ui/SimpleIconButton");
+const FieldHistory_1 = require("./FieldHistory");
+function FieldListField({ field, validators, simplified, title, isFocusedField, showFallbackButton, compareToField, readonly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const modifiedFieldsContext = (0, editContext_1.useModifiedFieldsContext)();
+    const fieldItem = field.descriptor.item;
+    const [showRawValue, setShowRawValue] = (0, react_1.useState)(false);
+    const generatorsOverlay = (0, react_1.useRef)(null);
+    const fieldHistoryOverlay = (0, react_1.useRef)(null);
+    const [generatorButtons, setButtons] = (0, react_1.useState)();
+    const [isModified, setIsModified] = (0, react_1.useState)(false);
+    const [isSaved, setIsSaved] = (0, react_1.useState)(false);
+    const [historyEntry, setHistoryEntry] = (0, react_1.useState)();
+    async function editButtonClicked(x) {
+        editContext?.triggerFieldAction(field.descriptor, x);
+    }
+    (0, react_1.useEffect)(() => {
+        updateState();
+        setShowRawValue(false);
+    }, [
+        field.descriptor.item.id,
+        field.descriptor.item.language,
+        field.descriptor.item.version,
+        field.descriptor.fieldId,
+    ]);
+    (0, react_1.useEffect)(updateState, [modifiedFieldsContext?.modifiedFields]);
+    function updateState() {
+        const modifiedField = modifiedFieldsContext?.modifiedFields.find((x) => x.fieldId === field.id &&
+            x.item.id === fieldItem.id &&
+            x.item.language === fieldItem.language &&
+            x.item.version === fieldItem.version);
+        if (modifiedField) {
+            setIsModified(true);
+            setIsSaved(!modifiedField.isDirty);
+        }
+        else {
+            setIsModified(false);
+            setIsSaved(false);
+        }
+    }
+    const fieldLockedBySession = (0, utils_1.getSessionWithFieldLock)(field.descriptor, editContext);
+    const debouncedSetFieldvalue = (0, use_debounce_1.useThrottledCallback)(async (value) => {
+        await editContext.operations.editField({
+            field: field.descriptor,
+            value: value,
+            refresh: "none",
+        });
+    }, editContext.configuration.debounceFieldEditsInterval, {
+        trailing: true,
+    });
+    const isReadOnly = readonly ||
+        !field.canWrite ||
+        (fieldLockedBySession &&
+            fieldLockedBySession.sessionId !== editContext.sessionId) ||
+        false;
+    let classNames = " flex items-stretch";
+    if (isFocusedField)
+        classNames += " focused-field ";
+    if (isReadOnly)
+        classNames += " readonly ";
+    if (isModified && !isSaved)
+        classNames += " saving ";
+    if (isSaved)
+        classNames += " saved ";
+    let validationBarClassNames = undefined;
+    if (validators.find((x) => x.result > 1))
+        validationBarClassNames = " pl-2 border-l-4 border-red-500";
+    const executingAction = editContext.activeFieldActions.find((x) => x.field.fieldId == field.id &&
+        x.field.item?.id == fieldItem.id &&
+        x.field.item?.language == fieldItem.language &&
+        x.field.item?.version == fieldItem.version);
+    if (executingAction?.state == "running")
+        classNames += " executing-action ";
+    (0, react_1.useEffect)(() => {
+        const load = async () => {
+            if (!field.descriptor)
+                return;
+            const buttons = await (0, editService_1.loadFieldButtons)(field.descriptor);
+            field.buttons = buttons;
+            setButtons(buttons);
+        };
+        if (isFocusedField) {
+            if (field.buttons)
+                setButtons(field.buttons);
+            else
+                load();
+        }
+    }, [isFocusedField]);
+    (0, react_1.useEffect)(() => {
+        if (editContext.currentOverlay !== field.id + "_generators")
+            generatorsOverlay.current?.hide();
+    }, [editContext.currentOverlay]);
+    const renderGeneratorButtons = () => {
+        if (generatorButtons?.length || 0 > 0)
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!executingAction || executingAction.state !== "running") && ((0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: (0, jsx_runtime_1.jsx)(Icons_1.WizardIcon, { className: "w-4 h-4" }), label: "Generate", onClick: (e) => {
+                            generatorsOverlay.current?.toggle(e);
+                            editContext.setCurrentOverlay(field.id + "_generators");
+                            e.preventDefault();
+                            e.stopPropagation();
+                        } })), executingAction && executingAction.state === "running" && ((0, jsx_runtime_1.jsxs)("div", { className: "ml-auto text-xs", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-spin pi-spinner text-xs flex items-center" }), " ", executingAction?.actionButton.label] })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: generatorsOverlay, className: "p-1", children: generatorButtons?.map((x) => ((0, jsx_runtime_1.jsxs)("button", { className: "text-xs p-1 block hover:text-gray-400", onClick: () => {
+                                editButtonClicked(x);
+                                generatorsOverlay.current?.hide();
+                            }, children: [x.icon && (0, jsx_runtime_1.jsx)("i", { className: x.icon + " mr-2 text-xs" }), x.label] }, x.id))) })] }));
+        return null;
+    };
+    const config = editContext.configuration.fieldTypes[field.type];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classNames, children: [validationBarClassNames && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: validationBarClassNames, id: "validation_" + field.id }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: "#validation_" + field.id, children: validators
+                            .filter((x) => x.result > 1)
+                            .map((x) => ((0, jsx_runtime_1.jsx)("div", { children: x.message }, x.validator))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-x-3 gap-y-1 items-center flex-wrap min-h-7", children: [(0, jsx_runtime_1.jsx)("label", { className: "font-bold block text-xs select-text", children: title || field.displayName || field.name }), fieldLockedBySession &&
+                                fieldLockedBySession.sessionId !== editContext.sessionId && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs bg-pink-400 text-white p-1", children: ["locked by ", fieldLockedBySession.user.name] })), isFocusedField &&
+                                (!fieldLockedBySession ||
+                                    fieldLockedBySession?.sessionId === editContext.sessionId) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [field.isShared && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-gray-400", children: "[Shared]" })), (0, jsx_runtime_1.jsx)("span", { className: "text-xs", children: "\u00B7" }), !field.isFallback && field.rawValue !== null ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-xs p-0 ", onClick: () => {
+                                            editContext?.operations.editField({
+                                                field: field.descriptor,
+                                                rawValue: null,
+                                            });
+                                        }, children: ["Reset", " "] })) : (showFallbackButton), config?.buttons?.map((x) => {
+                                        return ((0, jsx_runtime_1.jsxs)("button", { className: "text-xs p-0", onClick: () => editContext.triggerFieldAction(field.descriptor, x), children: [(0, jsx_runtime_1.jsx)("i", { className: "text-xs pi " + x.icon }), " ", x.label] }, x.id));
+                                    }), !simplified && ((0, jsx_runtime_1.jsxs)("button", { className: "text-xs p-0", onClick: () => {
+                                            setShowRawValue(!showRawValue);
+                                        }, children: [(0, jsx_runtime_1.jsx)("i", { className: "text-xs pi " +
+                                                    (showRawValue ? "pi-check-square" : "pi-stop") }), " ", "Raw"] })), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-comment", onClick: () => {
+                                                    editContext.switchView("reviews");
+                                                    editContext.addComment();
+                                                }, label: "Add Comment" }), !readonly && renderGeneratorButtons(), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-history", onClick: (ev) => {
+                                                    fieldHistoryOverlay.current?.toggle(ev);
+                                                    ev.preventDefault();
+                                                    ev.stopPropagation();
+                                                }, label: "Field History" }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: fieldHistoryOverlay, className: "p-1", children: (0, jsx_runtime_1.jsx)(FieldHistory_1.FieldHistory, { field: field, onHover: (x) => setHistoryEntry(x) }) })] })] }))] }), executingAction?.message && ((0, jsx_runtime_1.jsx)("div", { className: "text-xs p-0 mt-1 mb-1", children: executingAction?.message })), !compareToField && ((0, jsx_runtime_1.jsx)("div", { className: "text-xs p-0 mt-1 ", children: getFieldEditor(historyEntry
+                            ? { ...field, value: historyEntry.value, isHistoric: true }
+                            : field, showRawValue, historyEntry ? true : isReadOnly, editContext.configuration, debouncedSetFieldvalue) })), compareToField && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs p-0 mt-1 gap-1 flex w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: getFieldEditor(field, showRawValue, isReadOnly, editContext.configuration, debouncedSetFieldvalue) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: getFieldEditor(compareToField, showRawValue, true, editContext.configuration, debouncedSetFieldvalue) })] }))] })] }, field.id +
+        "_" +
+        fieldItem.id +
+        "_" +
+        fieldItem.language +
+        "_" +
+        fieldItem.version));
+}
+function getFieldEditor(field, showRawValue, isReadOnly, configuration, debouncedSetFieldvalue) {
+    let fieldType = showRawValue ? "raw" : field.type;
+    var typeConfig = configuration.fieldTypes[fieldType];
+    if (!typeConfig)
+        typeConfig = configuration.fieldTypes["single-line text"];
+    if (!typeConfig)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(typeConfig.editor, { field: field, readOnly: isReadOnly, updateFieldValue: (value) => {
+            debouncedSetFieldvalue(value);
+        } }));
+}

package/dist/editor/FieldListFieldWithFallbacks.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldListFieldWithFallbacks = FieldListFieldWithFallbacks;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FieldListField_1 = __importDefault(require("./FieldListField"));
+const editContext_1 = require("./client/editContext");
+function FieldListFieldWithFallbacks({ fieldDescriptor, validators, simplified, title, compareToField, readonly, }) {
+    const [showFallback, setShowFallback] = (0, react_1.useState)(false);
+    const [fallbackChain, setFallbackChain] = (0, react_1.useState)();
+    const ref = (0, react_1.useRef)(null);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [field, setField] = (0, react_1.useState)();
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const operationsContext = (0, editContext_1.useOperationsContext)();
+    (0, react_1.useEffect)(() => {
+        const loadField = async () => {
+            const field = await editContext.itemsRepository.getField(fieldDescriptor);
+            setField(field);
+        };
+        loadField();
+    }, [editContext.itemsRepository.revision, fieldDescriptor]);
+    //const liveField = editContext.getLiveField(field);
+    // function isEditFieldOp(op?: EditOperation): op is EditFieldOperation {
+    //   return op?.type === "edit-field";
+    // }
+    async function loadFallback() {
+        if (!field?.fallbackChain || !editContext)
+            return;
+        await editContext.itemsRepository.getItems(field.fallbackChain?.map((x) => x.item));
+        setFallbackChain((await Promise.all(field.fallbackChain.map((x) => editContext.itemsRepository.getField(x)))).filter((x) => x));
+        //const chain = await loadFallbackChain(field.descriptor);
+        // if(currentEditOp.item.language !== field._editor!.descriptor.item.language) {
+        //   chain.forEach((x, i) => {
+        //     if (i > 0) {
+        //       x._editor!.isFallback = true;
+        //     }
+        //   });
+        // }
+        // // chain.forEach((x, i) => {
+        // //   if (
+        // //     init ||
+        // //     !isEditFieldOp(currentEditOp) ||
+        // //     currentEditOp.fieldId !== x.id ||
+        // //     currentEditOp.item.id !== x._editor!.descriptor.item.id ||
+        // //     currentEditOp.item.language !== x._editor!.descriptor.item.language
+        // //   ) {
+        // //     console.log("apply change", i, x);
+        // //     x._editor! = chain[i]._editor!;
+        // //     x.value = chain[i].value;
+        // //     x.jsonValue = chain[i].jsonValue;
+        // //   }
+        // // });
+        //setFallbackChain(chain);
+    }
+    const fieldItem = field?.descriptor.item;
+    const isFocusedField = editContext?.focusedField?.fieldId === field?.id &&
+        editContext.focusedField?.item?.id === fieldItem?.id &&
+        editContext.focusedField?.item?.language === fieldItem?.language;
+    (0, react_1.useEffect)(() => {
+        const handleEnter = () => {
+            setHover(true);
+        };
+        const handleLeave = () => {
+            setHover(false);
+        };
+        ref.current?.addEventListener("mouseenter", handleEnter);
+        ref.current?.addEventListener("mouseleave", handleLeave);
+        return () => {
+            ref.current?.removeEventListener("mouseenter", handleEnter);
+            ref.current?.removeEventListener("mouseleave", handleLeave);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (ref.current && isFocusedField) {
+            // only scroll if the field is outside the viewport
+            const rect = ref.current.getBoundingClientRect();
+            if (rect.top < 0 || rect.bottom > window.innerHeight) {
+                ref.current.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center",
+                    inline: "center",
+                });
+            }
+        }
+    }, [editContext.focusedField?.fieldId]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current && (isFocusedField || hover) && field?.isFallback) {
+            loadFallback();
+        }
+    }, [editContext.focusedField, hover]);
+    (0, react_1.useEffect)(() => {
+        if (field?.isFallback && isFocusedField) {
+            loadFallback();
+        }
+    }, [
+        operationsContext?.editOperationExecuted,
+        editContext.refreshCompletedFlag,
+        editContext.itemsRepository.revision,
+    ]);
+    const showFallbackButton = field?.isFallback && ((0, jsx_runtime_1.jsxs)("button", { className: "text-xs p-0", onClick: () => setShowFallback(!showFallback), children: [(0, jsx_runtime_1.jsx)("i", { className: "text-xs pi " + (showFallback ? "pi-check-square" : "pi-stop") }), " ", "Fallback"] }));
+    if (!field) {
+        return;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-field-id": field.id, ref: ref, className: "[&:not(:first-child)]:mt-4", onClickCapture: () => {
+            editContext.setFocusedField(field.descriptor, field.canWrite || false);
+        }, children: [(0, jsx_runtime_1.jsx)(FieldListField_1.default, { field: field, validators: validators, simplified: simplified, title: title, isFocusedField: isFocusedField || hover, showFallbackButton: showFallbackButton, compareToField: compareToField, readonly: readonly }), field.isFallback && isFocusedField && showFallback && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallbackChain &&
+                    fallbackChain.map((x, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "ml-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center mb-4", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-up text-xl font-bold text-blue-300 fallback-arrow-animation relative top-3" }) }), (0, jsx_runtime_1.jsx)(FieldListField_1.default, { field: x, validators: validators, simplified: true, isFocusedField: true, readonly: readonly, title: (0, jsx_runtime_1.jsxs)("div", { className: "text-xs", children: [x.displayName || x.name, " (", x.descriptor.item.language, ")", x.descriptor.item.id != field.descriptor.item.id && ((0, jsx_runtime_1.jsxs)("span", { className: "text-gray-400", children: ["- Item: ", x.descriptor.item.id] }))] }) }, i)] }, i))) }))] }, field.id));
+}

package/dist/editor/FloatingToolbar.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FloatingToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function FloatingToolbar({ children, onPin, height, width, }) {
+    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 95 });
+    const [size, setSize] = (0, react_1.useState)({ width: 400, height: 70 });
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const [resizing, setResizing] = (0, react_1.useState)(false);
+    const [offset, setOffset] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [hidden, setHidden] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        console.log("WIDTH: ", width, "Height: ", height);
+        setSize({ width: width || 400, height: height || 70 });
+    }, []);
+    const handleMouseDown = (0, react_1.useCallback)((e) => {
+        // Start dragging and calculate the offset from the mouse to the sidebar top-left corner
+        setDragging(true);
+        setOffset({
+            x: e.clientX - position.x,
+            y: e.clientY - position.y,
+        });
+    }, [position]);
+    const handleMouseMove = (0, react_1.useCallback)((e) => {
+        if (dragging) {
+            // Update the position state based on mouse movement, adjusted by the initial offset
+            setPosition({
+                x: e.clientX - offset.x,
+                y: e.clientY - offset.y,
+            });
+        }
+    }, [dragging, offset]);
+    const handleMouseUp = (0, react_1.useCallback)(() => {
+        // Stop dragging
+        setDragging(false);
+    }, []);
+    const handleResizeMouseDown = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        setResizing(true);
+        setOffset({
+            x: e.clientX,
+            y: e.clientY,
+        });
+    }, []);
+    const handleResizeMouseMove = (0, react_1.useCallback)((e) => {
+        if (resizing) {
+            const newWidth = size.width + (e.clientX - offset.x);
+            const newHeight = size.height + (e.clientY - offset.y);
+            setSize({
+                width: newWidth > 200 ? newWidth : 200, // Minimum width
+                height: newHeight > 100 ? newHeight : 100, // Minimum height
+            });
+            setOffset({
+                x: e.clientX,
+                y: e.clientY,
+            });
+        }
+    }, [resizing, offset, size]);
+    const handleResizeMouseUp = (0, react_1.useCallback)(() => {
+        setResizing(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (resizing) {
+            document.addEventListener("mousemove", handleResizeMouseMove);
+            document.addEventListener("mouseup", handleResizeMouseUp);
+        }
+        return () => {
+            document.removeEventListener("mousemove", handleResizeMouseMove);
+            document.removeEventListener("mouseup", handleResizeMouseUp);
+        };
+    }, [resizing, handleResizeMouseMove, handleResizeMouseUp]);
+    // Add event listeners to the document when the sidebar is being dragged
+    (0, react_1.useEffect)(() => {
+        if (dragging) {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+        }
+        // Cleanup the document event listeners when the component unmounts or dragging stops
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [dragging, handleMouseMove, handleMouseUp]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "border border-gray-200 drop-shadow z-10 flex flex-col", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: {
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            position: "absolute", // Use 'fixed' or 'absolute' depending on your layout needs
+            height: `${hidden ? 30 : size.height}px`,
+            width: `${size.width}px`,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-100 w-full flex justify-between items-between p-2 text-sm", style: { cursor: "move", userSelect: "none" }, onMouseDown: handleMouseDown, children: ["Toolbar", (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [hidden && ((0, jsx_runtime_1.jsx)("div", { className: "border-2 border-gray-800 w-4 h-4 cusor-pointer", onClick: () => setHidden(false) })), !hidden && ((0, jsx_runtime_1.jsx)("div", { className: "border-b-2 border-gray-800 w-4 h-4 cusor-pointer", onClick: () => setHidden(true) })), onPin && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-down-left cursor-pointer", onClick: onPin }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: !hidden && children }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 bg-gray-100" }), (0, jsx_runtime_1.jsx)("div", { className: "cursor-nwse-resize w-4 h-4 absolute -bottom-1 -right-2 text-gray-500", onMouseDown: handleResizeMouseDown, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-sort-down -rotate-45 w-4 h-4" }) })] }));
+}

package/dist/editor/ImageEditor.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageEditor = ImageEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("./client/editContext");
+const DialogContext_1 = require("./client/DialogContext");
+function ImageEditor({ field, style, }) {
+    const [showMenu, setShowMenu] = (0, react_1.useState)(false);
+    const editContext = (0, editContext_1.useEditContext)();
+    const dialogContext = (0, DialogContext_1.useDialog)();
+    if (!field || !editContext)
+        return null;
+    const imageSelected = (0, react_1.useCallback)(async (imageId) => {
+        editContext.operations.editField({
+            field: field.descriptor,
+            rawValue: '<image mediaid="{' + imageId + '}" />',
+            refresh: "immediate",
+        });
+    }, [field]);
+    async function selectMedia() {
+        const selectedImageId = await editContext?.selectMedia({
+            selectedIdPath: field.value?.src || "",
+            mode: "images",
+        });
+        if (selectedImageId)
+            imageSelected(selectedImageId);
+    }
+    const getImageSrc = () => {
+        if (!field.value) {
+            if (!field.rawValue)
+                return null;
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(field.rawValue, "text/xml");
+            const imageElement = xmlDoc.documentElement;
+            return imageElement.getAttribute("src");
+        }
+        return field.value.src;
+    };
+    const getImageAlt = () => {
+        console.log(`GetImageAlt: ${JSON.stringify(field.value)}`);
+        if (!field.value)
+            return "";
+        // Standard image
+        return field.value.alt;
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center", onMouseEnter: () => setShowMenu(true), onMouseLeave: () => setShowMenu(false), style: style, "data-testid": "select-media", children: [getImageSrc() && ((0, jsx_runtime_1.jsx)("img", { src: getImageSrc(), alt: getImageAlt(), className: "max-h-full max-w-full object-contain" })), showMenu && ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 grid grid-cols-1 gap-1.5 items-stretch justify-center text-sm absolute inset-0 bg-black/50", children: [(0, jsx_runtime_1.jsx)(Btn, { label: getImageSrc() ? "Change Image" : "Select Image", icon: "pi pi-image", onClick: () => selectMedia(), testId: "select-media-button", className: "min-w-[80px]" }), editContext?.configuration?.fieldTypes["image"]?.buttons?.map((button) => ((0, jsx_runtime_1.jsx)(Btn, { label: button.label, icon: button.icon, onClick: () => button?.clientAction?.({
+                                field,
+                                editContext,
+                                dialogContext,
+                            }) }, button.id)))] }))] }) }));
+}
+function Btn({ label, icon, onClick, testId, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { className: `btn bg-gray-500 text-white p-1.5 rounded-lg opacity-70 border border-gray-200 hover:opacity-85 gap-1.5 flex items-center ${className}`, onClick: onClick, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)("i", { className: icon }), " ", label] }));
+}