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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent