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

Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into feature/remove-inferred-commands

Browse Source 
# Conflicts:
#	docs/src/demos/Experiments/Annotation/extension/annotation.ts
#	docs/src/demos/Experiments/Color/extension/Color.ts
#	docs/src/demos/Experiments/Details/details.ts
This commit is contained in:
Philipp Kühn
2021-02-16 18:08:12 +01:00
parent 8fda044502 f6f467949c
commit e4cb53eab7
57 changed files with 813 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/src/docPages/api/commands.md
View File

@@ -186,6 +186,29 @@ Have a look at all of the core commands listed below. They should give you a goo
| .selectNodeForward() | Select a node forward. |
| .selectParentNode() | Select the parent node. |
## Example use cases
### Quote a text
TODO
Add a blockquote, with a specified text, add a paragraph below, set the cursor there.
```js
// Untested, work in progress, likely to change
this.editor
.chain()
.focus()
.createParagraphNear()
.insertText(text)
.setBlockquote()
.insertHTML('<p></p>')
.createParagraphNear()
.unsetBlockquote()
.createParagraphNear()
.insertHTML('<p></p>')
.run()
```
## Add your own commands
All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.

8
docs/src/docPages/api/extensions.md
View File

@@ -3,7 +3,9 @@
## toc
## Introduction
Extensions add new capabilities to tiptap. [Nodes](/api/nodes) and [marks](/api/marks) are rendered in HTML. Extensions can’t add to the schema, but can add functionality or change the behaviour of the editor.
Extensions add new capabilities to tiptap and you’ll read the word extension here very often. Actually, there are literal Extensions. Those can’t add to the schema, but can add functionality or change the behaviour of the editor.
There are also some extensions with more capabilities. We call them [nodes](/api/nodes) and [marks](/api/marks) which can render content in the editor.
## List of provided extensions
| Title | Default Extension | Source Code |
@@ -19,7 +21,7 @@ Extensions add new capabilities to tiptap. [Nodes](/api/nodes) and [marks](/api/
| [TextAlign](/api/extensions/text-align) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) |
| [Typography](/api/extensions/typography) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/) |
You don’t have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. See an example on [how to use `defaultExtensions()`](/examples/default).
You don’t have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`defaultExtensions()`](/guide/configuration#default-extensions).
## How extensions work
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
@@ -50,7 +52,7 @@ const editor = new Editor({
],
```
Learn [more about custom extensions in our guide](/guide/build-extensions).
Learn [more about custom extensions in our guide](/guide/extend-extensions).
### ProseMirror plugins
ProseMirror has a fantastic eco system with many amazing plugins. If you want to use one of them, you can register them with tiptap like that:

8
docs/src/docPages/api/extensions/collaboration-cursor.md
View File

@@ -10,10 +10,6 @@ Open this page in multiple browser windows to test it.
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
:::
::: warning Use with Collaboration
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
:::
## Installation
```bash
# with npm
@@ -23,6 +19,8 @@ npm install @tiptap/extension-collaboration-cursor
yarn add @tiptap/extension-collaboration-cursor
```
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
## Settings
| Option | Type | Default | Description |
| -------- | ---------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -42,4 +40,6 @@ yarn add @tiptap/extension-collaboration-cursor
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/CollaborationCursor" :show-source="false" />
<demo name="Extensions/CollaborationCursor" highlight="11,39-45" />

1
docs/src/docPages/api/extensions/collaboration.md
View File

@@ -48,4 +48,5 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/Collaboration" :show-source="false" />
<demo name="Extensions/Collaboration" highlight="10,27-28,35-37,44" />

6
docs/src/docPages/api/extensions/font-family.md
View File

@@ -5,10 +5,6 @@
This extension enables you to set the font family in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag. The font family is applied as inline style, for example `<span style="font-family: Arial">`.
## Installation
::: warning Use with TextStyle
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
:::
```bash
# with npm
npm install @tiptap/extension-text-style @tiptap/extension-font-family
@@ -17,6 +13,8 @@ npm install @tiptap/extension-text-style @tiptap/extension-font-family
yarn add @tiptap/extension-text-style @tiptap/extension-font-family
```
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
## Settings
| Option | Type | Default | Description |
| ------ | ------- | --------------- | ------------------------------------------------------------------------ |

6
docs/src/docPages/api/nodes/bullet-list.md
View File

@@ -7,10 +7,6 @@ This extension enables you to use bullet lists in the editor. They are rendered
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
::: warning Use with ListItem
This extension requires the [`ListItem`](/api/nodes/list-item) node.
:::
```bash
# with npm
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
@@ -19,6 +15,8 @@ npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
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 |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |

2
docs/src/docPages/api/nodes/emoji.md
View File

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

2
docs/src/docPages/api/nodes/hashtag.md
View File

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

6
docs/src/docPages/api/nodes/list-item.md
View File

@@ -5,10 +5,6 @@
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
::: warning Use with BulletList and/or OrderedList
This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) node.
:::
```bash
# with npm
npm install @tiptap/extension-list-item
@@ -17,6 +13,8 @@ npm install @tiptap/extension-list-item
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 |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |

6
docs/src/docPages/api/nodes/ordered-list.md
View File

@@ -7,10 +7,6 @@ This extension enables you to use ordered lists in the editor. They are rendered
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
::: warning Use with ListItem
This extension requires the [`ListItem`](/api/nodes/list-item) node.
:::
```bash
# with npm
npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
@@ -19,6 +15,8 @@ npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
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 |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |

6
docs/src/docPages/api/nodes/table-cell.md
View File

@@ -5,10 +5,6 @@
Don’t try to use tables without table cells. It won’t be fun.
## Installation
::: warning Use with Table, TableRow and TableHeader
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableHeader`](/api/nodes/table-header) nodes.
:::
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
@@ -17,6 +13,8 @@ npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extensio
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-next/blob/main/packages/extension-table-cell/)

6
docs/src/docPages/api/nodes/table-header.md
View File

@@ -21,10 +21,6 @@ TableRow.extend({
```
## Installation
::: warning Use with Table, TableRow and TableCell
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableCell`](/api/nodes/table-cell) nodes.
:::
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
@@ -33,6 +29,8 @@ npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extensio
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-next/blob/main/packages/extension-table-header/)

6
docs/src/docPages/api/nodes/table-row.md
View File

@@ -5,10 +5,6 @@
What’s a table without rows? Add this extension to make your tables usable.
## Installation
::: warning Use with Table, TableHeader and TableCell
This extension requires the [`Table`](/api/nodes/table), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
:::
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
@@ -17,6 +13,8 @@ npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extensio
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-next/blob/main/packages/extension-table-row/)

6
docs/src/docPages/api/nodes/table.md
View File

@@ -7,10 +7,6 @@ Nothing is as much fun as a good old HTML table. The `Table` extension enables y
Don’t forget to add a `spacer.gif`. (Just joking. If you don’t know what that is, don’t listen.)
## Installation
::: warning Use with TableRow, TableHeader and TableCell
This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
:::
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
@@ -19,6 +15,8 @@ npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extensio
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 |
| ----------------------- | --------- | ----------- | --------------------------------------------------------------------- |

6
docs/src/docPages/api/nodes/task-item.md
View File

@@ -7,10 +7,6 @@ This extension renders a task item list element, which is a `<li>` tag with a `d
This extension doesn’t require any JavaScript framework, it’s based on plain JavaScript.
## Installation
::: warning Use with TaskList
This extension requires the [`TaskList`](/api/nodes/task-list) node.
:::
```bash
# With npm
npm install @tiptap/extension-task-list @tiptap/extension-task-item
@@ -19,6 +15,8 @@ npm install @tiptap/extension-task-list @tiptap/extension-task-item
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 |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |

6
docs/src/docPages/api/nodes/task-list.md
View File

@@ -7,10 +7,6 @@ This extension enables you to use task lists in the editor. They are rendered as
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
::: warning Use with TaskItem
This extension requires the [`TaskItem`](/api/nodes/task-item) extension.
:::
```bash
# with npm
npm install @tiptap/extension-task-list @tiptap/extension-task-item
@@ -19,6 +15,8 @@ npm install @tiptap/extension-task-list @tiptap/extension-task-item
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 |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |