parchment

What is parchment?

Parchment is a modular, extensible library for building rich text editors. It is designed to provide a clean, semantic document model for text and all sorts of embedded content, along with a powerful API for manipulating that content. Parchment is used as the foundation for the Quill editor but can be utilized independently for custom editor projects.

What are parchment's main functionalities?

Creating and manipulating text

This code demonstrates how to create a new block element and append a text node to it using Parchment. It showcases the basic structure of creating and manipulating text within the document model.

var Parchment = require('parchment');
var Block = Parchment.create('block');
var blockNode = Parchment.create(Block);
blockNode.appendChild(Parchment.create('text', 'Hello, world!'));

Defining custom formats

This example shows how to define a custom format (in this case, a bold text format) by extending an existing blot (Inline) and registering it with Parchment. This allows for the creation of rich text formatting options.

var Inline = Parchment.query('inline');
class Bold extends Inline {}
Bold.blotName = 'bold';
Bold.tagName = 'strong';
Parchment.register(Bold);

Embedding external content

This code snippet illustrates how to embed external content, such as images, by creating a custom blot that extends Parchment's Embed class. It demonstrates setting attributes (like 'src' for an image URL) on the embedded content.

class ImageBlot extends Parchment.Embed {
  static create(value) {
    let node = super.create();
    node.setAttribute('src', value.url);
    return node;
  }
}
ImageBlot.blotName = 'image';
ImageBlot.tagName = 'img';
Parchment.register(ImageBlot);

Other packages similar to parchment

slate

Slate is a completely customizable framework for building rich text editors. Unlike Parchment, which focuses on a modular document model, Slate provides a more comprehensive editing framework, including a React-based rendering layer and a sophisticated plugin system.

draft-js

Draft.js is a rich text editor framework for React, backed by an immutable model and offering a high level of customization. It differs from Parchment by being tightly integrated with React and focusing on content editing within web applications rather than the modular document model.

prosemirror

ProseMirror is a toolkit for building rich text editors that are web-based and collaborative. It offers a schema-based approach to defining the structure of documents, which is more flexible than Parchment's blot-based model. ProseMirror also focuses heavily on collaborative editing features.

README

Parchment