@node-edit-utils/core 2.2.7 → 2.2.9

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}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.transform=`translate(${y}px, ${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.transform=`translate(${s}px, ${l}px)`,c.style.transformOrigin="left center",c.style.pointerEvents="none",c.style.zIndex="5000",g(e,c,o),document.body.appendChild(c)})(e),e&&s&&(f(e),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()}}}});
+!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,t){window.parent.postMessage({source:"node-edit-utils",action:e,data:t,timestamp:Date.now()},"*")}const o=()=>document.querySelector(".canvas-container"),r=()=>{const e=o()||document.body,t=e.querySelector(".highlight-frame-overlay");t&&t.remove();const n=e.querySelector(".highlight-frame-tools-wrapper");n&&n.remove()},i=(e,t,n)=>{e&&t&&n.enableEditMode(e,t)},s=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let a=[],l=0,d=null;const c=(e,t,n)=>{let o=null;const r=e.clientX,c=e.clientY,u=e.metaKey||e.ctrlKey,m=((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})(r,c).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)),h=n.getEditableNode();if(h&&m.includes(h))return o=h,d=o,o;if(u)return a=[],o=m[0],d&&d===o&&i(o,t,n),d=o,o;var g,p;p=m,(g=a).length===p.length&&g.every((e,t)=>e===p[t])?l<=m.length-2&&l++:l=0;return o=m[m.length-1-l],a=m,d&&d===o&&i(o,t,n),d=o,o},u=(e,t,n,o)=>{const i=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)},s=n=>{((e,t,n,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(),void o(null);o(c(e,t,n))})(n,e,o,t)},a=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",i),document.addEventListener("click",s),document.addEventListener("keydown",a),()=>{window.removeEventListener("message",i),document.removeEventListener("click",s),document.removeEventListener("keydown",a)}},m=e=>"true"===e.getAttribute("data-instance"),h=(e,t,n,o,r=!1,i=!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)"):i&&s.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)"),e.appendChild(s),s};function g(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height}}const p=(e,t=!1,n=!1)=>{const{top:r,left:i,width:s,height:a}=g(e),l=Math.max(s,3),d=document.createElementNS("http://www.w3.org/2000/svg","svg");d.classList.add("highlight-frame-overlay"),t&&d.classList.add("is-instance"),n&&d.classList.add("is-text-edit"),d.setAttribute("data-node-id",e.getAttribute("data-node-id")||""),d.style.position="absolute",d.style.top="0",d.style.left="0",d.style.width="100vw",d.style.height="100vh",d.style.pointerEvents="none",d.style.zIndex="500";const c=document.documentElement.clientWidth||window.innerWidth,u=document.documentElement.clientHeight||window.innerHeight;d.setAttribute("width",c.toString()),d.setAttribute("height",u.toString());const m=document.createElementNS("http://www.w3.org/2000/svg","g");m.classList.add("highlight-frame-group"),m.setAttribute("transform",`translate(${i}, ${r})`);const p=document.createElementNS("http://www.w3.org/2000/svg","rect");p.setAttribute("x","0"),p.setAttribute("y","0"),p.setAttribute("width",l.toString()),p.setAttribute("height",a.toString()),p.setAttribute("vector-effect","non-scaling-stroke"),p.classList.add("highlight-frame-rect"),t?p.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"):n&&p.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)"),m.appendChild(p),((e,t,n,o=!1,r=!1)=>{h(e,0,0,"handle-top-left",o,r),h(e,t,0,"handle-top-right",o,r),h(e,t,n,"handle-bottom-right",o,r),h(e,0,n,"handle-bottom-left",o,r)})(m,l,a,t,n),d.appendChild(m);const b=o();return b?b.appendChild(d):document.body.appendChild(d),d},b={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"},v=(e,t,n=!1,o=!1)=>{const r=document.createElement("div");r.className="node-tools",n&&r.classList.add("is-instance"),o&&r.classList.add("is-text-edit"),t.appendChild(r),((e,t)=>{const n=document.createElement("div");n.className="tag-label";const o=e.getAttribute("data-instance-name"),r=e.tagName.toLowerCase(),i=o||b[r]||r;var s;n.textContent=(s=i)?s.charAt(0).toUpperCase()+s.slice(1):s,t.appendChild(n)})(e,r)};function y(){return(o()||document.body).querySelector(".highlight-frame-overlay")}const f=()=>getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)",w=()=>getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)",E=(e,n,r="canvas")=>{const i=y();if(!i)return;const s=m(e),a="true"===e.contentEditable,l=document.documentElement.clientWidth||window.innerWidth,d=document.documentElement.clientHeight||window.innerHeight;i.setAttribute("width",l.toString()),i.setAttribute("height",d.toString()),s?i.classList.add("is-instance"):i.classList.remove("is-instance"),a?i.classList.add("is-text-edit"):i.classList.remove("is-text-edit");const c=i.querySelector(".highlight-frame-group");if(!c)return;const u=c.querySelector("rect");if(!u)return;s?u.setAttribute("stroke",f()):a?u.setAttribute("stroke",w()):u.removeAttribute("stroke");const h=(o()||document.body).querySelector(".highlight-frame-tools-wrapper"),p=h?.querySelector(".node-tools"),b=t(["zoom","current"],r)??1,v=g(e),{top:E,left:L,width:A,height:x}=v,S=Math.max(A,3),C=E+x;h&&(s?h.classList.add("is-instance"):h.classList.remove("is-instance"),a?h.classList.add("is-text-edit"):h.classList.remove("is-text-edit")),p&&(s?p.classList.add("is-instance"):p.classList.remove("is-instance"),a?p.classList.add("is-text-edit"):p.classList.remove("is-text-edit")),c.setAttribute("transform",`translate(${L}, ${E})`),u.setAttribute("width",S.toString()),u.setAttribute("height",x.toString());const k=c.querySelector(".handle-top-left"),N=c.querySelector(".handle-top-right"),q=c.querySelector(".handle-bottom-right"),M=c.querySelector(".handle-bottom-left");[k,N,q,M].forEach(e=>{e&&(s?e.setAttribute("stroke",f()):a?e.setAttribute("stroke",w()):e.removeAttribute("stroke"))}),k&&(k.setAttribute("x",(-3).toString()),k.setAttribute("y",(-3).toString())),N&&(N.setAttribute("x",(S-3).toString()),N.setAttribute("y",(-3).toString())),q&&(q.setAttribute("x",(S-3).toString()),q.setAttribute("y",(x-3).toString())),M&&(M.setAttribute("x",(-3).toString()),M.setAttribute("y",(x-3).toString())),h&&(h.style.transform=`translate(${L}px, ${C}px)`),b<=10?n.style.setProperty("--tool-opacity","1"):n.style.setProperty("--tool-opacity","0")},L=e=>{const t=y();if(!t)return;const n=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";t.style.display=n;const r=(o()||document.body).querySelector(".highlight-frame-tools-wrapper");r&&(r.style.display=n)},A=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)}},x=(e,t,o="canvas")=>{let r=[],i=null,s=null;const a=()=>{if(r.length>0){const t=[...r];r=[],((e,t)=>{if(!t.some(e=>"characterData"===e.type||"childList"===e.type&&(e.addedNodes.length>0||e.removedNodes.length>0)))return;const o=e.textContent??"",r=e.getAttribute("data-node-id");console.log("textContentChanged",r,o),n("textContentChanged",{nodeId:r,textContent:o})})(e,t)}},l=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,n=>{r.push(...n),null===i&&(i=requestAnimationFrame(()=>{s=requestAnimationFrame(()=>{a(),i=null,s=null})})),E(e,t,o)});return()=>{l.disconnect(),null!==i&&(cancelAnimationFrame(i),i=null),null!==s&&(cancelAnimationFrame(s),s=null),r=[]}},S=(e="canvas")=>{let n=null,o=!1,r=null;const i=()=>{if(o||!n)return;o=!0;var i;(i=n).contentEditable="false",i.classList.remove("is-editable"),i.style.outline="none",((e="canvas")=>{const n=t(["keyboard","disableTextEditMode"],e);n?.()})(e),r?.(),n=null,o=!1};return{enableEditMode:(o,s)=>{if(n===o)return;n&&n!==o&&i();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=A(e),i=x(e,t,o);return()=>{e.removeEventListener("blur",n),r(),i?.()}})(o,s,i,e))},blurEditMode:i,getEditableNode:()=>n,isEditing:()=>null!==n}};const C=320,k=1680,N=[{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"}],q=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(C,Math.min(k,n))})(n,(e.clientX-t)/o);return r},M=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<N.length&&(N[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 i=e;let s=null,a=null,l=null,d=null;const c=S(t),h=e=>{if(d!==e){if(c.isEditing()){const t=c.getEditableNode();t&&t!==e&&c.blurEditMode()}if(s?.disconnect(),a?.disconnect(),l?.disconnect(),e&&i){const o=()=>{if(!document.contains(e))return r(),d=null,s?.disconnect(),a?.disconnect(),l?.disconnect(),void n("selectedNodeChanged",null)};a=new MutationObserver(()=>{o(),document.contains(e)&&(E(e,i,t),L(e))}),a.observe(e,{attributes:!0,characterData:!0,childList:!0,subtree:!0});const c=e.parentElement;c&&(l=new MutationObserver(t=>{for(const n of t)if("childList"===n.type)for(const t of Array.from(n.removedNodes))if(t===e||t instanceof Node&&t.contains(e))return void o()}),l.observe(c,{childList:!0,subtree:!1})),s=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(e,()=>{o(),document.contains(e)&&(E(e,i,t),L(e))})}d=e,n("selectedNodeChanged",e?.getAttribute("data-node-id")??null),(e=>{if(!e)return;const t=y(),n=o(),r=n?.querySelector(".highlight-frame-tools-wrapper")||document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove(),r&&r.remove();const i=m(e),s="true"===e.contentEditable,a=p(e,i,s);"true"===e.contentEditable&&a.classList.add("is-editable");const{left:l,top:d,height:c}=g(e),u=d+c,h=document.createElement("div");h.classList.add("highlight-frame-tools-wrapper"),i&&h.classList.add("is-instance"),s&&h.classList.add("is-text-edit"),h.style.position="absolute",h.style.transform=`translate(${l}px, ${u}px)`,h.style.transformOrigin="left center",h.style.pointerEvents="none",h.style.zIndex="500",v(e,h,i,s),n?n.appendChild(h):document.body.appendChild(h)})(e),e&&i&&(L(e),L(e))}},b=u(i,h,()=>{c.isEditing()&&c.blurEditMode(),d&&i&&(r(),d=null,s?.disconnect(),a?.disconnect(),l?.disconnect())},c),f={selectNode:h,getSelectedNode:()=>d,refreshHighlightFrame:()=>{d&&i&&(E(d,i,t),L(d))},clearSelectedNode:()=>{r(),d=null,s?.disconnect(),a?.disconnect(),l?.disconnect()},getEditableNode:()=>c.getEditableNode(),cleanup:()=>{b(),s?.disconnect(),a?.disconnect(),l?.disconnect(),c.blurEditMode(),r(),d=null,n("selectedNodeChanged",null)}};var w,A;return w="nodeTools",A=f,"undefined"!=typeof window&&(window[w]=A),f},e.createViewport=e=>{const t=o(),n=e.querySelector(".resize-handle");n&&n.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",N.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,M);let i=!1,s=0,a=0;const l=function(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}(n=>{if(!i)return;t&&(t.style.cursor="ew-resize");const o=q(n,s,a);M(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(),i=!0,s=t.clientX,a=e.offsetWidth},l,e=>{e.preventDefault(),e.stopPropagation(),t&&(t.style.cursor="default"),i=!1},()=>{i=!1});return{setWidth:t=>{M(e,t)},cleanup:()=>{i=!1,l?.cleanup(),d(),r.remove()}}}});

package/dist/styles.css

@@ -1 +1 @@
-:root{--primary-color:oklch(0.6235 0.22 294);--uncode-color:oklch(45.7% 0.24 277.023);--component-color:oklch(65.6% 0.241 354.308);--handle-color:oklch(55.2% 0.016 285.938);--handle-color-transparent:oklch(55.2% 0.016 285.938/0.7);--primary-color-selection:oklch(0.59 0.18 294/0.3);--text-color-white:#fff;--spacing-2xs:0.1875rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:1.25rem;--transition-fast:0.1s ease-in-out;--transition-medium:0.2s ease-in-out;--z-index-high:10000;--z-index-highlight:5000;--z-index-medium:1000;--letter-spacing:0.02em;--font-family-primary:"Manrope",sans-serif}.node-provider{::selection{background:transparent}::-moz-selection{background:transparent}::-webkit-selection{background:transparent}}.node-tools{bottom:0;contain:layout style;display:flex;gap:var(--spacing-xs);justify-content:center;left:0;opacity:var(--tool-opacity);padding-top:var(--spacing-2xs);position:absolute;top:0;transform:translate3d(0,100%,0);transform-origin:bottom center;transition:opacity var(--transition-fast);z-index:var(--z-index-high)}.highlight-frame-overlay{contain:layout style paint;height:100vh;inset:0;overflow:visible;pointer-events:none;position:fixed;width:100vw;will-change:transform;z-index:var(--z-index-highlight)}.highlight-frame-rect{fill:none;stroke:var(--primary-color);stroke-width:2px}.highlight-frame-overlay.is-instance .highlight-frame-rect{stroke:var(--component-color)}.highlight-frame-handle{fill:#fff;stroke:var(--primary-color);stroke-width:1px;cursor:nwse-resize;pointer-events:auto}.highlight-frame-overlay.is-instance .highlight-frame-handle{stroke:var(--component-color)}.highlight-frame-handle.handle-top-left{cursor:nwse-resize}.highlight-frame-handle.handle-top-right{cursor:nesw-resize}.highlight-frame-handle.handle-bottom-right{cursor:nwse-resize}.highlight-frame-handle.handle-bottom-left{cursor:nesw-resize}.highlight-frame-tools-wrapper{contain:layout style;left:0;pointer-events:none;position:fixed;top:0;z-index:var(--z-index-highlight)}.tag-label{align-items:center;background-color:var(--primary-color);border-radius:var(--spacing-sm);color:var(--text-color-white);display:flex;font-size:.575rem;font-weight:500;height:1rem;justify-content:center;line-height:1;padding:.5625rem var(--spacing-sm);text-transform:uppercase}.highlight-frame-tools-wrapper.is-instance .tag-label,.node-tools.is-instance .tag-label{background-color:var(--component-color)}.viewport{position:relative;width:var(--container-width)}.resize-handle{align-items:center;cursor:ew-resize;display:flex;height:40px;justify-content:center;opacity:0;pointer-events:auto;position:absolute;right:-12px;top:var(--spacing-lg);transform:scale(calc(1/var(--zoom)));transform-origin:top left;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;width:12px;z-index:var(--z-index-high)}.viewport:hover .resize-handle{opacity:1;visibility:visible}.resize-handle:before{background:var(--handle-color);border-radius:4px;content:"";height:32px;position:relative;right:0;top:0;transition:transform var(--transition-medium);width:3px}.resize-handle:hover:before{transform:scaleY(1.3)}.resize-presets{display:flex;flex-direction:column;font-family:var(--font-family-primary);gap:var(--spacing-xs);left:0;letter-spacing:var(--letter-spacing);opacity:0;padding-left:var(--spacing-lg);position:absolute;top:0;transition:visibility var(--transition-fast),opacity var(--transition-fast);visibility:hidden}.resize-handle:hover .resize-presets{opacity:1;visibility:visible}.resize-preset-button{text-wrap:nowrap;backdrop-filter:blur(8px);background:var(--handle-color-transparent);border:none;border-radius:var(--spacing-md);color:var(--text-color-white);cursor:pointer;font-size:.625rem;padding:var(--spacing-xs) var(--spacing-md);text-align:left;transition:background var(--transition-fast);width:fit-content;&:hover{background:var(--handle-color)}&.is-active{background:var(--uncode-color)}}.is-editable{outline:none;user-select:text;&::selection{background:var(--primary-color-selection)}&::-moz-selection{background:var(--primary-color-selection)}&::-webkit-selection{background:var(--primary-color-selection)}}
+:root{--primary-color:oklch(0.6235 0.22 294);--uncode-color:oklch(45.7% 0.24 277.023);--component-color:oklch(65.6% 0.241 354.308);--text-edit-color:oklch(62.3% 0.214 259.815);--text-edit-selection-color:oklch(62.3% 0.214 259.815/0.2);--handle-color:oklch(55.2% 0.016 285.938);--handle-color-transparent:oklch(55.2% 0.016 285.938/0.7);--primary-color-selection:oklch(0.59 0.18 294/0.3);--text-color-white:#fff;--spacing-2xs:0.1875rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:1.25rem;--transition-fast:0.1s ease-in-out;--transition-medium:0.2s ease-in-out;--z-index-high:10000;--z-index-highlight:500;--z-index-medium:1000;--letter-spacing:0.02em;--font-family-primary:"Manrope",sans-serif}.node-provider{::selection{background:transparent}::-moz-selection{background:transparent}::-webkit-selection{background:transparent}}.node-tools{bottom:0;contain:layout style;display:flex;gap:var(--spacing-xs);justify-content:center;left:0;opacity:var(--tool-opacity);padding-top:var(--spacing-2xs);position:absolute;top:0;transform:translate3d(0,100%,0);transform-origin:bottom center;transition:opacity var(--transition-fast);z-index:var(--z-index-high)}.highlight-frame-overlay{contain:layout style paint;height:100vh;inset:0;overflow:visible;pointer-events:none;position:absolute;width:100vw;will-change:transform;z-index:var(--z-index-highlight)}.highlight-frame-rect{fill:none;stroke:var(--primary-color);stroke-width:2px}.highlight-frame-overlay.is-instance .highlight-frame-rect{stroke:var(--component-color)}.highlight-frame-overlay.is-text-edit .highlight-frame-rect{stroke:var(--text-edit-color)}.highlight-frame-handle{fill:#fff;stroke:var(--primary-color);stroke-width:1px;cursor:nwse-resize;pointer-events:auto}.highlight-frame-overlay.is-instance .highlight-frame-handle{stroke:var(--component-color)}.highlight-frame-overlay.is-text-edit .highlight-frame-handle{stroke:var(--text-edit-color)}.highlight-frame-handle.handle-top-left{cursor:nwse-resize}.highlight-frame-handle.handle-top-right{cursor:nesw-resize}.highlight-frame-handle.handle-bottom-right{cursor:nwse-resize}.highlight-frame-handle.handle-bottom-left{cursor:nesw-resize}.highlight-frame-tools-wrapper{contain:layout style;left:0;pointer-events:none;position:absolute;top:0;z-index:var(--z-index-highlight)}.tag-label{align-items:center;background-color:var(--primary-color);border-radius:var(--spacing-sm);color:var(--text-color-white);display:flex;font-size:.575rem;font-weight:500;height:1rem;justify-content:center;line-height:1.4;padding:.5625rem var(--spacing-sm);white-space:nowrap}.highlight-frame-tools-wrapper.is-instance .tag-label,.node-tools.is-instance .tag-label{background-color:var(--component-color)}.highlight-frame-tools-wrapper.is-text-edit .tag-label,.node-tools.is-text-edit .tag-label{background-color:var(--text-edit-color)}.viewport{position:relative;width:var(--container-width)}.resize-handle{align-items:center;cursor:ew-resize;display:flex;height:40px;justify-content:center;opacity:0;pointer-events:auto;position:absolute;right:-12px;top:var(--spacing-lg);transform:scale(calc(1/var(--zoom)));transform-origin:top left;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;width:12px;z-index:var(--z-index-high)}.viewport:hover .resize-handle{opacity:1;visibility:visible}.resize-handle:before{background:var(--handle-color);border-radius:4px;content:"";height:32px;position:relative;right:0;top:0;transition:transform var(--transition-medium);width:3px}.resize-handle:hover:before{transform:scaleY(1.3)}.resize-presets{display:flex;flex-direction:column;font-family:var(--font-family-primary);gap:var(--spacing-xs);left:0;letter-spacing:var(--letter-spacing);opacity:0;padding-left:var(--spacing-lg);position:absolute;top:0;transition:visibility var(--transition-fast),opacity var(--transition-fast);visibility:hidden}.resize-handle:hover .resize-presets{opacity:1;visibility:visible}.resize-preset-button{text-wrap:nowrap;backdrop-filter:blur(8px);background:var(--handle-color-transparent);border:none;border-radius:var(--spacing-md);color:var(--text-color-white);cursor:pointer;font-size:.625rem;padding:var(--spacing-xs) var(--spacing-md);text-align:left;transition:background var(--transition-fast);width:fit-content;&:hover{background:var(--handle-color)}&.is-active{background:var(--uncode-color)}}.is-editable{outline:none;user-select:text;&::selection{background:var(--text-edit-selection-color)}&::-moz-selection{background:var(--text-edit-selection-color)}&::-webkit-selection{background:var(--text-edit-selection-color)}}

package/package.json

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

package/src/index.ts

@@ -1,9 +1,7 @@
 import "@/lib/styles/styles.css";
 
 export { createCanvasObserver } from "@/lib/canvas/createCanvasObserver";
-
 export { createNodeTools } from "@/lib/node-tools/createNodeTools";
 export type { NodeTools, NodeToolsRef } from "@/lib/node-tools/types";
-
 export { createViewport } from "@/lib/viewport/createViewport";
 export type { Viewport, ViewportRef } from "@/lib/viewport/types";

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

@@ -1,5 +1,4 @@
 import { connectResizeObserver } from "../helpers/observer/connectResizeObserver";
-import { withRAFThrottle } from "../helpers/withRAF";
 import { sendPostMessage } from "../post-message/sendPostMessage";
 import { bindToWindow } from "../window/bindToWindow";
 import { setupEventListener } from "./events/setupEventListener";
@@ -20,12 +19,6 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
 
   const text = nodeText(canvasName);
 
-  // Combined throttled function for refresh + visibility update
-  const throttledRefreshAndVisibility = withRAFThrottle((node: HTMLElement, nodeProvider: HTMLElement) => {
-    refreshHighlightFrame(node, nodeProvider, canvasName);
-    updateHighlightFrameVisibility(node);
-  });
-
   const handleEscape = (): void => {
     if (text.isEditing()) {
       text.blurEditMode();
@@ -60,8 +53,6 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
     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)) {
@@ -78,10 +69,8 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
 
       mutationObserver = new MutationObserver(() => {
         checkNodeExists();
-        if (!document.contains(node)) return; // Exit early if node was removed
+        if (!document.contains(node)) return;
 
-        // throttledRefreshAndVisibility(node, nodeProvider);
-        console.log("mutationObserver", node);
         refreshHighlightFrame(node, nodeProvider, canvasName);
         updateHighlightFrameVisibility(node);
       });
@@ -121,8 +110,6 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
         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);
       });
@@ -139,7 +126,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
   };
 
   // Setup event listener
-  const removeListeners = setupEventListener(nodeProvider, selectNode, handleEscape, text.getEditableNode);
+  const removeListeners = setupEventListener(nodeProvider, selectNode, handleEscape, text);
 
   const cleanup = (): void => {
     removeListeners();
@@ -148,7 +135,6 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
     parentMutationObserver?.disconnect();
 
     text.blurEditMode();
-    throttledRefreshAndVisibility.cleanup();
 
     // Clear highlight frame and reset selected node
     clearHighlightFrame();

package/src/lib/node-tools/events/click/handleNodeClick.ts

@@ -1,10 +1,11 @@
 import { clearHighlightFrame } from "../../highlight/clearHighlightFrame";
 import { selectNode } from "../../select/selectNode";
+import type { NodeText } from "../../text/types";
 
 export const handleNodeClick = (
   event: MouseEvent,
   nodeProvider: HTMLElement | null,
-  editableNode: HTMLElement | null,
+  text: NodeText,
   onNodeSelected: (node: HTMLElement | null) => void
 ): void => {
   event.preventDefault();
@@ -16,6 +17,6 @@ export const handleNodeClick = (
     return;
   }
 
-  const selectedNode = selectNode(event, editableNode);
+  const selectedNode = selectNode(event, nodeProvider, text);
   onNodeSelected(selectedNode);
 };

package/src/lib/node-tools/events/setupEventListener.ts

@@ -1,18 +1,19 @@
 import { processPostMessage } from "@/lib/post-message/processPostMessage";
+import type { NodeText } from "../text/types";
 import { handleNodeClick } from "./click/handleNodeClick";
 
 export const setupEventListener = (
   nodeProvider: HTMLElement | null,
   onNodeSelected: (node: HTMLElement | null) => void,
   onEscapePressed: () => void,
-  getEditableNode: () => HTMLElement | null
+  text: NodeText
 ): (() => void) => {
   const messageHandler = (event: MessageEvent) => {
     processPostMessage(event, onNodeSelected);
   };
 
   const documentClickHandler = (event: MouseEvent) => {
-    handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
+    handleNodeClick(event, nodeProvider, text, onNodeSelected);
   };
 
   const documentKeydownHandler = (event: KeyboardEvent) => {

package/src/lib/node-tools/highlight/clearHighlightFrame.ts

@@ -1,10 +1,15 @@
+import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+
 export const clearHighlightFrame = (): void => {
-  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();
   }

package/src/lib/node-tools/highlight/createCornerHandles.ts

@@ -4,7 +4,11 @@ const getComponentColor = (): string => {
   return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
 
-const createCornerHandle = (group: SVGGElement, x: number, y: number, className: string, isInstance: boolean = false): SVGRectElement => {
+const getTextEditColor = (): string => {
+  return getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim() || "oklch(62.3% 0.214 259.815)";
+};
+
+const createCornerHandle = (group: SVGGElement, x: number, y: number, className: string, isInstance: boolean = false, isTextEdit: boolean = false): SVGRectElement => {
   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());
@@ -16,16 +20,18 @@ const createCornerHandle = (group: SVGGElement, x: number, y: number, className:
 
   if (isInstance) {
     handle.setAttribute("stroke", getComponentColor());
+  } else if (isTextEdit) {
+    handle.setAttribute("stroke", getTextEditColor());
   }
 
   group.appendChild(handle);
   return handle;
 };
 
-export const createCornerHandles = (group: SVGGElement, width: number, height: number, isInstance: boolean = false): void => {
+export const createCornerHandles = (group: SVGGElement, width: number, height: number, isInstance: boolean = false, isTextEdit: boolean = false): void => {
   // 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);
 };

package/src/lib/node-tools/highlight/createHighlightFrame.ts

@@ -1,3 +1,4 @@
+import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
 import { createCornerHandles } from "./createCornerHandles";
 import { getScreenBounds } from "./helpers/getScreenBounds";
 
@@ -5,25 +6,35 @@ const getComponentColor = (): string => {
   return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
 
-export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = false): SVGSVGElement => {
+const getTextEditColor = (): string => {
+  return getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim() || "oklch(62.3% 0.214 259.815)";
+};
+
+export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = false, isTextEdit: boolean = false): SVGSVGElement => {
   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;
@@ -37,22 +48,29 @@ export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = fa
   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());
+  } else if (isTextEdit) {
+    rect.setAttribute("stroke", getTextEditColor());
   }
 
   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 as SVGSVGElement;
 };

package/src/lib/node-tools/highlight/createTagLabel.ts

@@ -1,7 +1,31 @@
+const TAG_NAME_MAP: Record<string, string> = {
+  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: string): string => {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
 export const createTagLabel = (node: HTMLElement, nodeTools: HTMLElement): void => {
   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);
 };

package/src/lib/node-tools/highlight/createToolsContainer.ts

@@ -1,12 +1,15 @@
 import { createTagLabel } from "./createTagLabel";
 
-export const createToolsContainer = (node: HTMLElement, highlightFrame: HTMLElement, isInstance: boolean = false): void => {
+export const createToolsContainer = (node: HTMLElement, highlightFrame: HTMLElement, isInstance: boolean = false, isTextEdit: boolean = false): void => {
   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);

package/src/lib/node-tools/highlight/helpers/getHighlightFrameElement.ts

@@ -1,3 +1,7 @@
+import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+
 export function getHighlightFrameElement(): SVGSVGElement | null {
-  return document.body.querySelector(".highlight-frame-overlay") as SVGSVGElement | null;
+  const canvasContainer = getCanvasContainer();
+  const container = canvasContainer || document.body;
+  return container.querySelector(".highlight-frame-overlay") as SVGSVGElement | null;
 }

package/src/lib/node-tools/highlight/highlightNode.ts

@@ -1,3 +1,4 @@
+import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
 import { isComponentInstance } from "../select/helpers/isComponentInstance";
 import { createHighlightFrame } from "./createHighlightFrame";
 import { createToolsContainer } from "./createToolsContainer";
@@ -8,7 +9,9 @@ export const highlightNode = (node: HTMLElement | null): void => {
   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();
@@ -18,7 +21,8 @@ export const highlightNode = (node: HTMLElement | null): void => {
   }
 
   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");
@@ -34,12 +38,19 @@ export const highlightNode = (node: HTMLElement | null): void => {
   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)
+  toolsWrapper.style.zIndex = "500";
 
-  createToolsContainer(node, toolsWrapper, isInstance);
-  document.body.appendChild(toolsWrapper);
+  createToolsContainer(node, toolsWrapper, isInstance, isTextEdit);
+  if (canvasContainer) {
+    canvasContainer.appendChild(toolsWrapper);
+  } else {
+    document.body.appendChild(toolsWrapper);
+  }
 };

package/src/lib/node-tools/highlight/refreshHighlightFrame.ts

@@ -1,3 +1,4 @@
+import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
 import { isComponentInstance } from "../select/helpers/isComponentInstance";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
@@ -7,12 +8,17 @@ const getComponentColor = (): string => {
   return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
 
+const getTextEditColor = (): string => {
+  return getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim() || "oklch(62.3% 0.214 259.815)";
+};
+
 export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLElement, canvasName: string = "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)
@@ -28,6 +34,13 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
     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") as SVGGElement | null;
   if (!group) return;
 
@@ -37,11 +50,15 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
   // Update instance color
   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") as HTMLElement | null;
+  const canvasContainer = getCanvasContainer();
+  const container = canvasContainer || document.body;
+  const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
   const nodeTools = toolsWrapper?.querySelector(".node-tools") as HTMLElement | null;
 
   const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
@@ -49,6 +66,8 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
 
   // 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
@@ -58,6 +77,12 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
     } 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) {
@@ -65,6 +90,12 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
     } 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)
@@ -72,7 +103,7 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
   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)
@@ -89,6 +120,8 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
     if (handle) {
       if (isInstance) {
         handle.setAttribute("stroke", getComponentColor());
+      } else if (isTextEdit) {
+        handle.setAttribute("stroke", getTextEditColor());
       } else {
         handle.removeAttribute("stroke"); // Use CSS default
       }
@@ -100,11 +133,11 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
     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) {

package/src/lib/node-tools/highlight/updateHighlightFrameVisibility.ts

@@ -1,3 +1,4 @@
+import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
 
 export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
@@ -11,7 +12,9 @@ export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
   // Batch DOM writes
   frame.style.display = displayValue;
 
-  const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
+  const canvasContainer = getCanvasContainer();
+  const container = canvasContainer || document.body;
+  const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
   if (toolsWrapper) {
     toolsWrapper.style.display = displayValue;
   }