From 937432cd0135f745cfb82732e5cdb388cee40004 Mon Sep 17 00:00:00 2001 From: Shubhanker Srivastava <33776279+Shubhankerism@users.noreply.github.com> Date: Thu, 25 Apr 2024 10:16:23 +0100 Subject: [PATCH] Fix TableCell child nodes on paste (#5951) Co-authored-by: ssrivasta196 --- .../__tests__/e2e/CodeBlock.spec.mjs | 22 +++++++------- .../html/TablesHTMLCopyAndPaste.spec.mjs | 21 ++++++++----- .../lexical-table/src/LexicalTableCellNode.ts | 30 +++++++++++++++++-- 3 files changed, 53 insertions(+), 20 deletions(-) diff --git a/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs b/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs index fdafb9612be..5d6a72fb4a6 100644 --- 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', () => {

-

+

@@ -1030,15 +1030,17 @@ test.describe('CodeBlock', () => { XDS_RICH_TEXT_AREA

- - sdvd - - sdfvsfs - + +

+ sdvd + + sdfvsfs + +

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs index 7500887fbfb..d697742b6bc 100644 --- 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', () => {

+ dir="ltr" + style="text-align: left;"> a

+ dir="ltr" + style="text-align: left;"> b

+ dir="ltr" + style="text-align: left;"> b

+ dir="ltr" + style="text-align: left;"> c

@@ -145,21 +149,24 @@ test.describe('HTML Tables CopyAndPaste', () => {

+ dir="ltr" + style="text-align: left;"> d

+ dir="ltr" + style="text-align: left;"> e

+ dir="ltr" + style="text-align: left;"> f

diff --git a/packages/lexical-table/src/LexicalTableCellNode.ts b/packages/lexical-table/src/LexicalTableCellNode.ts index 2bc4e3e9f32..d800bf7dc35 100644 --- 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'