-
-
Notifications
You must be signed in to change notification settings - Fork 205
Description
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:
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