fix(range): regression bug of handleDelete 'n improve insertText meth…

…ods, ref #22
fritx · Oct 2, 2017 · bc6fa9b · bc6fa9b
1 parent 4949080
commit bc6fa9b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 37 deletions.
diff --git a/src/At.vue b/src/At.vue
@@ -2,7 +2,7 @@
 import {
   closest, getOffset, getPrecedingRange,
   getRange, applyRange,
-  scrollIntoView, getAtAndIndex, insertText
+  scrollIntoView, getAtAndIndex
 } from './util'
 import AtTemplate from './AtTemplate.vue'
 
@@ -274,20 +274,36 @@ export default {
         cur: nextCur
       }
     },
+
+    // todo: 抽离成库并测试
+    insertText (text, r) {
+      r.deleteContents()
+      const node = r.endContainer
+      if (node.nodeType === Node.TEXT_NODE) {
+        const cut = r.endOffset
+        node.data = node.data.slice(0, cut) +
+          text + node.data.slice(cut)
+        r.setEnd(node, cut + text.length)
+      } else {
+        const t = document.createTextNode(text)
+        r.insertNode(t)
+        r.setEndAfter(t)
+      }
+      r.collapse(false) // 参数在IE下必传
+    },
     insertItem () {
       const { range, offset, list, cur } = this.atwho
       const { atItems, itemName } = this
       const r = range.cloneRange()
       const text = range.toString()
       const { at, index } = getAtAndIndex(text, atItems)
-
-      r.setStart(r.endContainer, index + at.length) // 从@后第一位开始
+      const start = index + at.length // 从@后第一位开始
+      r.setStart(r.endContainer, start)
       // hack: 连续两次 可以确保click后 focus回来 range真正生效
       applyRange(r)
       applyRange(r)
       const t = itemName(list[cur]) + ' '
-      // document.execCommand('insertText', 0, t)
-      insertText(t)
+      this.insertText(t, r)
       this.handleInput()
     }
   }

diff --git a/src/AtTextarea.vue b/src/AtTextarea.vue
@@ -1,7 +1,7 @@
 <script>
 import At from './At.vue'
 import getCaretCoordinates from 'textarea-caret'
-import { insertText, getAtAndIndex } from './util'
+import { getAtAndIndex } from './util'
 
 export default {
   extends: At,
@@ -37,7 +37,8 @@ export default {
             return deleteMatch(name, chunk)
           })
           if (has) {
-            el.value = el.value.slice(0, index) + el.value.slice(el.selectionEnd - 1)
+            el.value = el.value.slice(0, index) +
+              el.value.slice(el.selectionEnd - 1)
             el.selectionStart = index + 1
             el.selectionEnd = index + 1
           }
@@ -106,20 +107,27 @@ export default {
       }
     },
 
+    // todo: 抽离成库并测试
+    insertText (text, ta) {
+      const start = ta.selectionStart
+      const end = ta.selectionEnd
+      ta.value = ta.value.slice(0, start) +
+        text + ta.value.slice(end)
+      const newEnd = start + text.length
+      ta.selectionStart = newEnd
+      ta.selectionEnd = newEnd
+    },
     insertItem () {
       const { chunk, offset, list, cur, atEnd } = this.atwho
       const { atItems, itemName } = this
       const el = this.$el.querySelector('textarea')
       const text = el.value.slice(0, atEnd)
       const { at, index } = getAtAndIndex(text, atItems)
       const start = index + at.length // 从@后第一位开始
-      el.value = el.value.slice(0, start) + el.value.slice(start + chunk.length)
       el.selectionStart = start
-      el.selectionEnd = start
-      el.focus()
+      el.focus() // textarea必须focus回来
       const t = itemName(list[cur]) + ' '
-      // document.execCommand('insertText', 0, t)
-      insertText(t, el)
+      this.insertText(t, el)
       this.handleInput()
     }
   }

diff --git a/src/util.js b/src/util.js
@@ -71,29 +71,4 @@ export function getPrecedingRange() {
     return range
   }
 }
-
-// https://stackoverflow.com/questions/2920150/insert-text-at-cursor-in-a-content-editable-div
-// ...
-// I've updated your fiddle to move the cursor to a position immediately after the inserted text:
-// jsfiddle.net/ww3Rk/1. Seems to be fine in IE 9.
-export function insertText(text, ta) {
-  if (ta) {
-    let cut = ta.selectionStart
-    ta.value = ta.value.slice(0, cut) +
-      text + ta.value.slice(cut)
-    let end = cut + text.length
-    ta.selectionStart = end
-    ta.selectionEnd = end
-  } else {
-    var sel, range, html;
-    sel = window.getSelection();
-    range = sel.getRangeAt(0);
-    range.deleteContents();
-    var textNode = document.createTextNode(text);
-    range.insertNode(textNode);
-    range.setStartAfter(textNode);
-    sel.removeAllRanges();
-    sel.addRange(range);
-  }
-}
 /* eslint-enable */