minor improvements

This commit is contained in:
Hans Pagel
2020-09-21 16:59:28 +02:00
parent 26af779d22
commit ece9d0a554
16 changed files with 53 additions and 38 deletions

View File

@@ -1,7 +1,16 @@
# Blockquote # Blockquote
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great you might have guessed to use quotes in the editor. The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great you might have guessed to use quotes in the editor.
Type `> ` at the beginning of a new line and it will be magically transformed to a blockquote. Type `> ` at the beginning of a new line and it will magically transform to a blockquote.
## Installation
```bash
# With npm
npm install @tiptap/extension-blockquote
# Or: With Yarn
yarn add @tiptap/extension-blockquote
```
## Options ## Options
| Option | Type | Default | Description | | Option | Type | Default | Description |
@@ -17,7 +26,7 @@ Type `> ` at the beginning of a new line and it will be magically transformed
* Windows & Linux: `Control` + `Shift` + `9` * Windows & Linux: `Control` + `Shift` + `9`
* macOS: `Command` + `Shift` + `9` * macOS: `Command` + `Shift` + `9`
## Source Code ## Source code
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
## Usage ## Usage

View File

@@ -1,7 +1,7 @@
# Bold # Bold
Use this extension to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editors initial content, they all will be rendered accordingly. Use this extension to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editors initial content, they all will be rendered accordingly.
Type `**two asterisks**` or `__two underlines__` and it will be magically transformed to **bold** text while you type. Type `**two asterisks**` or `__two underlines__` and it will magically transform to **bold** text while you type.
::: warning Restrictions ::: warning Restrictions
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.
@@ -21,7 +21,7 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
* Windows & Linux: `Control` + `B` * Windows & Linux: `Control` + `B`
* macOS: `Command` + `B` * macOS: `Command` + `B`
## Source Code ## Source code
[packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) [packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
## Usage ## Usage

View File

@@ -1,7 +1,7 @@
# BulletList # BulletList
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags, This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
Type `* `, `- ` or `+ ` at the beginning of a new line and it will be magically transformed to a bullet list. Type `* `, `- ` or `+ ` at the beginning of a new line and it will magically transform to a bullet list.
::: warning Use with ListItem ::: warning Use with ListItem
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. 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.
@@ -20,7 +20,7 @@ The `BulletList` extension is intended to be used with the [`ListItem`](/api/ext
## Keyboard shortcuts ## Keyboard shortcuts
* `Control` + `Shift` + `8` * `Control` + `Shift` + `8`
## Source Code ## Source code
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/) [packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
## Usage ## Usage

View File

@@ -20,7 +20,7 @@ The CodeBlock extension doesnt come with styling and has no syntax highlighti
## Keyboard shortcuts ## Keyboard shortcuts
* `Shift` + `Control` + `\` * `Shift` + `Control` + `\`
## Source Code ## Source code
[packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) [packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
## Usage ## Usage

View File

@@ -1,7 +1,7 @@
# Code # Code
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. 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.
Type something with \`back-ticks around\` and it will be magically transformed to `inline code` while you type. Type something with \`back-ticks around\` and it will magically transform to `inline code` while you type.
## Options ## Options
| Option | Type | Default | Description | | Option | Type | Default | Description |
@@ -16,7 +16,7 @@ Type something with \`back-ticks around\` and it will be magically transformed t
## Keyboard shortcuts ## Keyboard shortcuts
* `Alt` + ` * `Alt` + `
## Source Code ## Source code
[packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) [packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
## Usage ## Usage

View File

@@ -7,7 +7,7 @@ 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.
::: :::
## 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/)
## Usage ## Usage

View File

@@ -14,7 +14,7 @@ The HardBreak extensions adds support for the `<br>` HTML tag, which forces a li
* Windows & Linux: `Control` + `Enter` * Windows & Linux: `Control` + `Enter`
* macOS: `Command` + `Enter` * macOS: `Command` + `Enter`
## Source Code ## Source code
[packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) [packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
## Usage ## Usage

View File

@@ -1,7 +1,7 @@
# Heading # Heading
The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six headline levels are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done. The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six headline levels are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done.
Type `# ` at the beginning of a new line and it will be magically transformed 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 `###### `.
## Options ## Options
| Option | Type | Default | Description | | Option | Type | Default | Description |
@@ -22,7 +22,7 @@ Type `# ` at the beginning of a new line and it will be magically transformed
* `Control` + `Shift` + `5` → H5 * `Control` + `Shift` + `5` → H5
* `Control` + `Shift` + `6` → H6 * `Control` + `Shift` + `6` → H6
## Source Code ## Source code
[packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) [packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
## Usage ## Usage

View File

@@ -18,7 +18,7 @@ This extension provides history support. All changes to the document will be tra
* Windows & Linux: `Shift` + `Control` + `Z` * Windows & Linux: `Shift` + `Control` + `Z`
* macOS: `Shift` + `Command` + `Z` * macOS: `Shift` + `Command` + `Z`
## Source Code ## Source code
[packages/extension-history/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) [packages/extension-history/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)
## Usage ## Usage

View File

@@ -1,7 +1,7 @@
# HorizontalRule # HorizontalRule
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editors initial content, itll be rendered accordingly. Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editors initial content, itll be rendered accordingly.
Type three dashes (`---`) or three underscores and a space (`___ `) at the beginning of a new line and it will be magically transformed to a horizontal rule. Type three dashes (`---`) or three underscores and a space (`___ `) at the beginning of a new line and it will magically transform to a horizontal rule.
## Options ## Options
| Option | Type | Default | Description | | Option | Type | Default | Description |
@@ -16,7 +16,7 @@ Type three dashes (`---`) or three underscores and a space (`___ `) at the be
## Keyboard shortcuts ## Keyboard shortcuts
*None* *None*
## Source Code ## Source code
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) [packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
## Usage ## Usage

View File

@@ -19,7 +19,7 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
* Windows & Linux: `Control` + `I` * Windows & Linux: `Control` + `I`
* macOS: `Command` + `I` * macOS: `Command` + `I`
## Source Code ## Source code
[packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) [packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
## Usage ## Usage

View File

@@ -12,7 +12,7 @@ Yes, the schema is very strict. Without this extension you wont even be able
## Keyboard shortcuts ## Keyboard shortcuts
*None* *None*
## Source Code ## Source code
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
## Usage ## Usage

View File

@@ -21,7 +21,7 @@ The extension will generate the corresponding `<s>` HTML tags when reading conte
* Windows & Linux: `Control` + `D` * Windows & Linux: `Control` + `D`
* macOS: `Command` + `D` * macOS: `Command` + `D`
## Source Code ## Source code
[packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) [packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
## Usage ## Usage

View File

@@ -5,7 +5,7 @@
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.
::: :::
## 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/)
## Usage ## Usage

View File

@@ -19,7 +19,7 @@ The extension will generate the corresponding `<u>` HTML tags when reading conte
* Windows & Linux: `Control` + `U` * Windows & Linux: `Control` + `U`
* macOS: `Command` + `U` * macOS: `Command` + `U`
## Source Code ## Source code
[packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) [packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
## Usage ## Usage

View File

@@ -1,6 +1,28 @@
# Installation # Installation
tiptap has a very modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best. tiptap has a modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best.
## Vue.js
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
```bash
# With npm
npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
# Or: With Yarn
yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
```
| Package | Description |
| -------------------------------------------------------------------------------- | ----------------------------------- |
| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor |
| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js |
| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | Installs the most common extensions |
Create a new component and add the following content to get a basic version of tiptap:
<demo name="General/Installation" />
## Plain JavaScript ## Plain JavaScript
@@ -27,22 +49,6 @@ new Editor({
}) })
``` ```
## Vue.js
To use tiptap with Vue.js (and tools that are based on Vue.js) install the Vue.js adapter in your project:
```bash
# With npm
npm install @tiptap/vue @tiptap/vue-starter-kit
# Or: With Yarn
yarn add @tiptap/vue @tiptap/vue-starter-kit
```
We even prepared a Vue.js starter kit for you. That should give you a good headstart. Create a new component and add the following content to get a basic version of tiptap:
<demo name="General/Installation" />
## CodeSandbox ## CodeSandbox
CodeSandbox is an online coding environment. Its great to fiddle around without setting up a local project and its great to share your code with others. CodeSandbox is an online coding environment. Its great to fiddle around without setting up a local project and its great to share your code with others.