@node-edit-utils/core 2.2.7 → 2.2.9

package/dist/lib/node-tools/events/click/handleNodeClick.d.ts

@@ -1 +1,2 @@
-export declare const handleNodeClick: (event: MouseEvent, nodeProvider: HTMLElement | null, editableNode: HTMLElement | null, onNodeSelected: (node: HTMLElement | null) => void) => void;
+import type { NodeText } from "../../text/types";
+export declare const handleNodeClick: (event: MouseEvent, nodeProvider: HTMLElement | null, text: NodeText, onNodeSelected: (node: HTMLElement | null) => void) => void;

package/dist/lib/node-tools/events/setupEventListener.d.ts

@@ -1 +1,2 @@
-export declare const setupEventListener: (nodeProvider: HTMLElement | null, onNodeSelected: (node: HTMLElement | null) => void, onEscapePressed: () => void, getEditableNode: () => HTMLElement | null) => (() => void);
+import type { NodeText } from "../text/types";
+export declare const setupEventListener: (nodeProvider: HTMLElement | null, onNodeSelected: (node: HTMLElement | null) => void, onEscapePressed: () => void, text: NodeText) => (() => void);

package/dist/lib/node-tools/highlight/createCornerHandles.d.ts

@@ -1 +1 @@
-export declare const createCornerHandles: (group: SVGGElement, width: number, height: number, isInstance?: boolean) => void;
+export declare const createCornerHandles: (group: SVGGElement, width: number, height: number, isInstance?: boolean, isTextEdit?: boolean) => void;

package/dist/lib/node-tools/highlight/createHighlightFrame.d.ts

@@ -1 +1 @@
-export declare const createHighlightFrame: (node: HTMLElement, isInstance?: boolean) => SVGSVGElement;
+export declare const createHighlightFrame: (node: HTMLElement, isInstance?: boolean, isTextEdit?: boolean) => SVGSVGElement;

package/dist/lib/node-tools/highlight/createToolsContainer.d.ts

@@ -1 +1 @@
-export declare const createToolsContainer: (node: HTMLElement, highlightFrame: HTMLElement, isInstance?: boolean) => void;
+export declare const createToolsContainer: (node: HTMLElement, highlightFrame: HTMLElement, isInstance?: boolean, isTextEdit?: boolean) => void;

package/dist/lib/node-tools/select/selectNode.d.ts

@@ -1 +1,2 @@
-export declare const selectNode: (event: MouseEvent, editableNode: HTMLElement | null) => HTMLElement | null;
+import type { NodeText } from "../text/types";
+export declare const selectNode: (event: MouseEvent, nodeProvider: HTMLElement | null, text: NodeText) => HTMLElement | null;

package/dist/lib/node-tools/text/helpers/enterTextEditMode.d.ts

@@ -0,0 +1,2 @@
+import type { NodeText } from "../types";
+export declare const enterTextEditMode: (node: HTMLElement, nodeProvider: HTMLElement | null, text: NodeText) => void;

package/dist/lib/node-tools/text/helpers/handleTextChange.d.ts

@@ -0,0 +1 @@
+export declare const handleTextChange: (node: HTMLElement, mutations: MutationRecord[]) => void;

package/dist/lib/node-tools/text/helpers/shouldEnterTextEditMode.d.ts

@@ -0,0 +1 @@
+export declare const shouldEnterTextEditMode: (node: HTMLElement | null) => boolean;

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.2.7
+ * @version 2.2.9
  */
 'use strict';
 
@@ -57,32 +57,6 @@ const connectResizeObserver = (element, handler) => {
     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",
@@ -119,17 +93,30 @@ const processPostMessage = (event, onNodeSelected) => {
     }
 };
 
+const getCanvasContainer = () => {
+    return document.querySelector(".canvas-container");
+};
+
 const clearHighlightFrame = () => {
-    const frame = document.body.querySelector(".highlight-frame-overlay");
+    const canvasContainer = getCanvasContainer();
+    const container = canvasContainer || document.body;
+    const frame = container.querySelector(".highlight-frame-overlay");
     if (frame) {
         frame.remove();
     }
-    const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     if (toolsWrapper) {
         toolsWrapper.remove();
     }
 };
 
+const enterTextEditMode = (node, nodeProvider, text) => {
+    if (!node || !nodeProvider) {
+        return;
+    }
+    text.enableEditMode(node, nodeProvider);
+};
+
 const IGNORED_DOM_ELEMENTS = ["path", "rect", "circle", "ellipse", "polygon", "line", "polyline", "text", "text-noci"];
 
 const getElementsFromPoint = (clickX, clickY) => {
@@ -165,7 +152,8 @@ const targetSameCandidates = (cache, current) => cache.length === current.length
 
 let candidateCache = [];
 let attempt = 0;
-const selectNode = (event, editableNode) => {
+let lastSelectedNode = null;
+const selectNode = (event, nodeProvider, text) => {
     let selectedNode = null;
     const clickX = event.clientX;
     const clickY = event.clientY;
@@ -173,16 +161,23 @@ const selectNode = (event, editableNode) => {
     const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) &&
         !element.classList.contains("select-none") &&
         !isInsideComponent(element));
+    const editableNode = text.getEditableNode();
     if (editableNode && candidates.includes(editableNode)) {
-        return editableNode;
+        selectedNode = editableNode;
+        lastSelectedNode = selectedNode;
+        return selectedNode;
     }
     if (clickThrough) {
         candidateCache = [];
         selectedNode = candidates[0];
+        if (lastSelectedNode && lastSelectedNode === selectedNode) {
+            enterTextEditMode(selectedNode, nodeProvider, text);
+        }
+        lastSelectedNode = selectedNode;
         return selectedNode;
     }
     if (targetSameCandidates(candidateCache, candidates)) {
-        attempt <= candidates.length && attempt++;
+        attempt <= candidates.length - 2 && attempt++;
     }
     else {
         attempt = 0;
@@ -190,10 +185,14 @@ const selectNode = (event, editableNode) => {
     const nodeIndex = candidates.length - 1 - attempt;
     selectedNode = candidates[nodeIndex];
     candidateCache = candidates;
+    if (lastSelectedNode && lastSelectedNode === selectedNode) {
+        enterTextEditMode(selectedNode, nodeProvider, text);
+    }
+    lastSelectedNode = selectedNode;
     return selectedNode;
 };
 
-const handleNodeClick = (event, nodeProvider, editableNode, onNodeSelected) => {
+const handleNodeClick = (event, nodeProvider, text, onNodeSelected) => {
     event.preventDefault();
     event.stopPropagation();
     if (nodeProvider && !nodeProvider.contains(event.target)) {
@@ -201,16 +200,16 @@ const handleNodeClick = (event, nodeProvider, editableNode, onNodeSelected) => {
         onNodeSelected(null);
         return;
     }
-    const selectedNode = selectNode(event, editableNode);
+    const selectedNode = selectNode(event, nodeProvider, text);
     onNodeSelected(selectedNode);
 };
 
-const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, getEditableNode) => {
+const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, text) => {
     const messageHandler = (event) => {
         processPostMessage(event, onNodeSelected);
     };
     const documentClickHandler = (event) => {
-        handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
+        handleNodeClick(event, nodeProvider, text, onNodeSelected);
     };
     const documentKeydownHandler = (event) => {
         if (event.key === "Escape") {
@@ -237,7 +236,10 @@ 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 getTextEditColor$2 = () => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim() || "oklch(62.3% 0.214 259.815)";
+};
+const createCornerHandle = (group, x, y, className, isInstance = false, isTextEdit = 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());
@@ -249,15 +251,18 @@ const createCornerHandle = (group, x, y, className, isInstance = false) => {
     if (isInstance) {
         handle.setAttribute("stroke", getComponentColor$2());
     }
+    else if (isTextEdit) {
+        handle.setAttribute("stroke", getTextEditColor$2());
+    }
     group.appendChild(handle);
     return handle;
 };
-const createCornerHandles = (group, width, height, isInstance = false) => {
+const createCornerHandles = (group, width, height, isInstance = false, isTextEdit = 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);
+    createCornerHandle(group, 0, 0, "handle-top-left", isInstance, isTextEdit);
+    createCornerHandle(group, width, 0, "handle-top-right", isInstance, isTextEdit);
+    createCornerHandle(group, width, height, "handle-bottom-right", isInstance, isTextEdit);
+    createCornerHandle(group, 0, height, "handle-bottom-left", isInstance, isTextEdit);
 };
 
 function getScreenBounds(element) {
@@ -273,23 +278,31 @@ function getScreenBounds(element) {
 const getComponentColor$1 = () => {
     return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
-const createHighlightFrame = (node, isInstance = false) => {
+const getTextEditColor$1 = () => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim() || "oklch(62.3% 0.214 259.815)";
+};
+const createHighlightFrame = (node, isInstance = false, isTextEdit = false) => {
     const { top, left, width, height } = getScreenBounds(node);
+    // Ensure minimum width of 2px
+    const minWidth = Math.max(width, 3);
     // Create fixed SVG overlay
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.classList.add("highlight-frame-overlay");
     if (isInstance) {
         svg.classList.add("is-instance");
     }
+    if (isTextEdit) {
+        svg.classList.add("is-text-edit");
+    }
     svg.setAttribute("data-node-id", node.getAttribute("data-node-id") || "");
     // Set fixed positioning
-    svg.style.position = "fixed";
+    svg.style.position = "absolute";
     svg.style.top = "0";
     svg.style.left = "0";
     svg.style.width = "100vw";
     svg.style.height = "100vh";
     svg.style.pointerEvents = "none";
-    svg.style.zIndex = "5000";
+    svg.style.zIndex = "500";
     const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
     const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
     svg.setAttribute("width", viewportWidth.toString());
@@ -300,47 +313,85 @@ const createHighlightFrame = (node, isInstance = false) => {
     const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
     rect.setAttribute("x", "0");
     rect.setAttribute("y", "0");
-    rect.setAttribute("width", width.toString());
+    rect.setAttribute("width", minWidth.toString());
     rect.setAttribute("height", height.toString());
     rect.setAttribute("vector-effect", "non-scaling-stroke");
     rect.classList.add("highlight-frame-rect");
-    // Apply instance color if it's an instance
+    // Apply instance color if it's an instance, otherwise text edit color if in text edit mode
     if (isInstance) {
         rect.setAttribute("stroke", getComponentColor$1());
     }
+    else if (isTextEdit) {
+        rect.setAttribute("stroke", getTextEditColor$1());
+    }
     group.appendChild(rect);
-    createCornerHandles(group, width, height, isInstance);
+    createCornerHandles(group, minWidth, height, isInstance, isTextEdit);
     svg.appendChild(group);
-    document.body.appendChild(svg);
+    const canvasContainer = getCanvasContainer();
+    if (canvasContainer) {
+        canvasContainer.appendChild(svg);
+    }
+    else {
+        document.body.appendChild(svg);
+    }
     return svg;
 };
 
+const TAG_NAME_MAP = {
+    div: "Container",
+    h1: "Heading 1",
+    h2: "Heading 2",
+    h3: "Heading 3",
+    h4: "Heading 4",
+    h5: "Heading 5",
+    h6: "Heading 6",
+    p: "Text",
+    li: "List Item",
+    ul: "Unordered List",
+    ol: "Ordered List",
+    img: "Image",
+    a: "Link",
+};
+const capitalize = (str) => {
+    if (!str)
+        return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
 const createTagLabel = (node, nodeTools) => {
     const tagLabel = document.createElement("div");
     tagLabel.className = "tag-label";
-    tagLabel.textContent = node.tagName.toLowerCase();
+    const instanceName = node.getAttribute("data-instance-name");
+    const tagName = node.tagName.toLowerCase();
+    const labelText = instanceName || TAG_NAME_MAP[tagName] || tagName;
+    tagLabel.textContent = capitalize(labelText);
     nodeTools.appendChild(tagLabel);
 };
 
-const createToolsContainer = (node, highlightFrame, isInstance = false) => {
+const createToolsContainer = (node, highlightFrame, isInstance = false, isTextEdit = false) => {
     const nodeTools = document.createElement("div");
     nodeTools.className = "node-tools";
     if (isInstance) {
         nodeTools.classList.add("is-instance");
     }
+    if (isTextEdit) {
+        nodeTools.classList.add("is-text-edit");
+    }
     highlightFrame.appendChild(nodeTools);
     createTagLabel(node, nodeTools);
 };
 
 function getHighlightFrameElement() {
-    return document.body.querySelector(".highlight-frame-overlay");
+    const canvasContainer = getCanvasContainer();
+    const container = canvasContainer || document.body;
+    return container.querySelector(".highlight-frame-overlay");
 }
 
 const highlightNode = (node) => {
     if (!node)
         return;
     const existingHighlightFrame = getHighlightFrameElement();
-    const existingToolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+    const canvasContainer = getCanvasContainer();
+    const existingToolsWrapper = canvasContainer?.querySelector(".highlight-frame-tools-wrapper") || document.body.querySelector(".highlight-frame-tools-wrapper");
     if (existingHighlightFrame) {
         existingHighlightFrame.remove();
     }
@@ -348,7 +399,8 @@ const highlightNode = (node) => {
         existingToolsWrapper.remove();
     }
     const isInstance = isComponentInstance(node);
-    const highlightFrame = createHighlightFrame(node, isInstance);
+    const isTextEdit = node.contentEditable === "true";
+    const highlightFrame = createHighlightFrame(node, isInstance, isTextEdit);
     if (node.contentEditable === "true") {
         highlightFrame.classList.add("is-editable");
     }
@@ -361,24 +413,36 @@ const highlightNode = (node) => {
     if (isInstance) {
         toolsWrapper.classList.add("is-instance");
     }
-    toolsWrapper.style.position = "fixed";
+    if (isTextEdit) {
+        toolsWrapper.classList.add("is-text-edit");
+    }
+    toolsWrapper.style.position = "absolute";
     toolsWrapper.style.transform = `translate(${left}px, ${bottomY}px)`;
     toolsWrapper.style.transformOrigin = "left center";
     toolsWrapper.style.pointerEvents = "none";
-    toolsWrapper.style.zIndex = "5000"; // Match --z-index-highlight (below canvas rulers)
-    createToolsContainer(node, toolsWrapper, isInstance);
-    document.body.appendChild(toolsWrapper);
+    toolsWrapper.style.zIndex = "500";
+    createToolsContainer(node, toolsWrapper, isInstance, isTextEdit);
+    if (canvasContainer) {
+        canvasContainer.appendChild(toolsWrapper);
+    }
+    else {
+        document.body.appendChild(toolsWrapper);
+    }
 };
 
 const getComponentColor = () => {
     return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
+const getTextEditColor = () => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim() || "oklch(62.3% 0.214 259.815)";
+};
 const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     // Batch all DOM reads first (single layout pass)
     const frame = getHighlightFrameElement();
     if (!frame)
         return;
     const isInstance = isComponentInstance(node);
+    const isTextEdit = node.contentEditable === "true";
     // 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;
@@ -392,6 +456,13 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     else {
         frame.classList.remove("is-instance");
     }
+    // Update text edit class
+    if (isTextEdit) {
+        frame.classList.add("is-text-edit");
+    }
+    else {
+        frame.classList.remove("is-text-edit");
+    }
     const group = frame.querySelector(".highlight-frame-group");
     if (!group)
         return;
@@ -402,15 +473,22 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     if (isInstance) {
         rect.setAttribute("stroke", getComponentColor());
     }
+    else if (isTextEdit) {
+        rect.setAttribute("stroke", getTextEditColor());
+    }
     else {
         rect.removeAttribute("stroke"); // Use CSS default
     }
-    const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+    const canvasContainer = getCanvasContainer();
+    const container = canvasContainer || document.body;
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     const nodeTools = toolsWrapper?.querySelector(".node-tools");
     const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
     const bounds = getScreenBounds(node);
     // Calculate all values before any DOM writes
     const { top, left, width, height } = bounds;
+    // Ensure minimum width of 2px
+    const minWidth = Math.max(width, 3);
     const bottomY = top + height;
     // Update instance classes on tools wrapper and node tools
     if (toolsWrapper) {
@@ -420,6 +498,13 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
         else {
             toolsWrapper.classList.remove("is-instance");
         }
+        // Update text edit class
+        if (isTextEdit) {
+            toolsWrapper.classList.add("is-text-edit");
+        }
+        else {
+            toolsWrapper.classList.remove("is-text-edit");
+        }
     }
     if (nodeTools) {
         if (isInstance) {
@@ -428,12 +513,19 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
         else {
             nodeTools.classList.remove("is-instance");
         }
+        // Update text edit class
+        if (isTextEdit) {
+            nodeTools.classList.add("is-text-edit");
+        }
+        else {
+            nodeTools.classList.remove("is-text-edit");
+        }
     }
     // 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("width", minWidth.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");
@@ -448,6 +540,9 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
             if (isInstance) {
                 handle.setAttribute("stroke", getComponentColor());
             }
+            else if (isTextEdit) {
+                handle.setAttribute("stroke", getTextEditColor());
+            }
             else {
                 handle.removeAttribute("stroke"); // Use CSS default
             }
@@ -458,11 +553,11 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
         topLeft.setAttribute("y", (-HANDLE_SIZE / 2).toString());
     }
     if (topRight) {
-        topRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+        topRight.setAttribute("x", (minWidth - HANDLE_SIZE / 2).toString());
         topRight.setAttribute("y", (-HANDLE_SIZE / 2).toString());
     }
     if (bottomRight) {
-        bottomRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+        bottomRight.setAttribute("x", (minWidth - HANDLE_SIZE / 2).toString());
         bottomRight.setAttribute("y", (height - HANDLE_SIZE / 2).toString());
     }
     if (bottomLeft) {
@@ -491,7 +586,9 @@ const updateHighlightFrameVisibility = (node) => {
     const displayValue = hasHiddenClass ? "none" : "";
     // Batch DOM writes
     frame.style.display = displayValue;
-    const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+    const canvasContainer = getCanvasContainer();
+    const container = canvasContainer || document.body;
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     if (toolsWrapper) {
         toolsWrapper.style.display = displayValue;
     }
@@ -548,11 +645,73 @@ const connectMutationObserver = (element, handler) => {
     return mutationObserver;
 };
 
+const handleTextChange = (node, mutations) => {
+    // Check if any mutation is a text content change
+    const hasTextChange = mutations.some((mutation) => {
+        return (mutation.type === "characterData" ||
+            (mutation.type === "childList" && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)));
+    });
+    if (!hasTextChange) {
+        return;
+    }
+    // Get the text content of the node
+    const textContent = node.textContent ?? "";
+    // Get the node ID
+    const nodeId = node.getAttribute("data-node-id");
+    console.log("textContentChanged", nodeId, textContent);
+    // Send postMessage with the text change
+    sendPostMessage("textContentChanged", {
+        nodeId,
+        textContent,
+    });
+};
+
 const setupMutationObserver = (node, nodeProvider, canvasName = "canvas") => {
-    const mutationObserver = connectMutationObserver(node, () => {
+    // Accumulate mutations instead of replacing them
+    let pendingMutations = [];
+    let rafId1 = null;
+    let rafId2 = null;
+    const processMutations = () => {
+        if (pendingMutations.length > 0) {
+            const mutationsToProcess = [...pendingMutations];
+            pendingMutations = [];
+            handleTextChange(node, mutationsToProcess);
+        }
+    };
+    const scheduleProcess = () => {
+        if (rafId1 === null) {
+            rafId1 = requestAnimationFrame(() => {
+                // First RAF: let browser complete layout
+                rafId2 = requestAnimationFrame(() => {
+                    // Second RAF: read textContent after layout is complete
+                    processMutations();
+                    rafId1 = null;
+                    rafId2 = null;
+                });
+            });
+        }
+    };
+    const cleanup = () => {
+        if (rafId1 !== null) {
+            cancelAnimationFrame(rafId1);
+            rafId1 = null;
+        }
+        if (rafId2 !== null) {
+            cancelAnimationFrame(rafId2);
+            rafId2 = null;
+        }
+        pendingMutations = [];
+    };
+    const mutationObserver = connectMutationObserver(node, (mutations) => {
+        // Accumulate mutations instead of replacing
+        pendingMutations.push(...mutations);
+        scheduleProcess();
         refreshHighlightFrame(node, nodeProvider, canvasName);
     });
-    return () => mutationObserver.disconnect();
+    return () => {
+        mutationObserver.disconnect();
+        cleanup();
+    };
 };
 
 const setupNodeListeners = (node, nodeProvider, blur, canvasName = "canvas") => {
@@ -637,11 +796,6 @@ const createNodeTools = (element, canvasName = "canvas") => {
     let parentMutationObserver = null;
     let selectedNode = null;
     const text = nodeText(canvasName);
-    // Combined throttled function for refresh + visibility update
-    const throttledRefreshAndVisibility = withRAFThrottle((node, nodeProvider) => {
-        refreshHighlightFrame(node, nodeProvider, canvasName);
-        updateHighlightFrameVisibility(node);
-    });
     const handleEscape = () => {
         if (text.isEditing()) {
             text.blurEditMode();
@@ -670,7 +824,6 @@ const createNodeTools = (element, canvasName = "canvas") => {
         mutationObserver?.disconnect();
         parentMutationObserver?.disconnect();
         if (node && nodeProvider) {
-            text.enableEditMode(node, nodeProvider);
             // Check if node is still in DOM and handle cleanup if removed
             const checkNodeExists = () => {
                 if (!document.contains(node)) {
@@ -687,9 +840,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
             mutationObserver = new MutationObserver(() => {
                 checkNodeExists();
                 if (!document.contains(node))
-                    return; // Exit early if node was removed
-                // throttledRefreshAndVisibility(node, nodeProvider);
-                console.log("mutationObserver", node);
+                    return;
                 refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
@@ -725,8 +876,6 @@ const createNodeTools = (element, canvasName = "canvas") => {
                 checkNodeExists();
                 if (!document.contains(node))
                     return; // Exit early if node was removed
-                // throttledRefreshAndVisibility(node, nodeProvider);
-                console.log("resizeObserver", node);
                 refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
@@ -740,14 +889,13 @@ const createNodeTools = (element, canvasName = "canvas") => {
         }
     };
     // Setup event listener
-    const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text.getEditableNode);
+    const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text);
     const cleanup = () => {
         removeListeners();
         resizeObserver?.disconnect();
         mutationObserver?.disconnect();
         parentMutationObserver?.disconnect();
         text.blurEditMode();
-        throttledRefreshAndVisibility.cleanup();
         // Clear highlight frame and reset selected node
         clearHighlightFrame();
         selectedNode = null;
@@ -776,9 +924,31 @@ const createNodeTools = (element, canvasName = "canvas") => {
     return nodeTools;
 };
 
-const getCanvasContainer = () => {
-    return document.querySelector(".canvas-container");
-};
+// 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;
+}
 
 const DEFAULT_WIDTH = 400;
 const RESIZE_CONFIG = {