Unable to format Table properties in TinyMCE

[radarsymphony]

Describe the Bug

Hi Dan,

Thank you for this amazing app!

I think I've found a bug with the tinyMCE editor integration. When editing a table using the tinymce editor, the user is presented with the option to set table properties, for example the gridline color. This color is applied to the table HTML/CSS in Bookstack but appears to be over-written by other Bookstack-related CSS rules. To confirm expected behavior, I verified that colors are rendered to table gridlines in the demo editor here https://www.tiny.cloud/

Steps to Reproduce

1. Start fresh container without custom data or edits.
2. Using Firefox/chromium private window, login.
3. Enter into a test Shelf > Chapter.
4. Create new page. (with tinymce editor)
5. From editor, insert new Table.
6. Highlight table and select table properties option.
7. Click Advanced.
8. Select border color.
9. Click Save.
10. Visually inspect table for new color.
11. Save new page.
12. Visually inspect rendered page for color.

Newly added table gridline color is not displayed.

Expected Behaviour

I am expecting that the table shows the new color selection for the gridlines like it does in the tinymce demo page. Let me know what else I can to do to help clarify the issue.

Screenshots or Additional Context

Browser Details

Mozilla Firefox 101.0, Chromium 102.0.5005.61 Arch Linux

Exact BookStack Version

v22.04.2

PHP Version

PHP 8.0.18

Hosting Environment

Using tiredofit/bookstack image, behind traefik proxy.

EDIT: made the issue a bit more general to include other Table properties as well.

[radarsymphony]

I just realized that the issue may affect other table formatting options as well. For example, changes to border width or cell padding are not rendered in Bookstack, but are in the tinyMCE editor demo.

[ssddanbrown]

Thanks for reporting @radarsymphony.

From my testing, this seems to be more due to our CSS reset border rule that applies to most elements, including table elements. There's a lot of funky stuff going on here, due to the TinyMCE using the old border attribute for border width and how that inter-plays with border css rules, style inheritance and border-collapsing.

Should just be a case of not applying the CSS reset border rule to table elements, to allow their natural inheritance behavior, but needs some thought about how significant such as change may impact existing content.

[radarsymphony]

Thank you for your quick response and investigation, @ssddanbrown. I appreciate the thought you put into your code.

[radarsymphony]

Our team found a workaround for applying formatting to borders. Rather than trying to edit the Table properties, drag-selecting the whole table and editing the Cell properties allows a user to achieve similar results.

1. Drag-Select the Table (or a section of it).
2. Click on the Table option menu located across the top menu.
3. Click Cell.
4. Click Cell Properties.
5. Click on Advanced tab.
6. Click on border, color, etc. to edit the formatting of the selected Cells.

This approach creates a similar effect, though it is less intuitive for users.

[xPakrikx]

Weirdly enough, looks like rows just keeps expanding in row height. So for me tables are not usable at all under wysiwyg editor

[govind2020]

can I add new properties in Cell properties of Table eg:- there is General and Advance and I want to add any New . can we do this? like customization