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)
- setKey(key)
- toRawContentState()
- isBackward()
- .addEntity(entity, offset, length)
- .addInlineStyle(style, offset, length)
- .anchorKey(offset)
- .setAnchorKey(offset)
- .focusKey(offset)
- .setFocusKey(offset)
- .collapse(offset)
- .setData(data)
- .log()
- .toContentState()
- .toEditorState(decorator)
Example
To convert to a raw contentStateconst 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.