ldx-widgets/src/components/grid_form/grid_form_rich_text.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
require 'es6-shim'
{Editor, EditorState, RichUtils, ContentState, convertFromHTML} = require 'draft-js'
Editor = React.createFactory(Editor)
{stateToHTML} = require 'draft-js-export-html';

RTEButtonRow = React.createFactory(require './rte_button_row')

{div, label} = require 'react-dom-factories'

###
Rich Text Props

@props.labelColumnClass - OPTIONAL - string
  optional class that will be added to the label column

@props.inputColumnClass - OPTIONAL - string
  optional class that will be added to the input column

@props.inlineStyles - OPTIONAL - array
  optional array of inline style objects. Objects expected
  to have label and style key/values. Block styles have a 
  different handler than inline styles so they are in separate
  arrays. Defaults set in getDefaultProps.
  e.g. [{label: 'Bold', style: 'BOLD'}]

@props.blockStyles - OPTIONAL - array
  optional array of block style objects. Objects expected
  to have label and style key/values. Block styles have a 
  different handler than inline styles so they are in separate
  arrays. Defaults set in getDefaultProps.
  e.g. [{label: 'H1', style: 'header-one'}]

@props.isFieldRequired - OPTIONAL - boolean
  optional boolean that will display the red asterisk if true

@props.formLabel - OPTIONAL - string
  The value of the label that will display to the left of the input

@props.fullRow - OPTIONAL - boolean
  optional boolean that will determine whether to display the input in a full row with  or without a label
###

GridFormRichText = createClass

  displayName: 'GridFormRichText'
  
  getInitialState: -> 
    editorState: EditorState.createEmpty()
  
  getDefaultProps: ->
    inlineStyles: [
      {label: 'Bold', style: 'BOLD'}
      {label: 'Italic', style: 'ITALIC'}
      {label: 'Underline', style: 'UNDERLINE'}
      {label: 'Monospace', style: 'CODE'}
    ]    
    blockStyles: [
      {label: 'H1', style: 'header-one'}
      {label: 'H2', style: 'header-two'}
      {label: 'H3', style: 'header-three'}
      {label: 'H4', style: 'header-four'}
      {label: 'H5', style: 'header-five'}
      {label: 'H6', style: 'header-six'}
      {label: 'Blockquote', style: 'blockquote'}
    ]
    fullRow: yes
    formLabel: null

  componentWillMount: ->
    {htmlContent} = @props

    @convertHTML(htmlContent) if htmlContent?

  render: -> 
    {editorState} = @state
    {inputColumnClass, labelColumnClass, blockStyles, inlineStyles, isFieldRequired, formLabel, fullRow} = @props

    if formLabel?
      labelClass = 'form-label'
      if isFieldRequired then labelClass += ' is-required'

      labelField = div {
        key: 'label'
        className: labelColumnClass
      }, label {className: labelClass}, formLabel

    contentState = editorState.getCurrentContent()

    className = 'RichEditor-editor'    
    if not contentState.hasText() 
      if (contentState.getBlockMap().first().getType() isnt 'unstyled') 
        className += ' RichEditor-hidePlaceholder'

    div {
        key: 'rte-row'
        className: 'grid grid-pad'
      }, [
      labelField if formLabel?
      div {
        key: 'rich-text'
        className: "rich-text-container " + inputColumnClass
      }, [
        RTEButtonRow {
          buttonStyles: blockStyles
          key: "block"
          onToggle: @toggleBlockType
          editorState
        }
        RTEButtonRow {
          buttonStyles: inlineStyles
          key: "inline"
          onToggle: @toggleInlineStyle
          editorState
        }
        div {
          key: "editor-container"
          className: className
          onClick: @focus
        },
          Editor {
            key: 'editor'
            blockStyleFn: @getBlockStyle
            editorState: editorState
            handleKeyCommand: @handleKeyCommand
            onChange: @onChange
            onTab: @onTab
            placeholder: t "Educational Content"
            ref: "editor"
            spellCheck: true
          }
       ]
    ]

  focus: -> @refs.editor.focus()
  

  onChange: (editorState) -> 
    @setState({editorState})
    @props.handleChange()

  
  getBlockStyle: (block) ->
    switch block.getType() 
      when 'blockquote' 
        return 'RichEditor-blockquote';
      else
        return null;
   

  handleKeyCommand: (command) -> 
    {editorState} = @state
    newState = RichUtils.handleKeyCommand(editorState, command)
    
    if newState 
      @onChange(newState)
      return true
    
    return false
  

  onTab: (e) -> 
    maxDepth = 4
    @onChange(RichUtils.onTab(e, @state.editorState, maxDepth))
  

  toggleBlockType: (blockType) -> 
    @onChange(
      RichUtils.toggleBlockType(
        @state.editorState,
        blockType
      )
    )
  

  toggleInlineStyle: (inlineStyle) -> 
    @onChange(
      RichUtils.toggleInlineStyle(
        @state.editorState,
        inlineStyle
      )
    )

  convertHTML: (html) ->
    content = convertFromHTML(html)
    state = ContentState.createFromBlockArray(content)

    @setState 
      editorState: EditorState.createWithContent(state)

  getValue: ->
    {editorState} = @state
    return html = stateToHTML(editorState.getCurrentContent()).replace(/[\n\r]+/g, '')


  
module.exports = GridFormRichText