Switch Default enter behavior and shift enter behaviour

See original GitHub issue

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?

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

Are you sponsoring us?

  • Yes, I’m a sponsor. 💖

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
pcbowerscommented, May 5, 2022

@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.

0reactions
michelengelencommented, Nov 22, 2022

@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(),
                ]);
            },
        };
    },
}),
Read more comments on GitHub >

github_iconTop Results From Across the Web

Ability to change default "shift-enter" to "enter" when running ...
The Default is: enter initiates a new line in the cell and shift-enter run code. The feature request is: To have the ability...
Read more >
How to Change the Behavior of the Enter Key in Excel
The first option in this menu controls how the Enter key behaves. You can uncheck the box if you don't want the Enter...
Read more >
Switch actions of Shift+Enter and Enter in notebook interface?
By default in Mathematica's front-end, the Shift + Enter combination processes input in the active cell, while Enter inserts a carriage-return.
Read more >
TinyMCE4: How to change Enter key functionality to Shift + ...
Is there any way to change the configuration of TinymCE4 so that Enter should work like Shift + Enter ? On a press...
Read more >
In MS Teams, how do I change the default behavior of New ...
Hi there. In MS Teams, how do I change the default behavior of New Conversations and Replies, so the Enter key inserts a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found