fix(horizontal-rule): fix insertion behavior

[aguydan]

Please describe your changes

This PR contains fixes to the HorizontalRule extension, which behaves a bit unintuitively in certain cases.

• When a horizontal rule is placed in the position under an empty leaf node (such as an image), it is no longer inserted before the node.

Before	After

• If a selection ends at the beginning of a text node, it does not prevent the rule from replacing the entire selection.

Before	After

• If only one node is selected, the rule is placed underneath it instead of replacing it.

Before	After

How did you accomplish your changes

This clause now checks if there's indeed just a cursor at this position (ensuring from and to match). The value decremented from $originTo.pos is now 1 instead of 2, which prevents the rule from appearing before the node.

if (isCursor && $originTo.parentOffset === 0) {
    currentChain.insertContentAt(Math.max($originTo.pos - 1, 0), {
        type: this.name,
    })
}

This clause is responsible for preventing replacement of nodes by the horizontal rule.

} else if (isNodeSelection(selection)) {
    currentChain.insertContentAt($originTo.pos, {
        type: this.name,
    })
}

How can we verify your changes

By adding an image node to the horizontal rule demo and then setting the rule.

Remarks

The behavior of the rule replacing image nodes when selected might be something that only I find undesirable, making it more of a feature proposal than a fix, I guess.

Checklist

• The changes are not breaking the editor
• Added tests where possible
• Followed the guidelines
• Fixed linting issues

Related issues

• [Bug]: setHorizontalRule inserts in a wrong position #4887

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	b007cfc
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/65d8eede65ddd40008aa230f
😎 Deploy Preview	https://deploy-preview-4898--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bdbch]

Looks good. Could you add a test case for this in cypress?

[aguydan]

@bdbch

Sure! I'll add it shortly when I'm back home.

[aguydan]

@bdbch

I've added test cases. I wasn't sure exactly what I should do in order to test the insertion related to image nodes. That is, whether I should modify the horizontal rule demo to include some other empty leaf node or add a case to the integration tests folder. I decided on the latter.

Also I refactored the code a bit to get rid of a trailing break left after selection replacement.