Merge branch 'main' into feature/generate-html-from-json-document

# Conflicts:
#	packages/core/src/ExtensionManager.ts
This commit is contained in:
Philipp Kühn
2020-09-09 20:50:53 +02:00
59 changed files with 929 additions and 785 deletions

View File

@@ -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()
})
```

View File

@@ -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>

View File

@@ -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 |

View File

@@ -6,7 +6,9 @@ Its 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>

View File

@@ -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 |

View File

@@ -1 +1,14 @@
# Document
# Document
**The `Document` extension is required**, no matter what you build with tiptap. Its a so called “topNode”, a node thats 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`). Thats 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" />

View File

@@ -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],
}),
],

View File

@@ -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>

View File

@@ -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 |

View File

@@ -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. |

View File

@@ -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. |

View File

@@ -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>

View File

@@ -1,2 +1,19 @@
# Paragraph
Enables you to use paragraphs in the editor.
Yes, the schema is very strict. Without this extension you wont 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" />

View File

@@ -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>

View File

@@ -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

View File

@@ -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">

View File

@@ -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>

View File

@@ -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
])
```