Skip to content

Commit

Permalink
[lexical][TextNode] Feature: Add test for #6087 (#6091)
Browse files Browse the repository at this point in the history
  • Loading branch information
@2wheeh @Sahejkm
2wheeh authored and Sahejkm committed May 13, 2024
1 parent 7161b32 commit ae27d8a
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 74 deletions.
75 changes: 1 addition & 74 deletions packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -980,75 +980,7 @@ 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" style="text-align: right">
<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
class="PlaygroundEditorTheme__textStrikethrough"
data-lexical-text="true">
XDS_RICH_TEXT_AREA
</span>
</p>
</td>
<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>
`;

const CODE_PASTING_TESTS = [
{
expectedHTML: EXPECTED_HTML,
Expand Down Expand Up @@ -1121,11 +1053,6 @@ 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="189"/><col width="171"/></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;text-decoration:line-through;" 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) => {
Expand Down
61 changes: 61 additions & 0 deletions ...es/lexical-playground/__tests__/e2e/CopyAndPaste/html/TextFormatHTMLCopyAndPaste.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,65 @@ test.describe('HTML CopyAndPaste', () => {
`,
);
});

test('Copy + paste multiple text format', async ({page, isPlainText}) => {
test.skip(isPlainText);

await focusEditor(page);

const clipboard = {
'text/html': html`
<strong
style="font-weight: 700; font-style: italic; text-decoration: underline; color: rgb(0, 0, 0); font-size: 15px; text-align: left; text-indent: 0px; background-color: rgb(255, 255, 255);">
Hello
</strong>
<sub
style="color: rgb(0, 0, 0); font-style: normal; font-weight: 400; text-align: left; text-indent: 0px; background-color: rgb(255, 255, 255);">
<strong
style="font-weight: 700; font-style: italic; text-decoration: line-through; font-size: 0.8em; vertical-align: sub !important;">
World
</strong>
</sub>
<sup
style="color: rgb(0, 0, 0); font-style: normal; font-weight: 400; text-align: left; text-indent: 0px; background-color: rgb(255, 255, 255);">
<strong
style="font-weight: 700; font-style: italic; text-decoration: underline line-through; font-size: 0.8em; vertical-align: super;">
Lexical
</strong>
</sup>
`,
};

await pasteFromClipboard(page, clipboard);

await assertHTML(
page,
html`
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<strong
class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderline"
data-lexical-text="true">
Hello
</strong>
<sub data-lexical-text="true">
<strong
class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textStrikethrough PlaygroundEditorTheme__textSubscript">
World
</strong>
</sub>
<sup data-lexical-text="true">
<strong
class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textSuperscript">
Lexical
</strong>
</sup>
</p>
`,
);
});

// TODO: Enhance TextNode.importDOM() to support additional styles such as font size and color.
test('Copy + paste text with font size and color', () => test.fixme());
});
18 changes: 18 additions & 0 deletions packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,5 +82,23 @@ describe('LexicalTableNode tests', () => {
`<table><tr><td><p dir="ltr"><span data-lexical-text="true">Hello there</span></p></td><td><p dir="ltr"><span data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p dir="ltr"><span data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
);
});

test('Copy table from an external source with formatting', async () => {
const {editor} = testEnv;

const dataTransfer = new DataTransferMock();
dataTransfer.setData(
'text/html',
'<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="189"/><col width="171"/></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;text-decoration:line-through;" 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>',
);
await editor.update(() => {
const selection = $getSelection();
invariant($isRangeSelection(selection), 'isRangeSelection(selection)');
$insertDataTransferForRichText(dataTransfer, selection, editor);
});
expect(testEnv.innerHTML).toBe(
`<table><tr style="height: 21px;"><td><p dir="ltr"><strong data-lexical-text="true">Surface</strong></p></td><td><p dir="ltr"><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td><p style="text-align: right;"><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td><p dir="ltr"><span data-lexical-text="true">Lexical</span></p></td><td><p dir="ltr"><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td><p dir="ltr"><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`,
);
});
});
});

0 comments on commit ae27d8a

Please sign in to comment.