docs: update content

This commit is contained in:
Hans Pagel 2020-12-03 17:23:54 +01:00
parent f847bacc62
commit 6342a757ef
6 changed files with 32 additions and 17 deletions

View File

@ -3,7 +3,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 :::pro Pro Extension
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production. We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
::: :::

View File

@ -1,9 +1,13 @@
# Collaboration # Collaboration
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.
[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration?minimal=true)
The Collaboration extension enables you to collaborate with others in a single 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 history works totally different in a collaborative editing setup. If you undo a change, you dont want to undo changes of other users. To handle that behaviour this extension provides an own `undo` and `redo` command. Dont load the default [`History`](/api/extensions/history) extension together with the Collaboration extension to avoid conflicts. The history works totally different in a collaborative editing setup. If you undo a change, you dont want to undo changes of other users. To handle that behaviour this extension provides an own `undo` and `redo` command. Dont load the default [`History`](/api/extensions/history) extension together with the Collaboration extension to avoid conflicts.
:::premium Pro Extension :::pro Pro Extension
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production. We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
::: :::
@ -22,10 +26,19 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
| provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. | | provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
## Commands ## Commands
*None* | Command | Parameters | Description |
| ------- | ---------- | --------------------- |
| undo | — | Undo the last change. |
| redo | — | Redo the last change. |
## Keyboard shortcuts ## Keyboard shortcuts
*None* ### Undo
* Windows/Linux: `Control` `Z`
* macOS: `Cmd` `Z`
### Redo
* Windows/Linux: `Shift` `Control` `Z` or `Control` `Y`
* macOS: `Shift` `Cmd` `Z` or `Cmd` `Y`
## Source code ## Source code
[packages/extension-collaboration/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/) [packages/extension-collaboration/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/)

View File

@ -28,8 +28,8 @@ yarn add @tiptap/extension-history
* macOS: `Cmd` `Z` * macOS: `Cmd` `Z`
### Redo ### Redo
* Windows/Linux: `Shift` `Control` `Z` * Windows/Linux: `Shift` `Control` `Z` or `Control` `Y`
* macOS: `Shift` `Cmd` `Z` * macOS: `Shift` `Cmd` `Z` or `Cmd` `Y`
## 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/)

View File

@ -1,15 +1,9 @@
# Collaborative editing # Collaborative editing
:::premium Become a sponsor :::pro Become a sponsor
Using collaborative editing in production? Do the right thing and [sponsor our work](/sponsor)! Using collaborative editing in production? Do the right thing and [sponsor our work](/sponsor)!
::: :::
<!--
TODO:
- Pass auth token to the provider
-
-->
## toc ## toc
## Introduction ## Introduction
@ -205,6 +199,12 @@ Yes, its magic. As already mentioned, that is all based on the fantastic Y.js
## Store the content ## Store the content
Our collaborative editing backend is ready to handle advanced use cases, like authorization, persistence and scaling. Lets go through a few common use cases here! Our collaborative editing backend is ready to handle advanced use cases, like authorization, persistence and scaling. Lets go through a few common use cases here!
:::pro Backend as a Service (Paid)
Dont want to wrap your head around the backend part? No worries, we offer a managed backend. For less than 1.000 documents, its $49/month (VAT may apply) and probably saves you a ton of time.
Send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev) for further details.
:::
### Authentication ### Authentication
With the `onConnect` hook you can write a custom Promise to check if a client is authenticated. That can be a request to an API, to a microservice, a database query, or whatever is needed, as long as its executing `resolve()` at some point. You can also pass contextual data to the `resolve()` method which will be accessible in other hooks. With the `onConnect` hook you can write a custom Promise to check if a client is authenticated. That can be a request to an API, to a microservice, a database query, or whatever is needed, as long as its executing `resolve()` at some point. You can also pass contextual data to the `resolve()` method which will be accessible in other hooks.
@ -312,6 +312,8 @@ const server = Server.configure({
server.listen() server.listen()
``` ```
There is no method to restore documents from an external source, so youll need a [persistence driver](#persist-the-document) though. Those persistence drivers store every change to the document. Thats probably not needed in your external source, but is needed to make the merging of changes conflict-free in the collaborative editing backend.
### Scale with Redis (Advanced) ### Scale with Redis (Advanced)
To scale the WebSocket server, you can spawn multiple instances of the server behind a load balancer and sync changes between the instances through Redis. Install the Redis adapter and register it with hocuspocus: To scale the WebSocket server, you can spawn multiple instances of the server behind a load balancer and sync changes between the instances through Redis. Install the Redis adapter and register it with hocuspocus:

View File

@ -1,8 +1,8 @@
--- ---
title: Headless rich text editor title: A Headless Rich Text WYSIWYG Editor
--- ---
# tiptap a headless text editor framework # tiptap a headless text editor
[![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)

View File

@ -263,7 +263,7 @@
color: $colorRed; color: $colorRed;
} }
&.premium { &.pro {
border-color: rgba($colorOrange, 0.1); border-color: rgba($colorOrange, 0.1);
background-color: rgba($colorOrange, 0.1); background-color: rgba($colorOrange, 0.1);
color: $colorOrange; color: $colorOrange;