[lexical-playground] Feature: columns resizing in layouts plugin #6787
Conversation
harshmetkel24
requested review from
zurfyx,
fantactuka,
acywatson,
Fetz,
ivailop7,
Sahejkm and
potatowagon
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
facebook-github-bot
added
the
CLA Signed
size-limit report 📦
|
harshmetkel24
force-pushed
the
columns-resizing-in-layouts-plugin
branch
from
bd8ae28 to
1f29966
Compare
There was a problem hiding this comment.
Ideally there would be more usage of the theme rather than hard-coded classes, although perhaps a data attribute or some other identifier should be used for the cases where someone wants to use utility classes in their theme. It seems to work well enough in the cases that I tried
| <div ref={resizerRef}> | ||
| {activeCell != null && !isMouseDown && ( | ||
| <div | ||
| className="PlaygroundEditorTheme__resizer" |
There was a problem hiding this comment.
This should ideally come from the theme rather than be hard-coded here, at least according to the coding conventions elsewhere in the playground
| if (target && target instanceof HTMLElement) { | ||
| const layoutContainerNode = target.closest<HTMLElement>( | ||
| '.PlaygroundEditorTheme__layoutContainer', | ||
| ); | ||
| const layoutItemNode = target.closest<HTMLElement>( | ||
| '.PlaygroundEditorTheme__layoutItem', | ||
| ); | ||
|
|
||
| const isOutside = !( | ||
| layoutContainerNode || | ||
| layoutItemNode || | ||
| target.closest<HTMLElement>( | ||
| 'button.PlaygroundEditorTheme__layoutAddColumns', | ||
| ) || | ||
| target.closest<HTMLElement>('div.PlaygroundEditorTheme__resizer') | ||
| ); |
There was a problem hiding this comment.
These classes should come from the theme rather than be hard-coded here, at least according to the coding conventions elsewhere in the playground
|
|
||
| return ( | ||
| <button | ||
| className="PlaygroundEditorTheme__layoutAddColumns" |
There was a problem hiding this comment.
This class should come from the theme rather than be hard-coded here, at least according to the coding conventions elsewhere in the playground
|
I don't want to discourage the development of this plugin, but I think it might make more sense to have this one in a separate repo, vs inside the playground and we can list a number of other plugins people have built in the documentation. |
|
there seems to be a regression for this test: packages/lexical-playground/tests/e2e/Tables.spec.mjs:3743:3 › Tables › Paste and insert new lines after unmerging cells |
will look into this |
[lexical-playground] Feature: support to add new columns side by side and column resize
Description
Columns Layoutpromt asks to chose number of columns. But once added there is no way to add more columns or even resizing already added columns. If someone wants to change something they have to start fresh. Also there is no way to free resize columns, can only chose from predefined options.+button. This behaviour is adapted from lexical-table only. Also user's can resize columns according to their need.Closes #6740
Before
No option to add new columns or resize existing ones
After
Screen.Recording.2024-11-01.at.9.17.05.PM.mov
Now users can add more columns and resize them as well according to their need