Horizontal Rule adds empty line

[wmonecke]

Description

When adding horizontal rule, you get a blank new line on top of the <hr/> tag.
I even used the following to make sure no <p/> would be rendered above with no avail.

const CustomHorizontalRule = HorizontalRule.extend({
  draggable: true,
  renderHTML({ HTMLAttributes }) {
    return ["hr", HTMLAttributes, 0]
  },
})

Screen.Recording.2021-07-30.at.23.30.14.mov

Question

In other words: Is it possible to delete certain nodes programmatically?
In my case finding the last empty <p/> and deleting it after inserting a <hr/>

Solution

I dont know if this is the right way to do it, but I am just listening every transaction and dipatching a prosemirror action to delete the node.

onTransaction(event) {
      const { transaction, editor } = event
      if (transaction.steps.length > 0) {
        const stepOfInterest = transaction.steps[0]
        const arrayOfNodes = stepOfInterest.slice.content.content
        const foundHrNode = arrayOfNodes.find(
          (el) => el.type.name === "horizontalRule"
        )

        if (foundHrNode) {
          const tr = editor.view.state.tr
          tr.delete(stepOfInterest.from - 1, stepOfInterest.to - 1)
          editor.view.dispatch(tr)
        }
      }
    },

[SF-Simon]

I think this is a personal demand, not the general public. Deleting the

is not an ideal way if someone wants to keep one more line blank on the horizontal line.

And why delete a

? Instead of all the blank lines?

[wmonecke]

@HeebeLee To me it feels more intuitive and in line with tip tap (unopinionated).

[cadars]

@philippkuehn Looks like this issue is still here…
To reproduce, go to https://tiptap.dev/examples/default and create an <hr>.