对quill做适配

core.js

@@ -14,6 +14,12 @@ import Clipboard from './modules/clipboard';
 import History from './modules/history';
 import Keyboard from './modules/keyboard';
 
+
+class DividerBlot extends BlockEmbed { }
+DividerBlot.blotName = 'divider';
+DividerBlot.tagName = 'hr';
+Quill.register(DividerBlot);
+
 Quill.register({
   'blots/block'        : Block,
   'blots/block/embed'  : BlockEmbed,

core/quill.js

@@ -56,7 +56,7 @@ class Quill {
     }
   }
 
-  constructor(container, options = {}) {
+  constructor(container, options = {}, shadowRoot, id) {
     this.options = expandConfig(container, options);
     this.container = this.options.container;
     if (this.container == null) {
@@ -78,8 +78,9 @@ class Quill {
       emitter: this.emitter,
       whitelist: this.options.formats
     });
+    this._id = id
     this.editor = new Editor(this.scroll);
-    this.selection = new Selection(this.scroll, this.emitter);
+    this.selection = new Selection(this.scroll, this.emitter, shadowRoot);
     this.theme = new this.options.theme(this, this.options);
     this.keyboard = this.theme.addModule('keyboard');
     this.clipboard = this.theme.addModule('clipboard');
@@ -147,14 +148,15 @@ class Quill {
 
   format(name, value, source = Emitter.sources.API, shadowRoot = document) {
     return modify.call(this, () => {
-      let range = this.getSelection(true, shadowRoot);
+      // focus = true的情况下会导致焦点回到第一个字符串前面
+      let range = this.getSelection(false, shadowRoot);
       let change = new Delta();
       if (range == null) {
         return change;
       } else if (Parchment.query(name, Parchment.Scope.BLOCK)) {
         change = this.editor.formatLine(range.index, range.length, { [name]: value });
       } else if (range.length === 0) {
-        this.selection.format(name, value);
+        this.selection.format(name, value, shadowRoot);
         return change;
       } else {
         change = this.editor.formatText(range.index, range.length, { [name]: value });
@@ -239,7 +241,15 @@ class Quill {
     return this.theme.modules[name];
   }
 
-  getSelection(focus = false, shadowRoot = document) {
+  getSelection(focus = false, shadowRoot) {
+    if(!shadowRoot) {
+      const editor =  Array.prototype.slice.call(document.querySelectorAll('q-editor')).filter(
+          (editor) => {
+            return editor._id === this._id
+          }
+        )[0]
+      shadowRoot = editor.shadowRoot
+    }
     if (focus) this.focus();
     this.update();  // Make sure we access getRange with editor in consistent state
     return this.selection.getRange(shadowRoot)[0];

core/selection.js

@@ -16,7 +16,7 @@ class Range {
 
 
 class Selection {
-  constructor(scroll, emitter) {
+  constructor(scroll, emitter, shadowRoot) {
     this.emitter = emitter;
     this.scroll = scroll;
     this.composing = false;
@@ -27,14 +27,14 @@ class Selection {
     this.lastRange = this.savedRange = new Range(0, 0);
     this.handleComposition();
     this.handleDragging();
-    this.emitter.listenDOM('selectionchange', document, () => {
+    this.emitter.listenDOM('selectionchange', shadowRoot || document, () => {
       if (!this.mouseDown) {
-        setTimeout(this.update.bind(this, Emitter.sources.USER), 1);
+        setTimeout(this.update.bind(this, Emitter.sources.USER, shadowRoot), 1);
       }
     });
     this.emitter.on(Emitter.events.EDITOR_CHANGE, (type, delta) => {
       if (type === Emitter.events.TEXT_CHANGE && delta.length() > 0) {
-        this.update(Emitter.sources.SILENT);
+        this.update(Emitter.sources.SILENT, shadowRoot);
       }
     });
     this.emitter.on(Emitter.events.SCROLL_BEFORE_UPDATE, () => {
@@ -45,7 +45,7 @@ class Selection {
       // TODO unclear if this has negative side effects
       this.emitter.once(Emitter.events.SCROLL_UPDATE, () => {
         try {
-          this.setNativeRange(native.start.node, native.start.offset, native.end.node, native.end.offset);
+          this.setNativeRange(native.start.node, native.start.offset, native.end.node, native.end.offset, shadowRoot);
         } catch (ignored) {}
       });
     });
@@ -90,10 +90,10 @@ class Selection {
     this.setRange(this.savedRange);
   }
 
-  format(format, value) {
+  format(format, value, shadowRoot = document) {
     if (this.scroll.whitelist != null && !this.scroll.whitelist[format]) return;
     this.scroll.update();
-    let nativeRange = this.getNativeRange();
+    let nativeRange = this.getNativeRange(shadowRoot);
     if (nativeRange == null || !nativeRange.native.collapsed || Parchment.query(format, Parchment.Scope.BLOCK)) return;
     if (nativeRange.start.node !== this.cursor.textNode) {
       let blot = Parchment.find(nativeRange.start.node, false);
@@ -263,12 +263,12 @@ class Selection {
     }
   }
 
-  setNativeRange(startNode, startOffset, endNode = startNode, endOffset = startOffset, force = false) {
+  setNativeRange(startNode, startOffset, endNode = startNode, endOffset = startOffset, force = false, shadowRoot=document) {
     debug.info('setNativeRange', startNode, startOffset, endNode, endOffset);
     if (startNode != null && (this.root.parentNode == null || startNode.parentNode == null || endNode.parentNode == null)) {
       return;
     }
-    let selection = document.getSelection();
+    let selection = shadowRoot.getSelection();
     if (selection == null) return;
     if (startNode != null) {
       if (!this.hasFocus()) this.root.focus();
@@ -315,9 +315,9 @@ class Selection {
     this.update(source);
   }
 
-  update(source = Emitter.sources.USER) {
+  update(source = Emitter.sources.USER, shadowRoot = document) {
     let oldRange = this.lastRange;
-    let [lastRange, nativeRange] = this.getRange();
+    let [lastRange, nativeRange] = this.getRange(shadowRoot);
     this.lastRange = lastRange;
     if (this.lastRange != null) {
       this.savedRange = this.lastRange;

modules/clipboard.js

@@ -107,12 +107,12 @@ class Clipboard extends Module {
 
   onPaste(e) {
     if (e.defaultPrevented || !this.quill.isEnabled()) return;
-    let range = this.quill.getSelection();
-    let delta = new Delta().retain(range.index);
     let scrollTop = this.quill.scrollingContainer.scrollTop;
     this.container.focus();
     this.quill.selection.update(Quill.sources.SILENT);
     setTimeout(() => {
+      let range = this.quill.getSelection();
+      let delta = new Delta().retain(range.index);
       delta = delta.concat(this.convert()).delete(range.length);
       this.quill.updateContents(delta, Quill.sources.USER);
       // range.length contributes to delta.length()