We make a simple array of nodes to store the document (just like we looked at above).We use createEditor() to make ourselves an editor (don't worry about withReact() for now - that's a plugin, which we'll discuss below).That's an entire working component with Slate! Let's look at some code! Let's see what a simple editor component looks like using Slate:Ĭonst editor = useMemo( () => withReact(createEditor()), ) Ĭonst = eState([ This makes it really flexible and powerful to work with. Slate doesn't care about the type, url or bold properties and it doesn't care about how these various nodes will be rendered. In the JSON blob above, the only thing Slate cares about is that it gets an array of block elements with a children property and that those children are either other block elements, or a mixture of text nodes and inline elements. Here's an annotated screenshot of a Slate editor to explain these concepts visually:Īs we said before, Slate is really un-opinionated about how documents are structured. Marks - annotations placed on the text, such as marking text as bold or italicĪstute readers will notice that this is structured very similar to the DOM, and text, block and inlines in Slate behave very much like their counterparts in the DOM.Text nodes - these contain the actual text in the document.Inline elements - special elements that flow inline with the text of your document, like links.These are the things you can draw horizontal lines between in your document Block level elements - the domain-specific "chunks" that make up your documents, like paragraphs, code blocks and lists.Editor - the top level container of your document.One of the best parts of Slate is how it holds very few opinions about how documents are structured. It has a thriving community, particularly on Slack.We really like the philosophy behind it.It lays the foundation for collaborative editing which is something we believe is important for Kitemaker.It's built with React in mind and that makes a huge difference when rendering complex documents.It doesn't force any built-in toolbars or any other visuals upon you. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |