Is there a way to hide/show text?

[Mijawel]

I'm looking for a way to implement a Toggle Heading with Super Editor (similar to how Notion does it)

Here is an example:

Is there anything already built into Super Editor that could do that?

Otherwise I have heard things about inline widgets (if anyone could link me to a clear example of implementation that would be great). Maybe I could insert an IconButton at the start of the Node and then insert/remove the desired text into the node index below.

[jmatth]

I have this implemented in my app but it wasn't easy and involves some pretty extensive modifications to the default super_editor layout code. I'd be curious to hear about any ways others have accomplished a similar UI.

For my approach, the code that needs to be changed is in SingleColumnDocumentLayout. This is the default (and as far as I'm aware only) included document layout, and it just builds the document components + arranges them sequentially in a Column. I modified this to instead build a tree of Columns + ClipRects and animations to hide or show document sections. I also had to modify the code that looks up node offsets to understand that nodes can be present in the document but might not be rendered on the screen.

Since I don't want horrible git conflicts when pulling super_editor updates into my fork, I instead copied the SingleColumnLayout code into my app's repo and made the changes there (closed source, sorry). Back in my super_editor fork, I added a parameter to the SuperEditor constructor: documentLayoutBuilder. This is a builder function that by default returns a SingleColumnDocumentLayout, but I override it to use my modified layout instead.

The current version looks like this. The gutter controls and drag-and-drop system you see are also implemented in my modified SingleColumnDocumentLayout.

2023-05-11_10-55-48.mp4

[Mijawel]

Very impressive!

[alterhuman]

@jmatth This is great!

If possible could you share just the drag drop logic? My app has no link or similarity to bringing fire at all. It's an education app. I'll keep the code closed source & not share it further if you want.

If even that's not possible, could you give me a starting point?

[jmatth]

@alterhuman my modified document layout wraps each document component with some additional widgets: a row to place the gutter controls to the left, and a stack to place drop handlers. Here's a screenshot with borders and tint applied so you can see the various parts:

• The grey boxes enclose each child widget in the Column that makes up the document layout
• The amber boxes enclose each component widget as returned from the first matching ComponentBuilder
• The cyan boxes enclose the gutter controls next to each component
• The red tinted area is the top padding for each component
• The green tinted area is a DragTarget positioned over the top half of each component in a Stack
• The blue tinted area is a DragTarget positioned over the bottom half of each component in a Stack
• Each widget in the column also has two 2px high boxes to act as drop target indicators, one at the top and one at the bottom. These fade in when a block is hovering and might be dropped. To prevent weird visual artifacts, the divider at the bottom of each widget also has a FractionalOffset of 1 in the y axis, so it perfectly overlaps with the divider of the block after it

The dragging is initiated from a normal Draggable widget in the gutter. After a drop takes place the id of the dropped block is added to a set of node ids that are pending animation, and then the nodes in the document are reorganized. On the next frame the component for the repositioned node sees it has a pending animation and starts its on-appear animation, then removes its id from the pending animations list. That logic is all there so nodes only animate their appearance when reorganizing, not when loading the document for the first time, adding a new paragraph, etc.

One oddly difficult part of the whole process is creating the Draggable feedback widget. Super Editor uses global keys for its components, so putting the same widget in the feedback caused an exception from using a global key in two places. I ended up adding some parameters to the functions that build the components so I could specify temporary dummy keys when constructing the drag feedback.

[alterhuman]

@jmatth thank you so much for this. This is very detailed, would've taken weeks to figure this out on my own. I'm gonna try and implement this. Thanks again.