Ability to disable Enter

[epszaw]

How I can prevent line wrap on Enter press? For example, I need to build single-line editor and don't want to wrap lines at all.
I've tried to prevent original keydown event, it works, but sometimes line wrap appears.
Also, it would be nice to know, how to reassign some "native" keys.

[amirhhashemi]

If you just want to disable Enter, you can write a custom plugin and override the default behaviour of the Enter key:

import { Extension } from "@tiptap/core";

const DisableEnter = Extension.create({
  addKeyboardShortcuts() {
    return {
      Enter: () => true,
    };
  },
});

const editor = useEditor({ 
  extensions: [
    //...
    DisableEnter
  ]
})

I think line-wrap will still happen. With a little bit of CSS magic you can disable that:

.ProseMirror {
    white-space: nowrap !important;
}

This disables line-wrap for all of the editors in your app. You should set an id to the editor and use that here.

<EditorContent editor={editor} id="my-editor" />

#my-editor {
    white-space: nowrap !important;
}

Worth mentioning that if you want to build a single-line editor, you can write a custom document that limits the editor to have only text content (no block nodes such as paragraphs, so enter effectively will do nothing):

const TitleDocument = Document.extend({
  content: "text*",
});
// single-line editor
const titleEditor = useEditor({
  extensions: [ TitleDocument ],
});

You still need the CSS if you really want to visually keep it in one line.

[katerlouis]

Would you need to combine the custom TitleDocument with disabling the Enter key or is content: "text*" enough for disabling multi line content?

[amirhhashemi]

Would you need to combine the custom TitleDocument with disabling the Enter key or is content: "text*" enough for disabling multi line content?

I'm not sure. As far as I know, text* means the editor is not allowed to have a block node like paragraph. The Enter key usually adds a new block node so ProseMirror should prevent the Enter key to create a new block node because its very strict about document schema. So I don't think you need theTitleDocument and the DisableEnter extension at the same time.

The typist editor also uses this method:
https://github.com/Doist/typist/blob/19451ab9eb66de1399585d9a2e06141096d690c4/src/extensions/rich-text/rich-text-document.ts#L25
They use content: "block" for single-line editors which means you can add at most one block node (for example an image) but it couldn't have two block nodes which is probably what you want. text* is more strict and only allows text content without marks.

Check out their demo: https://typist.doist.dev/?path=/story/typist-editor-rich-text--singleline. They don't have a extension that disables the Enter key and ProseMirror automatically handles that.

[katerlouis]

We ended up using a single paragraph inside the doc with Document.extend({ content: 'block' }} instead of block+ – With just text* we couldn't use the extensions we wanted, which is the whole point of using tiptap in the first place. This also avoids to disable Enter explicitly. We also opted for HardBreak extension in some edge cases where we wanted hard breaks to be supported.

In our custom renderer on the front-end side we just skipped the paragraph and rendered only its children. We do the same for list-items which also don't work with just text+ as content

[epszaw]

I tried to use the extension with hotkey behavior reassign you describe, but it doesn't work.
Anyway, second one with text* as content – seems to work fine.
Thank you! :)

[epszaw]

Unfortunately, this extension doesn't work either.
I found workaround here. Just add keypress event handler for the editor node and do preventDefault when key code equals to Enter

[epszaw]

It doesn't work either, though 😂

[amirhhashemi]

Both of the solutions I mentioned here are working for me. I'm not using the latest version though. Maybe in the recent versions, things have changed + currently, there are issues with input rules and maybe these are somehow related.
I'm still not 100% sure what you want to achieve. If you share some examples/images or simplified codesandbox I can help you.

BTW, my solutions only work in React.js. If you are using vue.js or vanilla js you might need to change them a little bit.

[castroCrea]

Another solution will be to do it in the editor options that you pass to your component.
Pros: that doesn't involve adding an extension
Cons: you got inside text Editor logic outside of the "Text Editor"

import { useEditor, EditorContent } from '@tiptap/react';

const options = {
   editorProps: {
       handleDOMEvents: {
            keydown: (_, event) => {
                 if (event.key === 'Enter')  return true;
            },
        },
    },  
}
const editor = useEditor(options);

<EditorContent  editor={editor} />

[epszaw]

I found the answer here:

const PreventEnter = Extension.create({
  addKeyboardShortcuts(this) {
    return {
      'Enter': () => true
    }
  },
})

Works as expected. Returned true prevents rest Enter handlers from execution. Original answer from ProseMirror discuss.

[amirhhashemi]

Bro, I told you this two days ago :)

[epszaw]

Haha, I'm blind ;D