Merge pull request #24 from Ivaneyko/master

Author: hunghg255

demo/index.html

@@ -5,8 +5,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Quill Resize Image</title>
-  <link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.7/quill.snow.min.css" rel="stylesheet" />
-  <script defer src="https://cdn.bootcdn.net/ajax/libs/quill/1.3.7/quill.min.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet" />
+  <script defer src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
   <script defer src="https://unpkg.com/quill-resize-image@1.0.5/dist/quill-resize-image.min.js"></script>
 </head>
 
@@ -20,7 +21,8 @@
 </body>
 <script defer>
   document.addEventListener('DOMContentLoaded', function () {
-    if (!window.QuillResizeImage) return;
+    if (!window.QuillResizeImage ) return;
+
     Quill.register("modules/resize", window.QuillResizeImage);
 
     var toolbarOptions = [
@@ -29,15 +31,15 @@
       "underline",
       "strike",
       "image",
-      "video",
+      "video"
     ];
     var quill = new Quill("#editor", {
       theme: "snow",
       modules: {
         toolbar: toolbarOptions,
         resize: {
           locale: {},
-        },
+        }
       },
     });
 

src/ResizePlugin.ts

@@ -104,12 +104,18 @@ class ResizePlugin {
     this.resizer = resizer;
   }
   positionResizerToTarget(el: HTMLElement) {
-    if (this.resizer !== null) {
-      this.resizer.style.setProperty("left", el.offsetLeft + "px");
-      this.resizer.style.setProperty("top", (el.offsetTop - this.editor.scrollTop) + "px");
-      this.resizer.style.setProperty("width", el.clientWidth + "px");
-      this.resizer.style.setProperty("height", el.clientHeight + "px");
-    }
+    if (!this.resizer || !this.editor) return;
+
+    const elRect = el.getBoundingClientRect();
+    const editorRect = this.editor.getBoundingClientRect();
+
+    const left = elRect.left - editorRect.left + this.editor.scrollLeft;
+    const top = elRect.top - editorRect.top + this.editor.scrollTop;
+
+    this.resizer.style.setProperty("left", `${left}px`);
+    this.resizer.style.setProperty("top", `${top}px`);
+    this.resizer.style.setProperty("width", `${el.clientWidth}px`);
+    this.resizer.style.setProperty("height", `${el.clientHeight}px`);
   }
   bindEvents() {
     if (this.resizer !== null) {