ONLINE RICH TEXT EDITOR HOW TO
ONLINE RICH TEXT EDITOR UPDATE
ONLINE RICH TEXT EDITOR CODE

ONLINE RICH TEXT EDITOR UPDATE

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.

Block Nodes (analogous to HTML concept of Block-level elements) that are each rendered on a new line and occupy the available width.

There are largely two types of nodes that represent how they should be rendered.

Image nodes contain an image src property, Code-blocks may contain a language property and so on). Nodes also hold any properties specific to the object they represent that are needed to render those nodes inside the editor. Paragraph nodes contain text nodes inside them).

Some of these may contain other nodes as children inside them (e.g. The common types of nodes that a rich-text document could contain are paragraphs, headings, images, videos, code-blocks and pull-quotes. Document Nodesĭocument nodes are used to represent the contents of the document. Understanding The Document Structureīefore we dive into building the editor, let’s look at how a document is structured for a Rich Text Editor and what are the different types of data structures involved. With this article, we try to not only lay the foundation of building an editor but also give the readers a glimpse into how little nuggets of functionalities when brought together can create a great user experience for a content creator.

Taking advantage of the massive outreach of social media platforms, there is a new wave of independent content creators using platforms like Medium to create content and share it with their audience.Īs so many people from different professions and backgrounds try to create content on these products, it’s important that these products provide a performant and seamless experience of content creation and have teams of designers and engineers who develop some level of domain expertise over time in this space. The widespread success of products like Quip, Google Docs and Dropbox Paper has shown how companies are racing to build the best experience for content creators in the enterprise domain and trying to find innovative ways of breaking the traditional moulds of how content is shared and consumed. In recent years, the field of Content Creation and Representation on Digital platforms has seen a massive disruption.

ONLINE RICH TEXT EDITOR CODE

The code for the application is available on GitHub for reference. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations.

ONLINE RICH TEXT EDITOR HOW TO

In this article, we will learn how to build a WYSIWYG/Rich-Text Editor that supports rich text, images, links and some nuanced features from word processing apps.

Online rich text editor