Merge pull request #351 from StefKors/native-scrollInfoView

Use native scrollIntoView method so it correctly accounts for paddings and scroll-margins

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quill-mention",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "@mentions for the Quill rich text editor",
   "homepage": "https://quill-mention.com/",
   "main": "dist/quill.mention.csj.js",

src/quill.mention.js

@@ -241,20 +241,10 @@ class Mention {
     );
 
     if (scrollItemInView) {
-      const itemHeight =
-        this.mentionList.childNodes[this.itemIndex].offsetHeight;
-      const itemPos = this.mentionList.childNodes[this.itemIndex].offsetTop;
-      const containerTop = this.mentionContainer.scrollTop;
-      const containerBottom = containerTop + this.mentionContainer.offsetHeight;
-
-      if (itemPos < containerTop) {
-        // Scroll up if the item is above the top of the container
-        this.mentionContainer.scrollTop = itemPos;
-      } else if (itemPos > containerBottom - itemHeight) {
-        // scroll down if any part of the element is below the bottom of the container
-        this.mentionContainer.scrollTop +=
-          itemPos - containerBottom + itemHeight;
-      }
+      this.mentionList.childNodes[this.itemIndex].scrollIntoView({
+        behaviour: "smooth",
+        block: "nearest",
+      });
     }
   }