fix: Improve bubble tooltip positioning in multiline ranges (slab#706)

mumpo · Nov 16, 2020 · 9804d46 · 9804d46
1 parent 54d6141
commit 9804d46
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/themes/bubble.js b/themes/bubble.js
@@ -26,19 +26,8 @@ class BubbleTooltip extends BaseTooltip {
           this.root.style.left = '0px';
           this.root.style.width = '';
           this.root.style.width = `${this.root.offsetWidth}px`;
-          const lines = this.quill.getLines(range.index, range.length);
-          if (lines.length === 1) {
-            this.position(this.quill.getBounds(range));
-          } else {
-            const lastLine = lines[lines.length - 1];
-            const index = this.quill.getIndex(lastLine);
-            const length = Math.min(
-              lastLine.length() - 1,
-              range.index + range.length - index,
-            );
-            const indexBounds = this.quill.getBounds(new Range(index, length));
-            this.position(indexBounds);
-          }
+          const rangePosition = this.calculateRangePosition(range);
+          this.position(rangePosition);
         } else if (
           document.activeElement !== this.textbox &&
           this.quill.hasFocus()
@@ -60,7 +49,8 @@ class BubbleTooltip extends BaseTooltip {
         if (this.root.classList.contains('ql-hidden')) return;
         const range = this.quill.getSelection();
         if (range != null) {
-          this.position(this.quill.getBounds(range));
+          const rangePosition = this.calculateRangePosition(range);
+          this.position(rangePosition);
         }
       }, 1);
     });
@@ -70,6 +60,21 @@ class BubbleTooltip extends BaseTooltip {
     this.show();
   }
 
+  calculateRangePosition(range) {
+    const lines = this.quill.getLines(range.index, range.length);
+    if (lines.length === 1) {
+      return this.quill.getBounds(range);
+    }
+
+    const lastLine = lines[lines.length - 1];
+    const index = this.quill.getIndex(lastLine);
+    const length = Math.min(
+      lastLine.length() - 1,
+      range.index + range.length - index,
+    );
+    return this.quill.getBounds(new Range(index, length));
+  }
+
   position(reference) {
     const shift = super.position(reference);
     const arrow = this.root.querySelector('.ql-tooltip-arrow');