feat(tables): overhaul table cells

[nperez0111]

💖 This feature is sponsored by Agree.com

This PR is attempting to address the following for table cells:

• Backgrounds
• Text Color
• Alignment
• colspan & rowspan
• header cells

Screen.Recording.2025-02-20.at.14.19.23.mp4

[vercel]

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

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Feb 28, 2025 6:15pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	Feb 28, 2025 6:15pm

[matthewlipski]

I just noticed that after setting text alignment in a cell, the selection closes and formatting toolbar disappears. I don't think it's necessary to fix before merging, but smth we may want to look into next week

[nperez0111]

I just noticed that after setting text alignment in a cell, the selection closes and formatting toolbar disappears. I don't think it's necessary to fix before merging, but smth we may want to look into next week

@matthewlipski I took a quick look into this to see what we can do here, and this is what is happening here:

BlockNote/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx

Lines 104 to 115 in add526c

	editor.updateBlock(block, {
	type: "table",
	content: {
	...(block.content as TableContent<any, any>),
	type: "tableContent",
	rows: newTable,
	} as any,
	});
	// Have to reset text cursor position to the block as `updateBlock`
	// moves the existing selection out of the block.
	editor.setTextCursorPosition(block);

So, the updateBlock call is completely replacing the table content, which causes the selection to be lost in the replaceRange step. What I'd like out of this is 1 of two things, either make the selection more low-level so that we can set the position before & after to allow it to be in the same spot. Or, for the update block function to be smarter & not replace the whole range, just the "affected" porition, making a fine-grained update of the diff of the changes so that it knows it doesn't really need to mess with the selection at all. Maybe even both.

Definitely think it is out of scope for the moment

[YousefED]

had a quick glance at final state. two questions:

• example links to https://www.blocknotejs.org/docs/editor-basics/tables which doesn't exist
• did you want to simplify the types (we discussed this last week) or keep as is for now?

Also; enjoy the fun of closing all related issues 🙌🎉

[nperez0111]

* example links to [blocknotejs.org/docs/editor-basics/tables](https://www.blocknotejs.org/docs/editor-basics/tables) which doesn't exist

Whoops, meant to link to advanced tables, I renamed it somewhere

* did you want to simplify the types (we discussed this last week) or keep as is for now?

Sorry, meant to write something about why I decided not to do this atm. Basically it came down to:

• To make this change, I would have needed to de-couple the assumptions of the types that can be used for the initialContent vs. the partial (for updates) vs. the defined types. I didn't want to spend the time to work on this because it was only a reorganizing of the code that we've already validated here.
• I took a look at what this would actually simplify, and it ended up only being like 5 callsites, so I felt like it was not worth the effort to literally get less functionality for only marginally simpler code.