ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

remove gridsome

Browse Source
This commit is contained in:
Philipp Kühn
2021-09-16 14:41:25 +02:00
parent e012a29240
commit 2f15a11572
311 changed files with 157 additions and 10308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/api/nodes/blockquote.md Normal file
View File

@@ -0,0 +1,36 @@
# Blockquote
[![Version](https://img.shields.io/npm/v/@tiptap/extension-blockquote.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-blockquote)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-blockquote.svg)](https://npmcharts.com/compare/@tiptap/extension-blockquote?minimal=true)
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great to use quotes in the editor.
Type <code>>&nbsp;</code> at the beginning of a new line and it will magically transform to a blockquote.
## Installation
```bash
# with npm
npm install @tiptap/extension-blockquote
# with Yarn
yarn add @tiptap/extension-blockquote
```
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ---------- | ---------- | ----------------------------- |
| blockquote | — | Wrap content in a blockquote. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`B`
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`B`
## Source code
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/)
## Usage
<tiptap-demo name="Nodes/Blockquote"></tiptap-demo>

38
docs/api/nodes/bullet-list.md Normal file
View File

@@ -0,0 +1,38 @@
# BulletList
[![Version](https://img.shields.io/npm/v/@tiptap/extension-bullet-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bullet-list)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bullet-list.svg)](https://npmcharts.com/compare/@tiptap/extension-bullet-list?minimal=true)
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.
## Installation
```bash
# with npm
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
# with Yarn
yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
```
This extension requires the [`ListItem`](/api/nodes/list-item) node.
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ---------- | ---------- | --------------------- |
| bulletList | — | Toggle a bullet list. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`8`
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`8`
## Source code
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/)
## Usage
<tiptap-demo name="Nodes/BulletList"></tiptap-demo>

37
docs/api/nodes/code-block-lowlight.md Normal file
View File

@@ -0,0 +1,37 @@
# CodeBlockLowlight
[![Version](https://img.shields.io/npm/v/@tiptap/extension-code-block-lowlight.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code-block-lowlight.svg)](https://npmcharts.com/compare/@tiptap/extension-code-block-lowlight?minimal=true)
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
## Installation
```bash
# with npm
npm install @tiptap/extension-code-block-lowlight
# with Yarn
yarn add @tiptap/extension-code-block-lowlight
```
## Settings
| Option | Type | Default | Description |
| ------------------- | -------- | ------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| languageClassPrefix | `String` | `'language-'` | Adds a prefix to language classes that are applied to code tags. |
## Commands
| Command | Parameters | Description |
| --------- | ---------- | ----------------------------- |
| codeBlock | — | Wrap content in a code block. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Alt`&nbsp;`C`
* macOS: `Cmd`&nbsp;`Alt`&nbsp;`C`
## Source code
[packages/extension-code-block-lowlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block-lowlight/)
## Usage
<tiptap-demo name="Nodes/CodeBlockLowlight"></tiptap-demo>

41
docs/api/nodes/code-block.md Normal file
View File

@@ -0,0 +1,41 @@
# CodeBlock
[![Version](https://img.shields.io/npm/v/@tiptap/extension-code-block.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code-block)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code-block.svg)](https://npmcharts.com/compare/@tiptap/extension-code-block?minimal=true)
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
::: warning Restrictions
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s [on our roadmap](/api/nodes/code-block-lowlight) though.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-code-block
# with Yarn
yarn add @tiptap/extension-code-block
```
## Settings
| Option | Type | Default | Description |
| ------------------- | -------- | ------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| languageClassPrefix | `String` | `'language-'` | Adds a prefix to language classes that are applied to code tags. |
## Commands
| Command | Parameters | Description |
| --------- | ---------- | ----------------------------- |
| codeBlock | — | Wrap content in a code block. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Alt`&nbsp;`C`
* macOS: `Cmd`&nbsp;`Alt`&nbsp;`C`
## Source code
[packages/extension-code-block/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/)
## Usage
<tiptap-demo name="Nodes/CodeBlock"></tiptap-demo>

26
docs/api/nodes/document.md Normal file
View File

@@ -0,0 +1,26 @@
# Document
[![Version](https://img.shields.io/npm/v/@tiptap/extension-document.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-document)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-document.svg)](https://npmcharts.com/compare/@tiptap/extension-document?minimal=true)
**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 (`doc`), 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. You have to explicitly import it from now on (or use `StarterKit`).
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-document
# with Yarn
yarn add @tiptap/extension-document
```
## Source code
[packages/extension-document/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/)
## Usage
<tiptap-demo name="Nodes/Document"></tiptap-demo>

19
docs/api/nodes/emoji.md Normal file
View File

@@ -0,0 +1,19 @@
# Emoji
## Support for emojis
There is no extension or example yet, but it’s definitely on our list to build a dedicated extension to add emoji support.
If you want to give it a shot yourself, you could start altering the [`Mention`](/api/nodes/mention) node. This uses the [`Suggestion`](/api/utilities/suggestion) utility, which should help with an autocomplete and such things.
:::pro Fund the development ♥
We need your support to maintain, update, support and develop tiptap. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
:::
## Bring your own emoji picker
You can use any emoji picker, or build your own. Just use [commands](/api/commands) to insert the picked emojis.
```js
this.editor.chain().focus().insertContent('✨').run()
```
<tiptap-demo name="Nodes/Emoji"></tiptap-demo>

30
docs/api/nodes/hard-break.md Normal file
View File

@@ -0,0 +1,30 @@
# HardBreak
[![Version](https://img.shields.io/npm/v/@tiptap/extension-hard-break.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-hard-break)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-hard-break.svg)](https://npmcharts.com/compare/@tiptap/extension-hard-break?minimal=true)
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
# with Yarn
yarn add @tiptap/extension-hard-break
```
## Commands
| Command | Parameters | Description |
| --------- | ---------- | ----------------- |
| hardBreak | — | Add a line break. |
## Keyboard shortcuts
* `Shift`&nbsp;`Enter`
* Windows/Linux: `Control`&nbsp;`Enter`
* macOS: `Cmd`&nbsp;`Enter`
## Source code
[packages/extension-hard-break/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/)
## Usage
<tiptap-demo name="Nodes/HardBreak"></tiptap-demo>

7
docs/api/nodes/hashtag.md Normal file
View File

@@ -0,0 +1,7 @@
# Hashtag
:::pro Fund the development ♥
We need your support to maintain, update, support and develop tiptap. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
:::
TODO

37
docs/api/nodes/heading.md Normal file
View File

@@ -0,0 +1,37 @@
# Heading
[![Version](https://img.shields.io/npm/v/@tiptap/extension-heading.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-heading)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-heading.svg)](https://npmcharts.com/compare/@tiptap/extension-heading?minimal=true)
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 heading levels (or styles) 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 <code>#&nbsp;</code> at the beginning of a new line and it will magically transform to a heading, same for <code>##&nbsp;</code>, <code>###&nbsp;</code>, <code>####&nbsp;</code>, <code>#####&nbsp;</code> and <code>######&nbsp;</code>.
## Installation
```bash
# with npm
npm install @tiptap/extension-heading
# with Yarn
yarn add @tiptap/extension-heading
```
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | -------------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| levels | `Array` | `[1, 2, 3, 4, 5, 6]` | Specifies which heading levels are supported. |
## Commands
| Command | Parameters | Description |
| ------- | ---------- | ------------------------------------------------ |
| heading | level | Creates a heading node with the specified level. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Alt`&nbsp;`1-6`
* macOS: `Cmd`&nbsp;`Alt`&nbsp;`1-6`
## Source code
[packages/extension-heading/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/)
## Usage
<tiptap-demo name="Nodes/Heading"></tiptap-demo>

35
docs/api/nodes/horizontal-rule.md Normal file
View File

@@ -0,0 +1,35 @@
# HorizontalRule
[![Version](https://img.shields.io/npm/v/@tiptap/extension-horizontal-rule.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-horizontal-rule)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-horizontal-rule.svg)](https://npmcharts.com/compare/@tiptap/extension-horizontal-rule?minimal=true)
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editor’s initial content, it’ll be rendered accordingly.
Type three dashes (<code>---</code>) or three underscores and a space (<code>___ </code>) at the beginning of a new line and it will magically transform to a horizontal rule.
## Installation
```bash
# with npm
npm install @tiptap/extension-horizontal-rule
# with Yarn
yarn add @tiptap/extension-horizontal-rule
```
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| -------------- | ---------- | ------------------------- |
| horizontalRule | — | Create a horizontal rule. |
## Keyboard shortcuts
*None*
## Source code
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/)
## Usage
<tiptap-demo name="Nodes/HorizontalRule"></tiptap-demo>

30
docs/api/nodes/image.md Normal file
View File

@@ -0,0 +1,30 @@
# Image
[![Version](https://img.shields.io/npm/v/@tiptap/extension-image.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-image)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-image.svg)](https://npmcharts.com/compare/@tiptap/extension-image?minimal=true)
Use this extension to render `<img>` HTML tags. By default, those images are blocks. If you want to render images in line with text set the `inline` option to `true`.
:::warning Restrictions
This extension does only the rendering of images. It doesn’t upload images to your server, that’s a whole different story.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-image
# with Yarn
yarn add @tiptap/extension-image
```
## Settings
| Option | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| inline | `Boolean` | `false` | Renders the image node inline. |
## Source code
[packages/extension-image/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/)
## Usage
<tiptap-demo name="Nodes/Image"></tiptap-demo>

32
docs/api/nodes/list-item.md Normal file
View File

@@ -0,0 +1,32 @@
# ListItem
[![Version](https://img.shields.io/npm/v/@tiptap/extension-list-item.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-list-item)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-list-item.svg)](https://npmcharts.com/compare/@tiptap/extension-list-item?minimal=true)
The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
## Installation
```bash
# with npm
npm install @tiptap/extension-list-item
# with Yarn
yarn add @tiptap/extension-list-item
```
This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) node.
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Keyboard shortcuts
* New list item: `Enter`
* Sink a list item: `Tab`
* Lift a list item: `Shift`&nbsp;`Tab`
## Source code
[packages/extension-list-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/)
## Usage
<tiptap-demo name="Nodes/ListItem"></tiptap-demo>

70
docs/api/nodes/mention.md Normal file
View File

@@ -0,0 +1,70 @@
# Mention
[![Version](https://img.shields.io/npm/v/@tiptap/extension-mention.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-mention)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-mention.svg)](https://npmcharts.com/compare/@tiptap/extension-mention?minimal=true)
Honestly, the mention node is amazing. It adds support for `@mentions`, for example to ping users, *and* provides full control over the rendering.
Literally everything can be customized. You can pass a custom component for the rendering. All examples use `.filter()` to search through items, but feel free to send async queries to an API or add a more advanced library like [fuse.js](https://fusejs.io/) to your project.
## Installation
```bash
# with npm
npm install @tiptap/extension-mention
# with Yarn
yarn add @tiptap/extension-mention
```
## Dependencies
To place the popups correctly, we’re using [tippy.js](https://atomiks.github.io/tippyjs/) in all our examples. You are free to bring your own library, but if you’re fine with it, just install what we use:
```bash
# with npm
npm install tippy.js
# with Yarn
yarn add tippy.js
```
## Rendering
Currently, we’re supporting custom Vue.js components only. To get the required `VueRenderer` install our Vue.js package:
```bash
# with npm
npm install @tiptap/vue-2
# with Yarn
yarn add @tiptap/vue-2
```
If you are using `vue-3` then the `VueRenderer` requires different input:
```js
new VueRenderer(MentionList, {
props: props,
editor: this.editor,
})
```
and not
```js
new VueRenderer(MentionList, {
parent: this,
propsData: props,
})
```
And yes, we plan to support React, too. Meanwhile, you can roll your own `ReactRenderer`, but don’t forget to share it with the community.
It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | -------------------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| renderLabel | `String` | `({ options, node }) => …` | Define how a mention label should be rendered. |
| suggestion | `Object` | `{ … }` | [Read more](/api/utilities/suggestion) |
## Source code
[packages/extension-mention/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/)
## Usage
<tiptap-demo name="Nodes/Mention"></tiptap-demo>

38
docs/api/nodes/ordered-list.md Normal file
View File

@@ -0,0 +1,38 @@
# OrderedList
[![Version](https://img.shields.io/npm/v/@tiptap/extension-ordered-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-ordered-list)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-ordered-list.svg)](https://npmcharts.com/compare/@tiptap/extension-ordered-list?minimal=true)
This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags.
Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.
## Installation
```bash
# with npm
npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
# with Yarn
yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
```
This extension requires the [`ListItem`](/api/nodes/list-item) node.
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ----------- | ---------- | ----------------------- |
| orderedList | — | Toggle an ordered list. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`7`
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`7`
## Source code
[packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/)
## Usage
<tiptap-demo name="Nodes/OrderedList"></tiptap-demo>

38
docs/api/nodes/paragraph.md Normal file
View File

@@ -0,0 +1,38 @@
# Paragraph
[![Version](https://img.shields.io/npm/v/@tiptap/extension-paragraph.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-paragraph)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-paragraph.svg)](https://npmcharts.com/compare/@tiptap/extension-paragraph?minimal=true)
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-paragraph
# with Yarn
yarn add @tiptap/extension-paragraph
```
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| --------- | ---------- | -------------------------------------------- |
| paragraph | — | Transforms all selected nodes to paragraphs. |
## Keyboard shortcuts
* Windows & Linux: `Control`&nbsp;`Alt`&nbsp;`0`
* macOS: `Cmd`&nbsp;`Alt`&nbsp;`0`
## Source code
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/)
## Usage
<tiptap-demo name="Nodes/Paragraph"></tiptap-demo>

22
docs/api/nodes/table-cell.md Normal file
View File

@@ -0,0 +1,22 @@
# TableCell
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-cell.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-cell)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-cell.svg)](https://npmcharts.com/compare/@tiptap/extension-table-cell?minimal=true)
Don’t try to use tables without table cells. It won’t be fun.
## Installation
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
# with Yarn
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
```
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableHeader`](/api/nodes/table-header) nodes.
## Source code
[packages/extension-table-cell/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/)
## Usage
<tiptap-demo name="Nodes/Table"></tiptap-demo>

38
docs/api/nodes/table-header.md Normal file
View File

@@ -0,0 +1,38 @@
# TableHeader
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-header.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-header)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-header.svg)](https://npmcharts.com/compare/@tiptap/extension-table-header?minimal=true)
Table headers are optional. But come on, you want them, don’t you? If you don’t want them, update the `content` attribute of the [`TableRow`](/api/nodes/table-row) extension, like this:
```js
// Table rows without table headers
TableRow.extend({
content: 'tableCell*',
})
```
This is the default, which allows table headers:
```js
// Table rows with table headers (default)
TableRow.extend({
content: '(tableCell | tableHeader)*',
})
```
## Installation
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
# with Yarn
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
```
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableCell`](/api/nodes/table-cell) nodes.
## Source code
[packages/extension-table-header/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-header/)
## Usage
<tiptap-demo name="Nodes/Table"></tiptap-demo>

22
docs/api/nodes/table-row.md Normal file
View File

@@ -0,0 +1,22 @@
# TableRow
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-row.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-row)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-row.svg)](https://npmcharts.com/compare/@tiptap/extension-table-row?minimal=true)
What’s a table without rows? Add this extension to make your tables usable.
## Installation
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
# with Yarn
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
```
This extension requires the [`Table`](/api/nodes/table), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
## Source code
[packages/extension-table-row/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-row/)
## Usage
<tiptap-demo name="Nodes/Table"></tiptap-demo>

58
docs/api/nodes/table.md Normal file
View File

@@ -0,0 +1,58 @@
# Table
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table.svg)](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
Nothing is as much fun as a good old HTML table. The `Table` extension enables you to add this holy grail of WYSIWYG editing to your editor.
Don’t forget to add a `spacer.gif`. (Just joking. If you don’t know what that is, don’t listen.)
## Installation
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
# with Yarn
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
```
This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
## Settings
| Option | Type | Default | Description |
| ----------------------- | --------- | ----------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| resizable | `Boolean` | `false` | |
| handleWidth | `Number` | `5` | |
| cellMinWidth | `Number` | `25` | |
| View | `View` | `TableView` | |
| lastColumnResizable | `Boolean` | `true` | |
| allowTableNodeSelection | `Boolean` | `false` | |
## Commands
| Command | Parameters | Description |
| ------------------ | ---------------------------------------------- | ----------- |
| insertTable | `{ rows = 3, cols = 3, withHeaderRow = true }` | |
| addColumnBefore | – | |
| addColumnAfter | – | |
| deleteColumn | – | |
| addRowBefore | – | |
| addRowAfter | – | |
| deleteRow | – | |
| deleteTable | – | |
| mergeCells | – | |
| splitCell | – | |
| toggleHeaderColumn | – | |
| toggleHeaderRow | – | |
| toggleHeaderCell | – | |
| mergeOrSplit | – | |
| setCellAttribute | `name`, `value` | |
| goToNextCell | – | |
| goToPreviousCell | – | |
| fixTables | – | |
## Source code
[packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/)
## Usage
<tiptap-demo name="Nodes/Table"></tiptap-demo>

32
docs/api/nodes/task-item.md Normal file
View File

@@ -0,0 +1,32 @@
# TaskItem
[![Version](https://img.shields.io/npm/v/@tiptap/extension-task-item.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-task-item)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-task-item.svg)](https://npmcharts.com/compare/@tiptap/extension-task-item?minimal=true)
This extension renders a task item list element, which is a `<li>` tag with a `data-type` attribute set to `taskItem`. It also renders a checkbox inside the list element, which updates a `checked` attribute.
This extension doesn’t require any JavaScript framework, it’s based on Vanilla JavaScript.
## Installation
```bash
# With npm
npm install @tiptap/extension-task-list @tiptap/extension-task-item
# Or: With Yarn
yarn add @tiptap/extension-task-list @tiptap/extension-task-item
```
This extension requires the [`TaskList`](/api/nodes/task-list) node.
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Keyboard shortcuts
* New list item: `Enter`
## Source code
[packages/extension-task-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/)
## Usage
<tiptap-demo name="Nodes/TaskItem"></tiptap-demo>

38
docs/api/nodes/task-list.md Normal file
View File

@@ -0,0 +1,38 @@
# TaskList
[![Version](https://img.shields.io/npm/v/@tiptap/extension-task-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-task-list)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-task-list.svg)](https://npmcharts.com/compare/@tiptap/extension-task-list?minimal=true)
This extension enables you to use task lists in the editor. They are rendered as `<ul data-type="taskList">`. This implementation doesn’t require any framework, it’s using Vanilla JavaScript only.
Type <code>[ ]&nbsp;</code> or <code>[x]&nbsp;</code> at the beginning of a new line and it will magically transform to a task list.
## Installation
```bash
# with npm
npm install @tiptap/extension-task-list @tiptap/extension-task-item
# with Yarn
yarn add @tiptap/extension-task-list @tiptap/extension-task-item
```
This extension requires the [`TaskItem`](/api/nodes/task-item) extension.
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| -------- | ---------- | ------------------- |
| taskList | — | Toggle a task list. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`9`
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`9`
## Source code
[packages/extension-task-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/)
## Usage
<tiptap-demo name="Nodes/TaskList"></tiptap-demo>

24
docs/api/nodes/text.md Normal file
View File

@@ -0,0 +1,24 @@
# Text
[![Version](https://img.shields.io/npm/v/@tiptap/extension-text.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text.svg)](https://npmcharts.com/compare/@tiptap/extension-text?minimal=true)
**The `Text` extension is required**, at least if you want to work with text of any kind and that’s very likely. This extension is a little bit different, it doesn’t even render HTML. It’s plain text, that’s all.
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-text
# with Yarn
yarn add @tiptap/extension-text
```
## Source code
[packages/extension-text/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/)
## Usage
<tiptap-demo name="Nodes/Text"></tiptap-demo>