Fix copy-paste CodeBlock with BR (#3174)

facebook · Oct 18, 2022 · 0d0731d · 0d0731d
1 parent 0f5f285
commit 0d0731d
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 1 deletion.
diff --git a/packages/lexical-code/src/CodeNode.ts b/packages/lexical-code/src/CodeNode.ts
@@ -64,6 +64,16 @@ const mapToPrismLanguage = (
     : undefined;
 };
 
+function hasChildDOMNodeTag(node: Node, tagName: string) {
+  for (const child of node.childNodes) {
+    if (child instanceof HTMLElement && child.tagName === tagName) {
+      return true;
+    }
+    hasChildDOMNodeTag(child, tagName);
+  }
+  return false;
+}
+
 const LANGUAGE_DATA_ATTRIBUTE = 'data-highlight-language';
 
 /** @noInheritDoc */
@@ -116,7 +126,8 @@ export class CodeNode extends ElementNode {
       // inline format handled by TextNode otherwise
       code: (node: Node) => {
         const isMultiLine =
-          node.textContent != null && /\r?\n/.test(node.textContent);
+          node.textContent != null &&
+          (/\r?\n/.test(node.textContent) || hasChildDOMNodeTag(node, 'BR'));
 
         return isMultiLine
           ? {

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs
@@ -2380,4 +2380,93 @@ test.describe('CopyAndPaste', () => {
       `,
     );
   });
+
+  test('HTML Copy + paste a code block with BR', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+
+    await focusEditor(page);
+
+    const clipboard = {
+      'text/html': `<meta charset='utf-8'><p class="x1f6kntn x1fcty0u x16h55sf x12nagc xdj266r" dir="ltr"><span>Code block</span></p><code class="x1f6kntn x1fcty0u x16h55sf x1xmf6yo x1e56ztr x1q8sqs3 xeq4nuv x1lliihq xz9dl7a xn6708d xsag5q8 x1ye3gou" spellcheck="false" data-highlight-language="javascript"><span class="xuc5kci">function</span><span> </span><span class="xu88d7e">foo</span><span class="x1noocy9">(</span><span class="x1noocy9">)</span><span> </span><span class="x1noocy9">{</span><br><span>  </span><span class="xuc5kci">return</span><span> </span><span class="x180nigk">'Hey there'</span><span class="x1noocy9">;</span><br><span class="x1noocy9">}</span></code><p class="x1f6kntn x1fcty0u x16h55sf x12nagc xdj266r" dir="ltr"><span>--end--</span></p>`,
+    };
+
+    await pasteFromClipboard(page, clipboard);
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">Code block</span>
+        </p>
+        <code
+          class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
+          dir="ltr"
+          spellcheck="false"
+          data-gutter="123"
+          data-highlight-language="javascript">
+          <span
+            class="PlaygroundEditorTheme__tokenAttr"
+            data-lexical-text="true">
+            function
+          </span>
+          <span data-lexical-text="true"></span>
+          <span
+            class="PlaygroundEditorTheme__tokenFunction"
+            data-lexical-text="true">
+            foo
+          </span>
+          <span
+            class="PlaygroundEditorTheme__tokenPunctuation"
+            data-lexical-text="true">
+            (
+          </span>
+          <span
+            class="PlaygroundEditorTheme__tokenPunctuation"
+            data-lexical-text="true">
+            )
+          </span>
+          <span data-lexical-text="true"></span>
+          <span
+            class="PlaygroundEditorTheme__tokenPunctuation"
+            data-lexical-text="true">
+            {
+          </span>
+          <br />
+          <span data-lexical-text="true"></span>
+          <span
+            class="PlaygroundEditorTheme__tokenAttr"
+            data-lexical-text="true">
+            return
+          </span>
+          <span data-lexical-text="true"></span>
+          <span
+            class="PlaygroundEditorTheme__tokenSelector"
+            data-lexical-text="true">
+            'Hey there'
+          </span>
+          <span
+            class="PlaygroundEditorTheme__tokenPunctuation"
+            data-lexical-text="true">
+            ;
+          </span>
+          <br />
+          <span
+            class="PlaygroundEditorTheme__tokenPunctuation"
+            data-lexical-text="true">
+            }
+          </span>
+        </code>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">--end--</span>
+        </p>
+      `,
+    );
+  });
 });