@node-edit-utils/core 2.2.7 → 2.2.9

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.2.7
+ * @version 2.2.9
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -61,32 +61,6 @@
         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",
@@ -123,17 +97,30 @@
         }
     };
 
+    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) => {
@@ -169,7 +156,8 @@
 
     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;
@@ -177,16 +165,23 @@
         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;
@@ -194,10 +189,14 @@
         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)) {
@@ -205,16 +204,16 @@
             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") {
@@ -241,7 +240,10 @@
     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());
@@ -253,15 +255,18 @@
         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) {
@@ -277,23 +282,31 @@
     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());
@@ -304,47 +317,85 @@
         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();
         }
@@ -352,7 +403,8 @@
             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");
         }
@@ -365,24 +417,36 @@
         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;
@@ -396,6 +460,13 @@
         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;
@@ -406,15 +477,22 @@
         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) {
@@ -424,6 +502,13 @@
             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) {
@@ -432,12 +517,19 @@
             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");
@@ -452,6 +544,9 @@
                 if (isInstance) {
                     handle.setAttribute("stroke", getComponentColor());
                 }
+                else if (isTextEdit) {
+                    handle.setAttribute("stroke", getTextEditColor());
+                }
                 else {
                     handle.removeAttribute("stroke"); // Use CSS default
                 }
@@ -462,11 +557,11 @@
             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) {
@@ -495,7 +590,9 @@
         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;
         }
@@ -552,11 +649,73 @@
         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") => {
@@ -641,11 +800,6 @@
         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();
@@ -674,7 +828,6 @@
             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)) {
@@ -691,9 +844,7 @@
                 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);
                 });
@@ -729,8 +880,6 @@
                     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);
                 });
@@ -744,14 +893,13 @@
             }
         };
         // 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;
@@ -780,9 +928,31 @@
         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 = {