Feature/20240119 table row height cell issues and page collapse issue caused by copied table fix #1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
When we tried to use this library on our project, we encountered some issues, so I temporarily fixed them through some scripts, I'd like to share it.
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.)