Skip to content

Commit

Permalink
fix(react-tables): fix initialisation on tables on view, and copy and…
Browse files Browse the repository at this point in the history 
… paste bugs (#1705)

* fix(react-tables): inject controllers into tables that require it on first load

* fix(react-tables): prevent duplication of controller cells on copy/paste. Fixes #995

* fix(react-tables): types issue

* test(markdown): add tests for creating tables from markdown

* feat(react-tables): add a floating button to delete the table

* chore: add changeset
  • Loading branch information
@whawker
whawker committed Jul 18, 2022
1 parent 0ca634f commit e6e5cea
Show file tree
Hide file tree
Showing 25 changed files with 1,166 additions and 166 deletions.
13 changes: 13 additions & 0 deletions .changeset/three-scissors-deny.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
'@remirror/extension-markdown': minor
'@remirror/extension-react-tables': minor
'@remirror/extension-tables': patch
'@remirror/styles': patch
'@remirror/theme': patch
---

Add a customisible floating button to completely delete React tables.

Fix creating React tables from markdown initial state.

Fix copy and paste of React tables, which resulted in duplicated controlled cells.
278 changes: 278 additions & 0 deletions ...ages/remirror__extension-markdown/__tests__/__snapshots__/markdown-extension.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`commands.insertMarkdown can insert basic tables from markdown 1`] = `
<div
aria-label=""
aria-multiline="true"
class="ProseMirror remirror-editor"
contenteditable="true"
role="textbox"
translate="no"
>
<div
class="tableWrapper"
>
<table
style="min-width: 50px;"
>
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<th>
<p>
Column 1
</p>
</th>
<th>
<p>
Column 2
</p>
</th>
</tr>
<tr>
<td>
<p>
Row 1, Column 1
</p>
</td>
<td>
<p>
Row 1, Column 2
</p>
</td>
</tr>
<tr>
<td>
<p>
Row 2, Column 1
</p>
</td>
<td>
<p>
Row 2, Column 2
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;

exports[`commands.insertMarkdown can insert lists 1`] = `
<div
aria-label=""
Expand Down Expand Up @@ -124,6 +186,222 @@ exports[`commands.insertMarkdown can insert marks as blocks 1`] = `
</div>
`;

exports[`commands.insertMarkdown can insert react tables from markdown 1`] = `
<div
aria-label=""
aria-multiline="true"
class="ProseMirror remirror-editor"
contenteditable="true"
role="textbox"
translate="no"
>
<div
class="remirror-table-show-controllers"
>
<table
class="remirror-table remirror-table-with-controllers"
data-controllers-injected=""
style="min-width: 30px;"
>
<colgroup
class="remirror-table-colgroup"
>
<col />
<col />
<col />
</colgroup>
<tbody
class="remirror-table-tbody-with-controllers"
>
<tr>
<th
class="remirror-table-controller remirror-controllers-toggle"
contenteditable="false"
data-controller-cell=""
>
<div
class="remirror-table-controller-wrapper"
contenteditable="false"
>
<div />
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-mark-row-corner"
/>
<div
class="remirror-table-controller-mark-column-corner"
/>
</div>
</th>
<th
class="remirror-table-controller remirror-controllers-toggle"
contenteditable="false"
data-controller-cell=""
>
<div
class="remirror-table-controller-wrapper"
contenteditable="false"
>
<div />
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-mark-row-corner"
/>
<div
class="remirror-table-controller-mark-column-corner"
/>
</div>
</th>
<th
class="remirror-table-controller remirror-controllers-toggle"
contenteditable="false"
data-controller-cell=""
>
<div
class="remirror-table-controller-wrapper"
contenteditable="false"
>
<div />
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-mark-row-corner"
/>
<div
class="remirror-table-controller-mark-column-corner"
/>
</div>
</th>
</tr>
<tr>
<th
class="remirror-table-controller remirror-controllers-toggle"
contenteditable="false"
data-controller-cell=""
>
<div
class="remirror-table-controller-wrapper"
contenteditable="false"
>
<div />
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-mark-row-corner"
/>
<div
class="remirror-table-controller-mark-column-corner"
/>
</div>
</th>
<th>
<p>
Column 1
</p>
</th>
<th>
<p>
Column 2
</p>
</th>
</tr>
<tr>
<th
class="remirror-table-controller remirror-controllers-toggle"
contenteditable="false"
data-controller-cell=""
>
<div
class="remirror-table-controller-wrapper"
contenteditable="false"
>
<div />
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-mark-row-corner"
/>
<div
class="remirror-table-controller-mark-column-corner"
/>
</div>
</th>
<td>
<p>
Row 1, Column 1
</p>
</td>
<td>
<p>
Row 1, Column 2
</p>
</td>
</tr>
<tr>
<th
class="remirror-table-controller remirror-controllers-toggle"
contenteditable="false"
data-controller-cell=""
>
<div
class="remirror-table-controller-wrapper"
contenteditable="false"
>
<div />
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-trigger-area"
/>
<div
class="remirror-table-controller-mark-row-corner"
/>
<div
class="remirror-table-controller-mark-column-corner"
/>
</div>
</th>
<td>
<p>
Row 2, Column 1
</p>
</td>
<td>
<p>
Row 2, Column 2
</p>
</td>
</tr>
</tbody>
</table>
<div />
</div>
</div>
`;

exports[`commands.insertMarkdown does not replace marks 1`] = `
<div
aria-label=""
Expand Down

1 comment on commit e6e5cea

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://main--remirror.netlify.app

Please sign in to comment.