KeyPress Event

[Bojoofu]

I was wondering how I can attach a custom key press event? I've tried looking over the docs and wasn't able to find anything. I tried looking at the issues and nothing similar was asked.

[Bojoofu]

So, I have been able to find out how to attach a key press handler after playing around much more! But the I am now having an issue where when I press the enter key, the handler doesn't trigger. I would like to add a custom handler when the users presses the enter key while typing.

Here is my component

<tiptap-vuetify
    v-model="message"
    :extensions="extensions"
    placeholder="Message..."
    :card-props="{ flat: true }"
    :editor-properties="{
        editorProps:{
            handleKeyDown: (view, event) => {
                this.handleKey(event)
                this.handleKey(view)
                
                if (event.key === 'Enter') {
                    // do something
                    return true
                }

                return false
            }
        }
    }"
/>

this.handleKey(<parameter>) just calls a Vue method to log to the console the parameter being passed to it.

Is this the correct way of adding a custom handler for when a users presses the Enter key, or is there a better way?

[iliyaZelenko]

This is the only way to track a keypress event.

After your message, I have plans to simplify this, to use Vue's events on the component, e.g:

<tiptap-vuetify
    v-model="message"
    :extensions="extensions"
    @keydown="keydownHandler"
    @keypress="keypressHandler"
/>

Glad you found the answer, I wanted to write you an hour ago, I knew the answer, but I was a little busy.

[iliyaZelenko]

I spent time searching and found how to do it in tiptap. Here's how it works through my package:

import { Extension } from 'tiptap'

Add your extension to nativeExtensions:

  data: () => ({
    extensions: [],
    nativeExtensions: [
      new class extends Extension {
        keys () {
          return {
            Enter (state, dispatch, view) {
              console.log('Enter!')
              // return true prevents default behaviour
              return true
            }
          }
        }
      }()
    ],
    content: 'test'
  }),

Use nativeExtensions via native-extensions prop:

    <tiptap-vuetify
      v-model="content"
      :native-extensions="nativeExtensions"
      :extensions="extensions"
    />

Such a difficult decision only with the Enter, I don’t know why.

I'm sorry if you spent a lot of time finding a solution. I am happy to help you if you have a problem.

[iliyaZelenko]

I released a new version 2.7.0, in which you can use keydown event if needed.

By the way, please write down if everything works, please.

[Bojoofu]

No worries at all and I have successfully implemented your suggestion and it works as designed! Thank you very much! Now I can use your amazing editor for creating messages! 😃

[Bojoofu]

I spoke a little too soon haha. I have a method that resides in the main component that I would like to call when the user presses enter (from within the Enter method in the custom native extension). I tried calling it but it returns undefined. I know I'm missing something but I cannot put my finger on it.

new class extends Extension {
    keys() {
        return {
            Enter(state, dispatch, view) {
                this.sendMessage();

                return true
            }
        }
    }
}

The this.sendMessage() I was hoping that it would call the method in the component but it's not.

[iliyaZelenko]

this.sendMessage is undefined because because it is a different context (this). Try arrow function:

Enter: (state, dispatch, view) => {
  this.sendMessage();

  return true
}

[Bojoofu]

Just tested it out and seems that it's not a function

_this2.sendMessage is not a function

[Bojoofu]

I was able to play around with it deeper and got it to work correctly after your massive hint! Thank you for that!!!!

I made a new JS file that held my custom extension in it to handle the Enter key press. I imported that into the component that I was using and instanciated a new instance of the extension class in the nativeExtensions data element. From there I passed a reference to the desired class in the component as an option to the extension.

Component

import SendMessage from './sendMessage'

export default {
    data() {
        return {
            nativeExtensions: [
                new SendMessage({
                    sendMessage: () => this.sendMessage()
                }
            ]
        }
    },

    methods: {
        sendMessage() {...}
    }
}

Extension Class

import { Extension } from 'tiptap'

export default class SendMessage extends Extension {
    keys() {
        return {
            Enter: (state, dispatch, view) => {
                this.options.sendMessage();

                return true
            }
        }
    }
}

Thanks again for all of the help and speedy replies!!!! 😃

[CP-4]

This is the only way to track a keypress event.

After your message, I have plans to simplify this, to use Vue's events on the component, e.g:

<tiptap-vuetify
    v-model="message"
    :extensions="extensions"
    @keydown="keydownHandler"
    @keypress="keypressHandler"
/>

Glad you found the answer, I wanted to write you an hour ago, I knew the answer, but I was a little busy.

Hey @iliyaZelenko , is the above mentioned @keydown method working, or do i need to use :nativeExtension for getting keydown events?

Seems like it is working for all keypress, except "enter".