add installation instructions to all extensions

This commit is contained in:
Hans Pagel
2020-09-23 09:52:04 +02:00
parent f4a76c5448
commit 789296be4e
18 changed files with 145 additions and 7 deletions

View File

@@ -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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-bold
# Or: With Yarn
yarn add @tiptap/extension-bold
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -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 youll get a SyntaxError.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-bullet-list
# Or: With Yarn
yarn add @tiptap/extension-bullet-list
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -7,6 +7,15 @@ Type three backticks and a space <code>&grave;&grave;&grave;</code> and a code b
The CodeBlock extension doesnt come with styling and has no syntax highlighting built-in. Its on our roadmap though.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-code-block
# Or: With Yarn
yarn add @tiptap/extension-code-block
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -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.
## Installation
```bash
# With npm
npm install @tiptap/extension-code
# Or: With Yarn
yarn add @tiptap/extension-code
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-document
# Or: With Yarn
yarn add @tiptap/extension-document
```
## Source code
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)

View File

@@ -1,6 +1,15 @@
# HardBreak
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
*None*

View File

@@ -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 `###### `.
## Installation
```bash
# With npm
npm install @tiptap/extension-heading
# Or: With Yarn
yarn add @tiptap/extension-heading
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------------------ | -------------------------------------------- |

View File

@@ -1,6 +1,15 @@
# 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.
## Installation
```bash
# With npm
npm install @tiptap/extension-history
# Or: With Yarn
yarn add @tiptap/extension-history
```
## Options
*None*

View File

@@ -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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-italic
# Or: With Yarn
yarn add @tiptap/extension-italic
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -1,6 +1,15 @@
# Link
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
| Option | Type | Default | Description |
| ----------- | ------- | ------- | -------------------------------------------- |

View File

@@ -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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-list-item
# Or: With Yarn
yarn add @tiptap/extension-list-item
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-ordered-list
# Or: With Yarn
yarn add @tiptap/extension-ordered-list
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -1,6 +1,15 @@
# Paragraph
Yes, the schema is very strict. Without this extension you wont 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
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-strike
# Or: With Yarn
yarn add @tiptap/extension-strike
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -5,6 +5,15 @@
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
[packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)

View File

@@ -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.
:::
## Installation
```bash
# With npm
npm install @tiptap/extension-underline
# Or: With Yarn
yarn add @tiptap/extension-underline
```
## Options
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |

View File

@@ -13,7 +13,6 @@ Yes, its 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:
### 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 youre 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
@@ -31,8 +30,6 @@ new Editor({
})
```
### 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.
@@ -81,13 +78,11 @@ const CustomExtension = new Node()
Dont 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
:::warning Breaking Change
Currently, blockquotes must not be nested anymore. That said, were working on bringing it back. If you use nested blockquotes in your app, dont upgrade yet.
:::
### 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:
| Old method name | New method name |
@@ -96,7 +91,6 @@ Currently, blockquotes must not be nested anymore. That said, were working on
| ~~`getJSON`~~ | `json` |
### 6. .focus() isnt 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 dont 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