draft-js-markdown-shortcuts-plugin
draft-js-markdown-shortcuts-plugin copied to clipboard
redraft renderer
redraft
is a project to render DraftJS state to React components without having to render a readOnly
editor. (this is important for our use case b/c we're rendering hundreds of messages composed with DraftJS and rendering hundreds of DraftJS editors in readOnly
mode is slow)
It'd be great to create a renderer from this plugin to React components using redraft
. This is what a redraft
renderer looks like: (shortened example from the redraft
README)
const renderers = {
// Inlines
inline: {
BOLD: (children, { key }) => <strong key={key}>{children}</strong>,
ITALIC: (children, { key }) => <em key={key}>{children}</em>,
UNDERLINE: (children, { key }) => <u key={key}>{children}</u>,
CODE: (children, { key }) => <span key={key} style={styles.code}>{children}</span>,
},
// Blocks
blocks: {
unstyled: (children) => children.map(child => <p>{child}</p>),
'header-one': (children) => children.map(child => <h1>{child}</h1>),
'code-block': (children, { keys }) => <pre style={styles.codeBlock} key={keys[0]} >{addBreaklines(children)}</pre>,
},
// Special entities
entities: {
LINK: (children, data, { key }) => <Link key={key} to={data.url}>{children}/>,
},
// Potentially add decorators
decorators: [],
}
This seems very possible and would complement @jpuri's awesome draft-to-markdown
. (which works beautifully in tandem with this plugin by the way)
What do you think?
Redraft
looks cool, I am not sure if it can take care of stuff like nested lists. But that can be made possible with small changes.