Merge branch 'main' into feature/generate-html-from-json-document
# Conflicts: # packages/core/src/ExtensionManager.ts
This commit is contained in:
@@ -1 +1,34 @@
|
||||
# Events
|
||||
# Events
|
||||
|
||||
:::warning Out of date
|
||||
This content is written for tiptap 1 and needs an update.
|
||||
:::
|
||||
|
||||
There are some events you can listen for. A full list of events can be found [here](/api/classes.md#editor-options).
|
||||
|
||||
```js
|
||||
const editor = new Editor({
|
||||
onInit: () => {
|
||||
// editor is initialized
|
||||
},
|
||||
onUpdate: ({ getHTML }) => {
|
||||
// get new content on update
|
||||
const newContent = getHTML()
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
It's also possible to register event listeners afterwards.
|
||||
|
||||
```js
|
||||
const editor = new Editor(…)
|
||||
|
||||
editor.on('init', () => {
|
||||
// editor is initialized
|
||||
})
|
||||
|
||||
editor.on('update', ({ getHTML }) => {
|
||||
// get new content on update
|
||||
const newContent = getHTML()
|
||||
})
|
||||
```
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
@@ -39,7 +41,7 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new Blockquote(),
|
||||
Blockquote(),
|
||||
],
|
||||
content: `
|
||||
<blockquote>
|
||||
|
||||
@@ -6,7 +6,9 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@@ -6,7 +6,9 @@ It’s intended to be used with the `ListItem` extension.
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
@@ -43,7 +45,7 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new BulletList(),
|
||||
BulletList(),
|
||||
],
|
||||
content: `
|
||||
<ul>
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@@ -1 +1,14 @@
|
||||
# Document
|
||||
# Document
|
||||
**The `Document` extension is required**, no matter what you build with tiptap. It’s a so called “topNode”, a node that’s the home to all other nodes. Think of it like the `<body>` tag for your document.
|
||||
|
||||
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block`). That’s all. But have a look yourself:
|
||||
|
||||
:::warning Breaking Change from 1.x → 2.x
|
||||
Tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
|
||||
:::
|
||||
|
||||
## Source Code
|
||||
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Document" highlight="10,28" />
|
||||
@@ -3,7 +3,8 @@ Enables you to use headline HTML tags in the editor.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ---- | ----- |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are supported. |
|
||||
|
||||
## Commands
|
||||
@@ -51,7 +52,7 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new Heading({
|
||||
Heading({
|
||||
levels: [1, 2],
|
||||
}),
|
||||
],
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
Enables you to use the `<hr>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
@@ -39,7 +41,7 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new HorizontalRule(),
|
||||
HorizontalRule(),
|
||||
],
|
||||
content: `
|
||||
<p>Some text.</p>
|
||||
|
||||
@@ -6,7 +6,9 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@@ -3,5 +3,6 @@ Enables you to use the `<a>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ---- | ----- |
|
||||
| openOnClick | Boolean | true | Specifies if links will be opened on click. |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
| openOnClick | Boolean | true | Specifies if links will be opened on click. |
|
||||
|
||||
@@ -3,4 +3,9 @@ Enables you to use the `<li>` HTML tag in the editor.
|
||||
|
||||
::: warning Restrictions
|
||||
This extensions is intended to be used with the `BulletList` or `OrderedList` extension.
|
||||
:::
|
||||
:::
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
@@ -6,7 +6,9 @@ This extensions is intended to be used with the `ListItem` extension.
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
@@ -43,7 +45,7 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new OrderedList(),
|
||||
OrderedList(),
|
||||
],
|
||||
content: `
|
||||
<ol>
|
||||
|
||||
@@ -1,2 +1,19 @@
|
||||
# Paragraph
|
||||
Enables you to use paragraphs in the editor.
|
||||
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
*None*
|
||||
|
||||
## Keybindings
|
||||
*None*
|
||||
|
||||
## Source Code
|
||||
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Paragraph" highlight="11,29" />
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
Enables you to use the `<s>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
@@ -40,7 +42,7 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new Strike(),
|
||||
Strike(),
|
||||
],
|
||||
content: `
|
||||
<p><s>That's strikethrough.</s></p>
|
||||
|
||||
@@ -7,7 +7,7 @@ This extensions is intended to be used with the `TodoList` extension.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ---- | ----- |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| nested | Boolean | false | Specifies if you can nest todo lists. |
|
||||
|
||||
## Commands
|
||||
|
||||
@@ -43,10 +43,10 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new TodoItem({
|
||||
TodoItem({
|
||||
nested: true,
|
||||
}),
|
||||
new TodoList(),
|
||||
TodoList(),
|
||||
],
|
||||
content: `
|
||||
<ul data-type="todo_list">
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
Enables you to use the `<u>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
@@ -40,7 +42,7 @@ export default {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new Underline(),
|
||||
Underline(),
|
||||
],
|
||||
content: `
|
||||
<p><u>This is underlined.</u></p>
|
||||
|
||||
@@ -13,9 +13,9 @@ import Text from '@tiptap/extension-text'
|
||||
|
||||
const editor = new Editor({
|
||||
extensions: [
|
||||
new Document,
|
||||
new Paragraph,
|
||||
new Text,
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
// add more extensions here
|
||||
])
|
||||
})
|
||||
@@ -33,9 +33,9 @@ import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
|
||||
const schema = getSchema([
|
||||
new Document,
|
||||
new Paragraph,
|
||||
new Text,
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
// add more extensions here
|
||||
])
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user