How do I make tables better for editor in TinyMCE?

Tables in tinyMCE are a terrible editor and developer experience, how can we configure these better for editors to work well with tables created by frontend?

Additional Posts

There are some tinyMCE config settings that we can set to prevent some of the default table behavior that make tables hard to work with. Here's an example of some settings we did on GCB for a very specific table:

• Toolbar buttons: tablerowprops and tablecellprops give editors a quick way to open cell or row properties to for instance change a cell or row to a header cell/row

.Toolbar("table tablerowprops tablecellprops | anchor epi-link unlink | bold italic superscript charmap abbr acronym | paste pastetext | removeformat code | shortcode")

• Invalidate element attributes: invalid_styles will work for any element within this rich text editor, but in the context of a table these attributes will not be allowed which prevents inline styles and widths being added when interacting with a table. I believe you can also use table[style] syntax to invalidate attributes for a specific element.

.AddSetting("invalid_styles", "style width height border")

• Force table class on add: As long as there is no border set (the above will make this true), this setting applies the configured class every time a table is added to the rich text editor

.AddSetting("visual_table_class", "table rate-comparison-block__table")

• Additional table classes: The following gives the editor additional table class options in the table properties window. Note that this will add the selected table class to the visual table class set above

.AddSetting("table_class_list", new[] { new { title = "None", value = "" }, new { title = "Default", value = "table" }, new { title = "Bordered", value = "table table-bordered" }, new { title = "Disclosure", value = "disclosure-table" } })

• Here are some other settings that I set for the default config to reduce clutter for editors https://www.tiny.cloud/docs-4x/plugins/table/

.AddSetting("table_appearance_options", false)
.AddSetting("table_advtab", false)
.AddSetting("table_row_advtab", false)
.AddSetting("table_cell_advtab", false)
.AddSetting("table_responsive_width", true)
.AddSetting("table_default_attributes", new { })