feat: Table row/column extension UI

[matthewlipski]

This feature was sponsored by DeepOrigin 💖

Description

This PR improves a number of things related to tables. Mainly, "extend buttons" have been added 🙌:

Other features:

• horizontal scrolling if table is wider than document
• column widths after resizing are now persisted correctly (closes Table doesn't save columns width after refresh #655)

Prosemirror tables

As part of this PR, we also contributed an improvement to Prosemirror-tables: ProseMirror/prosemirror-tables#253

remaining todos

• Update e2e test screenshots
• test on safari
• resize cursor for shadcn
• test shadcn / ariakit

closes #830
closes #856

[vercel]

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

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Oct 30, 2024 10:26am
blocknote-website	✅ Ready (Inspect)	Visit Preview	Oct 30, 2024 10:26am

[YousefED]

Looks great already!! Nice.

Replies to your questions and general feedback:

Maybe change so that extend buttons only appear when hovering last row/column

Yes, I think that would be great, nice challenge to see if we can do that without making it "messy"

Naming

Yes, good idea to revisit

Misc:

• UX is clunky when width is larger than document width. I think we should make the table scrollable? Otherwise the columnwidths don't make any sense when the document width is "too small". This should also solve that resizing a column is now a weird experience when the table is too wide
• I think we need to drag to far for the add / remove to "trigger". Maybe try sth like 1/3 of width / height of the cell that will be added
• add colwidth to unit tests? (i.e.: htmlconversions and nodeconversions)
• (nice to have): drag to remove columns / rows as long as they're empty

[YousefED]

a) it looks like we set something on the state to then trigger a useEffect, that's not a very clear pattern I think
b) can't we just use the onClick handler?

[matthewlipski]

I don't think we have a choice here because we need the mousemove and mouseup handlers to be attached to the document body, because the mouse cursor is not always above the extend button while dragging. This is also why we can't use a click event, as those only fire when the same element is hovered on both the mouse down and mouse up.

[YousefED]

is this needed?

[matthewlipski]

I guess it's debatable - we use the same pattern for the table handles so maybe remove it in both cases?

[mwonng]

Hi @YousefED @matthewlipski , is this feature for drag or it is for click, it looks like a button more than a dragable handler. and when drag column (right handler) the column width is changed, is this should be keep the same?

[YousefED]

Hi @YousefED @matthewlipski , is this feature for drag or it is for click, it looks like a button more than a dragable handler. and when drag column (right handler) the column width is changed, is this should be keep the same?

both clicking and dragging works!

[mwonng]

I notice that if table column width(cell width) is undefined and drag extension button will cause width change(see video). but if you manually change the column width, it will keep it. fyi
https://github.com/user-attachments/assets/af82a154-fc27-4ae7-bc97-b471ffa3c719

[YousefED]

I notice that if table column width(cell width) is undefined and drag extension button will cause width change(see video). but if you manually change the column width, it will keep it. fyi https://github.com/user-attachments/assets/af82a154-fc27-4ae7-bc97-b471ffa3c719

Thanks, I can reproduce on Safari but not on Chrome. Which browser did you use?

[mwonng]

My video is recorded with latest Chrome(v130.0.6723.70) on windows, and i did try Safari on Mac as the same, but Chrome on Mac is good.

BTW, FireFox on both Mac and Windows are not able to load editor on locallost:5173, it keep showing 'loading'.