New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Additional break line when initializing or copy/pasting in the editor with break lines #3677
Comments
I'm facing the same issue. I've noticed |
Facing the same issue, exactly as @chalecki . |
Facing the same issue! |
I think it was introduced in #590 in commit f38d4d5 . Commenting on this line https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalReconciler.ts#L324 does the trick I think but I lack knowledge on the overall flow so would be best to hear from @trueadm more on this behavior |
maybe this can helps u const removeLineBreaks = (inputHtml: string): string => {
let copy = inputHtml
copy = copy.replaceAll('<br>', '')
return copy
}
const onChange = (_: EditorState, editorInstance: LexicalEditor) => {
editorInstance.update(() => {
const generatedHtml = $generateHtmlFromNodes(editorInstance, null)
let resultHtmlString = wrapTables(generatedHtml)
resultHtmlString = removeLineBreaks(generatedHtml)
setHtml(resultHtmlString)
})
} |
@almazkaliyev the point is not to remove every |
@thegreatercurve do we have any updates for the fix for this issue ? |
@thegreatercurve any updates? 😄 |
I've found that a single empty paragraph converted to HTML with |
refs TryGhost/Product#2992 - at the moment, there are some open issues at Lexical with line breaks - facebook/lexical#2807 - facebook/lexical#3677 - this commit fixes our workaround in `generateEditorState` for nested editors. We actively remove any additional spaces or line breaks before inserting them
refs TryGhost/Product#2992 - at the moment, there are some open issues at Lexical with line breaks - facebook/lexical#2807 - facebook/lexical#3677 - this commit fixes our workaround in `generateEditorState` for nested editors. We actively remove any additional spaces or line breaks before inserting them
@oleksandr-danylchenko and @ferugi - I am experiencing both of your observations reproducibly as well. |
I'm facing a similar issue and would really appreciate any updates on the progress made toward resolving it. Thanks. |
This is my function to initialize the editor state from HTML. Since the lexical's renderer adds additional const parser = new DOMParser();
const dom = parser.parseFromString(initialHtml, 'text/html');
const elementsWithBr = dom.querySelectorAll('*:not(br) > br');
for (let i = 0; i < elementsWithBr.length; i += 1) {
const brElement = elementsWithBr[i];
const parentElement = brElement.parentNode;
const lastBr = parentElement?.querySelectorAll('br:last-child')[0];
if (lastBr === brElement) {
parentElement?.removeChild(brElement);
}
}
const nodes = $generateNodesFromDOM(editor, dom);
$getRoot().select();
$insertNodes(nodes); Does work for me, but checked on some basic HTML fragments that fit my needs. |
HI , I am facing this issue still in version 0.12.0 |
Facing the same issue version 0.12.4 |
Hello, same issue in version 0.13.1 |
Same issue in version 0.13.1 |
Hello, I'm having the same issue but found a workaround, if you clear the editor before the insertion, the line break is removed.
|
bless your soul; |
When I initialize the Lexical editor from an DOM like
<p><br></p>
, passing throughgenerateNodesFromDOM
and inserting the generated nodes to the editor, it imports it with an additional break line like<p><br><br></p>
. This makes the editor have more break lines than expected. It is also curious that bothcount as one character if I delete them and count the characters.
@zeitstein mentioned in a discord chat that when trying to pass a single
<p></p>
without break lines, it also imports it with an additional break line like<p><br></p>
. They also mention that that this PR can be related -> #3581 (thanks for rising this up in the discord chat, here is the full thread: https://discord.com/channels/953974421008293909/1060331843578249376)I also managed to reproduce it when copying some text with break lines from the Notes Application from my Mac.
Lexical version: 0.7.6
Steps To Reproduce
Here is an example of the InitialState plugin to initialize the editor from a preview HTML string (not sure why is duplicating the text in the codesandbox, in my code only runs once): https://codesandbox.io/s/break-line-example-w1ic2x?file=/src/plugins/InitialState.js
The current behavior
When copying or initializing some text with break lines, it duplicates them, making the text different from the expected one.
The expected behavior
When copying or initializing some text with break lines, the number of break lines is exactly the same as the one inserted in the editor.
The text was updated successfully, but these errors were encountered: