Fix TableCell child nodes on paste (facebook#5951)

Co-authored-by: ssrivasta196 <[email protected]>
etrepum · Apr 25, 2024 · 937432c · 937432c
1 parent c82b2db
commit 937432c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs b/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
@@ -1006,7 +1006,7 @@ test.describe('CodeBlock', () => {
           </p>
         </td>
         <td class="PlaygroundEditorTheme__tableCell">
-          <p class="PlaygroundEditorTheme__paragraph">
+          <p class="PlaygroundEditorTheme__paragraph" style="text-align: right">
             <span
               class="PlaygroundEditorTheme__textUnderline"
               data-lexical-text="true">
@@ -1030,15 +1030,17 @@ test.describe('CodeBlock', () => {
             <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</span>
-          <strong
-            class="PlaygroundEditorTheme__textBold"
-            data-lexical-text="true">
-            sdfvsfs
-          </strong>
+        <td class="PlaygroundEditorTheme__tableCell">
+          <p
+            class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">sdvd</span>
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              sdfvsfs
+            </strong>
+          </p>
         </td>
       </tr>
     </table>

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
@@ -117,26 +117,30 @@ test.describe('HTML Tables CopyAndPaste', () => {
             <td class="PlaygroundEditorTheme__tableCell">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
-                dir="ltr">
+                dir="ltr"
+                style="text-align: left;">
                 <span data-lexical-text="true">a</span>
               </p>
             </td>
             <td class="PlaygroundEditorTheme__tableCell">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
-                dir="ltr">
+                dir="ltr"
+                style="text-align: left;">
                 <span data-lexical-text="true">b</span>
               </p>
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
-                dir="ltr">
+                dir="ltr"
+                style="text-align: left;">
                 <span data-lexical-text="true">b</span>
               </p>
             </td>
             <td class="PlaygroundEditorTheme__tableCell">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
-                dir="ltr">
+                dir="ltr"
+                style="text-align: left;">
                 <span data-lexical-text="true">c</span>
               </p>
             </td>
@@ -145,21 +149,24 @@ test.describe('HTML Tables CopyAndPaste', () => {
             <td class="PlaygroundEditorTheme__tableCell">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
-                dir="ltr">
+                dir="ltr"
+                style="text-align: left;">
                 <span data-lexical-text="true">d</span>
               </p>
             </td>
             <td class="PlaygroundEditorTheme__tableCell">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
-                dir="ltr">
+                dir="ltr"
+                style="text-align: left;">
                 <span data-lexical-text="true">e</span>
               </p>
             </td>
             <td class="PlaygroundEditorTheme__tableCell">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
-                dir="ltr">
+                dir="ltr"
+                style="text-align: left;">
                 <span data-lexical-text="true">f</span>
               </p>
             </td>

diff --git a/packages/lexical-table/src/LexicalTableCellNode.ts b/packages/lexical-table/src/LexicalTableCellNode.ts
@@ -11,6 +11,7 @@ import type {
   DOMConversionOutput,
   DOMExportOutput,
   EditorConfig,
+  ElementFormatType,
   LexicalEditor,
   LexicalNode,
   NodeKey,
@@ -22,6 +23,7 @@ import {addClassNamesToElement} from '@lexical/utils';
 import {
   $applyNodeReplacement,
   $createParagraphNode,
+  $isBlockElementNode,
   $isElementNode,
   $isLineBreakNode,
   $isTextNode,
@@ -323,17 +325,39 @@ export function convertTableCellNodeElement(
   const hasLinethroughTextDecoration = textDecoration.includes('line-through');
   const hasItalicFontStyle = style.fontStyle === 'italic';
   const hasUnderlineTextDecoration = textDecoration.includes('underline');
-
+  const textAlign = style.textAlign;
   return {
     after: (childLexicalNodes) => {
+      const children = [];
+      let paragraphNode = $createParagraphNode().setFormat(
+        textAlign as ElementFormatType,
+      );
       if (childLexicalNodes.length === 0) {
-        childLexicalNodes.push($createParagraphNode());
+        children.push(paragraphNode);
+      }
+
+      childLexicalNodes.forEach((node) => {
+        if ($isBlockElementNode(node)) {
+          if (paragraphNode.getChildrenSize() !== 0) {
+            children.push(paragraphNode);
+            paragraphNode = $createParagraphNode().setFormat(
+              textAlign as ElementFormatType,
+            );
+          }
+          children.push(node);
+        } else {
+          paragraphNode.append(node);
+        }
+      });
+      if (paragraphNode.getChildrenSize() !== 0) {
+        children.push(paragraphNode);
       }
-      return childLexicalNodes;
+      return children;
     },
     forChild: (lexicalNode, parentLexicalNode) => {
       if ($isTableCellNode(parentLexicalNode) && !$isElementNode(lexicalNode)) {
         const paragraphNode = $createParagraphNode();
+        paragraphNode.setFormat(textAlign as ElementFormatType);
         if (
           $isLineBreakNode(lexicalNode) &&
           lexicalNode.getTextContent() === '\n'