Extensibly serialize & deserialize Draft.js content with HTML
See draft-extend for more on how to use draft-convert with plugins
Jump to:
Extensibly serialize Draft.js ContentState
to HTML.
Basic usage:
const html = convertToHTML(editorState.getCurrentContent());
Advanced usage:
// convert to HTML with blue text, paragraphs, and links
const html = convertToHTML({
styleToHTML: {
'BLUE': {
start: '<span style="color: blue">',
end: '</span>'
}
},
blockToHTML: {
'PARAGRAPH': {
start: '<p>',
end: '</p>',
empty: '<br>'
}
},
entityToHTML: (entity, originalText) => {
if (entity.type === 'LINK') {
return `<a href="${entity.data.url}">${originalText}</a>`;
} else {
return originalText;
}
}
})(editorState.getCurrentContent());
// convert content state to HTML with functionality defined in the plugins applied
const html = compose(
FirstPlugin,
SecondPlugin,
ThirdPlugin
)(convertToHTML)(editorState.getCurrentContent());
styleToHTML
and blockToHtml
are objects keyed by DraftInlineStyle
and DraftBlockType
respectively and map
to beginning and ending tags to use. Blocks also have an optional empty
property to handle alternative behavior for empty blocks. Both extend upon defaults that support the default style and block types. If no additional functionality is necessary convertToHTML
can be invoked with just a ContentState
to serialize using just the default Draft functionality. convertToHTML
can be passed as an argument to a plugin to modularly augment its functionality.
Type info:
type TagObject = {
[key: string]: {
start: string,
end: string,
empty?: string
}
}
type ContentStateConverter = (contentState: ContentState) => string
type RawEntity = {
type: string,
mutability: DraftEntityMutability,
data: Object
}
type convertToHTML = ContentStateConverter | ({
styleToHTML: ?TagObject,
blockToHTML: ?TagObject,
entityToHTML: ?(entity: RawEntity, originalText: string) => string
}) => ContentStateConverter
Extensibly deserialize HTML to Draft.js ContentState
.
Basic usage:
const editorState = EditorState.createWithContent(convertFromHTML(html));
Advanced usage:
// convert HTML to ContentState with blue text, links, and at-mentions
const contentState = convertFromHTML({
htmlToStyle: (nodeName, node, currentStyle) => {
if (nodeName === 'span' && node.style.color === 'blue') {
return currentStyle.add('BLUE');
} else {
return currentStyle;
}
},
htmlToEntity: (nodeName, node) => {
if (nodeName === 'a') {
return Entity.create(
'LINK',
'MUTABLE',
{url: node.href}
)
}
},
textToEntity: (text) => {
const result = [];
text.replace(/\@(\w+)/g, (match, name, offset) => {
const entityKey = Entity.create(
'AT-MENTION',
'IMMUTABLE',
{name}
);
result.push({
entity: entityKey,
offset,
length: match.length,
result: match
});
});
return result;
}
})(html);
// convert HTML to ContentState with functionality defined in the plugins applied
const contentState = compose(
FirstPlugin,
SecondPlugin,
ThirdPlugin
)(convertFromHTML);
If no additional functionality is necessary convertToHTML
can be invoked with just an HTML string to deserialize using just the default Draft functionality. Any convertFromHTML
can be passed as an argument to a plugin to modularly augment its functionality.
Type info:
type HTMLConverter = (html: string, DOMBuilder: ?Function) => ContentState
type EntityKey = string
type convertFromHTML = HTMLConverter | ({
htmlToStyle: ?(nodeName: string, node: Node, currentStyle: DraftInlineStyle) => DraftInlineStyle,
htmlToBlock: ?(nodeName: string, node: Node) => ?DraftBlockType,
htmlToEntity: ?(nodeName: string, node: string): ?EntityKey,
textToEntity: ?(text) => Array<{entity: EntityKey, offset: number, length: number, result: ?string}>
}) => HTMLConverter