It then becomes trivial to map a style type of center to a. Yet, this doesn’t quite matter because the Draft.js Editor component provides the blockRenderMap prop which allows us to map a style type to a CSS class name. Draft.js provides built-in support for applying text heading styles, but not text alignment.Īt first glance, it might seem the two are interchangeable until considering that text headings map to the – HTML tags where text alignment affords no similar relationship. ![]() These styles should apply to either the currently selected (a collapsed selection) paragraph or to selected range of paragraphs. These styles include text headings and text alignment. text separated by a new line character) of text. Block stylesīlock styles, on the other hand, apply to paragraphs (i.e. ![]() For this case, Draft.js defines the concept of an inline style override. Yet, there are also times when a user may want to set a style which should apply to all subsequent text typed into the editor, also known as a collapsed selection. It seems intuitive that an inline style would only apply to a selected range of text. To account for the need to remove styles which have more than one value, Draft.js provides another utility called the Modifier which is described in more detail below. ![]() This presents an interesting challenge when using the Draft.js RichUtils.toggleInlineStyle () method, as toggling, by design, is intended to be used with boolean values. However styles like font size and font color map to a multitude of values where bold and italic can either be on or off. Examples of inline styles include the bold, italic, underline, font size, and font color properties of the selected text (see selection state). An inline style applies to a certain range of characters within a block. The EditorState object provides several convenience methods for obtaining and manipulating the desired piece of state, and serves as the main entry point for working with the Draft.js API. The most recent type of change made to the contents.The fully decorated representation of the contents.Draft.js utilizes immutable.js so it’s technically a record which comprises: Editor StateĪs described on the Draft.js website, EditorState is the top-level editor state object. But, before we use those APIs, it’s important to understand the different ways that text styles can be manipulated. Draft fundamentalsĪs described above, Draft provides several APIs for altering the styles of a given text body. Our hope is that you will come away with a deeper understanding of how to get started with Draft.js while avoiding our mistakes as you move toward implementing a custom Draft implementation of your own. In our case, the designs for the text module style panel within our drag & drop editor necessitated crafting a custom Draft.js implementation which would allow for the editor and style controls to live in distinct locations within the DOM tree.īelow we’ll discuss some of the trials and tribulations our team uncovered while working with Draft.js.īefore diving in, this post will identify and define some key concepts necessary for working with the Draft API, as well as some of the essential user interactions our team had to consider when building out support for the different text editing options provided by our application. Many of these existing editors would be a fine solution for an application requiring minor modification of a WYSIWYG editor with a toolbar sitting directly above it. However, several WYSIWYG editors have been built using Draft.js and some utility packages exist for extending the core library’s functionality. Unfortunately, it exposes very little styling support out of the box, requiring one to implement most functionality from scratch. For more technical engineering posts like this, check out our technical blogroll.ĭraft.js is a powerful library that provides APIs for manipulating text styles within a content editable HTML element. ![]() Note: This post comes from SendGrid’s Engineering Team.
0 Comments
Leave a Reply. |