Within your editor, you may wish to provide a wide variety of inline style behavior that goes well beyond the bold/italic/underline basics. For instance, you may want to support variety with color, font families, font sizes, and more. Further, your desired styles may overlap or be mutually exclusive.
Within the Draft model, inline styles are represented at the character level,
using an immutable
OrderedSet to define the list of styles to be applied to
each character. These styles are identified by string. (See CharacterMetadata
For example, consider the text "Hello world". The first six characters of
the string are represented by the empty set,
OrderedSet(). The final five
characters are represented by
OrderedSet.of('BOLD'). For convenience, we can
think of these
OrderedSet objects as arrays, though in reality we aggressively
reuse identical immutable objects.
In essence, our styles are:
Now let's say that we wish to make the middle range of characters italic as well: Hello world. This operation can be performed via the Modifier API.
The end result will accommodate the overlap by including
'ITALIC' in the
OrderedSet objects as well.
When determining how to render inline-styled text, Draft will identify
contiguous ranges of identically styled characters and render those characters
together in styled
Mapping a style string to CSS
Editor provides support for a basic list of inline styles:
'CODE'. These are mapped to plain CSS
style objects, which are used to apply styles to the relevant ranges.
For your editor, you may define custom style strings to include with these defaults, or you may override the default style objects for the basic styles.
Editor use case, you may provide the
to define your style objects. (See
for a live example.)
For example, you may want to add a
'STRIKETHROUGH' style. To do so, define a
custom style map:
When rendered, the
textDecoration: line-through style will be applied to all
character ranges with the