Add code to html conversions

[mmarkelov]

close #2049

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lexical	✅ Ready (Inspect)	Visit Preview	May 16, 2022 at 7:01PM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	May 16, 2022 at 7:01PM (UTC)

[tylerjbainbridge]

Won't this match every <code> tag with the TextNode and not the CodeNode?

[tylerjbainbridge]

In importDOM for code you should check if it's an inline code element and not a code block. If it's a code block you can return null, otherwise convert to text node.

...
code: (node: Node) => {
  if (node is code block) {
    return null;
  }

  return {
    conversion: convertTextFormatElement,
    priority: 0,
  }
},
...

cc @fantactuka, do you know if there's a good way to check if an incoming code node is inline?

[acywatson]

Won't this match every <code> tag with the TextNode and not the CodeNode?

It will, but this still might be the right thing to do. CodeNode is not a core node, so this would allow us to handle pasted HTML code tags even if CodeNode is not registered.

I think the full solution involves also adding a higher priority conversion on CodeNode/CodeHighlightNode, but I think it could be done in two PRs.

Either way, we need some test coverage for this, which can be added here:

https://github.com/facebook/lexical/blob/main/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs

EDIT: @tylerjbainbridge saw your other comment, I'm on the same page.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

It looks like <code> is inline by nature - maybe <pre> plus <code> is the formula for a code "block"?

[trueadm]

@tylerjbainbridge This adds tests, is this something we can get in for increased coverage?

[fantactuka]

Addressed in #2607