Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[lexical][lexical-react][lexical-table] Fix: Add horizontal scroll for tables #6713

Closed
wants to merge 17 commits into from
Closed

[lexical][lexical-react][lexical-table] Fix: Add horizontal scroll for tables #6713

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
72afdd1
add scrollable node to ImageNode and TableNode
GermanJablo Oct 4, 2024
67be0bc
add scrollableNode tests
GermanJablo Oct 4, 2024
ab0b782
move ScrollableNode from core to table package
GermanJablo Oct 5, 2024
327870e
remove ScrollableNode from ImageNode
GermanJablo Oct 5, 2024
13ef4ab
fix unit tests
GermanJablo Oct 5, 2024
c9bd2c8
fix Tables.spec.mjs tests
GermanJablo Oct 6, 2024
d8ce8ec
fixed a lot of tests
GermanJablo Oct 6, 2024
8271c5e
Merge remote-tracking branch 'origin/main' into scrollable-node
GermanJablo Oct 7, 2024
0ba00bf
fix e2e tests
GermanJablo Oct 7, 2024
decc195
fix comments
GermanJablo Oct 14, 2024
04d1bc0
Add a ScrollableNodePlugin to make the TableNode wrapper opt-in
etrepum Oct 18, 2024
52dfe50
make LexicalTableSelectionHelpers backwards compatible
GermanJablo Oct 21, 2024
61cc35f
Update packages/lexical-table/src/LexicalTableSelectionHelpers.ts
GermanJablo Oct 21, 2024
d45ed7c
Update packages/lexical-react/src/LexicalTablePlugin.ts
GermanJablo Oct 21, 2024
dba94cc
add scrollable node option to settings
GermanJablo Oct 21, 2024
0637714
Merge remote-tracking branch 'origin/main' into scrollable-node
GermanJablo Nov 5, 2024
84ee420
fix unit test
GermanJablo Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,026 changes: 520 additions & 506 deletions packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
View file
Open in desktop

Large diffs are not rendered by default.

188 changes: 99 additions & 89 deletions packages/lexical-playground/__tests__/e2e/Indentation.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,23 +104,25 @@ test.describe('Identation', () => {
<span data-lexical-text="true">code</span>
</code>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto">
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
</div>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand Down Expand Up @@ -189,24 +191,26 @@ test.describe('Identation', () => {
style="padding-inline-start: calc(40px)">
<br />
</p>
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent"
dir="ltr"
style="padding-inline-start: calc(40px)">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto">
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent"
dir="ltr"
style="padding-inline-start: calc(40px)">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
</div>
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__indent"
style="padding-inline-start: calc(40px)">
Expand Down Expand Up @@ -285,24 +289,26 @@ test.describe('Identation', () => {
style="padding-inline-start: calc(80px)">
<br />
</p>
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent"
dir="ltr"
style="padding-inline-start: calc(80px)">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto">
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent"
dir="ltr"
style="padding-inline-start: calc(80px)">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
</div>
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__indent"
style="padding-inline-start: calc(80px)">
Expand Down Expand Up @@ -375,24 +381,26 @@ test.describe('Identation', () => {
style="padding-inline-start: calc(40px)">
<br />
</p>
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent"
dir="ltr"
style="padding-inline-start: calc(40px)">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto">
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent"
dir="ltr"
style="padding-inline-start: calc(40px)">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
</div>
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__indent"
style="padding-inline-start: calc(40px)">
Expand Down Expand Up @@ -455,24 +463,26 @@ test.describe('Identation', () => {
<span data-lexical-text="true">code</span>
</code>
<p class="PlaygroundEditorTheme__paragraph" style=""><br /></p>
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"
style="">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto">
<table
class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
<colgroup>
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"
style="">
<span data-lexical-text="true">foo</span>
</p>
</th>
</tr>
</table>
</div>
<p class="PlaygroundEditorTheme__paragraph" style=""><br /></p>
`,
);
Expand Down
61 changes: 34 additions & 27 deletions packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,22 +398,24 @@ test.describe.parallel('Selection', () => {
dir="ltr">
<span data-lexical-text="true">abc</span>
</p>
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 92px" />
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
</table>
<div class="lexical-scrollable" style="overflow-x: auto">
<table class="PlaygroundEditorTheme__table">
<colgroup>
<col style="width: 92px" />
<col style="width: 92px" />
</colgroup>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
</table>
</div>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand Down Expand Up @@ -684,7 +686,8 @@ test.describe.parallel('Selection', () => {
{
anchorOffset: {desc: 'beginning of cell', value: 0},
anchorPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'second cell', value: 1},
{desc: 'first paragraph', value: 0},
Expand All @@ -693,7 +696,8 @@ test.describe.parallel('Selection', () => {
],
focusOffset: {desc: 'full text length', value: cellText.length},
focusPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'second cell', value: 1},
{desc: 'first paragraph', value: 0},
Expand All @@ -714,14 +718,16 @@ test.describe.parallel('Selection', () => {
{
anchorOffset: {desc: 'beginning of cell', value: 0},
anchorPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'first cell', value: 0},
{desc: 'beginning of text', value: 0},
],
focusOffset: {desc: 'beginning of text', value: 0},
focusPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'first cell', value: 0},
{desc: 'beginning of text', value: 0},
Expand Down Expand Up @@ -770,7 +776,8 @@ test.describe.parallel('Selection', () => {
{
anchorOffset: {desc: 'beginning of cell', value: 0},
anchorPath: [
{desc: 'index of table in root', value: 1},
{desc: 'index of scrollable in root', value: 1},
{desc: 'table is firstChild of scrollable', value: 0},
{desc: 'first table row', value: 1},
{desc: 'first cell', value: 0},
],
Expand Down Expand Up @@ -981,8 +988,8 @@ test.describe.parallel('Selection', () => {
await assertSelection(page, {
anchorOffset: 0,
anchorPath: [0],
focusOffset: 0,
focusPath: [2],
focusOffset: 1,
focusPath: [1, 0, 2, 1],
});
});

Expand All @@ -1006,8 +1013,8 @@ test.describe.parallel('Selection', () => {
await assertSelection(page, {
anchorOffset: 0,
anchorPath: [2],
focusOffset: 0,
focusPath: [0],
focusOffset: 1,
focusPath: [1, 0, 1, 0],
});
});

Expand All @@ -1029,7 +1036,7 @@ test.describe.parallel('Selection', () => {
anchorOffset: 0,
anchorPath: [0],
focusOffset: 1,
focusPath: [1, 2, 1],
focusPath: [1, 0, 2, 1],
});
},
);
Expand All @@ -1052,7 +1059,7 @@ test.describe.parallel('Selection', () => {
anchorOffset: 0,
anchorPath: [1],
focusOffset: 1,
focusPath: [0, 1, 0],
focusPath: [0, 0, 1, 0],
});
},
);
Expand Down
Loading
Loading