search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
26.69k stars 2.23k forks source link

[Bug]: Issue with Table Responsiveness Discrepancy between Editable and Read-Only Modes #4872

Open Ahsan-Ullah1871 opened 7 months ago

Ahsan-Ullah1871 commented 7 months ago

Which packages did you experience the bug in?

@tiptap/extension-table

What Tiptap version are you using?

2.2.2

What’s the bug you are facing?

Problem Description:

I am encountering an issue related to the responsiveness of a table, particularly when transitioning between editable and read-only modes. In editable mode, I can successfully create a long table that is responsive and allows for horizontal movement. However, upon switching to read-only mode, the table loses its responsiveness, and horizontal scrolling becomes unattainable.

Details:

Upon closer inspection, I have identified a key difference in the HTML structure between editable and read-only modes. Specifically, in editable mode, a div with the className "tableWrapper" precedes the table tag. This div includes a crucial CSS property for overflow, contributing to the responsive behavior of the table. However, in read-only mode, this div with the className "tableWrapper" is absent, leaving the table unresponsive.

Problem Screenshots:

Editable Mode (Table) Editable Mode (DOM Element)
Image 1 Image 2
Read-Only Mode (Table) Read-Only Mode (DOM Element)
Image 3 Image 4

Question:

I am seeking guidance on how to make the table responsive in read-only mode. Is there a method to enable the presence of the div with the className "tableWrapper" when the table is in read-only mode? Alternatively, are there other approaches to ensure the responsiveness of the table in read-only mode?

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

The expectation is that the table should demonstrate consistent responsiveness across both editable and read-only modes. Users should be able to horizontally scroll through the table content even when in read-only mode.

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

Nice-PLQ commented 1 month ago

the same problem too

nperez0111 commented 1 month ago

This is to do with column resizing: https://github.com/ueberdosis/tiptap/blob/ce141c2e69ddc47c29658b9a6ad4ee16607774bb/packages/extension-table/src/table.ts#L434 One workaround mentioned has been to render the editor in editable mode and then turn off editable with editor.setEditable(false) (as per https://github.com/ueberdosis/tiptap/issues/5365#issuecomment-2266652338)

Tables are difficult to get right, we hope to improve them in a v3

Nice-PLQ commented 1 month ago

This is to do with column resizing:

https://github.com/ueberdosis/tiptap/blob/ce141c2e69ddc47c29658b9a6ad4ee16607774bb/packages/extension-table/src/table.ts#L434

One workaround mentioned has been to render the editor in editable mode and then turn off editable with editor.setEditable(false) (as per #5365 (comment)) Tables are difficult to get right, we hope to improve them in a v3

thanks for your help @nperez0111