Hi! I’m trying to create a draggable handle next to all blocks in my document. To do this, I want to wrap all blocks in a parent div laid out like this:
<div class="wrapper"> <div class="handle>...</div> <div class="content">Block content goes here</div> </div>
There are three ways I can think of handling this, but I’ve run into problems with each of them.
The first thing I tried was using decorations. If I apply a Decoration.node to all blocks and pass a
nodeName in its spec, then I can create a wrapping node. However, this appears to only let me create a single wrapping node, not the hierarchy described above.
The second option I tried was to create an
outerBlock type which renders the hierarchy shown above and whose schema contains exactly one
block, then change my document schema to contain one or more
outerBlocks. This mostly works, but breaks things like Enter inserting a line break, since it tries to break the parent node (a
block) when it now needs to break the grandparent node (
The third option I considered was to change all my block node types to render the hierarchy shown above. This feels inelegant since I would need to manually add this to every block node (which in my case is quite a few — I’m using TipTap, so ideally I’d like to do this in a way that won’t require adding code to every extension I use).
Is there a more elegant solution to this problem? If not, which of these options do you think would be the best direction to go?
Thanks for your time!