fix(lexical): Text with underline format is stripped out on paste (#2555)

Author: LuciNyan

packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs

@@ -2120,4 +2120,63 @@ test.describe('CopyAndPaste', () => {
       `,
     );
   });
+
+  test('Paste content copied from google doc that contains bold italic underline formatting', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    const htmlFromGoogle = `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-d6ac4fde-7fff-3941-b4d9-3903abcccdcb"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Bold</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Italic</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;-webkit-text-decoration-skip:none;text-decoration-skip-ink:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">underline</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:italic;font-variant:normal;text-decoration:underline;-webkit-text-decoration-skip:none;text-decoration-skip-ink:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Bold Italic Underline</span></p></b><br class="Apple-interchange-newline">`;
+    const clipboardData = {
+      'text/html': htmlFromGoogle,
+    };
+    await pasteFromClipboard(page, clipboardData);
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <strong
+            class="PlaygroundEditorTheme__textBold"
+            data-lexical-text="true">
+            Bold
+          </strong>
+        </p>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <em
+            class="PlaygroundEditorTheme__textItalic"
+            data-lexical-text="true">
+            Italic
+          </em>
+        </p>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span
+            class="PlaygroundEditorTheme__textUnderline"
+            data-lexical-text="true">
+            underline
+          </span>
+        </p>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <strong
+            class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic
+          PlaygroundEditorTheme__textUnderline"
+            data-lexical-text="true">
+            Bold Italic Underline
+          </strong>
+        </p>
+        <p class="PlaygroundEditorTheme__paragraph">
+          <br />
+          <br />
+        </p>
+      `,
+    );
+  });
 });

packages/lexical/src/nodes/LexicalTextNode.ts

@@ -830,11 +830,13 @@ function convertSpanElement(domNode: Node): DOMConversionOutput {
   const span = domNode as HTMLSpanElement;
   // Google Docs uses span tags + font-weight for bold text
   const hasBoldFontWeight = span.style.fontWeight === '700';
-  // Google Docs uses span tags + text-decoration for strikethrough text
+  // Google Docs uses span tags + text-decoration: line-through for strikethrough text
   const hasLinethroughTextDecoration =
     span.style.textDecoration === 'line-through';
   // Google Docs uses span tags + font-style for italic text
   const hasItalicFontStyle = span.style.fontStyle === 'italic';
+  // Google Docs uses span tags + text-decoration: underline for underline text
+  const hasUnderlineTextDecoration = span.style.textDecoration === 'underline';
 
   return {
     forChild: (lexicalNode) => {
@@ -847,6 +849,9 @@ function convertSpanElement(domNode: Node): DOMConversionOutput {
       if ($isTextNode(lexicalNode) && hasItalicFontStyle) {
         lexicalNode.toggleFormat('italic');
       }
+      if ($isTextNode(lexicalNode) && hasUnderlineTextDecoration) {
+        lexicalNode.toggleFormat('underline');
+      }
 
       return lexicalNode;
     },