tiptap/docs/src/docPages/api/schema.md

74 lines
2.2 KiB
Markdown
Raw Normal View History

2020-04-20 05:50:55 +08:00
# Schema
2020-09-04 18:35:31 +08:00
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. That enables you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
2020-04-20 05:50:55 +08:00
2020-09-04 18:35:31 +08:00
This schema is *very* strict. You cant use any HTML element or attribute that is not defined in your schema.
2020-09-04 18:35:31 +08:00
Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, dont have any extension that handles `strong` tags registered, youll only see `This is important` without the strong tags.
2020-04-20 20:07:20 +08:00
2020-04-23 21:37:19 +08:00
## How a schema looks like
2020-04-20 20:07:20 +08:00
2020-09-04 18:35:31 +08:00
The most simple schema for a typical *ProseMirror* editor is looking something like that:
2020-04-23 21:37:19 +08:00
```js
{
nodes: {
document: {
content: 'block+',
},
paragraph: {
content: 'inline*',
group: 'block',
parseDOM: [{ tag: 'p' }],
toDOM: () => ['p', 0],
},
text: {
group: 'inline',
},
},
}
```
2020-09-04 18:35:31 +08:00
:::warning Out of date
This content is written for tiptap 1 and needs an update.
:::
2020-04-24 16:05:07 +08:00
We register three nodes here. `document`, `paragraph` and `text`. `document` is the root node which allows one or more block nodes as children (`content: 'block+'`). Since `paragraph` is in the group of block nodes (`group: 'block'`) our document can only contain paragraphs. Our paragraphs allow zero or more inline nodes as children (`content: 'inline*'`) so there can only be `text` in it. `parseDOM` defines how a node can be parsed from pasted HTML. `toDOM` defines how it will be rendered in the DOM.
2020-04-24 15:57:51 +08:00
In tiptap we define every node in its own `Extension` class instead. This allows us to split logic per node. Under the hood the schema will be merged together.
2020-04-23 21:37:19 +08:00
```js
class Document extends Node {
name = 'document'
2020-04-24 16:03:15 +08:00
topNode = true
2020-04-23 21:37:19 +08:00
schema() {
return {
content: 'block+',
}
}
}
class Paragraph extends Node {
name = 'paragraph'
schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [{ tag: 'p' }],
toDOM: () => ['p', 0],
}
}
}
class Text extends Node {
name = 'text'
schema() {
return {
group: 'inline',
}
}
}
```