search

payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
23.58k stars 1.5k forks source link

Table Overflow in Lexical #8036

Open GermanJablo opened 4 weeks ago

GermanJablo commented 4 weeks ago

Link to reproduction

https://github.com/payloadcms/payload

Environment Info

Payload: 3.0.0-beta.94
Node.js: 20.17.0
Next.js: 15.0.0-canary.104

Describe the Bug

Incorrect behaviors

Having tables overflow is a mistake, as their content can conflict with other elements of the interface, as is now happening in Payload.

cleanshot_2024-08-27_at_14 59 58

Another incorrect behavior is the one that occurs in the Lexical Playground, where if the table is too large, the entire editor becomes larger. The horizontal scroll bar is not placed over the table, but over the entire content.

image

A half-way solution

A super quick way to fix overflow is to add a max-width of 100% to the table.

The problem is, as this user noted, that this creates conflicts with the column width property.

This is what OneNote does and I've always hated it. Sometimes columns resize in a magical or hard-to-understand way. It's better to give the user the flexibility to adjust column widths to their liking and to have overflow if needed.

The correct solution

The correct solution to this is for tables to have an overflow scroll independent of the rest of the editor, similar to what Notion does:

image

The problem is that the <table> tag doesn't support overflow: scroll. A div is needed to wrap it.

There is an issue opened on Lexical with recent movement about this Issue: https://github.com/facebook/lexical/issues/6480

The solution will have to be:

Reproduction Steps

It can be reproduced anywhere with a Lexical editor. But the problem is more evident when there is a field with a sidebar position as in the image, since the elements overlap.

  1. npx create-payload-app@beta --use-pnpm -t website
  2. pnpm install
  3. pnpm dev
  4. Go to a page at http://localhost:3000/admin/collections/pages
  5. Create a table with multiple columns or resize them to take up a lot of space

Adapters and Plugins

No response

GermanJablo commented 5 days ago
  • Create a new ElementNode called TableWrapper or something like that.
  • Use DecoratorElementNode if this PR ends up being approved: https://github.com/facebook/lexical/pull/5981
  • Use a DecoratorNode. Inside, you could use a nested lexicalEditor that only contains a table,

I have no faith that option 2 will ever materialize, and even then I don't think it would be the best option.

A DecoratorNode would introduce quite a bit of complexity (nested editors, new boundaries in the selection, problems with the undo manager, etc.).

I think the best thing to do would be to add a TableWrapperNode of type ElementNode which renders as a div.

We could easily force the schema in a backwards-compatible way using lexical transforms.

If the Lexical team agrees with the solution and is interested, I will implement it in their repository, if not, I will do it in ours.

What do you think, @AlessioGr?

denolfe commented 3 days ago

Should we close this @GermanJablo ?

GermanJablo commented 3 days ago

not yet. The linked PR is a temporary solution. But I'm campaigning to finish this soon