2020-11-02 22:54:15 +08:00
|
|
|
|
# Nodes
|
|
|
|
|
|
|
|
|
|
## toc
|
|
|
|
|
|
|
|
|
|
## Introduction
|
2021-02-05 00:33:59 +08:00
|
|
|
|
Nodes add new capabilities to tiptap. Nodes are like block types, for example a paragraph, heading, or code block.
|
2021-01-26 06:17:02 +08:00
|
|
|
|
|
2020-11-03 23:13:13 +08:00
|
|
|
|
## List of supported nodes
|
|
|
|
|
| Title | Default Extension | Source Code |
|
|
|
|
|
| -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- |
|
|
|
|
|
| [Blockquote](/api/nodes/blockquote) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) |
|
|
|
|
|
| [BulletList](/api/nodes/bullet-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/) |
|
|
|
|
|
| [CodeBlock](/api/nodes/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) |
|
|
|
|
|
| [Document](/api/nodes/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) |
|
2021-01-21 19:35:06 +08:00
|
|
|
|
| [Emoji](/api/nodes/emoji) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-emoji/) |
|
2020-11-03 23:13:13 +08:00
|
|
|
|
| [HardBreak](/api/nodes/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) |
|
2021-01-21 19:35:06 +08:00
|
|
|
|
| [Hashtag](/api/nodes/hashtag) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hashtag/) |
|
2020-11-03 23:13:13 +08:00
|
|
|
|
| [Heading](/api/nodes/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) |
|
|
|
|
|
| [HorizontalRule](/api/nodes/horizontal-rule) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) |
|
|
|
|
|
| [Image](/api/nodes/image) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/) |
|
|
|
|
|
| [ListItem](/api/nodes/list-item) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) |
|
2021-01-21 19:35:06 +08:00
|
|
|
|
| [Mention](/api/nodes/mention) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) |
|
2020-11-03 23:13:13 +08:00
|
|
|
|
| [OrderedList](/api/nodes/ordered-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/) |
|
|
|
|
|
| [Paragraph](/api/nodes/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) |
|
2021-01-21 19:35:06 +08:00
|
|
|
|
| [Table](/api/nodes/table) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table/) |
|
|
|
|
|
| [TableRow](/api/nodes/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/) |
|
|
|
|
|
| [TableCell](/api/nodes/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/) |
|
2020-11-03 23:13:13 +08:00
|
|
|
|
| [TaskList](/api/nodes/task-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/) |
|
2020-12-04 00:05:22 +08:00
|
|
|
|
| [TaskItem](/api/nodes/task-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/) |
|
2020-11-03 23:13:13 +08:00
|
|
|
|
| [Text](/api/nodes/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) |
|
2021-02-05 00:33:59 +08:00
|
|
|
|
|
|
|
|
|
## Create a new node
|
|
|
|
|
You’re free to create your own nodes for tiptap. Here is the boilerplate code that’s need to create and register your own node:
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
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 don’t forget all other extensions.
|
|
|
|
|
Document,
|
|
|
|
|
Paragraph,
|
|
|
|
|
Text,
|
|
|
|
|
// …
|
|
|
|
|
],
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Learn [more about custom extensions in our guide](/guide/build-extensions).
|