improvement: 对光标位置状态追踪的尝试

目前的状态：不支持输入法，输入过快会鬼畜（都是rAF的问题），跟随输入移动光标只能在最后一个字符处生效（只用Selection不够，需要再看看Range）

src/components/editor/EditableItem.vue

@@ -4,7 +4,7 @@
     :is="item.type"
     :id="item.id"
     @input="handleInput"
-    @keydown.stop="handleKeyDown"
+    @keydown="handleKeyDown"
     contenteditable
     v-html="item.content"
   >
@@ -14,12 +14,18 @@
 <script>
 import blockTypeRegs from '../../utils/block-type-regs'
 import { MODIFY_ITEM, ADD_ITEM_AFTER } from '../../store/types/editor-types'
+import { mapState } from 'vuex'
 export default {
   name: 'editable-item',
   props: ['item', 'pageId'],
   data: function() {
     return {}
   },
+  computed: {
+    ...mapState({
+      range: state => state.editor.range
+    })
+  },
   mounted() {},
   updated() {},
   methods: {
@@ -31,6 +37,11 @@ export default {
             pageId: this.pageId,
             itemId: this.item.id
           })
+          requestAnimationFrame(() => {
+            const focusNode = document.getElementById(this.item.id).nextSibling
+            focusNode.focus()
+          })
+
           break
 
         default:
@@ -53,6 +64,12 @@ export default {
         itemId: this.item.id,
         diff
       })
+      requestAnimationFrame(() => {
+        const selection = window.getSelection()
+        selection.collapseToEnd()
+        selection.extend(selection.anchorNode, e.target.textContent.length)
+        selection.collapseToEnd()
+      })
     }
   }
 }

src/components/editor/Editor.vue

@@ -14,12 +14,10 @@ export default {
   components: {
     EditingPageVue
   },
-  created() {
-  },
+  created() {},
   computed: {
     ...mapState({
-      pages: state => state.editor.pages,
-      selection: state => state.editor.selection
+      pages: state => state.editor.pages
     })
   }
 }

src/store/modules/editor.js

@@ -1,7 +1,7 @@
 import {
   INIT_BY_STATE,
   INIT_BY_DEFAULT,
-  SET_SELECTION,
+  SET_RANGE,
   ADD_PAGE_AFTER,
   DELETE_PAGE,
   ADD_ITEM_AFTER,
@@ -14,7 +14,7 @@ import uuid from 'uuid'
 export default {
   state: {
     pages: [],
-    selection: {}
+    range: {}
   },
 
   mutations: {
@@ -35,9 +35,9 @@ export default {
         }]
       }]
     },
-    [SET_SELECTION](state, payload) {
-      state.selection = {
-        ...payload.selection
+    [SET_RANGE](state, payload) {
+      state.range = {
+        ...payload.range
       }
     },
     [ADD_PAGE_AFTER](state, payload) {
@@ -111,12 +111,3 @@ export default {
   actions: {},
   getters: {}
 }
-
-// [SET_TAG_NAME](state, payload) {
-//   state.editableItems = [...state.editableItems.map(item =>
-//     item.id === payload.id ? {
-//       ...item,
-//       tagName: payload.tagName
-//     } : item
-//   )]
-// },

src/store/types/editor-types.js

@@ -1,6 +1,6 @@
 export const INIT_BY_STATE = 'initByState'
 export const INIT_BY_DEFAULT = 'initByDefault'
-export const SET_SELECTION = 'setSelection'
+export const SET_RANGE = 'setRange'
 export const ADD_PAGE_AFTER = 'addPageAfter'
 export const DELETE_PAGE = 'initByState'
 // export const SPLITE_PAGE = 'splitePage'