wip

core/quill.ts

@@ -30,7 +30,6 @@ interface Options {
   container?: HTMLElement | string;
   placeholder?: string;
   bounds?: HTMLElement | string | null;
-  scrollingContainer?: HTMLElement | string | null;
   modules?: Record<string, unknown>;
 }
 
@@ -40,7 +39,6 @@ interface ExpandedOptions extends Omit<Options, 'theme'> {
   container: HTMLElement;
   modules: Record<string, unknown>;
   bounds?: HTMLElement | null;
-  scrollingContainer?: HTMLElement | null;
 }
 
 class Quill {
@@ -50,7 +48,6 @@ class Quill {
     placeholder: '',
     readOnly: false,
     registry: globalRegistry,
-    scrollingContainer: null,
     theme: 'default',
   };
   static events = Emitter.events;
@@ -129,7 +126,6 @@ class Quill {
     }
   }
 
-  scrollingContainer: HTMLElement;
   container: HTMLElement;
   root: HTMLDivElement;
   scroll: Scroll;
@@ -163,7 +159,6 @@ class Quill {
     instances.set(this.container, this);
     this.root = this.addContainer('ql-editor');
     this.root.classList.add('ql-blank');
-    this.scrollingContainer = this.options.scrollingContainer || this.root;
     this.emitter = new Emitter();
     // @ts-expect-error TODO: fix BlotConstructor
     const ScrollBlot = this.options.registry.query(
@@ -288,9 +283,7 @@ class Quill {
   }
 
   focus() {
-    const { scrollTop } = this.scrollingContainer;
     this.selection.focus();
-    this.scrollingContainer.scrollTop = scrollTop;
     this.scrollSelectionIntoView();
   }
 
@@ -621,46 +614,62 @@ class Quill {
   scrollSelectionIntoView() {
     const range = this.selection.lastRange;
     if (range == null) return;
-    const bounds = this.getBounds(range.index, range.length);
+    const bounds = this.selection.getBounds(range.index, range.length);
     if (bounds == null) return;
-    let { top: currentTop, bottom: currentBottom } = bounds;
+
+    let { top, bottom } = bounds;
 
     const { body, defaultView } = this.root.ownerDocument;
+    if (!defaultView) return;
 
-    if (defaultView === null) {
-      return;
-    }
     let targetTop = 0;
     let targetBottom = 0;
+    let targetScaleY = 0;
     let element: HTMLElement | null = this.root;
 
     while (element !== null) {
       const isBodyElement = element === body;
       if (isBodyElement) {
         targetTop = 0;
         targetBottom = defaultView.innerHeight;
+        const targetRect = element.getBoundingClientRect();
+        targetScaleY = targetRect.height / element.offsetHeight;
       } else {
         const targetRect = element.getBoundingClientRect();
         targetTop = targetRect.top;
         targetBottom = targetRect.bottom;
+        targetScaleY = targetRect.height / element.offsetHeight;
       }
       let diff = 0;
 
-      if (currentTop < targetTop) {
-        diff = -(targetTop - currentTop);
-      } else if (currentBottom > targetBottom) {
-        diff = currentBottom - targetBottom;
+      const style = getComputedStyle(element);
+      const borderTop = parseInt(style.borderTopWidth as string, 10);
+      const borderBottom = parseInt(style.borderBottomWidth as string, 10);
+
+      if (top < targetTop) {
+        diff = top - targetTop;
+      } else if (bottom > targetBottom) {
+        const scrollbarHeight =
+          element.offsetHeight -
+          element.clientHeight -
+          borderTop -
+          borderBottom;
+
+        diff =
+          (bottom - targetBottom) / targetScaleY +
+          scrollbarHeight +
+          borderBottom;
       }
 
-      if (diff !== 0) {
+      if (diff) {
         if (isBodyElement) {
           defaultView.scrollBy(0, diff);
         } else {
           const scrollTop = element.scrollTop;
           element.scrollTop += diff;
-          const yOffset = element.scrollTop - scrollTop;
-          currentTop -= yOffset;
-          currentBottom -= yOffset;
+          const yOffset = (element.scrollTop - scrollTop) * targetScaleY;
+          top -= yOffset;
+          bottom -= yOffset;
         }
       }
       if (isBodyElement) {
@@ -806,7 +815,7 @@ function expandConfig(
     themeConfig,
     expandedConfig,
   );
-  ['bounds', 'container', 'scrollingContainer'].forEach(key => {
+  ['bounds', 'container'].forEach(key => {
     if (typeof expandedConfig[key] === 'string') {
       expandedConfig[key] = document.querySelector(expandedConfig[key]);
     }

core/selection.ts

@@ -127,7 +127,7 @@ class Selection {
 
   focus() {
     if (this.hasFocus()) return;
-    this.root.focus();
+    this.root.focus({ preventScroll: true });
     this.setRange(this.savedRange);
   }
 
@@ -348,7 +348,7 @@ class Selection {
     const selection = document.getSelection();
     if (selection == null) return;
     if (startNode != null) {
-      if (!this.hasFocus()) this.root.focus();
+      if (!this.hasFocus()) this.root.focus({ preventScroll: true });
       const { native } = this.getNativeRange() || {};
       if (
         native == null ||

modules/clipboard.ts

@@ -218,7 +218,7 @@ class Clipboard extends Module<ClipboardOptions> {
       delta.length() - range.length,
       Quill.sources.SILENT,
     );
-    this.quill.scrollIntoView();
+    this.quill.scrollSelectionIntoView();
   }
 
   prepareMatching(container: Element, nodeMatches: WeakMap<Node, Matcher[]>) {