Can format HTML, Slate JSON or Lyra block array into any other format.
Last updated a year ago by bjoerge .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @lyra/block-tools 
SYNC missed versions from official npm registry.

Lyra Block Tools

Various tools for processing Lyra block content


Let's start with a complete example:

import Schema from '@lyra/schema'
import blockTools from '@lyra/block-tools'

// Start with compiling a schema we can work against
const schema = Schema.compile({
  name: 'myBlog',
  types: [
      type: 'object',
      name: 'blogPost',
      fields: [
          title: 'Title',
          type: 'string',
          name: 'title'
          title: 'Body',
          name: 'body',
          type: 'array',
          of: [{type: 'block'}]

// The compiled schema type for the content type that holds the block array
const blockContentType = defaultSchema
  .fields.find(field => field.name === 'body').type

// Convert HTML to blocks
const blocks = blockTools.htmlToBlocks(
  '<html><body><h1>Hello world!</h1><body></html>',

// Convert an editor value to blocks
const blocks = blockTools.editorValueToBlocks(editorValue, blockContentType)

// Convert blocks to a editor value
const slateState = blockTools.blocksToEditorValue(blocks, blockContentType)

// Get the feature-set of a blockContentType
const features = blockTools.getBlockContentFeatures(blockContentType)


htmlToBlocks(html, options) (html deserializer)

This will deserialize the input html (string) into blocks.



A compiled version of the block content schema type. When you give this option, the deserializer will respect the schema when deserializing to blocks. I.e. if the schema doesn't allow h2-styles, all h2 html-elements will deserialized to normal styled blocks.


The HTML-deserialization is done by default by the browser's native DOMParser. On the server side you can give the function parseHtml that parses the html into a DOMParser compatible model / API.

JSDOM example
const jsdom = require('jsdom')
const {JSDOM} = jsdom

const blocks = blockTools.htmlToBlocks(
  '<html><body><h1>Hello world!</h1><body></html>',
    parseHtml: html => new JSDOM(html).window.document

You may add your own rules to deal with special HTML cases.

  '<html><body><pre><code>const foo = "bar"</code></pre></body></html>',
    parseHtml: html => new JSDOM(html),
    rules: [
      // Special rule for code blocks (wrapped in pre and code tag)
        deserialize(el, next) {
          if (el.tagName.toLowerCase() != 'pre') {
            return undefined
          const code = el.children[0]
          const childNodes =
            code && code.tagName.toLowerCase() === 'code'
              ? code.childNodes
              : el.childNodes
          let text = ''
          childNodes.forEach(node => {
            text += node.textContent
          return {
            _type: 'span',
            marks: ['code'],
            text: text

blocksToEditorValue(blocks, blockContentTypeSchema)

Convert blocks to a serialized editor value respecting the input schema.

editorValueToBlocks(slateState, blockContentTypeSchema)

Convert a slate state to blocks respecting the input schema.


Will return an object with the features enabled for the input block content type.

  annotations: [{title: 'Link', value: 'link'}],
  decorators: [
    {title: 'Strong', value: 'strong'},
    {title: 'Emphasis', value: 'em'},
    {title: 'Code', value: 'code'},
    {title: 'Underline', value: 'underline'},
    {title: 'Strike', value: 'strike-through'}
  styles: [
    {title: 'Normal', value: 'normal'},
    {title: 'Heading 1', value: 'h1'},
    {title: 'H2', value: 'h2'},
    {title: 'H3', value: 'h3'},
    {title: 'H4', value: 'h4'},
    {title: 'H5', value: 'h5'},
    {title: 'H6', value: 'h6'},
    {title: 'Quote', value: 'blockquote'}

Current Tags

  • 0.3.0                                ...           latest (a year ago)

4 Versions

  • 0.3.0                                ...           a year ago
  • 0.2.5                                ...           2 years ago
  • 0.2.4                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 0
Dependencies (2)
Dev Dependencies (7)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |