They take a Slate editor, override whatever functions they need to override and return the modified editor back.
tells slate that certain nodes are inline and should flow with text, like // the link in our example aboveīy convention, their names start with with. tells slate that certain nodes don't have any text content (they're _void_) // super handy for stuff like images and diagrams do something interesting! normalizeNode(entry) we'll dedicate a whole post to this one, but the gist is that it's used // to enforce your own custom schema to the document JSON do something interesting! insertData(data) called when the users pastes or drags things into the editor do something interesting! insertText(text) called whenever text is inserted into the document (e.g. Slate uses a very simple JSON format for representing documents, and the document above would look like this in Slate’s representation: [ = editor
Here’s an annotated screenshot of a Slate editor to explain these concepts visually: 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
Material ui rich text editor code#
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.It’s un-opinionated about how your document is structured, and that gave us the flexibility we needed.For us, the things that pushed us towards Slate were: So why did we choose to go with Slate in the first place? It’s definitely not the only editor framework out there. Markdown shortcuts, code blocks with syntax highlighting, images, embedding designs from Figma, math expressions with LaTex, diagrams with MermaidJS, and, of course, emojis ♥️. And we think we’ve got the best editor around: A key to supporting this type of work is having a really great editor so that teams are inspired to collaborate together on issues and ensure alignment. We’re big believers in remote work, and in particular working asynchronously so that team members get large, uninterrupted blocks of time to get work done. We’re building Kitemaker, a new, fast, and highly collaborative alternative to issue trackers like Jira, Trello, and Clubhouse. Note: this post is based on a recent talk at the JavaScript NYC meetup. Even with the help of Slate, building a full-featured editor is way more work than we can cover in one blog post, so this post will give you the big picture and subsequent posts will dive into the dirty details. Building an awesome editor for your React-based web application is by no means easy.
0 kommentar(er)
