fix: focused element scrolling issue.

DreamworldSolutions · Dec 20, 2019 · 407a011 · 407a011
1 parent ff900df
commit 407a011
Show file tree

Hide file tree

Showing 4 changed files with 5,269 additions and 1 deletion.
diff --git a/dw-text-editor.js b/dw-text-editor.js
@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import '@dreamworld/dw-icon/dw-icon';
-
+import { scrollIntoView } from '@dreamworld/web-util/scrollIntoView';
 /**
  * It is a HTML5 rich text editor.
  * 
@@ -525,6 +525,7 @@ class DwTextEditor extends LitElement {
         value: this.getValue()
       }
     }));
+    this._scrollActiveElementIntoView();
   }
 
   /**
@@ -547,6 +548,19 @@ class DwTextEditor extends LitElement {
         event
       }
     }));
+    this._scrollActiveElementIntoView();
+  }
+
+  /**
+   * Scroll current focused element into view.
+   */
+  _scrollActiveElementIntoView() {
+    const doc = this.content.ownerDocument || this.content.document;
+    const win = doc.defaultView || doc.parentWindow;
+    const focusNode = win.getSelection().focusNode;
+    if (focusNode && focusNode.nodeType == 1) {
+      scrollIntoView(this.content, focusNode);
+    }
   }
 }
 

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@dreamworld/dw-icon": "^1.0.2",
+    "@dreamworld/web-util": "^1.0.0",
     "@webcomponents/webcomponentsjs": "2.2.10",
     "lit-element": "2.2.1"
   },

diff --git a/squire.html b/squire.html
@@ -8,6 +8,7 @@
   <style type="text/css">
     html {
       height: 100%;
+      overflow: hidden;
     }
 
     body {
@@ -21,6 +22,7 @@
       font: 13px/1.35 Helvetica, arial, sans-serif;
       cursor: text;
       margin: 0;
+      overflow: auto;
     }
 
     a {