tiptap/docs/api/nodes.md

59 lines
5.3 KiB
Markdown
Raw Normal View History

---
tableOfContents: true
---
# Nodes
## Introduction
2021-04-16 01:33:51 +08:00
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**.
2021-01-26 06:17:02 +08:00
2020-11-03 23:13:13 +08:00
## List of supported nodes
2021-06-23 03:28:20 +08:00
| Title | StarterKit ([view](/api/extensions/starter-kit)) | Source Code |
| -------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| [Blockquote](/api/nodes/blockquote) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/) |
| [BulletList](/api/nodes/bullet-list) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/) |
| [CodeBlock](/api/nodes/code-block) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/) |
| [Document](/api/nodes/document) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/) |
| [Emoji](/api/nodes/emoji) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-emoji/) |
| [HardBreak](/api/nodes/hard-break) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/) |
| [Hashtag](/api/nodes/hashtag) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hashtag/) |
| [Heading](/api/nodes/heading) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/) |
| [HorizontalRule](/api/nodes/horizontal-rule) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/) |
| [Image](/api/nodes/image) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/) |
| [ListItem](/api/nodes/list-item) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/) |
| [Mention](/api/nodes/mention) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/) |
| [OrderedList](/api/nodes/ordered-list) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/) |
| [Paragraph](/api/nodes/paragraph) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/) |
| [Table](/api/nodes/table) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/) |
| [TableRow](/api/nodes/table-row) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-row/) |
| [TableCell](/api/nodes/table-cell) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/) |
| [TaskList](/api/nodes/task-list) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/) |
| [TaskItem](/api/nodes/task-item) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/) |
| [Text](/api/nodes/text) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/) |
| [YouTube](/api/nodes/youtube) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-youtube/) |
2021-02-05 00:33:59 +08:00
## Create a new node
2021-10-20 04:30:45 +08:00
Youre free to create your own nodes for Tiptap. Here is the boilerplate code thats need to create and register your own node:
2021-02-05 00:33:59 +08:00
```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 dont forget all other extensions.
Document,
Paragraph,
Text,
// …
],
2021-04-08 04:28:29 +08:00
})
2021-02-05 00:33:59 +08:00
```
2021-04-07 05:36:07 +08:00
Learn [more about custom extensions in our guide](/guide/custom-extensions).