@node-edit-utils/core 2.2.4 → 2.2.6

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.4
+ * @version 2.2.6
  */
 'use strict';
 
@@ -633,6 +633,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
     const nodeProvider = element;
     let resizeObserver = null;
     let mutationObserver = null;
+    let parentMutationObserver = null;
     let selectedNode = null;
     const text = nodeText(canvasName);
     // Combined throttled function for refresh + visibility update
@@ -650,6 +651,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
                 selectedNode = null;
                 resizeObserver?.disconnect();
                 mutationObserver?.disconnect();
+                parentMutationObserver?.disconnect();
             }
         }
     };
@@ -665,9 +667,26 @@ const createNodeTools = (element, canvasName = "canvas") => {
         }
         resizeObserver?.disconnect();
         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)) {
+                    // Node was removed from DOM, clear highlight and cleanup
+                    clearHighlightFrame();
+                    selectedNode = null;
+                    resizeObserver?.disconnect();
+                    mutationObserver?.disconnect();
+                    parentMutationObserver?.disconnect();
+                    sendPostMessage("selectedNodeChanged", null);
+                    return;
+                }
+            };
             mutationObserver = new MutationObserver(() => {
+                checkNodeExists();
+                if (!document.contains(node))
+                    return; // Exit early if node was removed
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("mutationObserver", node);
                 refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -676,8 +695,35 @@ const createNodeTools = (element, canvasName = "canvas") => {
             mutationObserver.observe(node, {
                 attributes: true,
                 characterData: true,
+                childList: true,
+                subtree: true,
             });
+            // Also observe parent node to catch when this node is removed
+            const parentNode = node.parentElement;
+            if (parentNode) {
+                parentMutationObserver = new MutationObserver((mutations) => {
+                    // Check if the selected node was removed
+                    for (const mutation of mutations) {
+                        if (mutation.type === "childList") {
+                            for (const removedNode of Array.from(mutation.removedNodes)) {
+                                // Check if the removed node is the selected node, or if the selected node is contained within the removed subtree
+                                if (removedNode === node || (removedNode instanceof Node && removedNode.contains(node))) {
+                                    checkNodeExists();
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                });
+                parentMutationObserver.observe(parentNode, {
+                    childList: true,
+                    subtree: false, // Only direct children to avoid too many callbacks
+                });
+            }
             resizeObserver = connectResizeObserver(node, () => {
+                checkNodeExists();
+                if (!document.contains(node))
+                    return; // Exit early if node was removed
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("resizeObserver", node);
                 refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -697,16 +743,19 @@ const createNodeTools = (element, canvasName = "canvas") => {
         removeListeners();
         resizeObserver?.disconnect();
         mutationObserver?.disconnect();
+        parentMutationObserver?.disconnect();
         text.blurEditMode();
         throttledRefreshAndVisibility.cleanup();
+        // Clear highlight frame and reset selected node
+        clearHighlightFrame();
+        selectedNode = null;
+        sendPostMessage("selectedNodeChanged", null);
     };
     const nodeTools = {
         selectNode,
         getSelectedNode: () => selectedNode,
         refreshHighlightFrame: () => {
             if (selectedNode && nodeProvider) {
-                // Call directly (not throttled) since this is typically called from already-throttled contexts
-                // to avoid double RAF
                 refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(selectedNode);
             }
@@ -716,6 +765,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
             selectedNode = null;
             resizeObserver?.disconnect();
             mutationObserver?.disconnect();
+            parentMutationObserver?.disconnect();
         },
         getEditableNode: () => text.getEditableNode(),
         cleanup,

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.2.4
+ * @version 2.2.6
  */
 const getCanvasWindowValue = (path, canvasName = "canvas") => {
     // biome-ignore lint/suspicious/noExplicitAny: global window extension
@@ -631,6 +631,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
     const nodeProvider = element;
     let resizeObserver = null;
     let mutationObserver = null;
+    let parentMutationObserver = null;
     let selectedNode = null;
     const text = nodeText(canvasName);
     // Combined throttled function for refresh + visibility update
@@ -648,6 +649,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
                 selectedNode = null;
                 resizeObserver?.disconnect();
                 mutationObserver?.disconnect();
+                parentMutationObserver?.disconnect();
             }
         }
     };
@@ -663,9 +665,26 @@ const createNodeTools = (element, canvasName = "canvas") => {
         }
         resizeObserver?.disconnect();
         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)) {
+                    // Node was removed from DOM, clear highlight and cleanup
+                    clearHighlightFrame();
+                    selectedNode = null;
+                    resizeObserver?.disconnect();
+                    mutationObserver?.disconnect();
+                    parentMutationObserver?.disconnect();
+                    sendPostMessage("selectedNodeChanged", null);
+                    return;
+                }
+            };
             mutationObserver = new MutationObserver(() => {
+                checkNodeExists();
+                if (!document.contains(node))
+                    return; // Exit early if node was removed
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("mutationObserver", node);
                 refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -674,8 +693,35 @@ const createNodeTools = (element, canvasName = "canvas") => {
             mutationObserver.observe(node, {
                 attributes: true,
                 characterData: true,
+                childList: true,
+                subtree: true,
             });
+            // Also observe parent node to catch when this node is removed
+            const parentNode = node.parentElement;
+            if (parentNode) {
+                parentMutationObserver = new MutationObserver((mutations) => {
+                    // Check if the selected node was removed
+                    for (const mutation of mutations) {
+                        if (mutation.type === "childList") {
+                            for (const removedNode of Array.from(mutation.removedNodes)) {
+                                // Check if the removed node is the selected node, or if the selected node is contained within the removed subtree
+                                if (removedNode === node || (removedNode instanceof Node && removedNode.contains(node))) {
+                                    checkNodeExists();
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                });
+                parentMutationObserver.observe(parentNode, {
+                    childList: true,
+                    subtree: false, // Only direct children to avoid too many callbacks
+                });
+            }
             resizeObserver = connectResizeObserver(node, () => {
+                checkNodeExists();
+                if (!document.contains(node))
+                    return; // Exit early if node was removed
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("resizeObserver", node);
                 refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -695,16 +741,19 @@ const createNodeTools = (element, canvasName = "canvas") => {
         removeListeners();
         resizeObserver?.disconnect();
         mutationObserver?.disconnect();
+        parentMutationObserver?.disconnect();
         text.blurEditMode();
         throttledRefreshAndVisibility.cleanup();
+        // Clear highlight frame and reset selected node
+        clearHighlightFrame();
+        selectedNode = null;
+        sendPostMessage("selectedNodeChanged", null);
     };
     const nodeTools = {
         selectNode,
         getSelectedNode: () => selectedNode,
         refreshHighlightFrame: () => {
             if (selectedNode && nodeProvider) {
-                // Call directly (not throttled) since this is typically called from already-throttled contexts
-                // to avoid double RAF
                 refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(selectedNode);
             }
@@ -714,6 +763,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
             selectedNode = null;
             resizeObserver?.disconnect();
             mutationObserver?.disconnect();
+            parentMutationObserver?.disconnect();
         },
         getEditableNode: () => text.getEditableNode(),
         cleanup,

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.4
+ * @version 2.2.6
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -637,6 +637,7 @@
         const nodeProvider = element;
         let resizeObserver = null;
         let mutationObserver = null;
+        let parentMutationObserver = null;
         let selectedNode = null;
         const text = nodeText(canvasName);
         // Combined throttled function for refresh + visibility update
@@ -654,6 +655,7 @@
                     selectedNode = null;
                     resizeObserver?.disconnect();
                     mutationObserver?.disconnect();
+                    parentMutationObserver?.disconnect();
                 }
             }
         };
@@ -669,9 +671,26 @@
             }
             resizeObserver?.disconnect();
             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)) {
+                        // Node was removed from DOM, clear highlight and cleanup
+                        clearHighlightFrame();
+                        selectedNode = null;
+                        resizeObserver?.disconnect();
+                        mutationObserver?.disconnect();
+                        parentMutationObserver?.disconnect();
+                        sendPostMessage("selectedNodeChanged", null);
+                        return;
+                    }
+                };
                 mutationObserver = new MutationObserver(() => {
+                    checkNodeExists();
+                    if (!document.contains(node))
+                        return; // Exit early if node was removed
                     // throttledRefreshAndVisibility(node, nodeProvider);
                     console.log("mutationObserver", node);
                     refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -680,8 +699,35 @@
                 mutationObserver.observe(node, {
                     attributes: true,
                     characterData: true,
+                    childList: true,
+                    subtree: true,
                 });
+                // Also observe parent node to catch when this node is removed
+                const parentNode = node.parentElement;
+                if (parentNode) {
+                    parentMutationObserver = new MutationObserver((mutations) => {
+                        // Check if the selected node was removed
+                        for (const mutation of mutations) {
+                            if (mutation.type === "childList") {
+                                for (const removedNode of Array.from(mutation.removedNodes)) {
+                                    // Check if the removed node is the selected node, or if the selected node is contained within the removed subtree
+                                    if (removedNode === node || (removedNode instanceof Node && removedNode.contains(node))) {
+                                        checkNodeExists();
+                                        return;
+                                    }
+                                }
+                            }
+                        }
+                    });
+                    parentMutationObserver.observe(parentNode, {
+                        childList: true,
+                        subtree: false, // Only direct children to avoid too many callbacks
+                    });
+                }
                 resizeObserver = connectResizeObserver(node, () => {
+                    checkNodeExists();
+                    if (!document.contains(node))
+                        return; // Exit early if node was removed
                     // throttledRefreshAndVisibility(node, nodeProvider);
                     console.log("resizeObserver", node);
                     refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -701,16 +747,19 @@
             removeListeners();
             resizeObserver?.disconnect();
             mutationObserver?.disconnect();
+            parentMutationObserver?.disconnect();
             text.blurEditMode();
             throttledRefreshAndVisibility.cleanup();
+            // Clear highlight frame and reset selected node
+            clearHighlightFrame();
+            selectedNode = null;
+            sendPostMessage("selectedNodeChanged", null);
         };
         const nodeTools = {
             selectNode,
             getSelectedNode: () => selectedNode,
             refreshHighlightFrame: () => {
                 if (selectedNode && nodeProvider) {
-                    // Call directly (not throttled) since this is typically called from already-throttled contexts
-                    // to avoid double RAF
                     refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
                     updateHighlightFrameVisibility(selectedNode);
                 }
@@ -720,6 +769,7 @@
                 selectedNode = null;
                 resizeObserver?.disconnect();
                 mutationObserver?.disconnect();
+                parentMutationObserver?.disconnect();
             },
             getEditableNode: () => text.getEditableNode(),
             cleanup,

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

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MarkupCanvas={})}(this,function(e){"use strict";const t=(e,t="canvas")=>{const n=window[t];return e.reduce((e,t)=>e?.[t],n)};function n(e){let t=null,n=null;const o=(...o)=>{n=o,null===t&&(t=requestAnimationFrame(()=>{n&&e(...n),t=null,n=null}))};return o.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null,n=null)},o}const o=()=>{const e=document.body.querySelector(".highlight-frame-overlay");e&&e.remove();const t=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove()},r=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let s=[],i=0;const a=(e,t)=>{let n=null;const o=e.clientX,a=e.clientY,l=e.metaKey||e.ctrlKey,d=((e,t)=>{const n=document.elementsFromPoint(e,t);return Array.from(n).reduce((e,t)=>e.found?e:"node-provider"===t.getAttribute("data-role")?(e.found=!0,e):(e.elements.push(t),e),{elements:[],found:!1}).elements})(o,a).filter(e=>!r.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none")&&!(e=>{let t=e.parentElement;for(;t;){if("true"===t.getAttribute("data-instance"))return!0;if("node-provider"===t.getAttribute("data-role"))break;t=t.parentElement}return!1})(e));if(t&&d.includes(t))return t;if(l)return s=[],n=d[0],n;var c,u;u=d,(c=s).length===u.length&&c.every((e,t)=>e===u[t])?i<=d.length&&i++:i=0;return n=d[d.length-1-i],s=d,n},l=(e,t,n,r)=>{const s=e=>{((e,t)=>{if("application"===e.data.source&&"selectedNodeChanged"===e.data.action){const o=e.data.data,r=document.querySelector(`[data-node-id="${o}"]`);if(n=r,n?.classList.contains("select-none"))return void t?.(null);r&&t?.(r)}var n})(e,t)},i=n=>{((e,t,n,r)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return o(),void r(null);r(a(e,n))})(n,e,r(),t)},l=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",s),document.addEventListener("click",i),document.addEventListener("keydown",l),()=>{window.removeEventListener("message",s),document.removeEventListener("click",i),document.removeEventListener("keydown",l)}},d=e=>"true"===e.getAttribute("data-instance"),c=(e,t,n,o,r=!1)=>{const s=document.createElementNS("http://www.w3.org/2000/svg","rect");return s.setAttribute("x",(t-3).toString()),s.setAttribute("y",(n-3).toString()),s.setAttribute("width",6..toString()),s.setAttribute("height",6..toString()),s.setAttribute("vector-effect","non-scaling-stroke"),s.classList.add("highlight-frame-handle",o),r&&s.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),e.appendChild(s),s};function u(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height}}const m=(e,t=!1)=>{const{top:n,left:o,width:r,height:s}=u(e),i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.classList.add("highlight-frame-overlay"),t&&i.classList.add("is-instance"),i.setAttribute("data-node-id",e.getAttribute("data-node-id")||""),i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.width="100vw",i.style.height="100vh",i.style.pointerEvents="none",i.style.zIndex="5000";const a=document.documentElement.clientWidth||window.innerWidth,l=document.documentElement.clientHeight||window.innerHeight;i.setAttribute("width",a.toString()),i.setAttribute("height",l.toString());const d=document.createElementNS("http://www.w3.org/2000/svg","g");d.classList.add("highlight-frame-group"),d.setAttribute("transform",`translate(${o}, ${n})`);const m=document.createElementNS("http://www.w3.org/2000/svg","rect");return m.setAttribute("x","0"),m.setAttribute("y","0"),m.setAttribute("width",r.toString()),m.setAttribute("height",s.toString()),m.setAttribute("vector-effect","non-scaling-stroke"),m.classList.add("highlight-frame-rect"),t&&m.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),d.appendChild(m),((e,t,n,o=!1)=>{c(e,0,0,"handle-top-left",o),c(e,t,0,"handle-top-right",o),c(e,t,n,"handle-bottom-right",o),c(e,0,n,"handle-bottom-left",o)})(d,r,s,t),i.appendChild(d),document.body.appendChild(i),i},h=(e,t,n=!1)=>{const o=document.createElement("div");o.className="node-tools",n&&o.classList.add("is-instance"),t.appendChild(o),((e,t)=>{const n=document.createElement("div");n.className="tag-label",n.textContent=e.tagName.toLowerCase(),t.appendChild(n)})(e,o)};function g(){return document.body.querySelector(".highlight-frame-overlay")}const p=()=>getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)",b=(e,n,o="canvas")=>{const r=g();if(!r)return;const s=d(e),i=document.documentElement.clientWidth||window.innerWidth,a=document.documentElement.clientHeight||window.innerHeight;r.setAttribute("width",i.toString()),r.setAttribute("height",a.toString()),s?r.classList.add("is-instance"):r.classList.remove("is-instance");const l=r.querySelector(".highlight-frame-group");if(!l)return;const c=l.querySelector("rect");if(!c)return;s?c.setAttribute("stroke",p()):c.removeAttribute("stroke");const m=document.body.querySelector(".highlight-frame-tools-wrapper"),h=m?.querySelector(".node-tools"),b=t(["zoom","current"],o)??1,v=u(e),{top:y,left:f,width:w,height:E}=v,S=y+E;m&&(s?m.classList.add("is-instance"):m.classList.remove("is-instance")),h&&(s?h.classList.add("is-instance"):h.classList.remove("is-instance")),l.setAttribute("transform",`translate(${f}, ${y})`),c.setAttribute("width",w.toString()),c.setAttribute("height",E.toString());const A=l.querySelector(".handle-top-left"),L=l.querySelector(".handle-top-right"),x=l.querySelector(".handle-bottom-right"),k=l.querySelector(".handle-bottom-left");[A,L,x,k].forEach(e=>{e&&(s?e.setAttribute("stroke",p()):e.removeAttribute("stroke"))}),A&&(A.setAttribute("x",(-3).toString()),A.setAttribute("y",(-3).toString())),L&&(L.setAttribute("x",(w-3).toString()),L.setAttribute("y",(-3).toString())),x&&(x.setAttribute("x",(w-3).toString()),x.setAttribute("y",(E-3).toString())),k&&(k.setAttribute("x",(-3).toString()),k.setAttribute("y",(E-3).toString())),m&&(m.style.left=`${f}px`,m.style.top=`${S}px`),b<=10?n.style.setProperty("--tool-opacity","1"):n.style.setProperty("--tool-opacity","0")},v=e=>{const t=g();if(!t)return;const n=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";t.style.display=n;const o=document.body.querySelector(".highlight-frame-tools-wrapper");o&&(o.style.display=n)},y=e=>{const t=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),(()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0);t.deleteContents();const n=document.createElement("br");t.insertNode(n),t.setStartAfter(n),t.setEndAfter(n),e.removeAllRanges(),e.addRange(t)}})())};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}},f=(e,t,n="canvas")=>{const o=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{b(e,t,n)});return()=>o.disconnect()},w=(e="canvas")=>{let n=null,o=!1,r=null;const s=()=>{if(o||!n)return;o=!0;var s;(s=n).contentEditable="false",s.classList.remove("is-editable"),s.style.outline="none",((e="canvas")=>{const n=t(["keyboard","disableTextEditMode"],e);n?.()})(e),r?.(),n=null,o=!1};return{enableEditMode:(o,i)=>{if(n===o)return;n&&n!==o&&s();const a=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(o);a&&(n=o,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(o),((e="canvas")=>{const n=t(["keyboard","enableTextEditMode"],e);n?.()})(e),r=((e,t,n,o="canvas")=>{if(!t)return()=>{};e.addEventListener("blur",n);const r=y(e),s=f(e,t,o);return()=>{e.removeEventListener("blur",n),r(),s?.()}})(o,i,s,e))},blurEditMode:s,getEditableNode:()=>n,isEditing:()=>null!==n}},E=320,S=1680,A=[{name:"Mobile",rawValue:390,value:"320px"},{name:"Tablet Portrait",rawValue:768,value:"768px"},{name:"Tablet Landscape",rawValue:1024,value:"1024px"},{name:"Notebook",rawValue:1280,value:"1280px"},{name:"Desktop",rawValue:1680,value:"1680px"}],L=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(E,Math.min(S,n))})(n,(e.clientX-t)/o);return r},x=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<A.length&&(A[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};e.createCanvasObserver=function(e="canvas"){const n=document.querySelector(".transform-layer");if(!n)return{disconnect:()=>{}};const o=new MutationObserver(()=>{((e="canvas")=>{const n=t(["zoom","current"],e)??1;document.body.style.setProperty("--zoom",n.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/n).toFixed(3)),document.body.dataset.zoom=n.toFixed(5),document.body.dataset.strokeWidth=(2/n).toFixed(3)})(e);const n=window.nodeTools;n?.refreshHighlightFrame&&n.refreshHighlightFrame()});return o.observe(n,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){o.disconnect()}}},e.createNodeTools=(e,t="canvas")=>{const r=e;let s=null,i=null,a=null;const c=w(t),p=n((e,n)=>{b(e,n,t),v(e)}),y=e=>{if(a!==e){if(c.isEditing()){const t=c.getEditableNode();t&&t!==e&&c.blurEditMode()}var n,o;s?.disconnect(),i?.disconnect(),e&&r&&(c.enableEditMode(e,r),i=new MutationObserver(()=>{console.log("mutationObserver",e),b(e,r,t),v(e)}),i.observe(e,{attributes:!0,characterData:!0}),s=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(e,()=>{console.log("resizeObserver",e),b(e,r,t),v(e)})),a=e,n="selectedNodeChanged",o=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:n,data:o,timestamp:Date.now()},"*"),(e=>{if(!e)return;const t=g(),n=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove(),n&&n.remove();const o=d(e),r=m(e,o);"true"===e.contentEditable&&r.classList.add("is-editable");const{left:s,top:i,height:a}=u(e),l=i+a,c=document.createElement("div");c.classList.add("highlight-frame-tools-wrapper"),o&&c.classList.add("is-instance"),c.style.position="fixed",c.style.left=`${s}px`,c.style.top=`${l}px`,c.style.transform="translateX(-50%)",c.style.transformOrigin="center",c.style.pointerEvents="none",c.style.zIndex="5000",h(e,c,o),document.body.appendChild(c)})(e),e&&r&&v(e)}},f=l(r,y,()=>{c.isEditing()&&c.blurEditMode(),a&&r&&(o(),a=null,s?.disconnect(),i?.disconnect())},c.getEditableNode),E={selectNode:y,getSelectedNode:()=>a,refreshHighlightFrame:()=>{a&&r&&(b(a,r,t),v(a))},clearSelectedNode:()=>{o(),a=null,s?.disconnect(),i?.disconnect()},getEditableNode:()=>c.getEditableNode(),cleanup:()=>{f(),s?.disconnect(),i?.disconnect(),c.blurEditMode(),p.cleanup()}};var S,A;return S="nodeTools",A=E,"undefined"!=typeof window&&(window[S]=A),E},e.createViewport=e=>{const t=document.querySelector(".canvas-container"),o=e.querySelector(".resize-handle");o&&o.remove();const r=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px"),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",A.forEach(e=>{const r=document.createElement("button");r.textContent=e.name,r.className="resize-preset-button",r.addEventListener("click",()=>{n(t,e.rawValue)}),o.appendChild(r)}),e.appendChild(o)})(r,e,x);let s=!1,i=0,a=0;const l=n(n=>{if(!s)return;t&&(t.style.cursor="ew-resize");const o=L(n,i,a);x(e,o)}),d=((e,t,n,o,r)=>(e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),window.removeEventListener("blur",r)}))(r,t=>{t.preventDefault(),t.stopPropagation(),s=!0,i=t.clientX,a=e.offsetWidth},l,e=>{e.preventDefault(),e.stopPropagation(),t&&(t.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{x(e,t)},cleanup:()=>{s=!1,l?.cleanup(),d(),r.remove()}}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MarkupCanvas={})}(this,function(e){"use strict";const t=(e,t="canvas")=>{const n=window[t];return e.reduce((e,t)=>e?.[t],n)};function n(e){let t=null,n=null;const o=(...o)=>{n=o,null===t&&(t=requestAnimationFrame(()=>{n&&e(...n),t=null,n=null}))};return o.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null,n=null)},o}function o(e,t){window.parent.postMessage({source:"node-edit-utils",action:e,data:t,timestamp:Date.now()},"*")}const r=()=>{const e=document.body.querySelector(".highlight-frame-overlay");e&&e.remove();const t=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove()},s=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let i=[],a=0;const l=(e,t)=>{let n=null;const o=e.clientX,r=e.clientY,l=e.metaKey||e.ctrlKey,c=((e,t)=>{const n=document.elementsFromPoint(e,t);return Array.from(n).reduce((e,t)=>e.found?e:"node-provider"===t.getAttribute("data-role")?(e.found=!0,e):(e.elements.push(t),e),{elements:[],found:!1}).elements})(o,r).filter(e=>!s.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none")&&!(e=>{let t=e.parentElement;for(;t;){if("true"===t.getAttribute("data-instance"))return!0;if("node-provider"===t.getAttribute("data-role"))break;t=t.parentElement}return!1})(e));if(t&&c.includes(t))return t;if(l)return i=[],n=c[0],n;var d,u;u=c,(d=i).length===u.length&&d.every((e,t)=>e===u[t])?a<=c.length&&a++:a=0;return n=c[c.length-1-a],i=c,n},c=(e,t,n,o)=>{const s=e=>{((e,t)=>{if("application"===e.data.source&&"selectedNodeChanged"===e.data.action){const o=e.data.data,r=document.querySelector(`[data-node-id="${o}"]`);if(n=r,n?.classList.contains("select-none"))return void t?.(null);r&&t?.(r)}var n})(e,t)},i=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(),void o(null);o(l(e,n))})(n,e,o(),t)},a=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",s),document.addEventListener("click",i),document.addEventListener("keydown",a),()=>{window.removeEventListener("message",s),document.removeEventListener("click",i),document.removeEventListener("keydown",a)}},d=e=>"true"===e.getAttribute("data-instance"),u=(e,t,n,o,r=!1)=>{const s=document.createElementNS("http://www.w3.org/2000/svg","rect");return s.setAttribute("x",(t-3).toString()),s.setAttribute("y",(n-3).toString()),s.setAttribute("width",6..toString()),s.setAttribute("height",6..toString()),s.setAttribute("vector-effect","non-scaling-stroke"),s.classList.add("highlight-frame-handle",o),r&&s.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),e.appendChild(s),s};function m(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height}}const h=(e,t=!1)=>{const{top:n,left:o,width:r,height:s}=m(e),i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.classList.add("highlight-frame-overlay"),t&&i.classList.add("is-instance"),i.setAttribute("data-node-id",e.getAttribute("data-node-id")||""),i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.width="100vw",i.style.height="100vh",i.style.pointerEvents="none",i.style.zIndex="5000";const a=document.documentElement.clientWidth||window.innerWidth,l=document.documentElement.clientHeight||window.innerHeight;i.setAttribute("width",a.toString()),i.setAttribute("height",l.toString());const c=document.createElementNS("http://www.w3.org/2000/svg","g");c.classList.add("highlight-frame-group"),c.setAttribute("transform",`translate(${o}, ${n})`);const d=document.createElementNS("http://www.w3.org/2000/svg","rect");return d.setAttribute("x","0"),d.setAttribute("y","0"),d.setAttribute("width",r.toString()),d.setAttribute("height",s.toString()),d.setAttribute("vector-effect","non-scaling-stroke"),d.classList.add("highlight-frame-rect"),t&&d.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),c.appendChild(d),((e,t,n,o=!1)=>{u(e,0,0,"handle-top-left",o),u(e,t,0,"handle-top-right",o),u(e,t,n,"handle-bottom-right",o),u(e,0,n,"handle-bottom-left",o)})(c,r,s,t),i.appendChild(c),document.body.appendChild(i),i},g=(e,t,n=!1)=>{const o=document.createElement("div");o.className="node-tools",n&&o.classList.add("is-instance"),t.appendChild(o),((e,t)=>{const n=document.createElement("div");n.className="tag-label",n.textContent=e.tagName.toLowerCase(),t.appendChild(n)})(e,o)};function p(){return document.body.querySelector(".highlight-frame-overlay")}const b=()=>getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)",v=(e,n,o="canvas")=>{const r=p();if(!r)return;const s=d(e),i=document.documentElement.clientWidth||window.innerWidth,a=document.documentElement.clientHeight||window.innerHeight;r.setAttribute("width",i.toString()),r.setAttribute("height",a.toString()),s?r.classList.add("is-instance"):r.classList.remove("is-instance");const l=r.querySelector(".highlight-frame-group");if(!l)return;const c=l.querySelector("rect");if(!c)return;s?c.setAttribute("stroke",b()):c.removeAttribute("stroke");const u=document.body.querySelector(".highlight-frame-tools-wrapper"),h=u?.querySelector(".node-tools"),g=t(["zoom","current"],o)??1,v=m(e),{top:f,left:y,width:w,height:E}=v,L=f+E;u&&(s?u.classList.add("is-instance"):u.classList.remove("is-instance")),h&&(s?h.classList.add("is-instance"):h.classList.remove("is-instance")),l.setAttribute("transform",`translate(${y}, ${f})`),c.setAttribute("width",w.toString()),c.setAttribute("height",E.toString());const A=l.querySelector(".handle-top-left"),S=l.querySelector(".handle-top-right"),x=l.querySelector(".handle-bottom-right"),N=l.querySelector(".handle-bottom-left");[A,S,x,N].forEach(e=>{e&&(s?e.setAttribute("stroke",b()):e.removeAttribute("stroke"))}),A&&(A.setAttribute("x",(-3).toString()),A.setAttribute("y",(-3).toString())),S&&(S.setAttribute("x",(w-3).toString()),S.setAttribute("y",(-3).toString())),x&&(x.setAttribute("x",(w-3).toString()),x.setAttribute("y",(E-3).toString())),N&&(N.setAttribute("x",(-3).toString()),N.setAttribute("y",(E-3).toString())),u&&(u.style.left=`${y}px`,u.style.top=`${L}px`),g<=10?n.style.setProperty("--tool-opacity","1"):n.style.setProperty("--tool-opacity","0")},f=e=>{const t=p();if(!t)return;const n=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";t.style.display=n;const o=document.body.querySelector(".highlight-frame-tools-wrapper");o&&(o.style.display=n)},y=e=>{const t=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),(()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0);t.deleteContents();const n=document.createElement("br");t.insertNode(n),t.setStartAfter(n),t.setEndAfter(n),e.removeAllRanges(),e.addRange(t)}})())};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}},w=(e,t,n="canvas")=>{const o=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{v(e,t,n)});return()=>o.disconnect()},E=(e="canvas")=>{let n=null,o=!1,r=null;const s=()=>{if(o||!n)return;o=!0;var s;(s=n).contentEditable="false",s.classList.remove("is-editable"),s.style.outline="none",((e="canvas")=>{const n=t(["keyboard","disableTextEditMode"],e);n?.()})(e),r?.(),n=null,o=!1};return{enableEditMode:(o,i)=>{if(n===o)return;n&&n!==o&&s();const a=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(o);a&&(n=o,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(o),((e="canvas")=>{const n=t(["keyboard","enableTextEditMode"],e);n?.()})(e),r=((e,t,n,o="canvas")=>{if(!t)return()=>{};e.addEventListener("blur",n);const r=y(e),s=w(e,t,o);return()=>{e.removeEventListener("blur",n),r(),s?.()}})(o,i,s,e))},blurEditMode:s,getEditableNode:()=>n,isEditing:()=>null!==n}},L=320,A=1680,S=[{name:"Mobile",rawValue:390,value:"320px"},{name:"Tablet Portrait",rawValue:768,value:"768px"},{name:"Tablet Landscape",rawValue:1024,value:"1024px"},{name:"Notebook",rawValue:1280,value:"1280px"},{name:"Desktop",rawValue:1680,value:"1680px"}],x=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(L,Math.min(A,n))})(n,(e.clientX-t)/o);return r},N=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<S.length&&(S[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};e.createCanvasObserver=function(e="canvas"){const n=document.querySelector(".transform-layer");if(!n)return{disconnect:()=>{}};const o=new MutationObserver(()=>{((e="canvas")=>{const n=t(["zoom","current"],e)??1;document.body.style.setProperty("--zoom",n.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/n).toFixed(3)),document.body.dataset.zoom=n.toFixed(5),document.body.dataset.strokeWidth=(2/n).toFixed(3)})(e);const n=window.nodeTools;n?.refreshHighlightFrame&&n.refreshHighlightFrame()});return o.observe(n,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){o.disconnect()}}},e.createNodeTools=(e,t="canvas")=>{const s=e;let i=null,a=null,l=null,u=null;const b=E(t),y=n((e,n)=>{v(e,n,t),f(e)}),w=e=>{if(u!==e){if(b.isEditing()){const t=b.getEditableNode();t&&t!==e&&b.blurEditMode()}if(i?.disconnect(),a?.disconnect(),l?.disconnect(),e&&s){b.enableEditMode(e,s);const n=()=>{if(!document.contains(e))return r(),u=null,i?.disconnect(),a?.disconnect(),l?.disconnect(),void o("selectedNodeChanged",null)};a=new MutationObserver(()=>{n(),document.contains(e)&&(console.log("mutationObserver",e),v(e,s,t),f(e))}),a.observe(e,{attributes:!0,characterData:!0,childList:!0,subtree:!0});const c=e.parentElement;c&&(l=new MutationObserver(t=>{for(const o of t)if("childList"===o.type)for(const t of Array.from(o.removedNodes))if(t===e||t instanceof Node&&t.contains(e))return void n()}),l.observe(c,{childList:!0,subtree:!1})),i=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(e,()=>{n(),document.contains(e)&&(console.log("resizeObserver",e),v(e,s,t),f(e))})}u=e,o("selectedNodeChanged",e?.getAttribute("data-node-id")??null),(e=>{if(!e)return;const t=p(),n=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove(),n&&n.remove();const o=d(e),r=h(e,o);"true"===e.contentEditable&&r.classList.add("is-editable");const{left:s,top:i,height:a}=m(e),l=i+a,c=document.createElement("div");c.classList.add("highlight-frame-tools-wrapper"),o&&c.classList.add("is-instance"),c.style.position="fixed",c.style.left=`${s}px`,c.style.top=`${l}px`,c.style.transform="translateX(-50%)",c.style.transformOrigin="center",c.style.pointerEvents="none",c.style.zIndex="5000",g(e,c,o),document.body.appendChild(c)})(e),e&&s&&f(e)}},L=c(s,w,()=>{b.isEditing()&&b.blurEditMode(),u&&s&&(r(),u=null,i?.disconnect(),a?.disconnect(),l?.disconnect())},b.getEditableNode),A={selectNode:w,getSelectedNode:()=>u,refreshHighlightFrame:()=>{u&&s&&(v(u,s,t),f(u))},clearSelectedNode:()=>{r(),u=null,i?.disconnect(),a?.disconnect(),l?.disconnect()},getEditableNode:()=>b.getEditableNode(),cleanup:()=>{L(),i?.disconnect(),a?.disconnect(),l?.disconnect(),b.blurEditMode(),y.cleanup(),r(),u=null,o("selectedNodeChanged",null)}};var S,x;return S="nodeTools",x=A,"undefined"!=typeof window&&(window[S]=x),A},e.createViewport=e=>{const t=document.querySelector(".canvas-container"),o=e.querySelector(".resize-handle");o&&o.remove();const r=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px"),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",S.forEach(e=>{const r=document.createElement("button");r.textContent=e.name,r.className="resize-preset-button",r.addEventListener("click",()=>{n(t,e.rawValue)}),o.appendChild(r)}),e.appendChild(o)})(r,e,N);let s=!1,i=0,a=0;const l=n(n=>{if(!s)return;t&&(t.style.cursor="ew-resize");const o=x(n,i,a);N(e,o)}),c=((e,t,n,o,r)=>(e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),window.removeEventListener("blur",r)}))(r,t=>{t.preventDefault(),t.stopPropagation(),s=!0,i=t.clientX,a=e.offsetWidth},l,e=>{e.preventDefault(),e.stopPropagation(),t&&(t.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{N(e,t)},cleanup:()=>{s=!1,l?.cleanup(),c(),r.remove()}}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-edit-utils/core",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "Utilities for editing nodes in a dom tree.",
   "type": "module",
   "main": "dist/node-edit-utils.cjs.js",

package/src/lib/node-tools/createNodeTools.ts

@@ -15,6 +15,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
 
   let resizeObserver: ResizeObserver | null = null;
   let mutationObserver: MutationObserver | null = null;
+  let parentMutationObserver: MutationObserver | null = null;
   let selectedNode: HTMLElement | null = null;
 
   const text = nodeText(canvasName);
@@ -37,6 +38,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
 
         resizeObserver?.disconnect();
         mutationObserver?.disconnect();
+        parentMutationObserver?.disconnect();
       }
     }
   };
@@ -55,11 +57,29 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
 
     resizeObserver?.disconnect();
     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 = (): void => {
+        if (!document.contains(node)) {
+          // Node was removed from DOM, clear highlight and cleanup
+          clearHighlightFrame();
+          selectedNode = null;
+          resizeObserver?.disconnect();
+          mutationObserver?.disconnect();
+          parentMutationObserver?.disconnect();
+          sendPostMessage("selectedNodeChanged", null);
+          return;
+        }
+      };
+
       mutationObserver = new MutationObserver(() => {
+        checkNodeExists();
+        if (!document.contains(node)) return; // Exit early if node was removed
+
         // throttledRefreshAndVisibility(node, nodeProvider);
         console.log("mutationObserver", node);
         refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -69,9 +89,38 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
       mutationObserver.observe(node, {
         attributes: true,
         characterData: true,
+        childList: true,
+        subtree: true,
       });
 
+      // Also observe parent node to catch when this node is removed
+      const parentNode = node.parentElement;
+      if (parentNode) {
+        parentMutationObserver = new MutationObserver((mutations) => {
+          // Check if the selected node was removed
+          for (const mutation of mutations) {
+            if (mutation.type === "childList") {
+              for (const removedNode of Array.from(mutation.removedNodes)) {
+                // Check if the removed node is the selected node, or if the selected node is contained within the removed subtree
+                if (removedNode === node || (removedNode instanceof Node && removedNode.contains(node))) {
+                  checkNodeExists();
+                  return;
+                }
+              }
+            }
+          }
+        });
+
+        parentMutationObserver.observe(parentNode, {
+          childList: true,
+          subtree: false, // Only direct children to avoid too many callbacks
+        });
+      }
+
       resizeObserver = connectResizeObserver(node, () => {
+        checkNodeExists();
+        if (!document.contains(node)) return; // Exit early if node was removed
+
         // throttledRefreshAndVisibility(node, nodeProvider);
         console.log("resizeObserver", node);
         refreshHighlightFrame(node, nodeProvider, canvasName);
@@ -95,9 +144,15 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
     removeListeners();
     resizeObserver?.disconnect();
     mutationObserver?.disconnect();
+    parentMutationObserver?.disconnect();
 
     text.blurEditMode();
     throttledRefreshAndVisibility.cleanup();
+
+    // Clear highlight frame and reset selected node
+    clearHighlightFrame();
+    selectedNode = null;
+    sendPostMessage("selectedNodeChanged", null);
   };
 
   const nodeTools: NodeTools = {
@@ -105,8 +160,6 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
     getSelectedNode: () => selectedNode,
     refreshHighlightFrame: () => {
       if (selectedNode && nodeProvider) {
-        // Call directly (not throttled) since this is typically called from already-throttled contexts
-        // to avoid double RAF
         refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
         updateHighlightFrameVisibility(selectedNode);
       }
@@ -116,6 +169,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
       selectedNode = null;
       resizeObserver?.disconnect();
       mutationObserver?.disconnect();
+      parentMutationObserver?.disconnect();
     },
     getEditableNode: () => text.getEditableNode(),
     cleanup,