@alpaca-editor/core 1.0.3762-mono

package/dist/editor/page-editor-chrome/CommentHighlighting.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentHighlighting = CommentHighlighting;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const utils_1 = require("../utils");
+const react_1 = require("react");
+const react_2 = require("react");
+const utils_2 = require("primereact/utils");
+const Icons_1 = require("../ui/Icons");
+function CommentHighlighting({ comment, scale, iframe, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const modifiedFields = (0, editContext_1.useModifiedFieldsContext)();
+    const [range, setRange] = (0, react_1.useState)([
+        comment.rangeStart || 0,
+        comment.rangeEnd || 0,
+    ]);
+    (0, react_2.useEffect)(() => {
+        const findRange = async () => {
+            if (!editContext)
+                return;
+            if (comment.fieldValue &&
+                comment.fieldId &&
+                comment.rangeStart !== undefined &&
+                comment.rangeEnd !== undefined) {
+                const field = await editContext.itemsRepository.getField({
+                    item: {
+                        id: comment.itemId,
+                        language: comment.language,
+                        version: comment.version,
+                    },
+                    fieldId: comment.fieldId,
+                });
+                const modifiedField = modifiedFields?.modifiedFields.find((x) => x.fieldId === field?.id &&
+                    x.item.id === comment.itemId &&
+                    x.item.language === comment.language &&
+                    x.item.version === comment.version);
+                const mapping = computeMapping(modifiedField?.value || field?.rawValue || "", comment.fieldValue);
+                const mappedRange = [
+                    mapping[comment.rangeStart],
+                    mapping[comment.rangeEnd],
+                ];
+                if (mappedRange[0] !== undefined && mappedRange[1] !== undefined) {
+                    setRange(mappedRange);
+                }
+            }
+        };
+        findRange();
+    }, [comment.fieldValue, modifiedFields?.modifiedFields]);
+    if (!editContext)
+        return null;
+    if (!comment.fieldId)
+        return null;
+    const fieldElement = (0, utils_1.findFieldElement)(iframe, {
+        item: {
+            id: comment.itemId,
+            language: comment.language,
+            version: comment.version,
+        },
+        fieldId: comment.fieldId,
+    });
+    if (!fieldElement)
+        return null;
+    let rects = null;
+    if (range[0] !== undefined && range[1] !== undefined) {
+        const startData = getTextNodeAtOffset(fieldElement, range[0]);
+        const endData = getTextNodeAtOffset(fieldElement, range[1]);
+        if (startData && endData) {
+            const textRange = document.createRange();
+            textRange.setStart(startData.node, startData.offset);
+            textRange.setEnd(endData.node, endData.offset);
+            rects = textRange.getClientRects();
+        }
+    }
+    if (!rects || rects.length === 0) {
+        const fallbackRect = fieldElement.getBoundingClientRect();
+        rects = {
+            length: 1,
+            0: fallbackRect,
+            item: (index) => (index === 0 ? fallbackRect : null),
+            [Symbol.iterator]: function* () {
+                yield fallbackRect;
+            },
+        };
+    }
+    const iframeRect = iframe.getBoundingClientRect();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from(rects).map((rect, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                position: "absolute",
+                top: rect.top * scale,
+                left: rect.left * scale,
+                width: rect.width * scale,
+                height: rect.height * scale,
+                pointerEvents: "none",
+            }, children: [index === 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_2.classNames)("absolute w-5 h-5  cursor-pointer pointer-events-auto ", rect.top * scale < 18 ? "top-0" : "top-[-18px]", (rect.left + rect.width) * scale > iframeRect.width - 18
+                        ? "right-0"
+                        : "right-[-18px]"), onClick: () => {
+                        editContext.switchView("reviews");
+                        editContext?.select([comment.itemId]);
+                        editContext?.setSelectedComment(comment);
+                    }, children: (0, jsx_runtime_1.jsx)(Icons_1.CommentIcon, { className: "text-blue-500 hover:text-blue-600 " }) })), (0, jsx_runtime_1.jsx)("div", { className: "opacity-45", style: {
+                        width: "100%",
+                        height: "100%",
+                        backgroundColor: comment.isResolved
+                            ? "rgba(0, 255, 0, 0.45)"
+                            : "rgba(255, 0, 0, 0.45)",
+                    } })] }, index))) }));
+}
+function getTextNodeAtOffset(root, offset) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+    let currentNode;
+    while ((currentNode = walker.nextNode())) {
+        const nodeLength = currentNode.textContent?.length || 0;
+        if (offset <= nodeLength) {
+            return { node: currentNode, offset };
+        }
+        offset -= nodeLength;
+    }
+    return null;
+}
+/**
+ * Erzeugt ein Mapping von Positionen im modifizierten String s2 auf die entsprechenden Positionen in s1,
+ * basierend auf einer minimalen Edit-Sequenz (Levenshtein-Distance).
+ *
+ * @param s1 Originalstring
+ * @param s2 Modifizierter String
+ * @returns Ein Array, in dem mapping[j] die Position in s1 angibt, die erreicht wird, nachdem das j-te Zeichen in s2 erzeugt wurde.
+ */
+function computeMapping(s1, s2) {
+    const n = s1.length;
+    const m = s2.length;
+    // 1. Aufbau der DP-Matrix und Backpointer-Matrix
+    // dp[i][j] enthält die minimale Anzahl von Operationen, um s1[0..i-1] in s2[0..j-1] zu überführen.
+    const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+    const back = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(""));
+    // Initialisierung: leere Präfixe
+    for (let i = 0; i <= n; i++) {
+        dp[i][0] = i;
+        if (i > 0) {
+            back[i][0] = "D"; // "Deletion": Zeichen aus s1 wird gelöscht.
+        }
+    }
+    for (let j = 0; j <= m; j++) {
+        dp[0][j] = j;
+        if (j > 0) {
+            back[0][j] = "I"; // "Insertion": Zeichen in s2 wurde eingefügt.
+        }
+    }
+    // Füllen der DP-Matrix (Wagner–Fischer-Algorithmus)
+    for (let i = 1; i <= n; i++) {
+        for (let j = 1; j <= m; j++) {
+            const cost = s1[i - 1] === s2[j - 1] ? 0 : 1;
+            // Drei Möglichkeiten:
+            const deletion = dp[i - 1][j] + 1;
+            const insertion = dp[i][j - 1] + 1;
+            const substitution = dp[i - 1][j - 1] + cost; // "M" (Match) wenn cost==0, sonst "S" (Substitution)
+            // Feste Tie-Breaking Reihenfolge: zuerst Deletion, dann Insertion, dann Substitution.
+            let bestVal = deletion;
+            let op = "D";
+            if (insertion < bestVal) {
+                bestVal = insertion;
+                op = "I";
+            }
+            if (substitution < bestVal) {
+                bestVal = substitution;
+                op = cost === 0 ? "M" : "S";
+            }
+            dp[i][j] = bestVal;
+            back[i][j] = op;
+        }
+    }
+    // 2. Rekonstruktion des Edit-Skripts per Backtracking
+    const ops = [];
+    let i = n;
+    let j = m;
+    while (i > 0 || j > 0) {
+        const op = back[i][j];
+        ops.push(op);
+        if (op === "M" || op === "S") {
+            i--;
+            j--;
+        }
+        else if (op === "D") {
+            i--;
+        }
+        else if (op === "I") {
+            j--;
+        }
+    }
+    ops.reverse(); // Jetzt liegen die Operationen in der Vorwärtsreihenfolge vor.
+    // 3. Simulation der Transformation von s1 zu s2 und Aufbau des Mappings.
+    // mapping[j] soll die Position in s1 angeben, nachdem das j-te Zeichen in s2 erzeugt wurde.
+    const mapping = new Array(m + 1);
+    let iPos = 0; // Aktuelle Position in s1
+    let jPos = 0; // Aktuelle Position in s2
+    mapping[jPos] = iPos; // Vor jeglicher Transformation
+    for (const op of ops) {
+        if (op === "M" || op === "S") {
+            // Bei Match oder Substitution wird in beiden Strings ein Zeichen verarbeitet.
+            iPos++;
+            jPos++;
+            mapping[jPos] = iPos;
+        }
+        else if (op === "I") {
+            // Bei Insertion wird in s2 ein Zeichen eingefügt, s1 bleibt unverändert.
+            jPos++;
+            mapping[jPos] = iPos;
+        }
+        else if (op === "D") {
+            // Bei Deletion wird in s1 ein Zeichen übersprungen.
+            iPos++;
+        }
+    }
+    return mapping;
+}

package/dist/editor/page-editor-chrome/CommentHighlightings.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentHighlightings = CommentHighlightings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const CommentHighlighting_1 = require("./CommentHighlighting");
+function CommentHighlightings({ scale, iframe, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [comments, setComments] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        setComments(editContext?.comments || []);
+    }, [editContext?.comments]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: comments
+            .filter((x) => !x.isResolved)
+            .map((comment) => ((0, jsx_runtime_1.jsx)(CommentHighlighting_1.CommentHighlighting, { iframe: iframe, scale: scale, comment: comment }, comment.id))) }));
+}

package/dist/editor/page-editor-chrome/FieldActionIndicator.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldActionIndicator = FieldActionIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+function FieldActionIndicator({ action }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const pageViewContext = editContext.pageView;
+    const field = action.field;
+    const fieldElements = pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(`[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"]`);
+    if (!fieldElements)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: [...fieldElements].map((element, index) => ((0, jsx_runtime_1.jsx)(SingleIndicator, { element: element }, action.field.fieldId + action.field + index))) }));
+}
+function SingleIndicator({ element }) {
+    const rect = element.getBoundingClientRect();
+    const indicatorRect = rect;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `pointer-events-none absolute focus-shadow executing-action`, style: {
+            left: indicatorRect.x,
+            top: indicatorRect.y,
+            width: indicatorRect.width,
+            height: indicatorRect.height,
+            zIndex: 800,
+        } }));
+}

package/dist/editor/page-editor-chrome/FieldActionIndicators.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldActionsIndicators = FieldActionsIndicators;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FieldActionIndicator_1 = require("./FieldActionIndicator");
+const editContext_1 = require("../client/editContext");
+function FieldActionsIndicators() {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const actions = editContext.activeFieldActions;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions
+            .filter((x) => x.state === "running")
+            .map((action) => ((0, jsx_runtime_1.jsx)(FieldActionIndicator_1.FieldActionIndicator, { action: action }, action.field.fieldId + action.field.item.id))) }));
+}

package/dist/editor/page-editor-chrome/FieldEditedIndicator.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldEditedIndicator = FieldEditedIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+function FieldEditedIndicator({ field, scale, pageViewContext, scroll, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const fieldElements = pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(`[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"]`);
+    if (!fieldElements)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: [...fieldElements]
+            .filter((x) => x != editContext.inlineEditingFieldElement)
+            .map((element) => ((0, jsx_runtime_1.jsx)(SingleFieldEditedIndicator, { element: element, scale: scale, scroll: scroll }, field.fieldId + field.item.id))) }));
+}
+function SingleFieldEditedIndicator({ element, scale, scroll, }) {
+    const rect = element.getBoundingClientRect();
+    const indicatorRect = rect;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `pointer-events-none absolute focus-shadow edited-field`, style: {
+            left: indicatorRect.x * (scale || 1),
+            top: (indicatorRect.y + (scroll || 0)) * (scale || 1),
+            width: indicatorRect.width * (scale || 1),
+            height: indicatorRect.height * (scale || 1),
+            zIndex: 800,
+        } }));
+}

package/dist/editor/page-editor-chrome/FieldEditedIndicators.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldEditedIndicators = FieldEditedIndicators;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const FieldEditedIndicator_1 = require("./FieldEditedIndicator");
+function FieldEditedIndicators({ scale, pageViewContext, scroll, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const fields = editContext.lastEditedFields;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fields
+            .filter((x) => x.timestamp > Date.now() - 10000 && x.user.ai)
+            .map((field) => ((0, jsx_runtime_1.jsx)(FieldEditedIndicator_1.FieldEditedIndicator, { field: field, scale: scale, pageViewContext: pageViewContext, scroll: scroll }, field.fieldId + field.item.id + field.timestamp))) }));
+}

package/dist/editor/page-editor-chrome/FrameMenu.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrameMenu = FrameMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const utils_1 = require("../utils");
+const use_debounce_1 = require("use-debounce");
+function FrameMenu({ component, mode, pageViewContext, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    const mutationObserverRef = (0, react_1.useRef)(null);
+    const [componentRect, setComponentRect] = (0, react_1.useState)();
+    const updatePosition = () => {
+        if (!component || !editContext || !pageViewContext)
+            return;
+        const iframe = pageViewContext.editorIframeRef.current;
+        if (!iframe)
+            return;
+        const resetSelection = () => {
+            setComponentRect(undefined);
+        };
+        const componentRect = (0, utils_1.findComponentRect)(iframe, component.id)?.rect;
+        if (!componentRect) {
+            resetSelection();
+            return;
+        }
+        setComponentRect(componentRect);
+    };
+    const updatePositionThrottled = (0, use_debounce_1.useThrottledCallback)(updatePosition, 30);
+    // Effect to handle changes in the observed element
+    (0, react_1.useEffect)(() => {
+        if (component) {
+            const iframe = pageViewContext.editorIframeRef.current;
+            if (!iframe)
+                return;
+            mutationObserverRef.current = new MutationObserver(() => {
+                updatePosition();
+            });
+            if (!iframe.contentDocument)
+                return;
+            mutationObserverRef.current.observe(iframe.contentDocument, {
+                childList: true, // observe direct children changes
+                subtree: true, // observe all descendants changes
+                characterData: true, // observe text changes
+                //attributes: true, // observe attribute changes (like style or class)
+            });
+            // Create a new ResizeObserver instance
+            resizeObserverRef.current = new ResizeObserver(() => {
+                updatePosition();
+            });
+            const scrollContainer = iframe.contentWindow?.document.scrollingElement ||
+                iframe.contentWindow?.document.body;
+            scrollContainer?.addEventListener("scroll", updatePositionThrottled);
+            iframe.contentWindow?.addEventListener("scroll", updatePositionThrottled);
+            const componentRect = (0, utils_1.findComponentRect)(iframe, component.id);
+            if (!componentRect) {
+                updatePosition();
+                return;
+            }
+            componentRect.elements.forEach((componentElement) => {
+                resizeObserverRef.current.observe(componentElement);
+            });
+        }
+        return () => {
+            if (mutationObserverRef.current) {
+                mutationObserverRef.current.disconnect();
+                mutationObserverRef.current = null;
+            }
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+        };
+    }, [component]);
+    (0, react_1.useEffect)(() => {
+        setTimeout(() => {
+            updatePosition();
+        }, 100);
+    }, [
+        pageViewContext?.scroll,
+        pageViewContext?.viewport,
+        pageViewContext?.device,
+        pageViewContext?.fullscreen,
+        pageViewContext?.zoom,
+    ]);
+    if (!component || !editContext)
+        return null;
+    const commands = editContext.getComponentCommands([component]);
+    const isDraggable = mode === "edit" &&
+        !component.layoutId &&
+        pageViewContext.page?.item.canWriteItem;
+    false;
+    const commandButtons = commands
+        .filter((x) => !editContext.isCommandDisabled({ command: x }) &&
+        x.visibilityScopes.indexOf("editFrame") >= 0)
+        .map((x) => ({
+        id: x.id + "_button",
+        icon: x.icon,
+        label: x.label,
+        onClick: (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+            editContext.executeCommand({
+                command: x,
+                event: ev,
+            });
+        },
+    }));
+    const customButtons = []; // TODO
+    let buttons = [...customButtons];
+    buttons = [...buttons, ...commandButtons];
+    function handleDragStart(event) {
+        if (!component?.datasourceItem)
+            return;
+        event.dataTransfer.setData("componentId", component.id);
+        setTimeout(() => {
+            if (!component?.datasourceItem)
+                return;
+            editContext.dragStart({
+                type: "component",
+                typeId: component.typeId,
+                templateId: component.datasourceItem?.templateId,
+                name: component.name,
+                component: {
+                    id: component.id,
+                    language: pageViewContext.page.item.language,
+                    version: pageViewContext.page.item.version,
+                },
+            });
+        }, 50);
+        event.stopPropagation();
+    }
+    function handleDragEnd() {
+        editContext.dragEnd();
+    }
+    const isShared = component.datasourceItem?.id !== component.id;
+    const isReadonly = mode === "compare" || mode === "view";
+    const isLayout = component.layoutId;
+    const color = isReadonly
+        ? "readonly"
+        : isShared
+            ? "shared"
+            : isLayout
+                ? "layout"
+                : "default";
+    const colorVariants = {
+        shared: "border-orange-400",
+        readonly: "border-purple-400",
+        layout: "border-purple-400",
+        default: "border-sky-400",
+    };
+    const bgColorVariants = {
+        shared: "bg-orange-400",
+        readonly: "bg-purple-400",
+        layout: "bg-purple-400",
+        default: "bg-sky-400",
+    };
+    if (!componentRect)
+        return null;
+    const isMultiSelected = editContext.selection.length > 1;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `pointer-events-none absolute inset-0 border-2 ${colorVariants[color]} tour-frame-menu opacity-50 hover:opacity-100`, style: {
+                left: componentRect.x,
+                top: componentRect.y,
+                width: componentRect.width,
+                height: componentRect.height,
+                zIndex: 8,
+            }, "data-testid": "frame-menu", children: !isMultiSelected && ((0, jsx_runtime_1.jsxs)("div", { className: `editframe-menu pointer-events-auto absolute z-1000 flex items-center pr-4 text-base text-white ${bgColorVariants[color]} ` +
+                    (componentRect.y - 36 < 0 ? "rounded-bl-lg" : "rounded-t-lg"), style: {
+                    right: "-2px",
+                    top: componentRect.y - 36 < 0 ? "0" : undefined,
+                    bottom: componentRect.y - 36 >= 0
+                        ? componentRect.height - 2
+                        : undefined,
+                    zIndex: 800,
+                    height: "36px",
+                }, children: [(0, jsx_runtime_1.jsx)("div", { draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: `px-4 ${isDraggable ? "cursor-move" : "cursor-default"} `, children: component.name }), mode === "edit" && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: buttons.map((b, i) => ((0, jsx_runtime_1.jsx)("div", { className: "cursor-pointer p-1", children: typeof b.icon === "string" ? ((0, jsx_runtime_1.jsx)("i", { className: b.icon + " cursor-pointer", onClick: b.onClick, title: b.label })) : (b.icon) }, i))) }))] })) }) }));
+}

package/dist/editor/page-editor-chrome/FrameMenus.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrameMenus = FrameMenus;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+const editContext_1 = require("../client/editContext");
+const FrameMenu_1 = require("./FrameMenu");
+function FrameMenus({ mode, pageViewContext, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const selection = editContext?.selection;
+    const [components, setComponents] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (!pageViewContext.page)
+            return;
+        const comps = selection
+            ? selection
+                .map((id) => (0, componentTreeHelper_1.findComponent)(id, pageViewContext.page?.rootComponent.placeholders || []))
+                .filter((c) => c !== undefined)
+            : [];
+        setComponents(comps);
+    }, [selection, pageViewContext.page]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [components.map((c) => ((0, jsx_runtime_1.jsx)(FrameMenu_1.FrameMenu, { component: c, mode: mode, pageViewContext: pageViewContext }, c.id))), " "] }));
+}

package/dist/editor/page-editor-chrome/InlineEditor.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineEditor = InlineEditor;
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const use_debounce_1 = require("use-debounce");
+const utils_1 = require("../utils");
+function InlineEditor({ pageViewContext, mode, }) {
+    const context = (0, editContext_1.useEditContext)();
+    const modifiedFieldsContext = (0, editContext_1.useModifiedFieldsContext)();
+    if (!context)
+        return;
+    const mutationObserverRef = (0, react_1.useRef)(null);
+    const debouncedSetFieldvalue = (0, use_debounce_1.useThrottledCallback)((value, fieldId, fieldName, itemId, language, version) => {
+        var modifiedFieldValue = modifiedFieldsContext?.modifiedFields.find((x) => x.fieldId === fieldId &&
+            x.item.id === itemId &&
+            x.item.language === language &&
+            x.item.version === version)?.value;
+        if (modifiedFieldValue === value)
+            return;
+        context.operations.editField({
+            field: {
+                fieldId,
+                fieldName: fieldName ?? undefined,
+                item: {
+                    id: itemId,
+                    language,
+                    version,
+                },
+            },
+            refresh: "none",
+            value: value,
+        });
+    }, context.configuration.debounceFieldEditsInterval);
+    (0, react_1.useEffect)(() => {
+        if (!context || mode === "view")
+            return;
+        const element = context.inlineEditingFieldElement;
+        const editableElements = pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll('[contenteditable="true"]');
+        editableElements?.forEach((element) => {
+            if (element !== context.inlineEditingFieldElement)
+                element.setAttribute("contenteditable", "false");
+        });
+        if (element) {
+            const fieldId = element.getAttribute("data-fieldid");
+            const fieldName = element.getAttribute("data-fieldname");
+            const itemId = element.getAttribute("data-itemid");
+            const language = element.getAttribute("data-language");
+            const versionText = element.getAttribute("data-version");
+            const version = versionText ? parseInt(versionText) : undefined;
+            const isRichText = element.getAttribute("data-is-richtext") === "true";
+            if (!fieldId || !itemId || !language || !version)
+                return;
+            const fieldDescriptor = (0, utils_1.getFieldDescriptorFromElement)(element);
+            const hasFielLock = (0, utils_1.hasFieldLock)(fieldDescriptor, context);
+            if (!hasFielLock)
+                return;
+            element.setAttribute("contenteditable", "true");
+            mutationObserverRef.current = new MutationObserver(() => {
+                debouncedSetFieldvalue(isRichText ? element.innerHTML : element.innerText, fieldId, fieldName, itemId, language, version);
+            });
+            element.focus();
+            mutationObserverRef.current.observe(element, {
+                childList: true, // observe direct children changes
+                subtree: true, // observe all descendants changes
+                characterData: true, // observe text changes
+                //attributes: true, // observe attribute changes (like style or class)
+            });
+        }
+        return () => {
+            if (mutationObserverRef.current) {
+                mutationObserverRef.current.disconnect();
+                mutationObserverRef.current = null;
+            }
+        };
+    }, [context?.inlineEditingFieldElement]);
+    (0, react_1.useEffect)(() => {
+        const updateFields = async () => {
+            modifiedFieldsContext?.modifiedFields.forEach((field) => {
+                const elements = pageViewContext.editorIframeRef.current.contentWindow?.document.querySelectorAll(`[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`);
+                elements?.forEach(async (element) => {
+                    if (element && element !== context?.inlineEditingFieldElement) {
+                        const realField = await context.itemsRepository.getField(field);
+                        const fieldType = realField?.type;
+                        if (fieldType === "rich text" ||
+                            fieldType === "single-line text" ||
+                            fieldType === "multi-line text") {
+                            element.innerHTML = field?.value ? field.value : "";
+                        }
+                    }
+                });
+            });
+        };
+        updateFields();
+    }, [
+        modifiedFieldsContext?.modifiedFields,
+        context?.itemsRepository.revision,
+        context?.inlineEditingFieldElement,
+    ]);
+    return null;
+}

package/dist/editor/page-editor-chrome/LockedFieldIndicator.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LockedFieldIndicator = LockedFieldIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const utils_1 = require("../utils");
+function LockedFieldIndicator() {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const sessionsWithFieldLock = editContext.activeSessions.filter((x) => x.fieldLock && x.sessionId !== editContext.sessionId);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sessionsWithFieldLock.map((session) => {
+            if (!session.fieldLock)
+                return;
+            const iframe = editContext.pageView.editorIframeRef.current;
+            if (!iframe)
+                return;
+            const element = (0, utils_1.findFieldElement)(iframe, session.fieldLock);
+            if (!element)
+                return;
+            return ((0, jsx_runtime_1.jsx)(FieldLock, { element: element, iframe: iframe, session: session }, session.sessionId));
+        }) }));
+}
+function FieldLock({ element, iframe, session, }) {
+    const rect = element.getBoundingClientRect();
+    const editorRect = iframe.getBoundingClientRect();
+    if (rect && editorRect) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "absolute  text-xs text-white p-0.5 rounded hover:opacity-100 opacity-90", style: {
+                left: rect.left + "px",
+                top: rect.top + "px",
+                background: session.color,
+            }, children: session.user.name }));
+    }
+    return null;
+}