@portabletext/toolkit

What is @portabletext/toolkit?

@portabletext/toolkit is a JavaScript toolkit for working with Portable Text, a JSON-based rich text format. It provides utilities for parsing, serializing, and rendering Portable Text content, making it easier to integrate rich text content into web applications.

What are @portabletext/toolkit's main functionalities?

Parsing Portable Text

This feature allows you to parse Portable Text into plain text. The `toPlainText` function takes Portable Text JSON and converts it into a plain text string.

const { toPlainText } = require('@portabletext/toolkit');
const portableText = [
  { _type: 'block', children: [{ _type: 'span', text: 'Hello, world!' }] }
];
const plainText = toPlainText(portableText);
console.log(plainText); // Output: 'Hello, world!'

Serializing Portable Text

This feature allows you to serialize plain text into Portable Text format. The `toPortableText` function takes a plain text string and converts it into Portable Text JSON.

const { toPortableText } = require('@portabletext/toolkit');
const plainText = 'Hello, world!';
const portableText = toPortableText(plainText);
console.log(portableText); // Output: [{ _type: 'block', children: [{ _type: 'span', text: 'Hello, world!' }] }]

Rendering Portable Text

This feature allows you to render Portable Text content in a React application. The `PortableText` component takes Portable Text JSON as a prop and renders it as React elements.

const { PortableText } = require('@portabletext/toolkit');
const portableText = [
  { _type: 'block', children: [{ _type: 'span', text: 'Hello, world!' }] }
];
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
  React.createElement(PortableText, { value: portableText }),
  document.getElementById('root')
);

Other packages similar to @portabletext/toolkit

draft-js

Draft.js is a rich text editor framework for React. It provides a set of tools for building rich text editors with a focus on extensibility and customization. Unlike @portabletext/toolkit, which focuses on parsing and rendering Portable Text, Draft.js is more about creating and managing rich text content within a React application.

slate

Slate is a completely customizable framework for building rich text editors. It provides a set of tools for creating complex, nested, and highly interactive rich text editors. Slate is more focused on the editor experience and less on the specific format of the content, whereas @portabletext/toolkit is specifically designed for working with Portable Text.

prosemirror

ProseMirror is a toolkit for building rich text editors with a focus on performance and flexibility. It provides a set of tools for creating highly customizable and performant rich text editors. ProseMirror is similar to Slate in that it focuses on the editor experience, while @portabletext/toolkit is more about working with Portable Text content.

README

@portabletext/toolkit

Javascript toolkit of handy utility functions for dealing with Portable Text.

Particularly useful for building rendering libraries for Portable Text that outputs HTML.

Installation

npm install --save @portabletext/toolkit

Documentation

See https://portabletext.github.io/toolkit/

Usage

import {toPlainText} from '@portabletext/toolkit'

console.log(toPlainText(myPortableTextBlocks))

License

MIT © Sanity.io

Changelog

2.0.17 (2025-02-06)

Bug Fixes

• guard against markDefs being null (#92) (1f1644a)
• typeError: Marking markDefs as optional to resolve TS error when markDefs array is missing (#96) (eedd7c7)