Update the App.js component to hold the document in its state which is initialized to our ExampleDocument above. Add our first React component Editor.js to it.We now add a folder called components that will hold all our React components and do the following: Some of the things worth calling out here with the structure are: Example Document and its structural representation. Although this article represents headings as nodes themselves, another way to represent them could be that nodes have paragraph-styles ( paragraph & h1-h6) as attributes on them.īelow image gives an example of how a document’s structure (in JSON) is described at a more granular level using nodes and attributes highlighting some of the elements in the structure to the left. For instance, a text node can have character-style attributes that tell us whether the text is bold/italic/underlined and so on. Similar to HTML’s concept of attributes, attributes in a Rich Text Document are used to represent non-content properties of a node or it’s children. If you want to learn more about these categories, SlateJS’s documentation on Nodes is a good place to start. Void Nodes - SlateJS also allows this third category of nodes that we will use later in this article to render media.Links and Inline Images are examples of Inline nodes. DraftJS, another popular Rich Text Editing library, lets you use the concept of Entities to render inline elements. SlateJS allows for inline elements to be nodes themselves. There are some differences in how inline elements are represented in different editing libraries. Inline Nodes (analogous to HTML concept of Inline elements) that start rendering on the same line as the previous node.An observation here is that the top-level nodes of a document would always be block nodes. Block nodes could contain other block nodes or inline nodes inside them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |