An example of simple text analysis for Sanity.io’s editor for Portable Text

EditorWithTextAnalysis.jsx

import React, { Fragment } from 'react'
import { BlockEditor } from 'part:@sanity/form-builder'
import calculateLix from 'lix-index'

const lixIllustration = lix => {
  if (lix > 55) return '😭' // very difficult
  if (lix > 45) return '😟' // difficult
  if (lix > 35) return '😐' // medium
  if (lix > 25) return '🙂' // easy
  if (lix > 10) return '😃' // very easy
  return '😆' // super easy
}

class CustomEditor extends React.PureComponent {
  render() {
    const { value = [] } = this.props
    const wordsPerMinute = 200
    const plainText = blocksToText(value)
    const wordTokens = plainText.split(/\w+/g).filter(Boolean)
    const characterCount = plainText.length
    const wordCount = wordTokens.length
    const readingTime = Math.ceil(wordCount / wordsPerMinute)
    const lix = calculateLix(plainText)

    return (
      <div>
        <BlockEditor {...this.props} />
        <div>
          🔠{characterCount} 🚾{wordCount} ⏱{readingTime} min{' '}
          {lixIllustration(lix)}
          {lix}
        </div>
      </div>
    )
  }
}

export default {
  name: 'simpleBlockContent',
  type: 'array',
  title: 'simpleBlockContent',
  inputComponent: EditorWithToC,
  of: [
    {
      type: 'block'
    }
  ]
}

const defaults = { nonTextBehavior: 'remove' }

function blocksToText(blocks, opts = {}) {
  const options = Object.assign({}, defaults, opts)
  return blocks
    .map(block => {
      if (block._type !== 'block' || !block.children) {
        return options.nonTextBehavior === 'remove'
          ? ''
          : `[${block._type} block]`
      }

      return block.children.map(child => child.text).join('')
    })
    .join('\n\n')
}