A simple example of sanity.io’s Editor for Portable Text with a Table of Contents viewer

EditorWithTableOfContents.jsx

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

class EditorWithToC extends React.PureComponent {
  generateToC = portableText => {
    if (!portableText) { return [] }
    const defaultHeadings = /h[1-4]/
    const headings = portableText.filter(({ style }) => style.match(defaultHeadings))
    return (
      <Fragment>
        {headings.map(({ style, _key, children }) => (
          <Fragment>
            <span key={_key}>
              {'-'.repeat(style.replace(/[^\d]/g, ''))}{' '}
              {children.map(({ text }) => text).join()}
            </span><br />
          </Fragment>
        ))}
      </Fragment>
    )
  }

  render() {
    return (
      <div>
        <BlockEditor {...this.props} />
        <details>
          <summary>Table of Contents</summary>
          <div><pre>{this.generateToC(this.props.value)}</pre></div>
        </details>
      </div>
    )
  }
}