How to create a Notion-like Toggle Plugin?

[gutenye]

Like below. Would love to see an example made into Playground. Thanks

Kapture.2022-04-18.at.10.50.00.mp4

[zurfyx]

That's an interesting one! The implementation is really attached to its requirements. For example, can it have siblings? How should text deletion work?

In the case of Notion it seems like it it behaves very similarly to ListNode so I can see two approaches:

ElementNode

The most accessible and cross-front-end framework approach is to write your own ElementNode that displays the arrow, has some padding and some TextNode inside it.

The ElementNode afterInsert will render these hidden item nodes, and the arrow click handler will change their visibility (rather than create-delete that would not show in the EditorState and would be bad for export and collab)

DecoratorNode

DecoratorNode is not necessarily a bad approach is there's lots of custom CSS involved. In the case the DecoratorNode would handle the handle the first line and the arrow and would render another editor inside it.

---

Opened #1841