SlateJS and folding

[mkoskim]

Hi!

Background: I have been developing an editor for writers:

https://github.com/mkoskim/mawejs

If you have general questions or feedback, there is already a thread in discussions:

• MaweJS (MAWE, Mawe Advanced Writer's Editor) with SlateJS #5739

---

Subject: The document is divided to three level tree: acts, chapters and scenes. You can move them around with D'n'D. You can split text by issuing a "break" (act header, chapter header or scene header). Unlike regular structured editors like Scrivener or Manuskript, my approach is that the entire story is editable at once, like in OpenOffice, Word or Notepad. SlateJS is perfect for this, because it can be used to edit structured content.

One of the features I really like to have is folding. When working with certain parts of your story, you can fold unnecessary acts, chapters and scenes "invisible", which greatly decreases the amount of text in the screen. It also compresses the index, which makes working with long texts easier.

So far I have implemented folding entirely at CSS level. Folded elements are attached with folded class:

https://github.com/mkoskim/mawejs/blob/master/src/gui/slatejs/slateEditable.js#L101

...And that class causes parts of the content to be hidden:

https://github.com/mkoskim/mawejs/blob/master/src/gui/common/styles/sheet.editor.css#L160

---

Problem: Implementing folding at CSS level means that even though the containers (act, chapter, scene) are invisible, they are still rendered to React components. This greatly increases the initial render time, when loading a file or switching back to editor view from some other view (story arc view, statistics view, export view).

If you like to try it out, there is an example file mawejs/examples/performance/Performance1.mawe to observe the initial rendering time.

I have made alternative folding implementation. In this implementation, element children are stored to data field when folding, and back to children when unfolding. See branch "FoldImprovement":

https://github.com/mkoskim/mawejs/tree/FoldImprovement

This implementation works, but it makes everything else quite complex and fragile, because the document is not stored as it is, but how we like SlateJS to render it. I once had bit similar implementation (for other reasons) and I was very satisfied when I managed to get SlateJS and other parts of the editor (index, story arc view, ...) to work with the same data structure.

---

Questions:

Main question is that does anyone have any good links or tips, how to implement folding with SlateJS? Or suggestions how to make it?

Is it possible to somehow tell SlateJS that it does not have to render some invisible parts of the document?

I know that the possibility is to "preprocess" the document before giving it to SlateJS to render. But this may affect rendering performance, and it will happen every time user presses a key. Furthermore, it would make doc updating quite complex, as you would need to map the changes back to the original document (been there, done that).

As the problem is mainly initial rendering, I would be interested also in asycnhronous rendering solutions. I know those are also quite complex, but I could look them to get some new ideas for implementing folding.

Thanks in advance! If you have any questions or comments, feel free to ask, I can give more direct links to implementation details.

[mkoskim]

I was playing around and for my surprise, you don't need to render all the node children. So, I made custom container rendering, which renders only the heading element, if it is folded:

https://github.com/mkoskim/mawejs/blob/9b8c446181f00b0668ed0fdfdcb473e3490ce6ad/src/gui/slatejs/slateEditable.js#L89

It greatly increases the editor performance, if you have folded large parts of it. It looks like it is working, although the cursor is still lost to folded parts if you use left/right arrows.