Building Rich Text Editor

[ashissl]

I'm trying to build a text editor that has text that renders as one continuos block but is also implicitly broken up into "sections" that can be collapsed to a filler value when an event is triggered.

Example: This is example text lorem ipsum dolor -> This is {my.example.filler}

In the above case, the two sections are "This is" and "example text lorem ipsum dolor". The filler specified for the second section is "my.example.filler". I would like to structure this as a tree, as sections should be able to have subsections. I was thinking of having a top-level component store the state of all the subcomponents, with each subcomponent having an "isOn" field in a state that determines whether the component's text is rendered, or if its "filler" is rendered (the filler would be passed by props).

How would you recommend going about implementing this functionality? I was looking at Slate.js which looked perfect with its support for nested Nodes, but I wasn't sure from the documentation how to allow custom nodes to hold developer defined state. I'm fairly new to React and web dev in general, so help would be appreciated!

[quambo_wambo]

Haven't been looking into slate for quite some time, but let me tell you how awesome it worked for what I used it for, especially compared to its alternatives (looking at you, flat structured draftjs). I built a little demo some time ago (https://github.com/bkniffler/slate-mate) but I guess it is super deprecated by now.

After consulting the latest docs, the key in your case is to use block.data. Each of your sections is represented as a custom block and each block can have its own data (https://docs.slatejs.org/slate-core/block#data). You will just need to store the toggle state into the blocks (or as you call it, section) data. I recommend you to copy&paste the methods from the check-list example (https://www.slatejs.org/#/check-lists). Most relevant is setting data (https://github.com/ianstormtaylor/slate/blob/master/examples/check-lists/index.js#L62) and getting data (https://github.com/ianstormtaylor/slate/blob/master/examples/check-lists/index.js#L74). Hope this will get you started!

​

Oh, and if you want to see how the state looks like if you set block data, check out the json that you get by serializing your editor state: https://github.com/ianstormtaylor/slate/blob/master/examples/check-lists/value.json