@sanity/block-content-to-tree

block-content-to-tree-js

Converts the flat Sanity block content structure into a generic tree structure for easier transformation into other formats (HTML, React etc).

Installation

npm install --save @sanity/block-content-to-tree

Quick example

// The flat block content structure
const data = {
  "_type": "block",
  "style": "normal",
  "spans": [
    {
      "_type": "span",
      "text": "String with an ",
      "marks": []
    },
    {
      "_type": "span",
      "text": "italicized",
      "marks": [
        "em"
      ]
    },
    {
      "_type": "span",
      "text": " word.",
      "marks": []
    }
  ]
}


// Now convert it with block-content-to-tree
const BlockContentToTree = require('@sanity/block-content-to-tree')
const blockContentToTree = new BlockContentToTree()

const tree = blockContentToTree.convert(data)

This will result in the variable tree being:

{
    type: 'block',
    style: 'normal',
    content: [
      'String with an ',
      {
        type: 'span',
        attributes: {},
        mark: 'em',
        content: [
          'italicized'
        ]
      },
      ' word.'
    ]
  }

Entities

Block (text)

{
  type: 'block',
  style: 'normal' // Text style
  mark: 'em', // Mark indicating all content is wrapped in bold.
  content: [
    'Hello world! ', // Span with no marks or attributes (plain text).
    {
      type: 'span',
      // Data attributes for this span
      attributes: {link: {href: 'http://...'}},
      mark: 'strong',
      // The  text content for the span
      // Always an array with a single plain text.
      // An array to keep format consistent with block.content.
      content: [
        'I am a link!'
      ]
    }
  ]
}

List

Root element

{
  type: 'list',
  itemStyle: 'bullet' // The list style
  // Items are blocks (see above)
  items: [
    {block},
    {block}
  ]
}

Custom blocks

{
  type: 'author' // Whatever, but never 'block' (built in type)
  attributes: { // Custom attributes for the type
    name: 'John Ronald Reuel Tolkien',
  }
}

More information / examples

Please see the tests.

License

MIT-licensed