How to hook into handleKeyDown from extension in tiptap v2 ?

[marcusamargi]

When using Tiptap as the editor for entering a comment, I want the user to be able to submit by pressing enter. In v1 I had created an extension that emit an event via an event bus. This was done in handleKeyDown where I checked that the enter key was pressed.

For Tiptap v2 and Vue 3, how can I access handleKeyDown ?

Here's my extesion used with Tiptap v1.

// contrib
import {
    Extension,
    Plugin,
} from 'tiptap';


// project
import { EventBus } from './event-bus.js';


export default class EnterHandler extends Extension {

    get name() {
        return 'enter_handler';
    }

    get plugins() {
        return [
            new Plugin({
                props: {
                    handleKeyDown: (view, event) => {
                        if (event.key === 'Enter' && !event.shiftKey) {
                            EventBus.$emit("editor-enter");
                            return true;
                        }

                        return false;
                    },
                },
            }),
        ];
    }

}

[philippkuehn]

This is how you do it in v2:

// contrib
import { Extension } from '@tiptap/core'
import { Plugin } from 'prosemirror-state'

// project
import { EventBus } from './event-bus.js';

export const EnterHandler = Extension.create({
  name: 'enter_handler',

  addProseMirrorPlugins() {
    return [
      new Plugin({
        props: {
          handleKeyDown: (view, event) => {
            if (event.key === 'Enter' && !event.shiftKey) {
              EventBus.$emit("editor-enter");
              return true;
            }

            return false;
          },
        },
      }),
    ]
  }
})

[marcusamargi]

Thank you Philip! Adding a ProseMirror Plugin instead of importing from Tiptap looks like the key difference.

Thank you for the wonderful project!!

[philippkuehn]

oh there was an issue in my comment. it’s updated.