@roamhq/draft-js-import-element
v2.0.10
Published
DraftJS: Import Element to ContentState
Downloads
3
Readme
DraftJS: Import Element to ContentState
This is a module for DraftJS that will convert an HTML DOM Element to editor content.
It was extracted from React-RTE and placed into a separate module for more general use. Hopefully it can be helpful in your projects.
Installation
npm install --save draft-js-import-element
This project is still under development. If you want to help out, please open an issue to discuss or join us on Slack.
Usage
stateFromElement
takes a DOM node element
and returns a DraftJS ContentState.
import {stateFromElement} from 'draft-js-import-element';
const contentState = stateFromElement(element);
Options
You can optionally pass a second Object
argument to stateFromElement
with the following supported properties:
customBlockFn
: Function to specify block type/data based on HTML element. Example:
let options = {
// Should return null/undefined or an object with optional: type (string); data (plain object)
customBlockFn: (element) => {
if (element.tagName === 'ARTICLE') {
return {type: 'custom-block-type'};
}
if (element.tagName === 'CENTER') {
return {data: {align: 'center'}};
}
},
};
let contentState = stateFromElement(element, options);
customInlineFn
: Function to specify how inline elements are handled. Example:
let options = {
// Should return a Style() or Entity() or null/undefined
customInlineFn: (element, {Style, Entity}) => {
if (element.tagName === 'SPAN' && element.className === 'emphasis') {
return Style('ITALIC');
} else if (element.tagName === 'IMG') {
return Entity('IMAGE', {src: element.getAttribute('src')});
}
},
};
let contentState = stateFromElement(element, options);
elementStyles
: HTML element name as key, DraftJS style string as value. Example:
stateFromElement(element, {
elementStyles: {
// Support `<sup>` (superscript) inline element:
'sup': 'SUPERSCRIPT',
},
});
License
This software is BSD Licensed.