Skip to content

Commit

Permalink
Merge branch 'main' into updateFromJSON-element-node-text-format-style
Browse files Browse the repository at this point in the history
  • Loading branch information
@etrepum
etrepum authored Dec 16, 2024
2 parents d79d430 + ad7187d commit aeea90f
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 10 deletions.
78 changes: 75 additions & 3 deletions packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,78 @@ test.describe('HTML Tables CopyAndPaste', () => {
);
});

test('Copy + paste (Table - Google Docs with custom widths)', async ({
page,
isPlainText,
isCollab,
}) => {
test.skip(isPlainText || isCollab);
await focusEditor(page);
const clipboard = {
'text/html': `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-dd8626d9-7fff-78d6-4aad-a0d248a19533"><div dir="ltr" style="margin-left:0pt;" align="center"><table style="border:none;border-collapse:collapse;"><colgroup><col width="78" /><col width="405" /><col width="233" /></colgroup><tbody><tr style="height:0pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">short</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">wide</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">default</span></p></td></tr><tr style="height:0pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">a</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">b</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">c</span></p></td></tr></tbody></table></div><br /></b>`,
};
await pasteFromClipboard(page, clipboard);
await assertHTML(
page,
html`
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 78px;" />
<col style="width: 405px;" />
<col style="width: 233px;" />
</colgroup>
<tr>
<td class="PlaygroundEditorTheme__tableCell">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">short</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">wide</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">default</span>
</p>
</td>
</tr>
<tr>
<td class="PlaygroundEditorTheme__tableCell">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">a</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">b</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">c</span>
</p>
</td>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
});

test('Copy + paste (Table - Quip)', async ({page, isPlainText}) => {
test.skip(isPlainText);

Expand Down Expand Up @@ -204,9 +276,9 @@ test.describe('HTML Tables CopyAndPaste', () => {
html`
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 92px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
</colgroup>
<tr style="height: 21px">
<td class="PlaygroundEditorTheme__tableCell">
Expand Down
12 changes: 8 additions & 4 deletions packages/lexical-table/src/LexicalTableNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -488,10 +488,14 @@ export function $convertTableElement(
if (colGroup) {
let columns: number[] | undefined = [];
for (const col of colGroup.querySelectorAll(':scope > col')) {
const width = (col as HTMLElement).style.width;
if (!width || !PIXEL_VALUE_REG_EXP.test(width)) {
columns = undefined;
break;
let width = (col as HTMLElement).style.width || '';
if (!PIXEL_VALUE_REG_EXP.test(width)) {
// Also support deprecated width attribute for google docs
width = col.getAttribute('width') || '';
if (!/^\d+$/.test(width)) {
columns = undefined;
break;
}
}
columns.push(parseFloat(width));
}
Expand Down
6 changes: 3 additions & 3 deletions packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -650,9 +650,9 @@ describe('LexicalTableNode tests', () => {
html`
<table class="test-table-class">
<colgroup>
<col />
<col />
<col />
<col style="width: 100px" />
<col style="width: 189px" />
<col style="width: 171px" />
</colgroup>
<tr style="height: 21px;">
<td>
Expand Down

0 comments on commit aeea90f

Please sign in to comment.