search

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.89k stars 381 forks source link

feat: persist table column resize #846

Closed halimt92 closed 1 week ago

halimt92 commented 2 weeks ago

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.

We understood that the issue is that we are not able to manipulate the prosemirror table as it gets re-rendered on any change. That is why we manipulate the cell contents instead, and set their width with respect to changes from prosemirror.

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.

The only downside of this fix is the loss of UI feedback when resizing down the width of a column (although on mouse up the resize does work)

vercel[bot] commented 2 weeks ago

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

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Jun 16, 2024 4:25pm
vercel[bot] commented 2 weeks ago

@halimt92 is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

halimt92 commented 2 weeks ago

@matthewlipski @YousefED Greetings.

My team and I are testing the library, and we encountered a blocker (basically the issue that I linked to the PR).

Basically our aim is to add images in tables, but without being able to resize, that would be pointless.

I was able to fix it using the method described above, however, I am still new to this library and new to prosemirror, therefore I am not sure if this is the approach that you like to take regarding this issue.

Cheers.

matthewlipski commented 1 week ago

Thanks for your submission! The code is a great start point, and after checking it out I found that a lot of the code can be simplified without losing functionality. Unfortunately I don't have push rights to your repo, so I just branched off of this and made #856 to make things easier. Closing this PR since #856 contains the same commits and more.

halimt92 commented 1 week ago

@matthewlipski thanks for your feedback, it's good to know that we understood the concepts well! I will continue proposing new PRs whenever we find limitations that we encounter in the future.

Cheers