Tiptap Concepts
Explore the foundational elements of Tiptap's API, designed for intricate rich text editing based on ProseMirror's architecture.
Structure
ProseMirror works with a strict Schema, which defines the allowed structure of a document. A document is a tree of headings, paragraphs and others elements, so called nodes. Marks can be attached to a node, e. g. to emphasize part of it. Commands change that document programmatically.
Content
The document is stored in a state. All changes are applied as transactions to the state. The state has details about the current content, cursor position and selection. You can hook into a few different events, for example to alter transactions before they get applied.
Extensions
Extensions add nodes, marks and/or functionalities to the editor. A lot of those extensions bound their commands to common keyboard shortcuts.
Vocabulary
ProseMirror has its own vocabulary and you’ll stumble upon all those words now and then. Here is a short overview of the most common words we use in the documentation.
Word | Description |
---|---|
Schema | Configures the structure your content can have. |
Document | The actual content in your editor. |
State | Everything to describe the current content and selection of your editor. |
Transaction | A change to the state (updated selection, content, …) |
Extension | Registers new functionality. |
Node | A type of content, for example a heading or a paragraph. |
Mark | Can be applied to nodes, for example for inline formatting. |
Command | Execute an action inside the editor, that somehow changes the state. |
Decoration | Styling on top of the document, for example to highlight mistakes. |