Slate

React framework for building rich text editors. Links: Great docs

16 flashcards · Programming Languages · by lakesare

1. How can we get our Editor.props.state from JSON?

   Raw.deserialize({ nodes: [] })

2. What is Editor.props.schema for?

   Lets you specify how to render each different type of node

3. What Editor.props.schema consists of?

   { nodes: Object, marks: Object, rules: Array } Internally, the marks and nodes properties of a schema are simply converted into rules.

4. What interface do Document, Block and Inline, and Text implement?

   Node.

5. What is the difference between Block and Inline?

   Block node can contain nested Block nodes, Inline nodes and Text nodes. Inline node can contain nested Inline nodes and Text nodes.

6. What properties does Text have? What do they contain?

   Text({ characters: Immutable.List<Character>, key: String }) Text.characters: A list of Characters with associated Marks that make up the text node's content.

7. What properties does Character have? What do they contain?

   Character({ marks: Immutable.Set<Mark>, text: String }) Character.text: ONE letter.

8. Where is Mark used? What properties does Mark have? What do they contain?

   Text = { kind: 'text', characters: [ { marks: [], text: 'h' } ] } Mark({ data: Data, type: String // eg. 'bold' or 'italic' })

9. What is Document node?

   The top-level node in Slate's document model. Can only have Blocks as direct children.

10. What properties do Inline, Block, Text nodes have?

    nodes: A list of child nodes. Defaults to a list with a single text node child. kind: An immutable string value, eg 'block', for easily separating this node from eg Inline or Text nodes.

11. What objects have a data and type property? What do they do?

    Block, Inline, and Text > Character > Mark. data: It's a Data object, a thin wrapper around Immutable's Map (== js object). It contains information associated with this particular node. type: The custom type of the node (eg. 'blockquote' or 'list-item').

12. Editor.props.schema.rules = [{}] Name 3 properties that rule has.

    { match: { kind: 'block', type: 'code' }, component: props => <pre {...props.attributes}> <code>{props.children}</code> </pre>, decorate: myCodeHighlighter } match: (object) => {}, determines which objects the rule applies to, decorate: (textNode) => {characters}, function that gets called for every textNode in the match, render

13. What does Raw.serialize(state, { terse: true }) option does?

    Resulting JSON will omit properties that aren't strictly required to deserialize later, reducing the serialized data's size. Eg, if Node#data is empty, it will be omitted.

14. How does Text node look in JSON after Raw.serialize?

    Text#characters => Text#ranges in order to save some storage space. Text = { kind: 'text', characters: [ { marks: [], text: 'm' } ] } Text = { kind: 'text', ranges: [ { marks: [], text: 'more text, united if possible' } ] }

15. Block and Inline nodes always contain an empty Text node as a child.

    If you don't mention child Text nodes in, JSON Raw.deserialize will just ignore this node.

16. How to use Transform?

    state.transform() => returns a new Transform ~~~ .apply() => returns new State with all applied tranforms