Draft-js ContentBlock

This is the fourth in an ongoing series of posts.

  1. draft-js pieces
  2. draft-js EditorState
  3. draft-js ContentState
  4. draft-js ContentBlock
  5. draft-js SelectionState
  6. draft-js highlight text
  7. draft-js styling a ContentBlock

This is the fourth in a series of posts about draft-js.  The first post was an overview of the pieces and subsequent posts have been a little deeper dive into said pieces.  This post will be about ContentBlocks.

ContentBlocks are a course level building blocks of a draft-js document.  They correspond roughly to paragraphs or content blocks in html.  Ultimately they are comprised of a collection of characters and the metadata for each character.  That sounds pretty daunting, but it’s actually pretty cool.  They make heavy use/reuse of immutable.js.  For instance let’s say you have a 5000 character long document.  That’s one big collection.  However, if let’s say you have a letter “a” with no metadata on it, no styling or anything.  As you can imagine the letter “a” occurs rather frequently.  Rather that having a separate instance and memory allocation for each one, they all reference the same space.  So in total a very long document would just have, I don’t know 62 plus numbers and symbols objects in that list.  Then for each one that’s got a style that makes it blue for instance it does the same thing.  It’s pretty neat.

That said, I have not found myself interacting with the character map much yet.  But it’s neat to know what’s going on.  Most of what I’ve been doing I can scope to ContentBlocks and SelectionState.  The distinction being that you can style or wrap with functionality an entire block or a smaller chunk that is a selection of characters in a block or blocks.

A ContentBlock has some important initial properties to be aware of.  It has a key, which is essentially an id and allows you to find/access the block.  To wit there is

const blockKey = myBlock.getKey()

It also has a type with corresponding

const blockType = myblock.getType()

Your default ContentBlock has a type of “unstyled”.  Out of the box draft-js has a few, what they call DraftBlockType(s) such as LTR/RTL (left to right/right to left), support for bullet lists and a few others. You can also create your own types then can then be easily associated with a block.  Here is a good explanation of that.  You may want a code block type so you don’t have to use the Quote style to write code in your block like my stupid blog, for instance.

You can get the text, the characterlist ( as mentioned above ), the length.  And you can get a list of styles that have been applied to a certain range.  These would be what are called inline styles that are not block scoped but rather selection scoped.

My next post will be a short post about SelectionState and then we can get into how to actually interact with these pieces to make the fun stuff that has been hinted at actually happen.

Advertisements
Draft-js ContentBlock