Fix #5663 styling from td not persisted on copy paste (#5855)

facebook · Apr 11, 2024 · 1b04cf3 · 1b04cf3
1 parent f85a177
commit 1b04cf3
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs b/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
@@ -980,6 +980,64 @@ test.describe('CodeBlock', () => {
       </span>
     </code>
   `;
+  const EXPECTED_HTML_GOOGLE_SPREADSHEET = html`
+    <table class="PlaygroundEditorTheme__table">
+      <tr style="height: 21px">
+        <td class="PlaygroundEditorTheme__tableCell">
+          <p
+            class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              Surface
+            </strong>
+          </p>
+        </td>
+        <td class="PlaygroundEditorTheme__tableCell">
+          <p
+            class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <em
+              class="PlaygroundEditorTheme__textItalic"
+              data-lexical-text="true">
+              MWP_WORK_LS_COMPOSER
+            </em>
+          </p>
+        </td>
+        <td class="PlaygroundEditorTheme__tableCell">
+          <p class="PlaygroundEditorTheme__paragraph">
+            <span
+              class="PlaygroundEditorTheme__textUnderline"
+              data-lexical-text="true">
+              77349
+            </span>
+          </p>
+        </td>
+      </tr>
+      <tr style="height: 21px">
+        <td class="PlaygroundEditorTheme__tableCell">
+          <p
+            class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">Lexical</span>
+          </p>
+        </td>
+        <td class="PlaygroundEditorTheme__tableCell">
+          <p
+            class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">XDS_RICH_TEXT_AREA</span>
+          </p>
+        </td>
+        <td
+          class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">sdvd sdfvsfs</span>
+        </td>
+      </tr>
+    </table>
+  `;
   const CODE_PASTING_TESTS = [
     {
       expectedHTML: EXPECTED_HTML,
@@ -1052,6 +1110,11 @@ test.describe('CodeBlock', () => {
       // semantically it should be wrapped in a pre
       pastedHTML: `<meta charset='utf-8'><code>1<br>2</code>`,
     },
+    {
+      expectedHTML: EXPECTED_HTML_GOOGLE_SPREADSHEET,
+      name: 'Google Spreadsheet',
+      pastedHTML: `<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none" data-sheets-root="1"><colgroup><col width="100"/><col width="210"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-weight:bold;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Surface&quot;}">Surface</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-style:italic;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;MWP_WORK_LS_COMPOSER&quot;}">MWP_WORK_LS_COMPOSER</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:underline;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:77349}">77349</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Lexical&quot;}">Lexical</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;XDS_RICH_TEXT_AREA&quot;}">XDS_RICH_TEXT_AREA</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;sdvd sdfvsfs&quot;}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:5,&quot;2&quot;:{&quot;5&quot;:1}}"><span style="font-size:10pt;font-family:Arial;font-style:normal;">sdvd </span><span style="font-size:10pt;font-family:Arial;font-weight:bold;font-style:normal;">sdfvsfs</span></td></tr></tbody></table>`,
+    },
   ];
 
   CODE_PASTING_TESTS.forEach((testCase, i) => {

diff --git a/packages/lexical-table/src/LexicalTableCellNode.ts b/packages/lexical-table/src/LexicalTableCellNode.ts
@@ -24,6 +24,7 @@ import {
   $createParagraphNode,
   $isElementNode,
   $isLineBreakNode,
+  $isTextNode,
   ElementNode,
 } from 'lexical';
 
@@ -315,6 +316,13 @@ export function convertTableCellNodeElement(
     tableCellNode.__backgroundColor = backgroundColor;
   }
 
+  const style = domNode_.style;
+  const hasBoldFontWeight =
+    style.fontWeight === '700' || style.fontWeight === 'bold';
+  const hasLinethroughTextDecoration = style.textDecoration === 'line-through';
+  const hasItalicFontStyle = style.fontStyle === 'italic';
+  const hasUnderlineTextDecoration = style.textDecoration === 'underline';
+
   return {
     after: (childLexicalNodes) => {
       if (childLexicalNodes.length === 0) {
@@ -331,6 +339,20 @@ export function convertTableCellNodeElement(
         ) {
           return null;
         }
+        if ($isTextNode(lexicalNode)) {
+          if (hasBoldFontWeight) {
+            lexicalNode.toggleFormat('bold');
+          }
+          if (hasLinethroughTextDecoration) {
+            lexicalNode.toggleFormat('strikethrough');
+          }
+          if (hasItalicFontStyle) {
+            lexicalNode.toggleFormat('italic');
+          }
+          if (hasUnderlineTextDecoration) {
+            lexicalNode.toggleFormat('underline');
+          }
+        }
         paragraphNode.append(lexicalNode);
         return paragraphNode;
       }