add installation instructions to all extensions
This commit is contained in:
@@ -7,6 +7,15 @@ Type `**two asterisks**` or `__two underlines__` and it will magically transform
|
|||||||
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
|
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-bold
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-bold
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -7,6 +7,15 @@ Type `* `, `- ` or `+ ` at the beginning of a new line and it will magi
|
|||||||
The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
|
The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-bullet-list
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-bullet-list
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -7,6 +7,15 @@ Type three backticks and a space <code>```</code> and a code b
|
|||||||
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though.
|
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-code-block
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-code-block
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -3,6 +3,15 @@ The Code extensions enables you to use the `<code>` HTML tag in the editor. If y
|
|||||||
|
|
||||||
Type something with <code>\`back-ticks around\`</code> and it will magically transform to `inline code` while you type.
|
Type something with <code>\`back-ticks around\`</code> and it will magically transform to `inline code` while you type.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-code
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-code
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -7,6 +7,15 @@ The node is very tiny though. It defines a name of the node (`document`), is con
|
|||||||
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.
|
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.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-document
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-document
|
||||||
|
```
|
||||||
|
|
||||||
## Source code
|
## Source code
|
||||||
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
|
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
# HardBreak
|
# HardBreak
|
||||||
The HardBreak extensions adds support for the `<br>` HTML tag, which forces a line break.
|
The HardBreak extensions adds support for the `<br>` HTML tag, which forces a line break.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-hard-break
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-hard-break
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
*None*
|
*None*
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,15 @@ The Heading extension adds support for headings of different levels. Headings ar
|
|||||||
|
|
||||||
Type `# ` at the beginning of a new line and it will magically transform to a headline, same for `## `, `### `, `#### `, `##### ` and `###### `.
|
Type `# ` at the beginning of a new line and it will magically transform to a headline, same for `## `, `### `, `#### `, `##### ` and `###### `.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-heading
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-heading
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------------------ | -------------------------------------------- |
|
| ------ | ------ | ------------------ | -------------------------------------------- |
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
# History
|
# History
|
||||||
This extension provides history support. All changes to the document will be tracked and can be removed with `undo`. Undone changes can be applied with `redo` again.
|
This extension provides history support. All changes to the document will be tracked and can be removed with `undo`. Undone changes can be applied with `redo` again.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-history
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-history
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
*None*
|
*None*
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,15 @@ Use this extension to render text in *italic*. If you pass `<em>`, `<i>` tags, o
|
|||||||
The extension will generate the corresponding `<em>` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `<em>` HTML tags.
|
The extension will generate the corresponding `<em>` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `<em>` HTML tags.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-italic
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-italic
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
# Link
|
# Link
|
||||||
Enables you to use the `<a>` HTML tag in the editor.
|
Enables you to use the `<a>` HTML tag in the editor.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-link
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-link
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ----------- | ------- | ------- | -------------------------------------------- |
|
| ----------- | ------- | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -5,6 +5,15 @@ Enables you to use the `<li>` HTML tag in the editor.
|
|||||||
This extensions is intended to be used with the `BulletList` or `OrderedList` extension.
|
This extensions is intended to be used with the `BulletList` or `OrderedList` extension.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-list-item
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-list-item
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -5,6 +5,15 @@ Enables you to use the `<ol>` HTML tag in the editor.
|
|||||||
This extensions is intended to be used with the `ListItem` extension.
|
This extensions is intended to be used with the `ListItem` extension.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-ordered-list
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-ordered-list
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
# Paragraph
|
# Paragraph
|
||||||
Yes, the schema is very strict. Without this extension you won’t even be able 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.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-paragraph
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-paragraph
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -7,6 +7,15 @@ Type `~text between tildes~` and it will be magically ~~striked through~~ while
|
|||||||
The extension will generate the corresponding `<s>` HTML tags when reading contents of the `Editor` instance. All text striked through, regardless of the method will be normalized to `<s>` HTML tags.
|
The extension will generate the corresponding `<s>` HTML tags when reading contents of the `Editor` instance. All text striked through, regardless of the method will be normalized to `<s>` HTML tags.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-strike
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-strike
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -5,6 +5,15 @@
|
|||||||
Tiptap 1 tried to hide that node from you, but it has always been there.
|
Tiptap 1 tried to hide that node from you, but it has always been there.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-text
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-text
|
||||||
|
```
|
||||||
|
|
||||||
## Source code
|
## Source code
|
||||||
[packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
|
[packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,15 @@ Use this extension to render text <u>underlined</u>. If you pass `<u>` tags, or
|
|||||||
The extension will generate the corresponding `<u>` HTML tags when reading contents of the `Editor` instance. All text marked underlined, regardless of the method will be normalized to `<u>` HTML tags.
|
The extension will generate the corresponding `<u>` HTML tags when reading contents of the `Editor` instance. All text marked underlined, regardless of the method will be normalized to `<u>` HTML tags.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-underline
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-underline
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| ------ | ------ | ------- | -------------------------------------------- |
|
| ------ | ------ | ------- | -------------------------------------------- |
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ Yes, it’s tedious work to upgrade your favorite text editor to a new API, but
|
|||||||
The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you need to know:
|
The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you need to know:
|
||||||
|
|
||||||
### 1. Explicitly register the Document, Text and Paragraph extensions
|
### 1. Explicitly register the Document, Text and Paragraph extensions
|
||||||
|
|
||||||
Tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/extensions/document), [Paragraph](/api/extensions/paragraph) and [Text](/api/extensions/text) extensions.
|
Tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/extensions/document), [Paragraph](/api/extensions/paragraph) and [Text](/api/extensions/text) extensions.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@@ -31,8 +30,6 @@ new Editor({
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 2. New document type
|
### 2. New document type
|
||||||
**We renamed the default `Document` 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.
|
**We renamed the default `Document` 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.
|
||||||
|
|
||||||
@@ -81,13 +78,11 @@ const CustomExtension = new Node()
|
|||||||
Don’t forget to call `create()` in the end! Read more about [all the nifty details building custom extensions](/guide/custom-extensions) in our guide.
|
Don’t forget to call `create()` in the end! Read more about [all the nifty details building custom extensions](/guide/custom-extensions) in our guide.
|
||||||
|
|
||||||
### 4. Blockquotes must not be nested anymore
|
### 4. Blockquotes must not be nested anymore
|
||||||
|
|
||||||
:::warning Breaking Change
|
:::warning Breaking Change
|
||||||
Currently, blockquotes must not be nested anymore. That said, we’re working on bringing it back. If you use nested blockquotes in your app, don’t upgrade yet.
|
Currently, blockquotes must not be nested anymore. That said, we’re working on bringing it back. If you use nested blockquotes in your app, don’t upgrade yet.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### 5. Renamed API methods
|
### 5. Renamed API methods
|
||||||
|
|
||||||
[We renamed a lot of commands](/api/commands), hopefully you can migrate to the new API with search & replace. Here is a list of what changed:
|
[We renamed a lot of commands](/api/commands), hopefully you can migrate to the new API with search & replace. Here is a list of what changed:
|
||||||
|
|
||||||
| Old method name | New method name |
|
| Old method name | New method name |
|
||||||
@@ -96,7 +91,6 @@ Currently, blockquotes must not be nested anymore. That said, we’re working on
|
|||||||
| ~~`getJSON`~~ | `json` |
|
| ~~`getJSON`~~ | `json` |
|
||||||
|
|
||||||
### 6. .focus() isn’t called on every command anymore
|
### 6. .focus() isn’t called on every command anymore
|
||||||
|
|
||||||
We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every other command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor. With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
|
We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every other command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor. With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
Reference in New Issue
Block a user