Unable to format Table properties in TinyMCE #2831

Open
opened 2026-02-05 05:22:58 +03:00 by OVERLORD · 6 comments
Owner

Originally created by @radarsymphony on GitHub (Jun 7, 2022).

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

image
image
image

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.

Originally created by @radarsymphony on GitHub (Jun 7, 2022). ### 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 ![image](https://user-images.githubusercontent.com/73671474/172433706-a5a578ac-b6dc-47cc-af63-9b990c7b1a80.png) ![image](https://user-images.githubusercontent.com/73671474/172433884-d97cd866-15d5-4a45-9e76-a9f7ffc393e8.png) ![image](https://user-images.githubusercontent.com/73671474/172437505-904dd658-cd4b-4062-81f6-799260a41660.png) ### 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.
OVERLORD added the 🐛 Bug🎨 Design💻 Front-End labels 2026-02-05 05:22:58 +03:00
Author
Owner

@radarsymphony commented on GitHub (Jun 7, 2022):

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.

@radarsymphony commented on GitHub (Jun 7, 2022): 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.
Author
Owner

@ssddanbrown commented on GitHub (Jun 8, 2022):

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.

@ssddanbrown commented on GitHub (Jun 8, 2022): 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.
Author
Owner

@radarsymphony commented on GitHub (Jun 8, 2022):

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

@radarsymphony commented on GitHub (Jun 8, 2022): Thank you for your quick response and investigation, @ssddanbrown. I appreciate the thought you put into your code.
Author
Owner

@radarsymphony commented on GitHub (Jun 17, 2022):

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.

@radarsymphony commented on GitHub (Jun 17, 2022): 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.
Author
Owner

@xPakrikx commented on GitHub (Jun 21, 2023):

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

@xPakrikx commented on GitHub (Jun 21, 2023): Weirdly enough, looks like rows just keeps expanding in row height. So for me tables are not usable at all under wysiwyg editor
Author
Owner

@govind2020 commented on GitHub (Jan 17, 2024):

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

@govind2020 commented on GitHub (Jan 17, 2024): 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
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#2831