fix: horizontal rule no more causes issues on last node (#3507)

packages/editor/core/src/ui/extensions/horizontal-rule.tsx

@@ -1,109 +0,0 @@
-import { TextSelection } from "prosemirror-state";
-
-import { InputRule, mergeAttributes, Node, nodeInputRule, wrappingInputRule } from "@tiptap/core";
-
-/**
- * Extension based on:
- * - Tiptap HorizontalRule extension (https://tiptap.dev/api/nodes/horizontal-rule)
- */
-
-export interface HorizontalRuleOptions {
-  HTMLAttributes: Record<string, any>;
-}
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    horizontalRule: {
-      /**
-       * Add a horizontal rule
-       */
-      setHorizontalRule: () => ReturnType;
-    };
-  }
-}
-
-export const HorizontalRule = Node.create<HorizontalRuleOptions>({
-  name: "horizontalRule",
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    };
-  },
-
-  group: "block",
-
-  addAttributes() {
-    return {
-      color: {
-        default: "#dddddd",
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`,
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        "data-type": this.name,
-      }),
-      ["div", {}],
-    ];
-  },
-
-  addCommands() {
-    return {
-      setHorizontalRule:
-        () =>
-        ({ chain }) => {
-          return (
-            chain()
-              .insertContent({ type: this.name })
-              // set cursor after horizontal rule
-              .command(({ tr, dispatch }) => {
-                if (dispatch) {
-                  const { $to } = tr.selection;
-                  const posAfter = $to.end();
-
-                  if ($to.nodeAfter) {
-                    tr.setSelection(TextSelection.create(tr.doc, $to.pos));
-                  } else {
-                    // add node after horizontal rule if it’s the end of the document
-                    const node = $to.parent.type.contentMatch.defaultType?.create();
-
-                    if (node) {
-                      tr.insert(posAfter, node);
-                      tr.setSelection(TextSelection.create(tr.doc, posAfter));
-                    }
-                  }
-
-                  tr.scrollIntoView();
-                }
-
-                return true;
-              })
-              .run()
-          );
-        },
-    };
-  },
-
-  addInputRules() {
-    return [
-      new InputRule({
-        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
-        handler: ({ state, range, match }) => {
-          state.tr.replaceRangeWith(range.from, range.to, this.type.create());
-        },
-      }),
-    ];
-  },
-});

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

@@ -1,26 +1,25 @@
-import StarterKit from "@tiptap/starter-kit";
-import TiptapUnderline from "@tiptap/extension-underline";
-import TextStyle from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import StarterKit from "@tiptap/starter-kit";
 import { Markdown } from "tiptap-markdown";
 
-import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
 import { Table } from "src/ui/extensions/table/table";
 import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
+import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
 import { TableRow } from "src/ui/extensions/table/table-row/table-row";
-import { HorizontalRule } from "src/ui/extensions/horizontal-rule";
 
 import { ImageExtension } from "src/ui/extensions/image";
 
 import { isValidHttpUrl } from "src/lib/utils";
 import { Mentions } from "src/ui/mentions";
 
-import { CustomKeymap } from "src/ui/extensions/keymap";
 import { CustomCodeBlockExtension } from "src/ui/extensions/code";
-import { CustomQuoteExtension } from "src/ui/extensions/quote";
 import { ListKeymap } from "src/ui/extensions/custom-list-keymap";
+import { CustomKeymap } from "src/ui/extensions/keymap";
+import { CustomQuoteExtension } from "src/ui/extensions/quote";
 
 import { DeleteImage } from "src/types/delete-image";
 import { IMentionSuggestion } from "src/types/mention-suggestion";
@@ -55,7 +54,9 @@ export const CoreEditorExtensions = (
     },
     code: false,
     codeBlock: false,
-    horizontalRule: false,
+    horizontalRule: {
+      HTMLAttributes: { class: "mt-4 mb-4" },
+    },
     blockquote: false,
     dropcursor: {
       color: "rgba(var(--color-text-100))",
@@ -104,7 +105,6 @@ export const CoreEditorExtensions = (
     transformCopiedText: true,
     transformPastedText: true,
   }),
-  HorizontalRule,
   Table,
   TableHeader,
   TableCell,

packages/editor/core/src/ui/read-only/extensions.tsx

@@ -11,7 +11,6 @@ import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
 import { Table } from "src/ui/extensions/table/table";
 import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
 import { TableRow } from "src/ui/extensions/table/table-row/table-row";
-import { HorizontalRule } from "src/ui/extensions/horizontal-rule";
 
 import { ReadOnlyImageExtension } from "src/ui/extensions/image/read-only-image";
 import { isValidHttpUrl } from "src/lib/utils";
@@ -51,7 +50,9 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
       },
     },
     codeBlock: false,
-    horizontalRule: false,
+    horizontalRule: {
+      HTMLAttributes: { class: "mt-4 mb-4" },
+    },
     dropcursor: {
       color: "rgba(var(--color-text-100))",
       width: 2,
@@ -72,7 +73,6 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
       class: "rounded-lg border border-custom-border-300",
     },
   }),
-  HorizontalRule,
   TiptapUnderline,
   TextStyle,
   Color,