feat(events): keydown event

Called when the editor receives a keydown event. re #100
iliyaZelenko · Nov 8, 2019 · ff2aa5d · ff2aa5d
1 parent 2015ea2
commit ff2aa5d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -296,7 +296,7 @@ For example, to get json instead:
 
 ## Events
 
-### @init
+### init
 
 **first argument** (object):
 ```ts
@@ -314,6 +314,26 @@ How to use:
 />
 ```
 
+### keydown
+
+Called when the editor receives a keydown event.
+
+```vue
+<tiptap-vuetify
+  @keydown="onKeyDown"
+/>
+```
+
+``` js
+methods: {
+  onkeydown (event, view) {
+    console.log('event', event.key)
+  }
+}
+```
+
+[What is `view`?](https://prosemirror.net/docs/ref/#view.EditorView)
+
 ## Slots
 
 ### toolbar

diff --git a/demo/pages/Index.vue b/demo/pages/Index.vue
@@ -3,11 +3,14 @@
     <!-- :toolbar-attributes="{ color: 'yellow' }"
     min-height="500"
     max-height="600"
+    :editor-properties="editorProperties"
    -->
     <tiptap-vuetify
       v-model="content"
       :extensions="extensions"
       placeholder="Write something …"
+      output-format="json"
+      @keydown="onkeydown"
     />
 
     <br><br>
@@ -29,6 +32,13 @@ export default {
     TiptapVuetify: () => MAIN_MODULE.then(({ TiptapVuetify }) => TiptapVuetify)
   },
   data: () => ({
+    // editorProperties: {
+    //   editorProps: {
+    //     handleKeyDown (a, b, c) {
+    //       console.log('handleKeyDown', a, b, c)
+    //     }
+    //   }
+    // },
     extensions: null,
     content: `
       <h1>Yay Headlines!</h1>
@@ -76,6 +86,11 @@ export default {
         renderIn: 'bubbleMenu'
       }]
     ]
+  },
+  methods: {
+    onkeydown (event) {
+      console.log('event', event.key)
+    }
   }
 }
 </script>
diff --git a/src/components/TiptapVuetify.vue b/src/components/TiptapVuetify.vue
@@ -72,7 +72,7 @@ export default class TiptapVuetify extends Vue {
   readonly [PROPS.VALUE]: string
 
   @Prop({ type: Array, default: () => [] })
-  readonly [PROPS.EXTENSIONS]: any
+  readonly [PROPS.EXTENSIONS]: any[]
 
   @Prop({ type: String })
   readonly [PROPS.PLACEHOLDER]: string
@@ -90,19 +90,19 @@ export default class TiptapVuetify extends Vue {
     type: [Array, Object],
     default: () => ({})
   })
-  readonly [PROPS.TOOLBAR_ATTRIBUTES]: any
+  readonly [PROPS.TOOLBAR_ATTRIBUTES]: Record<string, any>
 
   @Prop({
     type: Object,
     default: () => ({})
   })
-  readonly [PROPS.EDITOR_PROPERTIES]: any
+  readonly [PROPS.EDITOR_PROPERTIES]: Record<string, any>
 
   @Prop({
     type: Array,
     default: () => []
   })
-  readonly [PROPS.NATIVE_EXTENSIONS]: any
+  readonly [PROPS.NATIVE_EXTENSIONS]: any[]
 
   @Prop({
     type: String,
@@ -213,6 +213,18 @@ export default class TiptapVuetify extends Vue {
     this.editor = new Editor({
       extensions,
       ...this[PROPS.EDITOR_PROPERTIES],
+      editorProps: {
+        ...this[PROPS.EDITOR_PROPERTIES].editorProps,
+        handleKeyDown: (view, event) => {
+          if (this[PROPS.EDITOR_PROPERTIES].editorProps &&
+            this[PROPS.EDITOR_PROPERTIES].editorProps.handleKeyDown
+          ) {
+            this[PROPS.EDITOR_PROPERTIES].editorProps.handleKeyDown(view, event)
+          }
+
+          this.$emit('keydown', event, view)
+        }
+      },
       content: this[PROPS.VALUE],
       onUpdate: this.onUpdate.bind(this)
     })