random draft.js experiments

gistfile1.txt

import React, {PropTypes} from 'react';
import {Editor, AtomicBlockUtils, Entity, EditorState, Modifier, RichUtils, convertToRaw} from 'draft-js'
import isClient from 'check-client'

const colorStyleMap = {
      red: {
        color: 'rgba(255, 0, 0, 1.0)',
      },
      blue: {
        color: 'rgba(0, 0, 255, 1.0)',
      },
      violet: {
        color: 'rgba(127, 0, 255, 1.0)',
      },
      underline: {
        textDecoration: 'underline'
      },
      bold: {
        fontWeight: '600'
      },
      right: {
        alignSelf: 'flex-end'
      }
    }

    const Media = (props) => {
       const entity = Entity.get(props.block.getEntityAt(0))
       const {src, click} = entity.getData()
       const type = entity.getType()

       if (type === 'image') {
        return <img onClick={click} src={src} />
       }
     }


if(isClient()) require('./Draft.scss')
export default class PostEditor extends React.Component {
  constructor(props) {
        super(props)
        this.state = {editorState: EditorState.createEmpty()}
        this.focus = () => this.refs.editor.focus()
        this.onChange = (editorState) => this.setState({editorState})
      }

      clear() {
        const {editorState} = this.state
        const selection = editorState.getSelection()
        const contentState = editorState.getCurrentContent()
        const styles = editorState.getCurrentInlineStyle()
        const removeStyles = styles.reduce((state, style) => {
          return Modifier.removeInlineStyle(state, selection, style) },
        contentState )

        const removeBlock = Modifier.setBlockType(removeStyles, selection, 'unstyled')

        this.onChange(EditorState.push( editorState, removeBlock ))
    }

      addColor(color) {
        const {editorState} = this.state
        this.onChange(RichUtils.toggleInlineStyle(editorState, color))
      }

      changeBlock(blockType) {
        const {editorState} = this.state
        this.onChange(RichUtils.toggleBlockType(editorState, blockType))
      }

       myBlockStyleFn(contentBlock) {
          const type = contentBlock.getType();
          if (type === 'header-two') {
              return 'fancystuff'
          }
        }

      mediaBlockRenderer(block) {
          if (block.getType() === 'atomic') {
            return {
              component: Media,
              editable: false
            }
          }
        return null
      }

      showLog() {
        console.log(this.refs.editor.props.readOnly)
      }
      addMedia() {
        const { editorState } = this.state
        const src = window.prompt('Enter a URL')
        let click = ::this.showLog
        const entityKey = Entity.create('image', 'IMMUTABLE', {src, click})
        this.onChange(AtomicBlockUtils.insertAtomicBlock( editorState, entityKey,' '))
      }

  render() {
    const {editorState} = this.state
    return  <div id="editor">
              <section id='editor-buttons'>
                <span onClick={this.addColor.bind(this,'red')}>RED</span>
                <span onClick={this.addColor.bind(this,'blue')}>BLUE</span>
                <span onClick={::this.addMedia}>Image</span>
                <span onClick={this.addColor.bind(this,'underline')}>underline</span>
                <span onClick={this.addColor.bind(this,'bold')}>Bold</span>
                <span onClick={this.changeBlock.bind(this,'header-two')}>H2</span>
                <span onClick={::this.clear}>Clear</span>
              </section>
              <hr/>
              <Editor blockRendererFn={::this.mediaBlockRenderer} blockStyleFn={::this.myBlockStyleFn} customStyleMap={colorStyleMap} editorState={editorState} onChange={::this.onChange} ref="editor" />
            </div>
  }
}