Add hard break node for editor (#177)

package-lock.json

@@ -9464,6 +9464,19 @@
         "@tiptap/pm": "^3.0.9"
       }
     },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.0.9.tgz",
+      "integrity": "sha512-PWNYsUwVsMWt/R5/OWjfGb+7DQT0DvH+1owBimRq0pWZepg8qkz1jdPGgsRmUFyERRsXeEpgj3VaQfrgbyUfrA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.0.9"
+      }
+    },
     "node_modules/@tiptap/extension-horizontal-rule": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.0.9.tgz",
@@ -24873,6 +24886,7 @@
         "@tiptap/extension-code": "^3.0.9",
         "@tiptap/extension-code-block-lowlight": "^3.0.9",
         "@tiptap/extension-document": "^3.0.9",
+        "@tiptap/extension-hard-break": "^3.0.9",
         "@tiptap/extension-horizontal-rule": "^3.0.9",
         "@tiptap/extension-italic": "^3.0.9",
         "@tiptap/extension-link": "^3.0.9",

packages/ui/package.json

@@ -52,6 +52,7 @@
     "@tiptap/extension-code": "^3.0.9",
     "@tiptap/extension-code-block-lowlight": "^3.0.9",
     "@tiptap/extension-document": "^3.0.9",
+    "@tiptap/extension-hard-break": "^3.0.9",
     "@tiptap/extension-horizontal-rule": "^3.0.9",
     "@tiptap/extension-italic": "^3.0.9",
     "@tiptap/extension-link": "^3.0.9",

packages/ui/src/components/documents/document-editor.tsx

@@ -77,6 +77,7 @@ import {
   UnderlineMark,
   DatabaseNode,
   AutoJoiner,
+  HardBreakNode,
 } from '@colanode/ui/editor/extensions';
 import { ToolbarMenu, ActionMenu } from '@colanode/ui/editor/menus';
 
@@ -179,6 +180,7 @@ export const DocumentEditor = ({
         }),
         TextNode,
         ParagraphNode,
+        HardBreakNode,
         Heading1Node,
         Heading2Node,
         Heading3Node,

packages/ui/src/components/messages/message-editor.tsx

@@ -26,6 +26,7 @@ import {
   TrailingNode,
   UnderlineMark,
   MentionExtension,
+  HardBreakNode,
 } from '@colanode/ui/editor/extensions';
 import { ToolbarMenu } from '@colanode/ui/editor/menus';
 
@@ -56,6 +57,7 @@ export const MessageEditor = forwardRef<
         MessageNode,
         TextNode,
         ParagraphNode,
+        HardBreakNode,
         CodeBlockNode,
         TabKeymapExtension,
         PlaceholderExtension.configure({

packages/ui/src/editor/extensions/hard-break.tsx

@@ -0,0 +1,3 @@
+import { HardBreak } from '@tiptap/extension-hard-break';
+
+export const HardBreakNode = HardBreak;

packages/ui/src/editor/extensions/index.tsx

@@ -18,6 +18,7 @@ import { DividerNode } from '@colanode/ui/editor/extensions/divider';
 import { DropcursorExtension } from '@colanode/ui/editor/extensions/dropcursor';
 import { FileNode } from '@colanode/ui/editor/extensions/file';
 import { FolderNode } from '@colanode/ui/editor/extensions/folder';
+import { HardBreakNode } from '@colanode/ui/editor/extensions/hard-break';
 import { Heading1Node } from '@colanode/ui/editor/extensions/heading1';
 import { Heading2Node } from '@colanode/ui/editor/extensions/heading2';
 import { Heading3Node } from '@colanode/ui/editor/extensions/heading3';
@@ -77,4 +78,5 @@ export {
   DatabaseNode,
   AutoJoiner,
   MentionExtension,
+  HardBreakNode,
 };

packages/ui/src/editor/renderers/hard-break.tsx

@@ -0,0 +1,10 @@
+import { JSONContent } from '@tiptap/core';
+
+interface HardBreakRendererProps {
+  node: JSONContent;
+  keyPrefix: string | null;
+}
+
+export const HardBreakRenderer = (_: HardBreakRendererProps) => {
+  return <br />;
+};

packages/ui/src/editor/renderers/node.tsx

@@ -7,6 +7,7 @@ import { BulletListRenderer } from '@colanode/ui/editor/renderers/bullet-list';
 import { CodeBlockRenderer } from '@colanode/ui/editor/renderers/code-block';
 import { DocumentRenderer } from '@colanode/ui/editor/renderers/document';
 import { FileRenderer } from '@colanode/ui/editor/renderers/file';
+import { HardBreakRenderer } from '@colanode/ui/editor/renderers/hard-break';
 import { Heading1Renderer } from '@colanode/ui/editor/renderers/heading1';
 import { Heading2Renderer } from '@colanode/ui/editor/renderers/heading2';
 import { Heading3Renderer } from '@colanode/ui/editor/renderers/heading3';
@@ -76,6 +77,9 @@ export const NodeRenderer = ({
         .with('mention', () => (
           <MentionRenderer node={node} keyPrefix={keyPrefix} />
         ))
+        .with('hardBreak', () => (
+          <HardBreakRenderer node={node} keyPrefix={keyPrefix} />
+        ))
         .otherwise(() => null)}
     </MarkRenderer>
   );