Quill Rich Text Editor

Parchment is Quill's document model, providing an abstraction over the DOM. It allows developers to define new nodes or overwrite existing ones by handing control of subtrees back to the user. To exist within a Parchment document, custom nodes must implement certain methods such as getValue() and getFormat().

Custom nodes are typically created by extending Parchment.Embed. Once defined, you must register the format with Quill using Quill.registerFormat() to make it available in the editor.

class Equation extends Parchment.Embed {
  constructor(value) {
    super(value);
    this.value = value;
    this.domNode.setAttribute('contenteditable', false);
    katex.render(value, this.domNode);
  }

  getValue() {
    return this.value;
  }
}

Quill.registerFormat(Equation);

Deltas are a strict subset of JSON used to describe both the content of a Quill document and the changes made to it. Instead of using HTML, Deltas use a sequence of operations (ops) to represent text, formatting, and embeds.

When describing a document, a Delta represents the instructions required to build that document starting from an empty state. When describing changes, a Delta represents the transformations applied to an existing document.

Key characteristics:

• Human-readable and machine-parsable.
• Avoids the ambiguity of HTML.
• Suitable for Operational Transformation (OT) in real-time applications.
• Implemented as a standalone library.

Line attributes (like align) affect the entire line. To maintain the compact and canonical constraints, Quill treats the newline character (\n) as the atomic unit for line formatting.

Crucially, all Deltas must end with a newline (\n).

To apply an attribute to a line, apply it to the newline character that terminates that line:

// Hello World on two lines
const content = [
  { text: "Hello" },
  { text: "\n", attributes: { align: "center" } },
  { text: "World" },
  { text: "\n", attributes: { align: "right" } }   // Deltas must end with newline
];

Unlike editors that rely directly on the DOM, Quill uses a text-centric document model. This allows you to interact with content using character indexes and lengths rather than traversing DOM nodes.

Key benefits include:

• Index-based access: You can query or modify text using arbitrary indexes and lengths (e.g., checking if a specific character range is bold).
• Intuitive Formats: Instead of parsing HTML tags like <b> or <strong>, you use methods like getFormat(index, length) to retrieve formatting state.
• JSON-based Events: The event API reports changes in a structured JSON format, eliminating the need to manually diff DOM trees or parse HTML strings.

The Clipboard module manages copy, cut, and paste operations between Quill and external applications.

The Processing Pipeline:

1. DOM Traversal: When HTML is pasted, the Clipboard traverses the DOM tree in post-order.
2. Delta Construction: As it traverses, it builds a Delta representation of the subtrees.
3. Matcher Execution: At each descendant node, matcher functions are executed. Matchers are prioritized by nodeType first, then by CSS selector.
4. Transformation: Each matcher receives the current node and the delta accumulated so far, allowing it to return a modified Delta that influences the final output.

Quill supports various formats for both UI controls and API calls. By default, all formats are enabled and allowed. You can restrict which formats are permitted in an editor using the formats configuration option.

Note: Configuring allowed formats is distinct from adding controls to the Toolbar. For example, you can allow bold content to be pasted into an editor even if there is no bold button in the toolbar.

Quill uses its own document model as an abstraction over the DOM. This model allows for unlimited extension beyond standard text formatting. Because it is not strictly tied to HTML structures, you can embed interactive or complex media such as:

• Images and videos
• Interactive checklists
• Embedded slide decks
• 3D models
• Tweets or interactive graphs