A deep dive into the unresponsive Text Table issue

Bugs & Issues
1

Issue

Tables are (in my experience) as good as useless in Fibery, since they require manual sizing of columns, its impossible to set a table as auto-width inside the rich text editor to keep text visible.

I tried to override with CSS, but that does not work - the reason is that ProseMirror re-renders the DOM on state changes. Here is my recommendation:

TLDR for Devs

Fibery developers should extend the prosemirror-tables schema to include user-defined attributes like maxWidth (e.g., 100%) and columnWidths. Implement a UI panel for users to set table dimensions and toggle horizontal layouts for react-beautiful-dnd integration. A custom plugin should dynamically update table nodes based on user inputs, preventing overflow. Use setComputedStyleColumnWidths from prosemirror-tables-sections to sync widths with the editor container, ensuring responsiveness without scrollbars, as recommended by community discussions. Key References: ProseMirror Tables, Table Resizing Discussion

Research results

ProseMirror Table Handling Overview

What ProseMirror Does

  • Uses prosemirror-tables plugin
  • Renders tables as HTML <table> elements
  • Schema: table, table_row, table_cell nodes
  • Supports rowspan, colspan, cell selection
  • Applies inline styles (e.g., width) dynamically
  • Re-renders DOM on state changes
  • Source: ProseMirror Tables Module

Issues Reported Online

Community-Suggested Solutions (Non-CSS)

  • JavaScript-Based:
    • Custom plugins to adjust table widths dynamically
    • NodeView for custom table rendering
    • Fork: prosemirror-tables-sections for dynamic column width adjustments
    • Commands: setComputedStyleColumnWidths to sync with computed styles
    • Example: Plugin to monitor viewport, resize tables
      const responsiveTablePlugin = new Plugin({
  filterTransaction: (transaction, state) => {
    if (transaction.docChanged) {
      // Logic to adjust table node attributes based on viewport
    }
    return true;
  },
});
    • Sources: Tables Sections, Table Support Issue
  • Schema Adjustments:
    • Modify table schema to support responsive attributes
    • Add attributes for dynamic width control
    • Source: Table Resizing Discussion

Official ProseMirror Solution

  • No native responsive table support
  • prosemirror-tables provides basic table functionality
  • Official docs recommend plugins/NodeView for advanced control
  • Source: ProseMirror Tables Module

Why CSS Overrides Fail

  • Inline styles from ProseMirror/React override external changes
  • Dynamic DOM re-rendering discards modifications
  • Source: Table Width Discussion

Key References