jackcallister/convert-state-to-html

Convert State To HTML

Given a ContentState object from a Draft JS editor, output an HTML string.

convertStateToHTML(contentState, { inlineStyleMap, blockStyleFn })

Options must contain inlineStyleMap and blockAttrFn. Here's an example:

const raw = {
  "entityMap":{},
  "blocks":[{
    "key":"9nc73",
    "text":"redandnotred",
    "type":"header-one",
    "depth":0,
    "inlineStyleRanges":[{
      "offset":0,
      "length":3,
      "style":"RED"
    }],
    "entityRanges":[]
  }]
}

const inlineStyleMap = {
  RED: {
    color: 'red'
  }
}

function blockAttrFn(contentBlock) {
  switch(contentBlock.getType()) {
    case 'header-one':
      return {
        className: 'custom-class',
        style: {
          fontSize: '22px'
        }
      }
    default:
      return {}
  }
}

const contentState = convertFromRaw(raw)
const options = { inlineStyleMap, blockAttrFn }
const stateToHTML = convertStateToHTML(contentState, options)

The output of convertStateToHTML will be <h1 class='custom-class'><span style='color:red;'>red</span>andnotred</h1>.

convert-state-to-html's Issues

blockElementMap[type] is not a function

Hi. I got this error index.js:183 Uncaught TypeError: blockElementMap[type] is not a function
my code:

const inlineStyleMap = {
         RED: {
            color: 'red'
         }
      }

      function blockAttrFn(contentBlock) {
         switch(contentBlock.getType()) {
            case 'header-two':
            return {
               className: 'header-two',
               style: {
                  fontSize: '22px'
               }
            }
            case 'blockquote':
            return {
               className: 'blockquote'
            }
            default:
            return {}
         }
      }
      console.log('contentState', contentState);
      const options = { inlineStyleMap, blockAttrFn }
      const stateToHTML = convertStateToHTML(contentState, options);
      console.log(stateToHTML)

what did i do wrong?