Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@portabletext/toolkit
Advanced tools
Toolkit of handy utility functions for dealing with Portable Text
@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.
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')
);
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 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 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.
Javascript toolkit of handy utility functions for dealing with Portable Text.
Particularly useful for building rendering libraries for Portable Text that outputs HTML.
npm install --save @portabletext/toolkit
See https://portabletext.github.io/toolkit/
import {toPlainText} from '@portabletext/toolkit'
console.log(toPlainText(myPortableTextBlocks))
MIT © Sanity.io
FAQs
Toolkit of handy utility functions for dealing with Portable Text
We found that @portabletext/toolkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 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.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.