[lexical-playground][lexical-react] Feature: Push Draggable Element to Parent

[sescandell]

Description

Allows passing a function to receive the DOM element identified by the DraggableBlockPlugin.

An example application of this is the addition of a "+" button that allows the creation of a block above the identified one. This feature is particularly useful in the playground, as it allows adding a new block at the top of the page without having to drag and drop, for example.

Test plan

Before

After

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 17, 2025 8:43pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 17, 2025 8:43pm

[etrepum]

This implementation looks good but I think it might make sense to mirror Notion's UI and have the default behavior for this button be insert after rather than insert before.

[ivailop7]

+1 on Bob's comment for "insert after" I'd even go as far and say it even makes sense to render the component picker menu for the user to select any widget, not just a paragraph.

[sescandell]

This implementation looks good but I think it might make sense to mirror Notion's UI and have the default behavior for this button be insert after rather than insert before.

I just pushed an update based on your comment. I replicated Notion's behavior: by default, the new node is inserted after the current one. If you press the Cmd (or Ctrl) key while clicking, it inserts the new node before the current one.

+1 on Bob's comment for "insert after" I'd even go as far and say it even makes sense to render the component picker menu for the user to select any widget, not just a paragraph.

I completely agree! However, there isn't a ready-to-use "component picker" at the moment. The existing one is tightly coupled with the typeahead plugin, so extracting it or duplicating some of its code would be necessary.

I'm not sure how to easily create a "menu" within the playground next to my button. Maybe we could tackle this in a separate PR?

[etrepum]

I agree that it makes sense to handle the dialog in a separate PR. It is basically the same interface as the / typeahead if following notion's UX. The block paragraph is created eagerly anyway, so the menu would just be a state change that happens after this behavior.

Any reason why you chose cmd-click instead of opt-click like Notion?

[sescandell]

Any reason why you chose cmd-click instead of opt-click like Notion?

I just used the same as in FloatingLinkEditorPlugin: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx#L369
I can change it. What is "Option-Click"?

[etrepum]

Option is the Mac equivalent of the Alt key https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey

[ivailop7]

Can I pitch shift+click on Windows, which always made more sense to me for such actions.

[etrepum]

We should maybe do whatever notion does by default since that UI is inspired by it. I don’t have a windows machine around to see what the keybinding is there

[sescandell]

Notion is using the AltKey on windows... which seems... unnatural for me. But I'm not a big user of notion.

I changed for the option command. Let me know if you want to change for the AltKey on Windows

[sescandell]

@etrepum Sorry... careless mistake. Thanks for the correction!

[etrepum]

LGTM! Nice job