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

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2020-12-01 12:03:50 +01:00
parent 62d7163e30
commit 07af85999c
5 changed files with 18 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ This extension adds information about all connected users (like their name and a
Open this page in multiple browser windows to test it. Open this page in multiple browser windows to test it.
:::premium Pro Extension :::premium Pro Extension
We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor) We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
::: :::
::: warning Use with Collaboration ::: warning Use with Collaboration
@@ -22,11 +22,10 @@ yarn add @tiptap/extension-collaboration-cursor
## Settings ## Settings
| Option | Type | Default | Description | | Option | Type | Default | Description |
| -------- | ---------- | ----------- | ----------------------------------------------------------------------------------- | | -------- | ---------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| provider | `Object` | `null` | The Y.js provider, for example a WebSocket connection. | | provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
| name | `String` | `'Someone'` | The name of the current user. | | user | `Object` | `{ user: null, color: null }` | Attributes of the current user, assumes to have a name and a color, but can be used with any attribute. |
| color | `String` | `'#cccccc'` | The current user’s cursor color. | | render | `Function` | … | A render function for the cursor, look at [the extension source code](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/) for an example. |
| render | `Function` | … | A render function for the cursor, look at the extension source code for an example. |
## Commands ## Commands
| Command | Parameters | Description | | Command | Parameters | Description |
@@ -40,4 +39,4 @@ yarn add @tiptap/extension-collaboration-cursor
:::warning Public :::warning Public
The content of this editor is shared with other users. The content of this editor is shared with other users.
::: :::
<demo name="Extensions/CollaborationCursor" highlight="11,48-52" /> <demo name="Extensions/CollaborationCursor" highlight="11,38-44" />

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

@@ -2,24 +2,22 @@
The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project. The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project.
:::premium Pro Extension :::premium Pro Extension
We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor) We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
::: :::
## Installation ## Installation
```bash ```bash
# with npm # with npm
npm install @tiptap/extension-collaboration yjs y-webrtc npm install @tiptap/extension-collaboration yjs y-websocket
# with Yarn # with Yarn
yarn add @tiptap/extension-collaboration yjs y-webrtc yarn add @tiptap/extension-collaboration yjs y-websocket
``` ```
## Settings ## Settings
<!-- TODO -->
| Option | Type | Default | Description | | Option | Type | Default | Description |
| -------- | ---- | ------- | ----------- | | -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------- |
| provider | | | | | provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
| type | | | |
## Commands ## Commands
*None* *None*
@@ -34,4 +32,4 @@ yarn add @tiptap/extension-collaboration yjs y-webrtc
:::warning Public :::warning Public
The content of this editor is shared with other users. The content of this editor is shared with other users.
::: :::
<demo name="Extensions/Collaboration" highlight="10-12,30-32,43-46,53" /> <demo name="Extensions/Collaboration" highlight="10,26-27,34-36" />

4
docs/src/docPages/api/marks/link.md
View File

@@ -1,9 +1,9 @@
# Link # Link
The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work. The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
In a real world application, you would probably add a more sophisticated user interface. [Check out the example](/examples/links) to see how that could look like. In a real world application, you would probably add a more sophisticated user interface.
Pasted URLs will be linked automatically. Pasted URLs will be transformed to links automatically.
## Installation ## Installation
```bash ```bash

2
docs/src/docPages/guide/build-custom-extensions.md
View File

@@ -383,7 +383,7 @@ const CustomLink = Link.extend({
}) })
``` ```
There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/advanced-node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes. There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
## Start from scratch ## Start from scratch
You can also build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration. You can also build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration.

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

@@ -2,17 +2,11 @@
title: Headless rich text editor title: Headless rich text editor
--- ---
:::error Work in progress # tiptap – a headless text editor framework
Nothing here is ready, don’t use it in production.
:::
# Introduction
[![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core) [![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/core.svg)](https://npmcharts.com/compare/@tiptap/core?minimal=true) [![Downloads](https://img.shields.io/npm/dm/@tiptap/core.svg)](https://npmcharts.com/compare/@tiptap/core?minimal=true)
[![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core) [![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core)
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis) [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
<!-- [![Filesize](https://img.badgesize.io/https://unpkg.com/tiptap/dist/tiptap.min.js?compression=gzip&label=size&colorB=000000)](https://www.npmjs.com/package/tiptap) -->
<!-- [![Build Status](https://github.com/ueberdosis/tiptap-next/workflows/build/badge.svg)](https://github.com/ueberdosis/tiptap-next/actions) -->
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*. 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*.