feat(RichTextEditor): add tab key event

Author: dewita

assets/js/tiptap/ListItem.ts

@@ -0,0 +1,32 @@
+import { Node } from 'tiptap'
+// @ts-ignore
+import {splitListItem, liftListItem, sinkListItem, insertText, chainCommands} from 'tiptap-commands'
+
+export default class ListItem extends Node {
+
+  get name() {
+    return 'list_item'
+  }
+
+  get schema() {
+    return {
+      content: 'paragraph block*',
+      defining: true,
+      draggable: false,
+      parseDOM: [
+        { tag: 'li' },
+      ],
+      toDOM: () => ['li', 0],
+    }
+  }
+
+  // @ts-ignore
+  keys({ type }) {
+    return {
+      Enter: splitListItem(type),
+      Tab: chainCommands(sinkListItem(type), insertText("    ")),
+      "Shift-Tab": liftListItem(type)
+    };
+  }
+
+}

components/Editor/RichTextEditor.vue

@@ -192,7 +192,6 @@
     HorizontalRule,
     OrderedList,
     BulletList,
-    ListItem,
     TodoItem,
     TodoList,
     Bold,
@@ -205,6 +204,7 @@
     CodeBlockHighlight,
     Placeholder
   } from 'tiptap-extensions'
+  import ListItem from "~/assets/js/tiptap/ListItem"
   import {Component, Prop, Ref, Vue} from "vue-property-decorator";
 
   @Component({

package-lock.json

@@ -31,6 +31,7 @@
     "nuxt-typed-vuex": "^0.1.10",
     "qs": "^6.9.1",
     "tiptap": "^1.26.6",
+    "tiptap-commands": "^1.13.1",
     "tiptap-extensions": "^1.28.6",
     "validator": "^12.2.0",
     "vee-validate": "^3.2.3",