Bug: Copy Pase of List elements b/w Playground & any Custom Instance is producing extra lines

[gaurav21r]

Since this bug pertains to a base level feature (Lists & Clipboard) I'm flagging as URGENT

Lexical version: 0.6.0 to latest

Steps To Reproduce

1. Make a list of any arbitrary depth in the playground https://playground.lexical.dev/

2. Copy paste this list (along with the heading & any other element(s) ) in any arbitrary custom instance of Lexical. For example, the Rich Text sandbox in the website https://lexical.dev itself, will give this:

Link to code example: Codesandbox link of Rich Text Editor from the website itself: https://codesandbox.io/s/lexical-rich-text-example-5tncvy?from-embed

The current behavior

There is an extra \n being added to every list item that has a sub list.

The expected behavior

The playground editor and all other editors should behave consistently.

Probable cause.

I couldn't understand the code much but I think this line may be the offender.

lexical/packages/lexical-clipboard/src/clipboard.ts

Line 126 in 68c64e9

// Multi-line plain text in rich text mode pasted as separate paragraphs

The comment seems to suggest something to the issue.

[bschwartz10]

Experiencing the same behavior of the insertion of an empty editor-listitem when parsing html content back into the editor

parsing logic

const root = $getRoot()
const parser = new DOMParser()
const dom = parser.parseFromString(value, 'text/html')
const nodes = $generateNodesFromDOM(editor, dom)         
root.append(...nodes)

rendered text

Lexical editor w/ extra empty editor-listitem

HTML Output

<ol class="editor-list-ol">
    <li value="1" class="editor-listitem ltr" dir="ltr"><span data-lexical-text="true">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s</span></li>
    <li value="2" class="editor-listitem ltr" dir="ltr"><span data-lexical-text="true">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s</span></li>
    <li value="3" class="editor-listitem"><br></li>
// ^Extra editor-listitem
    <li value="4" class="editor-listitem editor-nested-listitem">
        <ol class="editor-list-ol">
            <li value="1" class="editor-listitem ltr" dir="ltr"><span data-lexical-text="true">Hows it going</span></li>
        </ol>
    </li>
</ol>

[gaurav21r]

@trueadm @thegreatercurve As I mentioned should be easy to reproduce for you from the playground website and the lexical homepage. Please give some direction, whenever free.

[thegreatercurve]

@gaurav21r I think the issue is more to do with the list logic, which we're looking to refactor in the next couple of months. It's a long standing issue with how we are nesting lists #2951

[gaurav21r]

@thegreatercurve Thanks for responding! Yes it does seem to be the long term fix for this issue. But can you suggest a temp workaround till then?

What I find intriguing is that if I copy the list in the playground and paste it (even in a separate playground instance) its working, similarly if I copy it from the CodeSandbox on the home page and paste it there only its working. Its only when its being transferred across each other that this bug happens. Maybe there is a Plugin in the Playground that's contributing to this?

[acywatson]

@thegreatercurve Thanks for responding! Yes it does seem to be the long term fix for this issue. But can you suggest a >temp workaround till then?

What I find intriguing is that if I copy the list in the playground and paste it (even in a separate playground instance) its >working, similarly if I copy it from the CodeSandbox on the home page and paste it there only its working. Its only when its >being transferred across each other that this bug happens. Maybe there is a Plugin in the Playground that's contributing to >this?

This behavior is most likely because the bug you're seeing is with HTML Serialization. Lexical uses native JSON transfer format for most cases between Lexical instances, so the bug occurs when the paste content is HTML, but not when it's JSON.

[acywatson]

Experiencing the same behavior of the insertion of an empty editor-listitem when parsing html content back into the editor

This is another indication that the HTML (De)Serialization is the problem.

[acywatson]

Here ya go:

#3757

[gaurav21r]

@acywatson Thanks a ton! Let me Pull master and confirm so we can close this!

[chalecki]

Thanks a lot @acywatson 🍺 !

[GermanJablo]

I think the issue is more to do with the list logic, which we're looking to refactor in the next couple of months

hey @thegreatercurve or anyone else on the team. This information is critical to me. Could you tell me what the change will consist of please?

[acywatson]

@egonbolton

#2951 (comment)

Most of the context is in this thread that you’re already involved in. There’s not much else. @thegreatercurve will own this