@node-edit-utils/core 2.1.8 → 2.2.0

package/dist/node-edit-utils.umd.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.1.8
+ * @version 2.2.0
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -9,68 +9,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MarkupCanvas = {}));
 })(this, (function (exports) { 'use strict';
 
-    // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
-    function withRAFThrottle(func) {
-        let rafId = null;
-        let lastArgs = null;
-        const throttled = (...args) => {
-            lastArgs = args;
-            if (rafId === null) {
-                rafId = requestAnimationFrame(() => {
-                    if (lastArgs) {
-                        func(...lastArgs);
-                    }
-                    rafId = null;
-                    lastArgs = null;
-                });
-            }
-        };
-        throttled.cleanup = () => {
-            if (rafId !== null) {
-                cancelAnimationFrame(rafId);
-                rafId = null;
-                lastArgs = null;
-            }
-        };
-        return throttled;
-    }
-    // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
-    function withDoubleRAF(func) {
-        let rafId1 = null;
-        let rafId2 = null;
-        let lastArgs = null;
-        const throttled = (...args) => {
-            lastArgs = args;
-            if (rafId1 === null) {
-                rafId1 = requestAnimationFrame(() => {
-                    // First RAF: let browser complete layout
-                    rafId2 = requestAnimationFrame(() => {
-                        // Second RAF: read bounds after layout is complete
-                        if (lastArgs) {
-                            const currentArgs = lastArgs;
-                            rafId1 = null;
-                            rafId2 = null;
-                            lastArgs = null;
-                            func(...currentArgs);
-                        }
-                    });
-                });
-            }
-        };
-        throttled.cleanup = () => {
-            if (rafId1 !== null) {
-                cancelAnimationFrame(rafId1);
-                rafId1 = null;
-            }
-            if (rafId2 !== null) {
-                cancelAnimationFrame(rafId2);
-                rafId2 = null;
-            }
-            lastArgs = null;
-        };
-        return throttled;
-    }
-
     const getCanvasWindowValue = (path) => {
         // biome-ignore lint/suspicious/noExplicitAny: global window extension
         const canvas = window.canvas;
@@ -92,11 +30,14 @@
                 disconnect: () => { },
             };
         }
-        const throttledUpdate = withRAFThrottle(() => {
-            applyCanvasState();
-        });
         const observer = new MutationObserver(() => {
-            throttledUpdate();
+            applyCanvasState();
+            // Refresh highlight frame (throttled via withRAFThrottle)
+            // biome-ignore lint/suspicious/noExplicitAny: global window extension
+            const nodeTools = window.nodeTools;
+            if (nodeTools?.refreshHighlightFrame) {
+                nodeTools.refreshHighlightFrame();
+            }
         });
         observer.observe(transformLayer, {
             attributes: true,
@@ -105,7 +46,6 @@
             childList: true,
         });
         function disconnect() {
-            throttledUpdate.cleanup();
             observer.disconnect();
         }
         return {
@@ -121,6 +61,32 @@
         return resizeObserver;
     };
 
+    // biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+    function withRAFThrottle(func) {
+        let rafId = null;
+        let lastArgs = null;
+        const throttled = (...args) => {
+            lastArgs = args;
+            if (rafId === null) {
+                rafId = requestAnimationFrame(() => {
+                    if (lastArgs) {
+                        func(...lastArgs);
+                    }
+                    rafId = null;
+                    lastArgs = null;
+                });
+            }
+        };
+        throttled.cleanup = () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+                lastArgs = null;
+            }
+        };
+        return throttled;
+    }
+
     function sendPostMessage(action, data) {
         window.parent.postMessage({
             source: "node-edit-utils",
@@ -142,11 +108,6 @@
     };
 
     const processPostMessage = (event, onNodeSelected) => {
-        // if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
-        //   if (event.data.action === "zoom") {
-        //     // Zoom handling can be implemented here if needed
-        //   }
-        // }
         if (event.data.source === "application") {
             if (event.data.action === "selectedNodeChanged") {
                 const nodeId = event.data.data;
@@ -162,17 +123,14 @@
         }
     };
 
-    function getHighlightFrameElement(nodeProvider) {
-        return nodeProvider.querySelector(".highlight-frame");
-    }
-
-    const clearHighlightFrame = (nodeProvider) => {
-        if (!nodeProvider) {
-            return;
+    const clearHighlightFrame = () => {
+        const frame = document.body.querySelector(".highlight-frame-overlay");
+        if (frame) {
+            frame.remove();
         }
-        const highlightFrame = getHighlightFrameElement(nodeProvider);
-        if (highlightFrame) {
-            highlightFrame.remove();
+        const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+        if (toolsWrapper) {
+            toolsWrapper.remove();
         }
     };
 
@@ -192,6 +150,21 @@
         }, { elements: [], found: false }).elements;
     };
 
+    const isInsideComponent = (element) => {
+        let current = element.parentElement;
+        while (current) {
+            if (current.getAttribute("data-instance") === "true") {
+                return true;
+            }
+            // Stop at node-provider to avoid checking beyond the editable area
+            if (current.getAttribute("data-role") === "node-provider") {
+                break;
+            }
+            current = current.parentElement;
+        }
+        return false;
+    };
+
     const targetSameCandidates = (cache, current) => cache.length === current.length && cache.every((el, i) => el === current[i]);
 
     let candidateCache = [];
@@ -201,7 +174,9 @@
         const clickX = event.clientX;
         const clickY = event.clientY;
         const clickThrough = event.metaKey || event.ctrlKey;
-        const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) && !element.classList.contains("select-none"));
+        const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) &&
+            !element.classList.contains("select-none") &&
+            !isInsideComponent(element));
         if (editableNode && candidates.includes(editableNode)) {
             return editableNode;
         }
@@ -226,7 +201,7 @@
         event.preventDefault();
         event.stopPropagation();
         if (nodeProvider && !nodeProvider.contains(event.target)) {
-            clearHighlightFrame(nodeProvider);
+            clearHighlightFrame();
             onNodeSelected(null);
             return;
         }
@@ -258,48 +233,90 @@
         };
     };
 
-    function getElementBounds(element, nodeProvider) {
-        const elementRect = element.getBoundingClientRect();
-        const componentRootRect = nodeProvider.getBoundingClientRect();
-        const relativeTop = elementRect.top - componentRootRect.top;
-        const relativeLeft = elementRect.left - componentRootRect.left;
-        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
-        const top = parseFloat((relativeTop / zoom).toFixed(5));
-        const left = parseFloat((relativeLeft / zoom).toFixed(5));
-        const width = Math.max(4, parseFloat((elementRect.width / zoom).toFixed(5)));
-        const height = parseFloat((elementRect.height / zoom).toFixed(5));
+    const isComponentInstance = (element) => {
+        return element.getAttribute("data-instance") === "true";
+    };
+
+    const HANDLE_SIZE = 6;
+    const getComponentColor$2 = () => {
+        return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+    };
+    const createCornerHandle = (group, x, y, className, isInstance = false) => {
+        const handle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        // Position relative to group (offset by half handle size to center on corner)
+        handle.setAttribute("x", (x - HANDLE_SIZE / 2).toString());
+        handle.setAttribute("y", (y - HANDLE_SIZE / 2).toString());
+        handle.setAttribute("width", HANDLE_SIZE.toString());
+        handle.setAttribute("height", HANDLE_SIZE.toString());
+        handle.setAttribute("vector-effect", "non-scaling-stroke");
+        handle.classList.add("highlight-frame-handle", className);
+        if (isInstance) {
+            handle.setAttribute("stroke", getComponentColor$2());
+        }
+        group.appendChild(handle);
+        return handle;
+    };
+    const createCornerHandles = (group, width, height, isInstance = false) => {
+        // Create corner handles using relative coordinates (group handles positioning)
+        createCornerHandle(group, 0, 0, "handle-top-left", isInstance);
+        createCornerHandle(group, width, 0, "handle-top-right", isInstance);
+        createCornerHandle(group, width, height, "handle-bottom-right", isInstance);
+        createCornerHandle(group, 0, height, "handle-bottom-left", isInstance);
+    };
+
+    function getScreenBounds(element) {
+        const rect = element.getBoundingClientRect();
         return {
-            top,
-            left,
-            width,
-            height,
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height,
         };
     }
 
-    const createHighlightFrame = (node, nodeProvider) => {
-        const { top, left, width, height } = getElementBounds(node, nodeProvider);
-        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
-        document.body.style.setProperty("--zoom", zoom.toString());
-        document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
-        const frame = document.createElement("div");
-        frame.classList.add("highlight-frame");
-        frame.style.setProperty("--frame-top", `${top}px`);
-        frame.style.setProperty("--frame-left", `${left}px`);
-        frame.style.setProperty("--frame-width", `${width}px`);
-        frame.style.setProperty("--frame-height", `${height}px`);
-        // Create SVG overlay for outline
+    const getComponentColor$1 = () => {
+        return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+    };
+    const createHighlightFrame = (node, isInstance = false) => {
+        const { top, left, width, height } = getScreenBounds(node);
+        // Create fixed SVG overlay
         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svg.classList.add("highlight-frame-svg");
+        svg.classList.add("highlight-frame-overlay");
+        if (isInstance) {
+            svg.classList.add("is-instance");
+        }
+        svg.setAttribute("data-node-id", node.getAttribute("data-node-id") || "");
+        // Set fixed positioning
+        svg.style.position = "fixed";
+        svg.style.top = "0";
+        svg.style.left = "0";
+        svg.style.width = "100vw";
+        svg.style.height = "100vh";
+        svg.style.pointerEvents = "none";
+        svg.style.zIndex = "5000";
+        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        svg.setAttribute("width", viewportWidth.toString());
+        svg.setAttribute("height", viewportHeight.toString());
+        const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        group.classList.add("highlight-frame-group");
+        group.setAttribute("transform", `translate(${left}, ${top})`);
         const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
         rect.setAttribute("x", "0");
         rect.setAttribute("y", "0");
-        rect.setAttribute("width", "100%");
-        rect.setAttribute("height", "100%");
+        rect.setAttribute("width", width.toString());
+        rect.setAttribute("height", height.toString());
+        rect.setAttribute("vector-effect", "non-scaling-stroke");
         rect.classList.add("highlight-frame-rect");
-        svg.appendChild(rect);
-        frame.appendChild(svg);
-        const highlightFrame = frame;
-        return highlightFrame;
+        // Apply instance color if it's an instance
+        if (isInstance) {
+            rect.setAttribute("stroke", getComponentColor$1());
+        }
+        group.appendChild(rect);
+        createCornerHandles(group, width, height, isInstance);
+        svg.appendChild(group);
+        document.body.appendChild(svg);
+        return svg;
     };
 
     const createTagLabel = (node, nodeTools) => {
@@ -309,56 +326,177 @@
         nodeTools.appendChild(tagLabel);
     };
 
-    const createToolsContainer = (node, highlightFrame) => {
+    const createToolsContainer = (node, highlightFrame, isInstance = false) => {
         const nodeTools = document.createElement("div");
         nodeTools.className = "node-tools";
+        if (isInstance) {
+            nodeTools.classList.add("is-instance");
+        }
         highlightFrame.appendChild(nodeTools);
         createTagLabel(node, nodeTools);
     };
 
-    const highlightNode = (node, nodeProvider) => {
+    function getHighlightFrameElement() {
+        return document.body.querySelector(".highlight-frame-overlay");
+    }
+
+    const highlightNode = (node) => {
         if (!node)
             return;
-        const existingHighlightFrame = getHighlightFrameElement(nodeProvider);
+        const existingHighlightFrame = getHighlightFrameElement();
+        const existingToolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
         if (existingHighlightFrame) {
             existingHighlightFrame.remove();
         }
-        const highlightFrame = createHighlightFrame(node, nodeProvider);
+        if (existingToolsWrapper) {
+            existingToolsWrapper.remove();
+        }
+        const isInstance = isComponentInstance(node);
+        const highlightFrame = createHighlightFrame(node, isInstance);
         if (node.contentEditable === "true") {
             highlightFrame.classList.add("is-editable");
         }
-        createToolsContainer(node, highlightFrame);
-        nodeProvider.appendChild(highlightFrame);
+        // Create tools wrapper with tag label - centered using translateX(-50%)
+        const { left, top, height } = getScreenBounds(node);
+        const bottomY = top + height;
+        const toolsWrapper = document.createElement("div");
+        toolsWrapper.classList.add("highlight-frame-tools-wrapper");
+        if (isInstance) {
+            toolsWrapper.classList.add("is-instance");
+        }
+        toolsWrapper.style.position = "fixed";
+        toolsWrapper.style.left = `${left}px`;
+        toolsWrapper.style.top = `${bottomY}px`;
+        toolsWrapper.style.transform = "translateX(-50%)";
+        toolsWrapper.style.transformOrigin = "center";
+        toolsWrapper.style.pointerEvents = "none";
+        toolsWrapper.style.zIndex = "5000"; // Match --z-index-highlight (below canvas rulers)
+        createToolsContainer(node, toolsWrapper, isInstance);
+        document.body.appendChild(toolsWrapper);
     };
 
+    const getComponentColor = () => {
+        return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+    };
     const refreshHighlightFrame = (node, nodeProvider) => {
-        const frame = getHighlightFrameElement(nodeProvider);
-        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+        // Batch all DOM reads first (single layout pass)
+        const frame = getHighlightFrameElement();
         if (!frame)
             return;
-        if (zoom >= 0.3) {
+        const isInstance = isComponentInstance(node);
+        // Update SVG dimensions to match current viewport (handles window resize and ensures coordinate system is correct)
+        // Use clientWidth/Height to match getBoundingClientRect() coordinate system (excludes scrollbars)
+        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        frame.setAttribute("width", viewportWidth.toString());
+        frame.setAttribute("height", viewportHeight.toString());
+        // Update instance class
+        if (isInstance) {
+            frame.classList.add("is-instance");
+        }
+        else {
+            frame.classList.remove("is-instance");
+        }
+        const group = frame.querySelector(".highlight-frame-group");
+        if (!group)
+            return;
+        const rect = group.querySelector("rect");
+        if (!rect)
+            return;
+        // Update instance color
+        if (isInstance) {
+            rect.setAttribute("stroke", getComponentColor());
+        }
+        else {
+            rect.removeAttribute("stroke"); // Use CSS default
+        }
+        const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+        const nodeTools = toolsWrapper?.querySelector(".node-tools");
+        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+        const bounds = getScreenBounds(node);
+        // Calculate all values before any DOM writes
+        const { top, left, width, height } = bounds;
+        const bottomY = top + height;
+        // Update instance classes on tools wrapper and node tools
+        if (toolsWrapper) {
+            if (isInstance) {
+                toolsWrapper.classList.add("is-instance");
+            }
+            else {
+                toolsWrapper.classList.remove("is-instance");
+            }
+        }
+        if (nodeTools) {
+            if (isInstance) {
+                nodeTools.classList.add("is-instance");
+            }
+            else {
+                nodeTools.classList.remove("is-instance");
+            }
+        }
+        // Batch all DOM writes (single paint pass)
+        // Update group transform to move entire group (rect + handles) at once
+        group.setAttribute("transform", `translate(${left}, ${top})`);
+        // Update rect dimensions (position is handled by group transform)
+        rect.setAttribute("width", width.toString());
+        rect.setAttribute("height", height.toString());
+        // Update corner handles positions (relative to group, so only width/height matter)
+        const topLeft = group.querySelector(".handle-top-left");
+        const topRight = group.querySelector(".handle-top-right");
+        const bottomRight = group.querySelector(".handle-bottom-right");
+        const bottomLeft = group.querySelector(".handle-bottom-left");
+        const HANDLE_SIZE = 6;
+        // Update handle colors and positions
+        const handles = [topLeft, topRight, bottomRight, bottomLeft];
+        handles.forEach((handle) => {
+            if (handle) {
+                if (isInstance) {
+                    handle.setAttribute("stroke", getComponentColor());
+                }
+                else {
+                    handle.removeAttribute("stroke"); // Use CSS default
+                }
+            }
+        });
+        if (topLeft) {
+            topLeft.setAttribute("x", (-HANDLE_SIZE / 2).toString());
+            topLeft.setAttribute("y", (-HANDLE_SIZE / 2).toString());
+        }
+        if (topRight) {
+            topRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+            topRight.setAttribute("y", (-HANDLE_SIZE / 2).toString());
+        }
+        if (bottomRight) {
+            bottomRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+            bottomRight.setAttribute("y", (height - HANDLE_SIZE / 2).toString());
+        }
+        if (bottomLeft) {
+            bottomLeft.setAttribute("x", (-HANDLE_SIZE / 2).toString());
+            bottomLeft.setAttribute("y", (height - HANDLE_SIZE / 2).toString());
+        }
+        // Update tools wrapper position (use calculated bounds, not rect attributes)
+        if (toolsWrapper) {
+            toolsWrapper.style.left = `${left}px`;
+            toolsWrapper.style.top = `${bottomY}px`;
+        }
+        if (zoom <= 10) {
             nodeProvider.style.setProperty("--tool-opacity", `1`);
         }
         else {
             nodeProvider.style.setProperty("--tool-opacity", `0`);
         }
-        const { top, left, width, height } = getElementBounds(node, nodeProvider);
-        frame.style.setProperty("--frame-top", `${top}px`);
-        frame.style.setProperty("--frame-left", `${left}px`);
-        frame.style.setProperty("--frame-width", `${width}px`);
-        frame.style.setProperty("--frame-height", `${height}px`);
     };
 
-    const updateHighlightFrameVisibility = (node, nodeProvider) => {
-        const frame = getHighlightFrameElement(nodeProvider);
+    const updateHighlightFrameVisibility = (node) => {
+        const frame = getHighlightFrameElement();
         if (!frame)
             return;
         const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
         const displayValue = hasHiddenClass ? "none" : "";
         frame.style.display = displayValue;
-        const tagLabel = frame.querySelector(".tag-label");
-        if (tagLabel) {
-            tagLabel.style.display = displayValue;
+        const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+        if (toolsWrapper) {
+            toolsWrapper.style.display = displayValue;
         }
     };
 
@@ -498,21 +636,23 @@
     const createNodeTools = (element) => {
         const nodeProvider = element;
         let resizeObserver = null;
-        let nodeResizeObserver = null;
         let mutationObserver = null;
         let selectedNode = null;
         const text = nodeText();
-        const throttledFrameRefresh = withDoubleRAF(refreshHighlightFrame);
+        // Combined throttled function for refresh + visibility update
+        const throttledRefreshAndVisibility = withRAFThrottle((node, nodeProvider) => {
+            refreshHighlightFrame(node, nodeProvider);
+            updateHighlightFrameVisibility(node);
+        });
         const handleEscape = () => {
             if (text.isEditing()) {
                 text.blurEditMode();
             }
             if (selectedNode) {
                 if (nodeProvider) {
-                    clearHighlightFrame(nodeProvider);
+                    clearHighlightFrame();
                     selectedNode = null;
                     resizeObserver?.disconnect();
-                    nodeResizeObserver?.disconnect();
                     mutationObserver?.disconnect();
                 }
             }
@@ -528,33 +668,31 @@
                 }
             }
             resizeObserver?.disconnect();
-            nodeResizeObserver?.disconnect();
             mutationObserver?.disconnect();
             if (node && nodeProvider) {
                 text.enableEditMode(node, nodeProvider);
-                resizeObserver = connectResizeObserver(nodeProvider, () => {
-                    throttledFrameRefresh(node, nodeProvider);
-                });
                 mutationObserver = new MutationObserver(() => {
-                    throttledFrameRefresh(node, nodeProvider);
-                    updateHighlightFrameVisibility(node, nodeProvider);
+                    // throttledRefreshAndVisibility(node, nodeProvider);
+                    console.log("mutationObserver", node);
+                    refreshHighlightFrame(node, nodeProvider);
+                    updateHighlightFrameVisibility(node);
                 });
                 mutationObserver.observe(node, {
                     attributes: true,
-                    subtree: true,
-                    childList: true,
                     characterData: true,
                 });
-                nodeResizeObserver = connectResizeObserver(node, () => {
-                    throttledFrameRefresh(node, nodeProvider);
-                    updateHighlightFrameVisibility(node, nodeProvider);
+                resizeObserver = connectResizeObserver(node, () => {
+                    // throttledRefreshAndVisibility(node, nodeProvider);
+                    console.log("resizeObserver", node);
+                    refreshHighlightFrame(node, nodeProvider);
+                    updateHighlightFrameVisibility(node);
                 });
             }
             selectedNode = node;
             sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
-            highlightNode(node, nodeProvider) ?? null;
+            highlightNode(node) ?? null;
             if (node && nodeProvider) {
-                updateHighlightFrameVisibility(node, nodeProvider);
+                updateHighlightFrameVisibility(node);
             }
         };
         // Setup event listener
@@ -562,22 +700,25 @@
         const cleanup = () => {
             removeListeners();
             resizeObserver?.disconnect();
-            nodeResizeObserver?.disconnect();
             mutationObserver?.disconnect();
             text.blurEditMode();
-            throttledFrameRefresh.cleanup();
+            throttledRefreshAndVisibility.cleanup();
         };
         const nodeTools = {
             selectNode,
             getSelectedNode: () => selectedNode,
             refreshHighlightFrame: () => {
-                throttledFrameRefresh(selectedNode, nodeProvider);
+                if (selectedNode && nodeProvider) {
+                    // Call directly (not throttled) since this is typically called from already-throttled contexts
+                    // to avoid double RAF
+                    refreshHighlightFrame(selectedNode, nodeProvider);
+                    updateHighlightFrameVisibility(selectedNode);
+                }
             },
             clearSelectedNode: () => {
-                clearHighlightFrame(nodeProvider);
+                clearHighlightFrame();
                 selectedNode = null;
                 resizeObserver?.disconnect();
-                nodeResizeObserver?.disconnect();
                 mutationObserver?.disconnect();
             },
             getEditableNode: () => text.getEditableNode(),