draft-js-markdown-shortcuts-plugin icon indicating copy to clipboard operation
draft-js-markdown-shortcuts-plugin copied to clipboard

redraft renderer

Open mxstbr opened this issue 7 years ago • 1 comments

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?

mxstbr avatar Jul 20 '17 20:07 mxstbr

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.

jpuri avatar Jul 21 '17 04:07 jpuri