@node-edit-utils/core 2.1.5 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Markup Canvas
|
|
3
3
|
* High-performance markup canvas with zoom and pan capabilities
|
|
4
|
-
* @version 2.1.
|
|
4
|
+
* @version 2.1.6
|
|
5
5
|
*/
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
@@ -459,6 +459,7 @@ const createNodeTools = (element) => {
|
|
|
459
459
|
const nodeProvider = element;
|
|
460
460
|
let resizeObserver = null;
|
|
461
461
|
let mutationObserver = null;
|
|
462
|
+
let parentMutationObserver = null;
|
|
462
463
|
let selectedNode = null;
|
|
463
464
|
const text = nodeText();
|
|
464
465
|
const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
|
|
@@ -472,6 +473,7 @@ const createNodeTools = (element) => {
|
|
|
472
473
|
selectedNode = null;
|
|
473
474
|
resizeObserver?.disconnect();
|
|
474
475
|
mutationObserver?.disconnect();
|
|
476
|
+
parentMutationObserver?.disconnect();
|
|
475
477
|
}
|
|
476
478
|
}
|
|
477
479
|
};
|
|
@@ -487,6 +489,7 @@ const createNodeTools = (element) => {
|
|
|
487
489
|
}
|
|
488
490
|
resizeObserver?.disconnect();
|
|
489
491
|
mutationObserver?.disconnect();
|
|
492
|
+
parentMutationObserver?.disconnect();
|
|
490
493
|
if (node && nodeProvider) {
|
|
491
494
|
text.enableEditMode(node, nodeProvider);
|
|
492
495
|
resizeObserver = connectResizeObserver(nodeProvider, () => {
|
|
@@ -502,6 +505,17 @@ const createNodeTools = (element) => {
|
|
|
502
505
|
childList: true,
|
|
503
506
|
characterData: true,
|
|
504
507
|
});
|
|
508
|
+
const parent = node.parentElement;
|
|
509
|
+
if (parent) {
|
|
510
|
+
parentMutationObserver = new MutationObserver(() => {
|
|
511
|
+
throttledFrameRefresh(node, nodeProvider);
|
|
512
|
+
updateHighlightFrameVisibility(node, nodeProvider);
|
|
513
|
+
});
|
|
514
|
+
parentMutationObserver.observe(parent, {
|
|
515
|
+
childList: true,
|
|
516
|
+
subtree: true,
|
|
517
|
+
});
|
|
518
|
+
}
|
|
505
519
|
}
|
|
506
520
|
selectedNode = node;
|
|
507
521
|
sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
|
|
@@ -516,6 +530,7 @@ const createNodeTools = (element) => {
|
|
|
516
530
|
removeListeners();
|
|
517
531
|
resizeObserver?.disconnect();
|
|
518
532
|
mutationObserver?.disconnect();
|
|
533
|
+
parentMutationObserver?.disconnect();
|
|
519
534
|
text.blurEditMode();
|
|
520
535
|
throttledFrameRefresh.cleanup();
|
|
521
536
|
};
|
|
@@ -530,6 +545,7 @@ const createNodeTools = (element) => {
|
|
|
530
545
|
selectedNode = null;
|
|
531
546
|
resizeObserver?.disconnect();
|
|
532
547
|
mutationObserver?.disconnect();
|
|
548
|
+
parentMutationObserver?.disconnect();
|
|
533
549
|
},
|
|
534
550
|
getEditableNode: () => text.getEditableNode(),
|
|
535
551
|
cleanup,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Markup Canvas
|
|
3
3
|
* High-performance markup canvas with zoom and pan capabilities
|
|
4
|
-
* @version 2.1.
|
|
4
|
+
* @version 2.1.6
|
|
5
5
|
*/
|
|
6
6
|
// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
|
|
7
7
|
function withRAFThrottle(func) {
|
|
@@ -457,6 +457,7 @@ const createNodeTools = (element) => {
|
|
|
457
457
|
const nodeProvider = element;
|
|
458
458
|
let resizeObserver = null;
|
|
459
459
|
let mutationObserver = null;
|
|
460
|
+
let parentMutationObserver = null;
|
|
460
461
|
let selectedNode = null;
|
|
461
462
|
const text = nodeText();
|
|
462
463
|
const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
|
|
@@ -470,6 +471,7 @@ const createNodeTools = (element) => {
|
|
|
470
471
|
selectedNode = null;
|
|
471
472
|
resizeObserver?.disconnect();
|
|
472
473
|
mutationObserver?.disconnect();
|
|
474
|
+
parentMutationObserver?.disconnect();
|
|
473
475
|
}
|
|
474
476
|
}
|
|
475
477
|
};
|
|
@@ -485,6 +487,7 @@ const createNodeTools = (element) => {
|
|
|
485
487
|
}
|
|
486
488
|
resizeObserver?.disconnect();
|
|
487
489
|
mutationObserver?.disconnect();
|
|
490
|
+
parentMutationObserver?.disconnect();
|
|
488
491
|
if (node && nodeProvider) {
|
|
489
492
|
text.enableEditMode(node, nodeProvider);
|
|
490
493
|
resizeObserver = connectResizeObserver(nodeProvider, () => {
|
|
@@ -500,6 +503,17 @@ const createNodeTools = (element) => {
|
|
|
500
503
|
childList: true,
|
|
501
504
|
characterData: true,
|
|
502
505
|
});
|
|
506
|
+
const parent = node.parentElement;
|
|
507
|
+
if (parent) {
|
|
508
|
+
parentMutationObserver = new MutationObserver(() => {
|
|
509
|
+
throttledFrameRefresh(node, nodeProvider);
|
|
510
|
+
updateHighlightFrameVisibility(node, nodeProvider);
|
|
511
|
+
});
|
|
512
|
+
parentMutationObserver.observe(parent, {
|
|
513
|
+
childList: true,
|
|
514
|
+
subtree: true,
|
|
515
|
+
});
|
|
516
|
+
}
|
|
503
517
|
}
|
|
504
518
|
selectedNode = node;
|
|
505
519
|
sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
|
|
@@ -514,6 +528,7 @@ const createNodeTools = (element) => {
|
|
|
514
528
|
removeListeners();
|
|
515
529
|
resizeObserver?.disconnect();
|
|
516
530
|
mutationObserver?.disconnect();
|
|
531
|
+
parentMutationObserver?.disconnect();
|
|
517
532
|
text.blurEditMode();
|
|
518
533
|
throttledFrameRefresh.cleanup();
|
|
519
534
|
};
|
|
@@ -528,6 +543,7 @@ const createNodeTools = (element) => {
|
|
|
528
543
|
selectedNode = null;
|
|
529
544
|
resizeObserver?.disconnect();
|
|
530
545
|
mutationObserver?.disconnect();
|
|
546
|
+
parentMutationObserver?.disconnect();
|
|
531
547
|
},
|
|
532
548
|
getEditableNode: () => text.getEditableNode(),
|
|
533
549
|
cleanup,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Markup Canvas
|
|
3
3
|
* High-performance markup canvas with zoom and pan capabilities
|
|
4
|
-
* @version 2.1.
|
|
4
|
+
* @version 2.1.6
|
|
5
5
|
*/
|
|
6
6
|
(function (global, factory) {
|
|
7
7
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
@@ -463,6 +463,7 @@
|
|
|
463
463
|
const nodeProvider = element;
|
|
464
464
|
let resizeObserver = null;
|
|
465
465
|
let mutationObserver = null;
|
|
466
|
+
let parentMutationObserver = null;
|
|
466
467
|
let selectedNode = null;
|
|
467
468
|
const text = nodeText();
|
|
468
469
|
const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
|
|
@@ -476,6 +477,7 @@
|
|
|
476
477
|
selectedNode = null;
|
|
477
478
|
resizeObserver?.disconnect();
|
|
478
479
|
mutationObserver?.disconnect();
|
|
480
|
+
parentMutationObserver?.disconnect();
|
|
479
481
|
}
|
|
480
482
|
}
|
|
481
483
|
};
|
|
@@ -491,6 +493,7 @@
|
|
|
491
493
|
}
|
|
492
494
|
resizeObserver?.disconnect();
|
|
493
495
|
mutationObserver?.disconnect();
|
|
496
|
+
parentMutationObserver?.disconnect();
|
|
494
497
|
if (node && nodeProvider) {
|
|
495
498
|
text.enableEditMode(node, nodeProvider);
|
|
496
499
|
resizeObserver = connectResizeObserver(nodeProvider, () => {
|
|
@@ -506,6 +509,17 @@
|
|
|
506
509
|
childList: true,
|
|
507
510
|
characterData: true,
|
|
508
511
|
});
|
|
512
|
+
const parent = node.parentElement;
|
|
513
|
+
if (parent) {
|
|
514
|
+
parentMutationObserver = new MutationObserver(() => {
|
|
515
|
+
throttledFrameRefresh(node, nodeProvider);
|
|
516
|
+
updateHighlightFrameVisibility(node, nodeProvider);
|
|
517
|
+
});
|
|
518
|
+
parentMutationObserver.observe(parent, {
|
|
519
|
+
childList: true,
|
|
520
|
+
subtree: true,
|
|
521
|
+
});
|
|
522
|
+
}
|
|
509
523
|
}
|
|
510
524
|
selectedNode = node;
|
|
511
525
|
sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
|
|
@@ -520,6 +534,7 @@
|
|
|
520
534
|
removeListeners();
|
|
521
535
|
resizeObserver?.disconnect();
|
|
522
536
|
mutationObserver?.disconnect();
|
|
537
|
+
parentMutationObserver?.disconnect();
|
|
523
538
|
text.blurEditMode();
|
|
524
539
|
throttledFrameRefresh.cleanup();
|
|
525
540
|
};
|
|
@@ -534,6 +549,7 @@
|
|
|
534
549
|
selectedNode = null;
|
|
535
550
|
resizeObserver?.disconnect();
|
|
536
551
|
mutationObserver?.disconnect();
|
|
552
|
+
parentMutationObserver?.disconnect();
|
|
537
553
|
},
|
|
538
554
|
getEditableNode: () => text.getEditableNode(),
|
|
539
555
|
cleanup,
|
|
@@ -1 +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";function t(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 n=e=>{const t=window.canvas;return e.reduce((e,t)=>e?.[t],t)};function o(e){return e.querySelector(".highlight-frame")}const r=e=>{if(!e)return;const t=o(e);t&&t.remove()},s=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let
|
|
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";function t(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 n=e=>{const t=window.canvas;return e.reduce((e,t)=>e?.[t],t)};function o(e){return e.querySelector(".highlight-frame")}const r=e=>{if(!e)return;const t=o(e);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,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,r).filter(e=>!s.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none"));if(t&&d.includes(t))return t;if(l)return i=[],n=d[0],n;var c,u;u=d,(c=i).length===u.length&&c.every((e,t)=>e===u[t])?a<=d.length&&a++:a=0;return n=d[d.length-1-a],i=d,n},d=(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(t),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)}};function c(e,t){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top,i=o.left-r.left,a=n(["zoom","current"])??1;return{top:parseFloat((s/a).toFixed(5)),left:parseFloat((i/a).toFixed(5)),width:Math.max(4,parseFloat((o.width/a).toFixed(5))),height:parseFloat((o.height/a).toFixed(5))}}const u=(e,t)=>{const n=document.createElement("div");n.className="node-tools",t.appendChild(n),((e,t)=>{const n=document.createElement("div");n.className="tag-label",n.textContent=e.tagName.toLowerCase(),t.appendChild(n)})(e,n)},m=(e,t)=>{if(!e)return;const r=o(t);r&&r.remove();const s=((e,t)=>{const{top:o,left:r,width:s,height:i}=c(e,t),a=n(["zoom","current"])??1;document.body.style.setProperty("--zoom",a.toString()),document.body.style.setProperty("--stroke-width",(2/a).toFixed(3));const l=document.createElement("div");l.classList.add("highlight-frame"),l.style.setProperty("--frame-top",`${o}px`),l.style.setProperty("--frame-left",`${r}px`),l.style.setProperty("--frame-width",`${s}px`),l.style.setProperty("--frame-height",`${i}px`);const d=document.createElementNS("http://www.w3.org/2000/svg","svg");d.classList.add("highlight-frame-svg");const u=document.createElementNS("http://www.w3.org/2000/svg","rect");return u.setAttribute("x","0"),u.setAttribute("y","0"),u.setAttribute("width","100%"),u.setAttribute("height","100%"),u.classList.add("highlight-frame-rect"),d.appendChild(u),l.appendChild(d),l})(e,t);"true"===e.contentEditable&&s.classList.add("is-editable"),u(e,s),t.appendChild(s)},p=(e,t)=>{const r=o(t),s=n(["zoom","current"])??1;if(!r)return;s>=.3?t.style.setProperty("--tool-opacity","1"):t.style.setProperty("--tool-opacity","0");const{top:i,left:a,width:l,height:d}=c(e,t);r.style.setProperty("--frame-top",`${i}px`),r.style.setProperty("--frame-left",`${a}px`),r.style.setProperty("--frame-width",`${l}px`),r.style.setProperty("--frame-height",`${d}px`)},v=(e,t)=>{const n=o(t);if(!n)return;const r=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";n.style.display=r;const s=n.querySelector(".tag-label");s&&(s.style.display=r)},h=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)}},y=(e,t)=>{const n=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{p(e,t)});return()=>n.disconnect()},f=()=>{let e=null,t=!1,o=null;const r=()=>{if(t||!e)return;t=!0;var r;(r=e).contentEditable="false",r.classList.remove("is-editable"),r.style.outline="none",(()=>{const e=n(["keyboard","disableTextEditMode"]);e?.()})(),o?.(),e=null,t=!1};return{enableEditMode:(t,s)=>{if(e===t)return;e&&e!==t&&r();const i=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(t);i&&(e=t,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(t),(()=>{const e=n(["keyboard","enableTextEditMode"]);e?.()})(),o=((e,t,n)=>{if(!t)return()=>{};e.addEventListener("blur",n);const o=h(e),r=y(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(t,s,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},b=320,g=1680,w=[{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"}],E=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(b,Math.min(g,n))})(n,(e.clientX-t)/o);return r},L=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<w.length&&(w[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};e.createCanvasObserver=function(){const e=document.querySelector(".transform-layer");if(!e)return{disconnect:()=>{}};const o=t(()=>{(()=>{const e=n(["zoom","current"]);document.body.style.setProperty("--zoom",e.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/e).toFixed(3)),document.body.dataset.zoom=e.toFixed(5),document.body.dataset.strokeWidth=(2/e).toFixed(3)})()}),r=new MutationObserver(()=>{o()});return r.observe(e,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){o.cleanup(),r.disconnect()}}},e.createNodeTools=e=>{const n=e;let o=null,s=null,i=null,a=null;const l=f(),c=t(p),u=e=>{if(a!==e){if(l.isEditing()){const t=l.getEditableNode();t&&t!==e&&l.blurEditMode()}if(o?.disconnect(),s?.disconnect(),i?.disconnect(),e&&n){l.enableEditMode(e,n),o=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(n,()=>{c(e,n)}),s=new MutationObserver(()=>{c(e,n),v(e,n)}),s.observe(e,{attributes:!0,subtree:!0,childList:!0,characterData:!0});const t=e.parentElement;t&&(i=new MutationObserver(()=>{c(e,n),v(e,n)}),i.observe(t,{childList:!0,subtree:!0}))}var t,r;a=e,t="selectedNodeChanged",r=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:t,data:r,timestamp:Date.now()},"*"),m(e,n),e&&n&&v(e,n)}},h=d(n,u,()=>{l.isEditing()&&l.blurEditMode(),a&&n&&(r(n),a=null,o?.disconnect(),s?.disconnect(),i?.disconnect())},l.getEditableNode),y={selectNode:u,getSelectedNode:()=>a,refreshHighlightFrame:()=>{c(a,n)},clearSelectedNode:()=>{r(n),a=null,o?.disconnect(),s?.disconnect(),i?.disconnect()},getEditableNode:()=>l.getEditableNode(),cleanup:()=>{h(),o?.disconnect(),s?.disconnect(),i?.disconnect(),l.blurEditMode(),c.cleanup()}};var b,g;return b="nodeTools",g=y,"undefined"!=typeof window&&(window[b]=g),y},e.createViewport=e=>{const n=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",w.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,L);let s=!1,i=0,a=0;const l=t(t=>{if(!s)return;n&&(n.style.cursor="ew-resize");const o=E(t,i,a);L(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(),n&&(n.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{L(e,t)},cleanup:()=>{s=!1,l?.cleanup(),d(),r.remove()}}}});
|
package/package.json
CHANGED
|
@@ -15,6 +15,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
|
|
|
15
15
|
|
|
16
16
|
let resizeObserver: ResizeObserver | null = null;
|
|
17
17
|
let mutationObserver: MutationObserver | null = null;
|
|
18
|
+
let parentMutationObserver: MutationObserver | null = null;
|
|
18
19
|
let selectedNode: HTMLElement | null = null;
|
|
19
20
|
|
|
20
21
|
const text = nodeText();
|
|
@@ -32,6 +33,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
|
|
|
32
33
|
|
|
33
34
|
resizeObserver?.disconnect();
|
|
34
35
|
mutationObserver?.disconnect();
|
|
36
|
+
parentMutationObserver?.disconnect();
|
|
35
37
|
}
|
|
36
38
|
}
|
|
37
39
|
};
|
|
@@ -50,6 +52,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
|
|
|
50
52
|
|
|
51
53
|
resizeObserver?.disconnect();
|
|
52
54
|
mutationObserver?.disconnect();
|
|
55
|
+
parentMutationObserver?.disconnect();
|
|
53
56
|
|
|
54
57
|
if (node && nodeProvider) {
|
|
55
58
|
text.enableEditMode(node, nodeProvider);
|
|
@@ -69,6 +72,20 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
|
|
|
69
72
|
childList: true,
|
|
70
73
|
characterData: true,
|
|
71
74
|
});
|
|
75
|
+
|
|
76
|
+
const parent = node.parentElement;
|
|
77
|
+
|
|
78
|
+
if (parent) {
|
|
79
|
+
parentMutationObserver = new MutationObserver(() => {
|
|
80
|
+
throttledFrameRefresh(node, nodeProvider);
|
|
81
|
+
updateHighlightFrameVisibility(node, nodeProvider);
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
parentMutationObserver.observe(parent, {
|
|
85
|
+
childList: true,
|
|
86
|
+
subtree: true,
|
|
87
|
+
});
|
|
88
|
+
}
|
|
72
89
|
}
|
|
73
90
|
|
|
74
91
|
selectedNode = node;
|
|
@@ -87,6 +104,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
|
|
|
87
104
|
removeListeners();
|
|
88
105
|
resizeObserver?.disconnect();
|
|
89
106
|
mutationObserver?.disconnect();
|
|
107
|
+
parentMutationObserver?.disconnect();
|
|
90
108
|
|
|
91
109
|
text.blurEditMode();
|
|
92
110
|
throttledFrameRefresh.cleanup();
|
|
@@ -103,6 +121,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
|
|
|
103
121
|
selectedNode = null;
|
|
104
122
|
resizeObserver?.disconnect();
|
|
105
123
|
mutationObserver?.disconnect();
|
|
124
|
+
parentMutationObserver?.disconnect();
|
|
106
125
|
},
|
|
107
126
|
getEditableNode: () => text.getEditableNode(),
|
|
108
127
|
cleanup,
|