
Product
Socket Firewall Now Blocks Malicious VS Code and Open VSX Extensions
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.
@portabletext/block-tools
Advanced tools
Sanity-flavored HTML to Portable Text conversion (wraps @portabletext/html)
@portabletext/block-toolsSanity-flavored HTML to Portable Text conversion
This package wraps @portabletext/html for use with Sanity schemas. If you're not using Sanity's schema system, use @portabletext/html directly - it has the same features with a simpler API.
| Package | Use when |
|---|---|
@portabletext/html | Standalone projects, custom schemas, or any non-Sanity context |
@portabletext/block-tools | Sanity projects where you already have a compiled Sanity schema |
import {htmlToBlocks} from '@portabletext/block-tools'
import {Schema} from '@sanity/schema'
const defaultSchema = 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'}],
},
],
},
],
})
const blockContentType = defaultSchema
.get('blogPost')
.fields.find((field) => field.name === 'body').type
const blocks = htmlToBlocks(
'<html><body><h1>Hello world!</h1></body></html>',
blockContentType,
)
htmlToBlocks(html, blockContentType, options?)Converts HTML to Portable Text blocks using a Sanity block content schema type.
Internally delegates to @portabletext/html after converting the Sanity schema. Supports the same parseHtml, rules, and keyGenerator options. See the @portabletext/html README for full documentation on rules, whitespace handling, image matchers, and paste source support.
NOTE: To use in Node.js, you need to provide a parseHtml option - generally using JSDOM:
import {JSDOM} from 'jsdom'
const blocks = htmlToBlocks(html, blockContentType, {
parseHtml: (html) => new JSDOM(html).window.document,
})
normalizeBlock(block, options?)Normalize a block object structure to ensure it has _key, _type, children, and markDefs.
import {normalizeBlock} from '@portabletext/block-tools'
const normalized = normalizeBlock({
_type: 'block',
children: [{_type: 'span', text: 'Hello', marks: ['strong']}],
})
// => { _key: '...', _type: 'block', children: [{ _key: '...', _type: 'span', text: 'Hello', marks: ['strong'] }], markDefs: [] }
MIT
Slate is a completely customizable framework for building rich text editors. It provides a more flexible and powerful approach to handling rich text compared to @portabletext/block-tools, which is more focused on the Portable Text format specifically.
Draft.js is a JavaScript rich text editor framework, built for React. It offers a similar set of tools for creating and manipulating rich text content, but it is more tightly integrated with React and does not specifically target the Portable Text format.
ProseMirror is a toolkit for building rich-text editors on the web. It provides a more general-purpose solution for rich text editing, with a focus on extensibility and customizability, whereas @portabletext/block-tools is specialized for Portable Text.
FAQs
Sanity-flavored HTML to Portable Text conversion (wraps @portabletext/html)
The npm package @portabletext/block-tools receives a total of 286,001 weekly downloads. As such, @portabletext/block-tools popularity was classified as popular.
We found that @portabletext/block-tools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Product
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.

Research
More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.

Research
/Security News
A new npm package tests AI malware scanners with prompt injection, safety-triggering comments, context flooding, and obfuscated JavaScript.