Fix copy table related issues #169
Conversation
…ghtCellIssues Feature/20240119 table row height cell issues and page collapse issue caused by copied table fix
🦋 Changeset detectedLatest commit: 815d607 The changes in this PR will be included in the next version bump. This PR includes changesets to release 23 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
packages/deserializer/src/html.ts
Outdated
| const children = node.children; | ||
| for (let i = 0; i < children.length; i++) { | ||
| const child = children[i]; | ||
| if (child.nodeName === 'TABLE') { |
There was a problem hiding this comment.
那如果table里面还有嵌套的table呢？这里是只考虑了一层嵌套关系吗？
packages/deserializer/src/html.ts
Outdated
| newCell.setAttribute('colspan', '1') | ||
| newCell.setAttribute('rowspan', '1') | ||
| // 设置当前newCell的文本为displaynone | ||
| newCell.textContent = 'displaynone||||||' + rowIndex + '||||||' + cellIndex |
There was a problem hiding this comment.
这里太hack了，其实我没太看懂这里把合并行和列拉平的用意
There was a problem hiding this comment.
这里需要补充原始html缺失的单元格来满足当前的数据结构，这个缺失的单元格需要加一个标识让后续展示的时候有一个可识别的内容来告诉editablejs这部分需要隐藏展示，也就是对应后面的这段隐藏逻辑，
There was a problem hiding this comment.
或者你那有好的思路，也可以参考下
我提交了一版，整体包含了我的思路，我这儿没有测试数据。你可以先帮忙测试看看。
There was a problem hiding this comment.
或者你那有好的思路，也可以参考下
我提交了一版，整体包含了我的思路，我这儿没有测试数据。你可以先帮忙测试看看。
我测试了基础的表格复制粘贴也不行，没有rowspan或者colspan的无法复制，
或者你那有好的思路，也可以参考下
我提交了一版，整体包含了我的思路，我这儿没有测试数据。你可以先帮忙测试看看。
我这运行报错了，复制部分表格的时候slate报错了，复制全部表格的时候，表格样式丢失了
部分表格：
全部表格：
测试数据参考截图，也可以多增加一些colspan 和rowspan，在里面输入回车看是否可行
Description
When we tried to use this library on our project, we encountered some issues, so I temporarily fixed them through some scripts, here comes the issues.
The following issues have been fixed: Page collapse issues caused by copied table:
Issue
Fixes: (link to issue)
Example
before
after
before
after
before
after
before
after
before
after
Context
1: The raw HTML for the table, it will not display an empty dom cell for colspan or rowspan that is greater than 1, but just reduce the corresponding number of the cell. But in editablejs, the table will render every one of the cells even if it may ignored by the raw table. My solution is to fill the missing cell, calculate each line's colspan and rowspan, and if it is greater than 1, add another td empty element with displaynone||||||, so when displaying the cell, it will also need to check if it contains displaynone|||||| to hide that cell. Once the data structure works fit to editablejs, it works fine.
2: TH works as a cell, so just need to remove- it from TR to TD. So TH will work as expected.
3: Calculate the total cells of the first row of the table, when it comes to the final line of the table, check if the cell number fits = the same as the first row, if not, patch the missing cell.
4: when copying content into editablejs, its data structure didn't match what the editablejs requires, for it missing another wrapper outside children, it should be wrapped by children with children as the first element.
5: When dragging columns, it didn't update the height of the left border cell, however height of cells might update, whether gets smaller or higher. So it should recalculate the left border's height.
6: If the table has been wrapped inside by colgroup, it will auto-set each cols' with to 0 which finally causes column's width to 0, so what should be done is to check if there are any colgroup inside each table, and to reset each column's width to offsetWidth
Checks
pnpm test.pnpm lint. (Fix errors withpnpm fix.)pnpm start.)pnpm changeset.)