feat(rich-text-editor): add Shift + Enter hotkey to insert a new block (VIV-3110)

[SpawnAtis]

No description provided.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (40d8acd) to head (87d6830).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2770   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          467       467           
  Lines        10956     10957    +1     
  Branches      2026      2026           
=========================================
+ Hits         10956     10957    +1     

Flag	Coverage Δ
unittests	100.00% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[RichardHelm]

Looks good! Just the keybinds need an option to turned off

[RichardHelm]

So the other thing consumers want is to turn the Enter one off (because they want Enter so send the message).
I suggest to add an config option to RteBase like:

...
keyboardShortcuts?: {
  newBlock?: ("Enter" | "Shift-Enter")[]
}
...

so that they can configure which ones they want.

Also I would make it default to just Enter so there is no confusion when using with the hardbreak feature

[SpawnAtis]

@RichardHelm I think Enter should always insert a new block, except in very specific cases like a chat app. In that sense, Shift+Enter should remain just an optional shortcut.

At the same time, customers should have an API that allows them to override keyboard shortcuts in the RTE editor. For example, they could override shortcuts through the config when registering the RteBase() plugin:

RteBase({
  addKeyboardShortcuts() {
    return {
      Enter: () => true, // Prevents default behavior
    };
  },
})

or alternatively, create a small custom plugin to handle their own shortcut behavior.

import { RteBase } from '@vivid/rte-vivid';

// Example: Disable Enter key completely
const OverrideEnter = RteBase.create({
  addKeyboardShortcuts() {
    return {
      Enter: () => true, // Prevents default behavior
    };
  },
});

But if u want to go with keyboardShortcuts prop, I can change it. What do u think ?

[RichardHelm]

@SpawnAtis Okay, I like it, consumers can set their own keyboard shortcuts.

It makes sense as a new plugin, since it doesn't have anything to do with RteBase. And I don't see the need for an extra function, so how about this?

new RteKeyboardShortcuts('<some name: features need unique name>', {
  shortcuts: {
    Enter: () => true, // Prevents default behavior
  }
})

[RichardHelm]

Technically you can disable paragraphs so it inserts a default block

Suggested change

	- **Create a New Paragraph:** <kbd>Enter</kbd> / <kbd>Shift</kbd> + <kbd>Enter</kbd>
	- **Create a New Block:** <kbd>Enter</kbd> / <kbd>Shift</kbd> + <kbd>Enter</kbd>