3

I have a collaborative chat application that uses tiptap for it's messaging area. I found it useful as it can support multiple formats already and can add some flexibility. However, I found myself stuck when looking for an event listener that listens for "enter" key. When the user hit the enter, I want to submit their chat and clear the editor.

I found this onUpdate event listener but I couldn't find exactly the place where it detects what key is pressed.

Sample code is below:

mounted() {
  let editor = new Editor({
    extensions: [StarterKit],
    content: this.value
  });

  editor.on("update", e => {
    console.log(e);
    this.$emit("input", this.editor.getHTML());
  });

  this.editor = editor;
}

I'm using Vue2, btw.

Thanks

SMPLYJR
  • 854
  • 1
  • 11
  • 23

3 Answers3

6

In the editor props, pass in a callback

      handleDOMEvents: { 
        keydown: (view, event) => {
          if (event.key === "Enter") {
          }
          return false;
        }
      },

https://www.tiptap.dev/api/editor/#editor-props https://prosemirror.net/docs/ref/#view.EditorProps

Sentient
  • 781
  • 2
  • 10
  • 23
2

For reference, I managed to do something similar. I use VueJS native keydown event to detect which key is pressed.

<EditorContent class="editor" :editor="editor" @keydown.native="onKeydown" />

methods: {
  onKeydown(e) {
    if (!e.shiftKey && e.which == 13) {
      this.editor.commands.undo(); // i just "undo" the enter event to remove the space it made
      this.$emit("onEnter");
    }
  }
}

Reference: https://www.tiptap.dev/installation/vue2#5-use-v-model-optional

SMPLYJR
  • 854
  • 1
  • 11
  • 23
1
  editorProps: {
    handleDOMEvents: {
      keypress: (view, event) => {
        if (event.key === 'Enter') {
          console.log('Heyyyy')
        }
      },
    },
  },

You can pass it as props to new Editor()

Bohodir Rahmonov
  • 109
  • 1
  • 5