Skip to content

[Bug]: Issues with horizontal rule on empty editor #635

@paulirwin

Description

@paulirwin

What happened?

If you have horizontal_rule in your toolbar, and click it with the editor empty (and showing the placeholder text), it adds the rule but still shows the placeholder text, and does not focus the input, nor let you click into a new line to enter text. Clicking into it does focus it (although not visibly), and then typing into the editor types over and replaces the rule that was inserted.

Example with the horizontal_rule added to the toolbar: https://stackblitz.com/edit/ngx-editor-e9x6unwv?file=src%2Fapp%2Fapp.component.ts

To repro, select all the demo text and remove it so it shows the placeholder, then click the horizontal rule button. Result:

Image

For anyone experiencing this issue, I created a plugin as a workaround until this is fixed:

export const horizontalRuleFixPlugin = new Plugin({
    appendTransaction(transactions, oldState, newState) {
        // Check if any transaction inserted content
        const docChanged = transactions.some(tr => tr.docChanged);
        if (!docChanged) {
            return null;
        }

        const { doc, schema } = newState;
        const lastChild = doc.lastChild;

        // If the document ends with a horizontal_rule, add a paragraph after it
        if (lastChild && lastChild.type.name === 'horizontal_rule') {
            const paragraphType = schema.nodes['paragraph'];
            if (paragraphType) {
                const tr = newState.tr;
                const paragraph = paragraphType.create();
                // Insert paragraph at the end of the document
                tr.insert(doc.content.size, paragraph);
                // Move cursor to the new paragraph
                tr.setSelection(Selection.near(tr.doc.resolve(doc.content.size + 1)));
                return tr;
            }
        }

        return null;
    }
});

Version

18.0.0

Angular Version

v18.x.x

What browsers are you seeing the problem on?

Safari

Link to reproduce

https://stackblitz.com/edit/ngx-editor-e9x6unwv?file=src%2Fapp%2Fapp.component.ts

Relevant log output

Willing to submit a PR?

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions