TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.23k stars 424 forks source link

Question: How to add/overwrite keyboard shortcuts? #666

Open rockiger opened 5 months ago

rockiger commented 5 months ago

I would like to add a keyboard shortcut for Ctrl+Enter. What would be the best way to do that?

Adding keyboard listeners on document or BlockNoteView doesn't work because BlockNote/Tiptap/PM reacts to the Enter key first.

james-pratama commented 4 months ago

I am facing this issue too. Inside bullet points and nesting, the standard approach to unnest in every other text editor is to use Enter, but here its Shift+Tab. It converts to paragraph if clicking Enter. The code is very deeply nested and does not seem possible to change.

Is there a way we can have greater control over these shortcuts?

image
matthewlipski commented 2 months ago

Shortcuts and input rules are planned but no ETA on those yet. In the meantime, you should be able to override the default shortcuts like so:

<BlockNoteView
  editor={editor}
  onKeyDownCapture={(event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      alert("Hello");
    }
  }}
/>