This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/fbopensource/lexical/GjrfvHt6GqNsDDEb7yezVg2wHDnN
✅ Preview: https://lexical-git-post-transform-fbopensource.vercel.app

Had similar idea with post-processing hook, even name was the same!

Few thoughts around it:

• We can give more control to after hook if pass currentLexicalNode and childNodes and let it modify both:

  const children = node.childNodes;
  let childLexicalNodes = []
  for (let i = 0; i < children.length; i++) {
    childLexicalNodes.push(...$createNodesFromDOM(
      children[i],
      conversionMap,
      editor,
      currentTextFormat,
    ));
  }

  [currentLexicalNode, childLexicalNodes] = transformOutput.after(currentLexicalNode, childLexicalNodes);

  // rest of the logic where we append child nodes to current node if it's not null, or concat with other nodes otherwise

• after does not need node param as it's available in convertor itself:

div: (domNode: Node)
      ^^^^^^^

Alternative solution I was looking into is to modify dom node within convertor, e.g.:

+  const isInlineNode = (domNode: Node): boolean => {
+    return inlineNodeNames.has(domNode.nodeName.toLowerCase());
+  };
+
+  const isCodeElement = (div: HTMLDivElement): boolean => {
+    return div.style.fontFamily.match('monospace') !== null;
+  };

...

+  pre: () => ({node: $createCodeNode()}),
+  div: (domNode: Node) => {
+    const {childNodes} = domNode;
+    const lastChild = childNodes[childNodes.length - 1];
+    // $FlowFixMe[incompatible-cast] it is a <div> since it's matched by nodeName
+    const isCode = isCodeElement((domNode: HTMLDivElement));
+
+    // Mainly for code copy/pasting, adding line break in the end of the div
+    // if it's last child is inline (text) node.
+    if (
+      !isCode &&
+      lastChild &&
+      isInlineNode(lastChild) &&
+      domNode.nextSibling !== null
+    ) {
+      domNode.appendChild(document.createElement('br'));
+    }
+
+    return {
+      node: isCode ? $createCodeNode() : null,
+    };
+  },

That way we "prepare" html in advance by injecting missed <br> for code blocks. The reason I was trying this is (surprisingly) Github. All editors (even FB CodeHub) I've tried generate reasonable HTML for copied code, but GH's markup is based on tables 🙈

<table ...>
  <tr>
    <td data-line-number /><td>....code </td>
  </tr>
  <tr>
    <td data-line-number /><td>....code </td>
  </tr>
</table>

Which is quite hard to transform into code, so my idea was when we encounter this specific case in table converter, we can do same html preparation and replace table with <pre> and getting content by traversing its rows. Which could be harder with hook as we only have access to first level child nodes.

Thinking more about it, I don't know if we want to have this GH case as a built-it, but it's an interesting scenario anyways

Had similar idea with post-processing hook, even name was the same!

Few thoughts around it:

• We can give more control to after hook if pass currentLexicalNode and childNodes and let it modify both:

  const children = node.childNodes;
  let childLexicalNodes = []
  for (let i = 0; i < children.length; i++) {
    childLexicalNodes.push(...$createNodesFromDOM(
      children[i],
      conversionMap,
      editor,
      currentTextFormat,
    ));
  }

  [currentLexicalNode, childLexicalNodes] = transformOutput.after(currentLexicalNode, childLexicalNodes);

  // rest of the logic where we append child nodes to current node if it's not null, or concat with other nodes otherwise

• after does not need node param as it's available in convertor itself:

div: (domNode: Node)
      ^^^^^^^

Alternative solution I was looking into is to modify dom node within convertor, e.g.:

+  const isInlineNode = (domNode: Node): boolean => {
+    return inlineNodeNames.has(domNode.nodeName.toLowerCase());
+  };
+
+  const isCodeElement = (div: HTMLDivElement): boolean => {
+    return div.style.fontFamily.match('monospace') !== null;
+  };

...

+  pre: () => ({node: $createCodeNode()}),
+  div: (domNode: Node) => {
+    const {childNodes} = domNode;
+    const lastChild = childNodes[childNodes.length - 1];
+    // $FlowFixMe[incompatible-cast] it is a <div> since it's matched by nodeName
+    const isCode = isCodeElement((domNode: HTMLDivElement));
+
+    // Mainly for code copy/pasting, adding line break in the end of the div
+    // if it's last child is inline (text) node.
+    if (
+      !isCode &&
+      lastChild &&
+      isInlineNode(lastChild) &&
+      domNode.nextSibling !== null
+    ) {
+      domNode.appendChild(document.createElement('br'));
+    }
+
+    return {
+      node: isCode ? $createCodeNode() : null,
+    };
+  },

That way we "prepare" html in advance by injecting missed <br> for code blocks. The reason I was trying this is (surprisingly) Github. All editors (even FB CodeHub) I've tried generate reasonable HTML for copied code, but GH's markup is based on tables 🙈

<table ...>
  <tr>
    <td data-line-number /><td>....code </td>
  </tr>
  <tr>
    <td data-line-number /><td>....code </td>
  </tr>
</table>

Which is quite hard to transform into code, so my idea was when we encounter this specific case in table converter, we can do same html preparation and replace table with \<pre\> and getting content by traversing its rows. Which could be harder with hook as we only have access to first level child nodes.

Thinking more about it, I don't know if we want to have this GH case as a built-it, but it's an interesting scenario anyways

As we discussed offline, I think the DOM pre-processing approach can be useful in other scenarios - may even be worth documenting as a sort of escape hatch in certain use cases or just to demonstrate the flexibility of this interface.

I'm going to go ahead and make the other changes you suggested and merge our PRs together. Thanks for working through this with me!