fix: Hard break keyboard shortcut not working in custom blocks (#1554)

* Replaced TipTap hard break extension with our own

* Removed `setHardBreak` command and dependency

* Added hard break shortcut configuration to API

* Fixed lint

* Small cleanup

Author: matthewlipski

package-lock.json

@@ -75,7 +75,6 @@
     "@tiptap/extension-collaboration": "^2.11.5",
     "@tiptap/extension-collaboration-cursor": "^2.11.5",
     "@tiptap/extension-gapcursor": "^2.11.5",
-    "@tiptap/extension-hard-break": "^2.11.5",
     "@tiptap/extension-history": "^2.11.5",
     "@tiptap/extension-horizontal-rule": "^2.11.5",
     "@tiptap/extension-italic": "^2.11.5",

packages/core/package.json

@@ -31,7 +31,7 @@ export const TableExtension = Extension.create({
           this.editor.state.selection.$head.parent.type.name ===
             "tableParagraph"
         ) {
-          this.editor.commands.setHardBreak();
+          this.editor.commands.insertContent({ type: "hardBreak" });
 
           return true;
         }

packages/core/src/blocks/TableBlockContent/TableExtension.ts

@@ -1,6 +1,5 @@
 import { AnyExtension, Extension, extensions } from "@tiptap/core";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
-import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
@@ -17,6 +16,7 @@ import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
 import type { ThreadStore } from "../comments/index.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
+import { HardBreak } from "../extensions/HardBreak/HardBreak.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
 import {
@@ -179,7 +179,7 @@ const getTipTapExtensions = <
       types: ["blockContainer", "columnList", "column"],
       setIdAttribute: opts.setIdAttribute,
     }),
-    HardBreak.extend({ priority: 10 }),
+    HardBreak,
     // Comments,
 
     // basics:

packages/core/src/editor/BlockNoteExtensions.ts

@@ -0,0 +1,35 @@
+// Stripped down version of the TipTap HardBreak extension:
+// https://github.com/ueberdosis/tiptap/blob/f3258d9ee5fb7979102fe63434f6ea4120507311/packages/extension-hard-break/src/hard-break.ts#L80
+// Changes:
+// - Removed options
+// - Removed keyboard shortcuts & moved them to the `KeyboardShortcutsExtension`
+// - Removed `setHardBreak` command (added a simpler version in the Shift+Enter
+// handler in `KeyboardShortcutsExtension`).
+// - Added priority
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export const HardBreak = Node.create({
+  name: "hardBreak",
+
+  inline: true,
+
+  group: "inline",
+
+  selectable: false,
+
+  linebreakReplacement: true,
+
+  priority: 10,
+
+  parseHTML() {
+    return [{ tag: "br" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["br", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+
+  renderText() {
+    return "\n";
+  },
+});

packages/core/src/extensions/HardBreak/HardBreak.ts

@@ -437,8 +437,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
           }),
       ]);
 
-    const handleEnter = () =>
-      this.editor.commands.first(({ commands }) => [
+    const handleEnter = (withShift = false) => {
+      return this.editor.commands.first(({ commands }) => [
         // Removes a level of nesting if the block is empty & indented, while the selection is also empty & at the start
         // of the block.
         () =>
@@ -467,6 +467,34 @@ export const KeyboardShortcutsExtension = Extension.create<{
               return commands.liftListItem("blockContainer");
             }
 
+            return false;
+          }),
+        // Creates a hard break if block is configured to do so.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+
+            const blockHardBreakShortcut: "shift+enter" | "enter" | "none" =
+              this.options.editor.schema.blockSchema[blockInfo.blockNoteType]
+                .hardBreakShortcut ?? "shift+enter";
+
+            if (blockHardBreakShortcut === "none") {
+              return false;
+            }
+
+            if (
+              // If shortcut is not configured, or is configured as "shift+enter",
+              // create a hard break for shift+enter, but not for enter.
+              (blockHardBreakShortcut === "shift+enter" && withShift) ||
+              // If shortcut is configured as "enter", create a hard break for
+              // both enter and shift+enter.
+              blockHardBreakShortcut === "enter"
+            ) {
+              return commands.insertContent({
+                type: "hardBreak",
+              });
+            }
+
             return false;
           }),
         // Creates a new block and moves the selection to it if the current one is empty, while the selection is also
@@ -538,11 +566,13 @@ export const KeyboardShortcutsExtension = Extension.create<{
             return false;
           }),
       ]);
+    };
 
     return {
       Backspace: handleBackspace,
       Delete: handleDelete,
-      Enter: handleEnter,
+      Enter: () => handleEnter(),
+      "Shift-Enter": () => handleEnter(true),
       // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
       // editor since the browser will try to use tab for keyboard navigation.
       Tab: () => {

packages/core/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -63,6 +63,7 @@ export type BlockConfig =
       content: "inline" | "none" | "table";
       isSelectable?: boolean;
       isFileBlock?: false;
+      hardBreakShortcut?: "shift+enter" | "enter" | "none";
     }
   | FileBlockConfig;