Switch Default enter behavior and shift enter behaviour

[TestCK]

What’s the bug you are facing?

I am building a chat app and I want to submitted what ever user has typed on press of enter By default, pressing enter, creates a new line or a listitem.

I wanted to setup in a way, I wanted to submit user input on enter and create a new line or listitem on shift +enter.

Which browser was this experienced in? Are any special extensions installed?

Chrome

How can we reproduce the bug on our side?

This is not a bug, checking for a config to make it work for my use case

Can you provide a CodeSandbox?

No response

What did you expect to happen?

A way to submit on enter and create a new line/ listitem on shift + enter

Anything to add? (optional)

No response

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[pcbowers]

@TestCK There is an extension called HardBreak which will provide you with the functionality you need for Shift + Enter.

To submit on enter, simply implement the editorProps function called handleKeyDown. Tiptap is built on ProseMirror, which uses a sort of hierarchy when it comes to event handler functions. Tiptap has ensured this is the very first handler that is called before any base plugins or extensions. The first value that returns true gets precedence, so only this function actually runs. This means that you are free to run your own onKeyDown event without having an additional paragraph (newline) appended at the end of every message.

(See Access the ProseMirror API and ProseMirror EditorPros Interface for more documentation)

Here is a brief example on CodeSandbox.

[fridaystreet]

need to make sure the priority of the extensions is correct otherwise you mention select ill fire after your onreturn

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[puopg]

For the OP:

I think you can just use the same logic of the default enter handling, for Shift+Enter

  addKeyboardShortcuts() {
    return {
      "Shift-Enter": () =>
        this.editor.commands.first(({ commands }) => [
          () => commands.newlineInCode(),
          () => commands.createParagraphNear(),
          () => commands.liftEmptyBlock(),
          () => commands.splitBlock(),
        ]),
    };
  },

[bdbch]

As some people pointed out you should be able to do this by defining your own Keyboard shortcuts to the editor. Comment if you have any questions.

[michelengelen]

@bdbch I did this by adding a custom extension which sole purpose is to add keyboard-shortcut overrides.

Is this the correct approach, or is there a better way to do that

// this is a dummy extension only to create custom keydown behavior
const KeyboardHandler = Extension.create({
    name: 'keyboardHandler',
});

... 

KeyboardShortcutHandler.extend({
    addKeyboardShortcuts() {
        return {
            Enter: () => {
                const isCodeBlockActive = this.editor.isActive('codeBlock');

                if (isCodeBlockActive || ctrlSend) {
                    return false;
                }

                onSubmit();
                return this.editor.commands.clearContent();
            },

            'Mod-Enter': () => {
                const isCodeBlockActive = this.editor.isActive('codeBlock');

                /**
                 * when inside of a codeblock and setting for sending the message with CMD/CTRL-Enter
                 * force calling the `onSubmit` function and clear the editor content
                 */
                if (isCodeBlockActive && codeBlockOnCtrlEnter) {
                    onSubmit();
                    return this.editor.commands.clearContent();
                }

                if (!isCodeBlockActive && ctrlSend) {
                    onSubmit();
                    return this.editor.commands.clearContent();
                }

                return false;
            },

            'Shift-Enter': () => {
                /**
                 * currently we do not have an option to show a soft line break in the posts, so we overwrite
                 * the behavior from tiptap with the default behavior on pressing enter
                 */
                return this.editor.commands.first(({commands}) => [
                    () => commands.newlineInCode(),
                    () => commands.createParagraphNear(),
                    () => commands.liftEmptyBlock(),
                    () => commands.splitBlock(),
                ]);
            },
        };
    },
}),

[jacksonkernion]

@puopg's answer echoes @philippkuehn's answer here, but for some reason the custom extension commands aren't behaving the same as the default 'Enter' behavior in a subtle but important way: it creates a new line inside an existing list item rather than creating a new list item. What worked for me:

addKeyboardShortcuts() {
  return {
    "Shift-Enter": ({ editor }) => 
         editor.commands.first(({ commands }) => [
            () => commands.newlineInCode(),
            () => commands.splitListItem("listItem"), // This line added
            () => commands.createParagraphNear(),
            () => commands.liftEmptyBlock(),
            () => commands.splitBlock(),
         ])
     },
  }
}