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.

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

feat: Table cell/column widths in API #856

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

matthewlipski
Copy link
Collaborator

You can already resize table cells in BlockNote, but these use premade TipTap nodes and so their widths are not really accessible to get/set via the BlockNote API. This PR modifies the typing of TableContent so that you can now read and update table cell widths. Additionally, it fixes a small bug that was preventing the cell widths from being parsed correctly.

The changes I made are based on #846, but I don't have push rights to that remote repo so this PR replaces that one.

Closes #655

When resizing a table, prosemirror changes the colgroup's col widths without transmitting this data to the table nodes. This is related to [this issue](#655). The fix consists of listening to the mouse up event and checking for a change in any of the columns from prosemirror. If there is a change that should affect a cell, we update the cells of the table. This will re-render the table. We persist the width information in a property for the node. Thus we had to change the typing of cell contents.
Copy link

vercel bot commented Jun 20, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Jun 20, 2024 9:34pm
blocknote-website ✅ Ready (Inspect) Visit Preview Jun 20, 2024 9:34pm

Copy link
Collaborator

@YousefED YousefED left a comment

Choose a reason for hiding this comment

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

Hmm, downside is that this would break all existing documents stored right? Let's think a bit more about backwards compatibility before merging this

@halimt92
Copy link

Hmm, downside is that this would break all existing documents stored right? Let's think a bit more about backwards compatibility before merging this

If you guys use a minWidth of 100px and change the minWidth of the paragraphs instead of the width, it would not affect the existing tables right @YousefED ?

@matthewlipski
Copy link
Collaborator Author

matthewlipski commented Jun 26, 2024

Hmm, downside is that this would break all existing documents stored right? Let's think a bit more about backwards compatibility before merging this

If you guys use a minWidth of 100px and change the minWidth of the paragraphs instead of the width, it would not affect the existing tables right @YousefED ?

It's not quite that simple - the width of the table cells was/is already stored within TipTap's TableCell node, this PR is more about exposing that to the BlockNote API so the widths are preserved when saving and loading the doc. But because we're adding a width to table cells in the API, the type definition of CellContent needs to be changed and so existing documents with the previous CellContent type definition will break.

@matthewlipski
Copy link
Collaborator Author

Also just to add, it is a good point that cells should have a minimum width (should be able to extend the TableCell node with addAttributes to do that), and we should make sure to do that before merging because right now it makes the UX pretty janky.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Table doesn't save columns width after refresh
3 participants