lexical: Bug: Additional break line when initializing or copy/pasting in the editor with break lines

When I initialize the Lexical editor from an DOM like  , passing through generateNodesFromDOM and inserting the generated nodes to the editor, it imports it with an additional break line like  . This makes the editor have more break lines than expected. It is also curious that both
count as one character if I delete them and count the characters.

@zeitstein mentioned in a discord chat that when trying to pass a single  without break lines, it also imports it with an additional break line like  . They also mention that that this PR can be related -> https://github.com/facebook/lexical/pull/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

Write something like this (with some break lines) in a Note in the Mac Notes Application:

First line



Fifth line

Copy the five lines (or the block of text you have written) and paste it in the lexical playground editor
You can find that there are more than 5 lines in this particular case.

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.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 19
Comments: 19 (2 by maintainers)

Commits related to this issue

Fixed line breaks showing an empty content in nested editors refs https://github.com/TryGhost/Team/issues/2992 - at the moment, there are some open issues at Lexical with line breaks - https://gith... — committed to TryGhost/Koenig by sagzy a year ago
Fixed line breaks showing an empty content in nested editors (#603) refs https://github.com/TryGhost/Team/issues/2992 - at the moment, there are some open issues at Lexical with line breaks - h... — committed to TryGhost/Koenig by sagzy a year ago

Most upvoted comments

@almazkaliyev the point is not to remove every   from the generated HTML, I want to keep the exact number of break lines from a copy/paste and when initialising the editor with some previous HTML saved from the database.

mariofpalb on Jan 24, 2023

I’ve found that a single empty paragraph converted to HTML with $generateHtmlFromNodes will result in  . However when converting back from HTML to Lexical nodes with $generateNodesFromDOM and then updating the contents of the editor’s root node, I end up with the following HTML in the ContentEditable element:  .

ferugi on Apr 12, 2023

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 on Jan 23, 2023

Hello, I’m having the same issue but found a workaround, if you clear the editor before the insertion, the line break is removed.

$getRoot().clear();
$getRoot().select();
$insertNodes(nodes);

dpr10 on Apr 2, 2024

I’m facing the same issue. I’ve noticed $generateNodesFromDOM is adding an extra   tag for each “empty” paragraph. If you put any character, eg. period or even empty space - the problem does not exist

chalecki on Jan 16, 2023