Instructions & ideas about drag & drop of non inline nodes

[oskar-szwajkowski]

Hi everyone,

After working time with utilizing Draft.js as main editor, I have achieved there some behavior, that is not out of the box in there, and now wondering how could I do them in lexical, which should be more extendable and flexible, but I cannot figure it out.

What I have now in Draft.js, and how I have done it:

• Draft.js has a notion of DraftBlockRenderMap, which I have overriden, passing custom wrapper that wraps each block in element that has drag handle, and can be dragged only by this handle, this works pretty good, as I am saving block key on drag start, on drag over I am saving block key which let me show drop lines under each block, and then on drop I am moving dragged block in content block array to reflect operation
• Actually I am using this wrapper 2 times, inner one is for showing number of custom comments (done as entities there) per block by using css counters in each block's wrapper, outer one is done because of dragging functionality

To sum it up, I believe that this wrapper thing was usefull, and I am trying to somehow reflect it in lexical, but without success.

In lexical:

• When passing extended ParagraphNode, but without changing its type, we get error from editor's core that it has already been registered and class do not match, so it prevents us from doing custom wrapper node which could wrap f.e. paragraph in some draggable element (ideally it would be able to render React component, to use something like react-beautiful-dnd and wrap Node in <Draggrable />
• I am trying to register node transformer, and if node is NOT inline and do not have draggable child yet, injecting child into it, which is positioned relative on the left of paragraph, rendering drag handle
  Then this drag handle on drag start is saving node key into dataTransfer, and then on drop listener reads it, and reads not that has been dropped into, to figure out where to place dropped block (searching nearest drag handle, as rendered nodes does not contain any HTML attribute with node key and selecting during dragging returns null (or previous value)
• Also when having this drag handle as child, not as wrapper, will prevent detecting drag over and displaying drop helper line over/under paragraph

I am mentioning paragraph, but in my mind I see it as all non inline nodes, good example of those behaviors is notion.

I know that there is a task scheduled for future, but I have such requirements now, and as I am hiting limit of Draft.js (would need some collaboration capabilities in future etc.) I am thinking about switching either to lexical, or Slate, and researching capabilities

I have written some of it there #2115 , but felt like it deserves its own discussion

If you have any idea how to solve this in current stage, I would appreciate any answer, from my point of view overwriting ParagraphNode (and all non inline nodes) with ones that could render custom React components, and then as children rendering original nodes, would do, but I do not see that option in current implementation of lexical.