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 draft-js-import-element-zdc

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.

``js
import {stateFromElement} from 'draft-js-import-element';
const contentState = stateFromElement(element);
`

$3

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:
`js
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:

`js
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:
`js
stateFromElement(element, {
elementStyles: {
// Support ^(superscript) inline element:
'sup': 'SUPERSCRIPT',
},
});
``

License

This software is BSD Licensed.