fix resizer

src/extensions/Resizing.js

@@ -4,7 +4,7 @@ import { Extension } from "@tiptap/core";
 
 export default Extension.create({
     name: "Resizable",
-  addOptions() {
+    addOptions () {
         return {
             types: ["image", "video"],
             handlerStyle: {
@@ -18,31 +18,31 @@ export default Extension.create({
         };
     },
 
-  addStorage() {
+    addStorage () {
         return {
             resizeElement: null,
         };
     },
 
-  onCreate({ editor }) {
+    onCreate ({editor}) {
         const element = editor.options.element;
         element.style.position = "relative";
         // resizeLayer
 
+        console.log('onCreate', editor);
+
         const resizeLayer = document.createElement("div");
         resizeLayer.className = "resize-layer";
         resizeLayer.style.display = "none";
         resizeLayer.style.position = "absolute";
 
-    
-
         Object.entries(this.options.layerStyle).forEach(([key, value]) => {
             resizeLayer.style[key] = value;
         });
         resizeLayer.addEventListener("mousedown", (e) => {
             const resizeElement = this.storage.resizeElement;
 
-      if (!resizeElement) return;
+            if ( ! resizeElement) return;
             if (/bottom/.test(e.target.className)) {
                 let startX = e.screenX;
                 const dir = e.target.classList.contains("bottom-left") ? -1 : 1;
@@ -57,8 +57,6 @@ export default Extension.create({
                     const clientHeight = resizeElement.clientHeight;
                     resizeElement.style.width = clientWidth + "px"; // max width
 
-          
-
                     // resizeLayer
                     const pos = getRelativePosition(resizeElement, element);
                     resizeLayer.style.top = pos.top + "px";
@@ -69,7 +67,7 @@ export default Extension.create({
                     startX = e.screenX;
                 };
                 document.addEventListener("mousemove", mousemoveHandle);
-        document.addEventListener("mouseup", () =>{
+                document.addEventListener("mouseup", () => {
                     document.removeEventListener("mousemove", mousemoveHandle)
                 });
             }
@@ -95,60 +93,42 @@ export default Extension.create({
         editor.resizeLayer = resizeLayer;
         element.appendChild(resizeLayer);
 
-
-    
     },
 
-  onSelectionUpdate({ editor, transaction }) {
+    onUpdate({editor, transaction}) {
+        selectionUpdate({editor, transaction}, this.options, this.storage)
+    },
 
+    onSelectionUpdate ({editor, transaction}) {
+        selectionUpdate({editor, transaction}, this.options, this.storage)
+    },
+});
+function selectionUpdate({editor, transaction}, options, storage)
+{
     const element = editor.options.element;
     const node = transaction.curSelection.node;
     const resizeLayer = editor.resizeLayer;
-    console.log("res layer",resizeLayer)
-    if (node && this.options.types.includes(node.type.name)) {
-      // resizeLayer位置大小
+    // console.log("res layer", resizeLayer)
+    if (node && options.types.includes(node.type.name)) {
+        // resizeLayer
         resizeLayer.style.display = "block";
         let dom = editor.view.domAtPos(transaction.curSelection.from).node;
 
         if (dom.getAttribute("src") !== node.attrs.src) {
             dom = dom.querySelector(`[src="${node.attrs.src}"]`);
         }
-      this.storage.resizeElement = dom;
-     
+        storage.resizeElement = dom;
         const pos = getRelativePosition(dom, element);
-        console.log("dom after src", dom)
-        console.log(pos)
         resizeLayer.style.top = pos.top + "px";
         resizeLayer.style.left = pos.left + "px";
         resizeLayer.style.width = dom.width + "px";
         resizeLayer.style.height = dom.height + "px";
 
-        
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        const currentPosition = entry.target.getBoundingClientRect();
-        if (currentPosition.x === 0) {
-          console.log("changed pos");
-          
-          //resizeLayer.style.display = "none";
-        }
-        console.log(entry.target.parentNode)
-        console.log("target: ", entry.target)
-        console.log("bounding rect: ", currentPosition)
-      }
-    })
-    resizeObserver.observe(dom);
     } else {
-      console.log("no node");
         resizeLayer.style.display = "none";
     }
-  },
-});
-
-
-
-// 计算相对位置
-function getRelativePosition(element, ancestor) {
+}
+function getRelativePosition (element, ancestor) {
     const elementRect = element.getBoundingClientRect();
     const ancestorRect = ancestor.getBoundingClientRect();
     const relativePosition = {