rehype-portable-text

rehype plugin to transform to Portable Text.

Install

npm:

npm install rehype-portable-text

Use

The following example shows how to convert HTML content into Portable Text.

const unified = require('unified')
const parse = require('rehype-parse')
const toPortableText = require('rehype-portable-text')

const processor = unified()
  .use(parse)
  .use(toPortableText)

const html = `
  <h1>Hans Dahl</h1>
  <p><b>Hans Dahl</b> was a <a href="https://en.wikipedia.org/wiki/Norway">Norwegian</a> <a href="https://en.wikipedia.org/wiki/Painting">painter</a>. He was famous for his paintings of Norwegian fjords and surrounding landscapes.</p>`

const content = processor.processSync(html).contents
console.log(content)

Yields:

[
  {
    "_type": "block",
    "style": "h1",
    "children": [
      {
        "_type": "span",
        "marks": [],
        "text": "Hans Dahl"
      }
    ],
    "markDefs": []
  },
  {
    "_type": "block",
    "style": "normal",
    "markDefs": [
      {
        "_key": "m1131804957159",
        "_type": "link",
        "href": "https://en.wikipedia.org/wiki/Norway"
      },
      {
        "_key": "m12767684646649",
        "_type": "link",
        "href": "https://en.wikipedia.org/wiki/Painting"
      }
    ],
    "children": [
      {
        "_type": "span",
        "marks": ["strong"],
        "text": "Hans Dahl"
      },
      {
        "_type": "span",
        "marks": [],
        "text": " was a "
      },
      {
        "_type": "span",
        "marks": ["m1131804957159"],
        "text": "Norwegian"
      },
      {
        "_type": "span",
        "marks": [],
        "text": " "
      },
      {
        "_type": "span",
        "marks": ["m12767684646649"],
        "text": "painter"
      },
      {
        "_type": "span",
        "marks": [],
        "text": ". He was famous for his paintings of Norwegian fjords and surrounding landscapes."
      }
    ]
  }
]

API

origin.use(rehype2portabletext[, options])

rehype (hast) plugin to transform to Portable Text.

Typically, unified compilers return string. This compiler returns an array of portable text blocks. When using .process or .processSync, the value at file.contents (or when using .stringify, the return value), is an Array. When using TypeScript, cast the type on your side.

Security

Use of rehype-portable-text can open you up to a cross-site scripting (XSS) attack if the tree is unsafe. Use rehype-sanitize to make the tree safe.

Related

• remark-rehype — Transform Markdown (mdast) to HTML (hast)
• rehype-remark — Transform HTML (hast) to Markdown (mdast)
• rehype-sanitize — Sanitize HTML

License

MIT.