mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel 2021-02-12 15:02:40 +01:00
parent 97450ebafd
commit a69c522455
28 changed files with 82 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/src/demos/Experiments/Annotation/extension/index.ts
View File

@ -1,5 +0,0 @@
import { Annotation } from './annotation'
export * from './annotation'
export default Annotation

0
docs/src/demos/Experiments/Annotation/extension/AnnotationItem.ts → docs/src/demos/Experiments/CollaborationAnnotation/extension/AnnotationItem.ts
View File

0
docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts → docs/src/demos/Experiments/CollaborationAnnotation/extension/AnnotationPlugin.ts
View File

2
docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts → docs/src/demos/Experiments/CollaborationAnnotation/extension/AnnotationState.ts
View File

@ -2,7 +2,7 @@ import * as Y from 'yjs'
import { EditorState, Transaction } from 'prosemirror-state'
import { Decoration, DecorationSet } from 'prosemirror-view'
import { ySyncPluginKey, relativePositionToAbsolutePosition, absolutePositionToRelativePosition } from 'y-prosemirror'
import { AddAnnotationAction, DeleteAnnotationAction, UpdateAnnotationAction } from './annotation'
import { AddAnnotationAction, DeleteAnnotationAction, UpdateAnnotationAction } from './collaboration-annotation'
import { AnnotationPluginKey } from './AnnotationPlugin'
import { AnnotationItem } from './AnnotationItem'

4
docs/src/demos/Experiments/Annotation/extension/annotation.ts → docs/src/demos/Experiments/CollaborationAnnotation/extension/collaboration-annotation.ts
View File

@ -49,7 +49,7 @@ function getMapFromOptions(options: AnnotationOptions): Y.Map<any> {
: options.document?.getMap(options.field) as Y.Map<any>
}
export const Annotation = Extension.create({
export const CollaborationAnnotation = Extension.create({
name: 'annotation',
defaultOptions: <AnnotationOptions>{
@ -135,6 +135,6 @@ export const Annotation = Extension.create({
declare module '@tiptap/core' {
interface AllExtensions {
Annotation: typeof Annotation,
Annotation: typeof CollaborationAnnotation,
}
}

5
docs/src/demos/Experiments/CollaborationAnnotation/extension/index.ts Normal file
View File

@ -0,0 +1,5 @@
import { CollaborationAnnotation } from './collaboration-annotation'
export * from './collaboration-annotation'
export default CollaborationAnnotation

0
docs/src/demos/Experiments/Annotation/index.spec.js → docs/src/demos/Experiments/CollaborationAnnotation/index.spec.js
View File

6
docs/src/demos/Experiments/Annotation/index.vue → docs/src/demos/Experiments/CollaborationAnnotation/index.vue
View File

@ -40,7 +40,7 @@ import Collaboration from '@tiptap/extension-collaboration'
import Bold from '@tiptap/extension-bold'
import Heading from '@tiptap/extension-heading'
import * as Y from 'yjs'
import Annotation from './extension'
import CollaborationAnnotation from './extension'
export default {
components: {
@ -66,7 +66,7 @@ export default {
Text,
Bold,
Heading,
Annotation.configure({
CollaborationAnnotation.configure({
document: this.ydoc,
onUpdate: items => { this.comments = items },
instance: 'editor1',
@ -92,7 +92,7 @@ export default {
Text,
Bold,
Heading,
Annotation.configure({
CollaborationAnnotation.configure({
document: this.ydoc,
instance: 'editor2',
}),

6
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 |
| -------- | ---------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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 |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |

2
docs/src/docPages/experiments.md
View File

@ -7,7 +7,7 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
* [@tiptap/extension-slash-command?](/experiments/commands)
* [@tiptap/extension-iframe?](/experiments/embeds)
* [@tiptap/extension-toggle-list?](/experiments/details)
* [@tiptap/extension-collaboration-annotation?](/experiments/comments)
* [@tiptap/extension-collaboration-annotation](/experiments/collaboration-annotation)
## Waiting for approval
* [@tiptap/extension-placeholder](/experiments/placeholder)

40
docs/src/docPages/experiments/collaboration-annotation.md Normal file
View File

@ -0,0 +1,40 @@
# CollaborationAnnotation
[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration-annotation.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration-annotation)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration-annotation.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration-annotation?minimal=true)
⚠️ Experiment
<!-- :::pro Pro Extension
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
::: -->
## Installation
```bash
# with npm
npm install @tiptap/extension-collaboration-annotation
# with Yarn
yarn add @tiptap/extension-collaboration-annotation
```
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
## Settings
| Option | Type | Default | Description |
| -------- | -------- | ----------- | ---------------------------------------------------------------------------------- |
| document | `Object` | `null` | An initialized Y.js document. |
| field | `String` | `'default'` | Name of a Y.js map, can be changed to sync multiple fields with one Y.js document. |
| map | `Object` | `null` | A raw Y.js map, can be used instead of `document` and `field`. |
## Commands
| Command | Parameters | Description |
| ---------------- | ---------- | ------------------------------------------------------------------------- |
| addAnnotation | data | Adds an annotation to the current selection, takes a string or an object. |
| updateAnnotation | id, data | Update the data that’s associated with an annotation. |
| deleteAnnotation | id | Remove an annotation. |
## Source code
[packages/extension-collaboration-annotation/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-annotation/)
## Usage
<demo name="Experiments/CollaborationAnnotation" />

5
docs/src/docPages/experiments/comments.md
View File

@ -1,5 +0,0 @@
# Comments
⚠️ Experiment
<demo name="Experiments/Annotation" />

2
docs/src/docPages/guide/accessibility.md
View File

@ -1,7 +1,7 @@
# Accessibility
:::pro Fund the development ♥
We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for progress here, [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 progress here, [become a sponsor and fund open-source](/sponsor).
:::
## toc

2
docs/src/docPages/guide/toolbar.md
View File

@ -63,7 +63,7 @@ editor.isActive({ textAlign: 'right' })
If your selection spans multiple nodes or marks, or only part of the selection has a mark, `isActive()` will return `false` and indicate nothing is active. That is how it is supposed to be, because it allows people to apply a new node or mark to that selection right-away.
## Icons
Most editor toolbars use icons for their buttons. In some of our demos, we use the open source icon set [Remix Icon](https://remixicon.com/), that’s free to use. But it’s totally up to you what you use. Here are a few icon sets you can consider:
Most editor toolbars use icons for their buttons. In some of our demos, we use the open-source icon set [Remix Icon](https://remixicon.com/), that’s free to use. But it’s totally up to you what you use. Here are a few icon sets you can consider:
* [Remix Icon](https://remixicon.com/#editor)
* [Font Awesome](https://fontawesome.com/icons?c=editors)

2
docs/src/docPages/introduction.md
View File

@ -10,7 +10,7 @@ title: Headless WYSIWYG Text Editor
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open-source, and free.
## Example
<demo name="Examples/CollaborativeEditing" :show-source="false" inline />

6
docs/src/docPages/sponsor.md
View File

@ -3,16 +3,16 @@
## Introduction
To deliver a top-notch developer experience and user experience, we put ~~hundreds~~ thousands of hours of unpaid work into tiptap. Your funding helps us to make this work more and more financially sustainable. This enables us to provide helpful support, maintain all our packages, keep everything up to date, and develop new features and extensions for tiptap.
Give back to the open source community and [sponsor us on GitHub](https://github.com/sponsors/ueberdosis)! ♥
Give back to the open-source community and [sponsor us on GitHub](https://github.com/sponsors/ueberdosis)! ♥
## Your benefits as a sponsor
* Give back to the open source community
* Give back to the open-source community
* Get early access to private repositories
* Ensure the further maintenace and development of tiptap
* Your issues and pull requests get a `sponsor ♥` label
* Get a sponsor badge in all your comments on GitHub
* Show support in your GitHub profile
* Receive monthly reports about our open source work
* Receive monthly reports about our open-source work
Does that sound good? [Sponsor us on GitHub!](https://github.com/sponsors/ueberdosis)