facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.61k stars 1.66k forks source link

Bug: Pasting Code elements in a CodeBlock replaces it #3976

Open moy2010 opened 1 year ago

moy2010 commented 1 year ago

When code text that doesn't follow the existing covered cases (i.e. importing a code html element or a div element with a monospace font-family) is pasted, the code block is replaced by a paragraph.

Here's an example of html with a format that isn't covered:

<div dir="ltr">
   <span style="font-family:monospace">
      <span style="color:rgb(0,0,0)">[diff]
      </span><br> &nbsp;&nbsp;&nbsp;tool = meld
      <br>[difftool]
      <br> &nbsp;&nbsp;&nbsp;prompt = false
      <br>[difftool "meld"]
      <br> &nbsp;&nbsp;&nbsp;cmd = meld "$LOCAL" "$REMOTE"
      <br>[merge]
      <br> &nbsp;&nbsp;&nbsp;tool = meld
      <br>[mergetool "meld"]
      <br> &nbsp;&nbsp;&nbsp;cmd = flatpak run org.gnome.meld "$LOCAL" "$BASE" "$REMOTE" --output "$MERGED"
      <div class="yj6qo"></div>
      <div class="adL"><br></div>
   </span>
</div>

Lexical version: 0.8.0

Steps To Reproduce

  1. Copy the text from an html file that follows the example above.
  2. Create a new code block (i.e. with triple backticks).
  3. Paste the copied text.

The current behavior

The copied text is transformed into a paragraph, and the code block is removed.

The expected behavior

The copied text is pasted into the code block

fantactuka commented 1 year ago

I'm curious which application produces such format?

moy2010 commented 1 year ago

@fantactuka, I copied this from the terminal (nano .gitconfig), so it's either bash or nano that creates this structure.

For the associated PR, my first line of thought was that Any plain text should be allowed to be copied into a CodeNode, so I wanted to make the logic in clipboard.ts aware of its context. But after I followed the logic, I found out that the nodes were coming from the transformers found on the importDOM methods (That and that a previous PR was rejected because I was importing CodeNode and all of its baggage into clipboard.ts :smile:).

moy2010 commented 1 year ago

As for determining the html structure, I pasted it into GMails body and inspected the resulting html.