fix: replace plugin reordering workaround with simpler heading input rule override (#1158)

Author: rfgamaral

src/components/typist-editor.tsx

@@ -14,7 +14,7 @@ import { getMarkdownSerializerInstance } from '../serializers/markdown/markdown'
 import { getAllNodesAttributesByType, resolveContentSelection } from './typist-editor.helper'
 
 import type { Editor as CoreEditor, EditorEvents, Extensions } from '@tiptap/core'
-import type { Plugin, Selection } from '@tiptap/pm/state'
+import type { Selection } from '@tiptap/pm/state'
 
 /**
  * The forwarded ref that describes the helper methods that the `TypistEditor` parent component
@@ -315,30 +315,6 @@ const TypistEditor = forwardRef<TypistEditorRef, TypistEditorProps>(function Typ
                 )
             }
 
-            // Move the suggestion plugins to the top of the plugins list so they have a higher priority
-            // than all input rules (such as the ones used for Markdown shortcuts)
-            // ref: https://github.com/ueberdosis/tiptap/issues/2570
-            if (view.state.plugins.length > 0) {
-                const restOfPlugins: Plugin[] = []
-                const suggestionPlugins: Plugin[] = []
-
-                view.state.plugins.forEach((plugin) => {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore: The `Plugin` type does not include `key`
-                    if ((plugin.key as string).includes('Suggestion')) {
-                        suggestionPlugins.push(plugin)
-                    } else {
-                        restOfPlugins.push(plugin)
-                    }
-                })
-
-                view.updateState(
-                    view.state.reconfigure({
-                        plugins: [...suggestionPlugins, ...restOfPlugins],
-                    }),
-                )
-            }
-
             // Invoke the user `onCreate` handle after all internal initializations
             onCreate?.(props)
         },

src/extensions/rich-text/rich-text-heading.ts

@@ -0,0 +1,38 @@
+import { Heading } from '@tiptap/extension-heading'
+import { textblockTypeInputRule } from '@tiptap/react'
+
+import type { HeadingOptions } from '@tiptap/extension-heading'
+
+/**
+ * The options available to customize the `RichTextHeading` extension.
+ */
+type RichTextHeadingOptions = HeadingOptions
+
+/**
+ * Custom extension that extends the built-in `Heading` extension to override the input rule for
+ * headings to trigger only on space (e.g., `## `), preventing conflicts with suggestion extensions
+ * that use `#` as their trigger character.
+ *
+ * This was properly fixed in Tiptap v3 where input rules respect extension priorities, making this
+ * extension likely unnecessary after migrating.
+ *
+ * @see https://github.com/ueberdosis/tiptap/issues/2570
+ * @see https://github.com/ueberdosis/tiptap/pull/6832
+ */
+const RichTextHeading = Heading.extend<RichTextHeadingOptions>({
+    addInputRules() {
+        return this.options.levels.map((level: number) => {
+            return textblockTypeInputRule({
+                find: new RegExp(`^(#{1,${level}}) $`),
+                type: this.type,
+                getAttributes: {
+                    level,
+                },
+            })
+        })
+    },
+})
+
+export { RichTextHeading }
+
+export type { RichTextHeadingOptions }

src/extensions/rich-text/rich-text-kit.ts

@@ -5,7 +5,6 @@ import { CodeBlock } from '@tiptap/extension-code-block'
 import { Dropcursor } from '@tiptap/extension-dropcursor'
 import { Gapcursor } from '@tiptap/extension-gapcursor'
 import { HardBreak } from '@tiptap/extension-hard-break'
-import { Heading } from '@tiptap/extension-heading'
 import { History } from '@tiptap/extension-history'
 import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
 import { Italic } from '@tiptap/extension-italic'
@@ -27,6 +26,7 @@ import { PasteMarkdown } from './paste-markdown'
 import { RichTextBulletList } from './rich-text-bullet-list'
 import { RichTextCode } from './rich-text-code'
 import { RichTextDocument } from './rich-text-document'
+import { RichTextHeading, RichTextHeadingOptions } from './rich-text-heading'
 import { RichTextImage } from './rich-text-image'
 import { RichTextLink } from './rich-text-link'
 import { RichTextOrderedList } from './rich-text-ordered-list'
@@ -39,7 +39,6 @@ import type { CodeOptions } from '@tiptap/extension-code'
 import type { CodeBlockOptions } from '@tiptap/extension-code-block'
 import type { DropcursorOptions } from '@tiptap/extension-dropcursor'
 import type { HardBreakOptions } from '@tiptap/extension-hard-break'
-import type { HeadingOptions } from '@tiptap/extension-heading'
 import type { HistoryOptions } from '@tiptap/extension-history'
 import type { HorizontalRuleOptions } from '@tiptap/extension-horizontal-rule'
 import type { ItalicOptions } from '@tiptap/extension-italic'
@@ -105,7 +104,7 @@ type RichTextKitOptions = {
     /**
      * Set options for the `Heading` extension, or `false` to disable.
      */
-    heading: Partial<HeadingOptions> | false
+    heading: Partial<RichTextHeadingOptions> | false
 
     /**
      * Set options for the `History` extension, or `false` to disable.
@@ -275,7 +274,7 @@ const RichTextKit = Extension.create<RichTextKitOptions>({
         }
 
         if (this.options.heading !== false) {
-            extensions.push(Heading.configure(this.options?.heading))
+            extensions.push(RichTextHeading.configure(this.options?.heading))
         }
 
         if (this.options.history !== false) {