How to delete HorizontalRule on backspace?

[gereog]

See https://tiptap.dev/docs/examples/basics/default-text-editor

If you delete all the contents of the editor (ctrl-a backspace for example), then use the Horizontal rule button to insert a horizontal rule, then press backspace, the paragraph where your cursor was gets deleted, but the horizontal rule remains.

Now click out of the editor.

Now try to continue editing.

No matter what you do, you cannot get a cursor inside of the editor again.

Because the only contents of the editor are a contenteditable="false" horizontal rule.

I think there are two ways to solve this problem:

1. Pressing backspace below a horizontal rule should delete the horizontal rule instead of the contenteditable parent of the cursor
2. Horizontal rule elements must provide a contenteditable slot after the <hr>

Can anyone help me to solve this problem for the HorizontalRule?

import {
  isNodeSelection, mergeAttributes, Node, nodeInputRule,
} from '@tiptap/core'
import { NodeSelection, TextSelection } from '@tiptap/pm/state'

export interface HorizontalRuleOptions {
  /**
   * The HTML attributes for a horizontal rule node.
   * @default {}
   * @example { class: 'foo' }
   */
  HTMLAttributes: Record<string, any>
}

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    horizontalRule: {
      /**
       * Add a horizontal rule
       * @example editor.commands.setHorizontalRule()
       */
      setHorizontalRule: () => ReturnType
    }
  }
}

/**
 * This extension allows you to insert horizontal rules.
 * @see https://www.tiptap.dev/api/nodes/horizontal-rule
 */
export const HorizontalRule = Node.create<HorizontalRuleOptions>({
  name: 'horizontalRule',

  addOptions() {
    return {
      HTMLAttributes: {},
    }
  },

  group: 'block',

  parseHTML() {
    return [{ tag: 'hr' }]
  },

  renderHTML({ HTMLAttributes }) {
    return ['hr', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
  },

  addCommands() {
    return {
      setHorizontalRule:
        () => ({ chain, state }) => {
          const { selection } = state
          const { $from: $originFrom, $to: $originTo } = selection

          const currentChain = chain()

          if ($originFrom.parentOffset === 0) {
            currentChain.insertContentAt(
              {
                from: Math.max($originFrom.pos - 1, 0),
                to: $originTo.pos,
              },
              {
                type: this.name,
              },
            )
          } else if (isNodeSelection(selection)) {
            currentChain.insertContentAt($originTo.pos, {
              type: this.name,
            })
          } else {
            currentChain.insertContent({ type: this.name })
          }

          return (
            currentChain
              // set cursor after horizontal rule
              .command(({ tr, dispatch }) => {
                if (dispatch) {
                  const { $to } = tr.selection
                  const posAfter = $to.end()

                  if ($to.nodeAfter) {
                    if ($to.nodeAfter.isTextblock) {
                      tr.setSelection(TextSelection.create(tr.doc, $to.pos + 1))
                    } else if ($to.nodeAfter.isBlock) {
                      tr.setSelection(NodeSelection.create(tr.doc, $to.pos))
                    } else {
                      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 + 1))
                    }
                  }

                  tr.scrollIntoView()
                }

                return true
              })
              .run()
          )
        },
    }
  },

  addInputRules() {
    return [
      nodeInputRule({
        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
        type: this.type,
      }),
    ]
  },
})

[guanriyue]

First, let me clarify that this is not a bug. When there's only one hr node in the editor, you need to select this node first, and then press Enter to add an empty paragraph.

No matter what you do, you cannot get a cursor inside of the editor again.

This is because you never selected the only remaining hr node.

By default, Tiptap provides an hr with a height of 1, which is nearly impossible to select.

2025-01-02.12.00.21.mov

The solution is quite simple: increase the height of the hr. Below is a sample video where I adjust the hr height to 3 and add a cursor style.

2025-01-02.14.07.53.mov

---

From a deeper perspective, this is an issue of interaction friendliness. Simply increasing the height of the hr is not an ideal solution. From the user’s perspective, why must they select the hr first?

You could try optimizing your editor’s interaction design. For example:

• When the mouse clicks within a specific element , execute editor.commands.focus(). For example, the parent container of the editor can act as a protective node. ProseMirror will automatically find a selectable range, and in your case, it will automatically select the hr node.
• Or go a step further: when the mouse clicks between two atom nodes (or before/after the document’s start or end), automatically insert an empty paragraph.