tiptap/docs/api/nodes.md
2023-03-27 15:21:52 +02:00

5.1 KiB
Raw Blame History

tableOfContents
true

Nodes

Introduction

If you think of the document as a tree, then nodes are just a type of content in that tree. Examples of nodes are paragraphs, headings, or code blocks. But nodes dont have to be blocks. They can also be rendered inline with the text, for example for @mentions.

List of supported nodes

Title StarterKit (view) Source Code
Blockquote Included GitHub
BulletList Included GitHub
CodeBlock Included GitHub
Document Included GitHub
Emoji Requires a Tiptap Pro subscription
HardBreak Included GitHub
Heading Included GitHub
HorizontalRule Included GitHub
Image GitHub
ListItem Included GitHub
Mention Included GitHub
OrderedList Included GitHub
Paragraph Included GitHub
Table GitHub
TableRow GitHub
TableCell GitHub
TaskList GitHub
TaskItem GitHub
Text Included GitHub
YouTube GitHub

Create a new node

Youre free to create your own nodes for Tiptap. Here is the boilerplate code thats need to create and register your own node:

import { Node } from '@tiptap/core'

const CustomNode = Node.create({
  // Your code here
})

const editor = new Editor({
  extensions: [
    // Register your custom node with the editor.
    CustomNode,
    // … and dont forget all other extensions.
    Document,
    Paragraph,
    Text,
    // …
  ],
})

Learn more about custom extensions in our guide.