SlateJS: Blocks and their breaks/headers

[mkoskim]

One thing that is unique to SlateJS as an editor component, is that it can easily work with hierarchial data. But there is a caveat there. If you make div's, they are invisible in the editor. Everything SlateJS understands need to have text - and in fact, it needs to be a paragraph, a block of text.

Rules for grouping: SlateJS needs rules, how to make groups. One easy example are lists (numbered or bulleted). If you have a li type paragraph, you can wrap it to ul or ol div, and if you have consecutive blocks, you can merge them together. So, with certain paragraph type you can make groups.

Blocks: MaweJS has three block levels: acts, chapters and scenes. So, how we can determine, which paragraphs belong to which block? By using breaks.

Breaks: MaweJS have three different break type paragraphs: hact, hchapter and hscene (h stands as a header). These breaks split the blocks. You can normally omit the first break - you just need to separate the blocks from each other. This makes some complications inside the code, as you need to know, if the block's first child is a break or not.

Block attributes: As the blocks are invisible in the editor, there is no good way to edit their attributes with SlateJS. You need to make any editable attribute to text somehow.

That's why at the moment block breaks (headers) are parsed for attributes. These attributes are then set to the break node, and they are then copied to the block itself.

---

See:

• Break/header element parsing: https://github.com/mkoskim/mawejs/blob/master/src/gui/slatejs/slateEditor.js#L551
• Attribute copy to the block: https://github.com/mkoskim/mawejs/blob/master/src/gui/slatejs/slateEditor.js#L561

---

Related issues:

• Study: Combine consecutive comments / synopsis to blocks #268 - make comments and missing text as list-type blocks.
• Study: Metablock? #223 - currently, I use paragraph style as a break, but that is not mandatory. We might have a "meta block" as a break, containing all sorts of information (name, synopsis, comments, target word counts, tags and so on).