draft-js-raw-content-state

Helps you build draft-js raw content states for initializing your editor or for testing

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
draft-js-raw-content-state
1201.2.75 years ago6 years agoMinified + gzip package size for draft-js-raw-content-state in KB

Readme

Build Status
draft-js-raw-content-state

Table of Contents

Installation

npm i draft-js-raw-content-state --save

Usage

import Raw from 'draft-js-raw-content-state';
const rawContentState = new Raw();

API

  • .addBlock(text, type, data)
Adds a new block.
  • setKey(key)
Adds a blockKey
  • toRawContentState()
Exports content as a rawContentState
  • isBackward()
Sets isBackward SelectionState property to true
  • .addEntity(entity, offset, length)
Creates a new entity.
  • .addInlineStyle(style, offset, length)
Creates a new inline style.
  • .anchorKey(offset)
  • .setAnchorKey(offset)
Sets the anchorKey, you can also provide an offset.
  • .focusKey(offset)
  • .setFocusKey(offset)
Sets the focusKey, you can also provide an offset.
  • .collapse(offset)
Sets focus and anchorKey, you may provide an offset.
  • .setData(data)
Sets the data on the block.
  • .log()
console.logs the rawContentState.
  • .toContentState()
Converts the raw contentState into a ContentState type object.
  • .toEditorState(decorator)
Converts the raw contentState into an EditorState type object.

Example

To convert to a raw contentState
const newEntity = {
  type: 'CUSTOM_COLOR',
  mutability: 'MUTABLE',
  data: { color: 'red' }
};

const contentState = new Raw()
  // first block
  .addBlock('block 1')
  setKey('edr45')
  addEntity(newEntity, 2, 4) 
  
  // second block
  .addBlock('block 2')
  .addInlineStyle('COLOR_RED', 0, 6)
  .anchorKey(2)
  .focusKey(4)
  .toEditorState(); 

Generates
{
 "entityMap": {
   "0": {
     "data": {
       "color": "red"
     },
     "type": "CUSTOM_COLOR",
     "mutability": "MUTABLE"
   }
 },
 "blocks": [
   {
     "key": "edr45",
     "text": "block 1",
     "type": "unstyled",
     "depth": 0,
     "inlineStyleRanges": [],
     "entityRanges": [
       {
         "key": 0,
         "offset": 2,
         "length": 4
       }
     ],
     "data": {}
   },
   {
     "key": "b6ar6",
     "text": "block 2",
     "type": "unstyled",
     "depth": 0,
     "inlineStyleRanges": [
       {
         "offset": 0,
         "length": 6,
         "style": "COLOR_RED"
       }
     ],
     "entityRanges": [],
     "data": {}
   }
 ]
}

You an also generate EditorState and ContentStates typed objects.

Support

Please open an issue for support.

Contributing

Feel free to fork this project, make changes and submit pull requests.