diff --git a/docs/src/demos/Marks/Highlight/index.vue b/docs/src/demos/Marks/Highlight/index.vue index 70eefe826..ececcc218 100644 --- a/docs/src/demos/Marks/Highlight/index.vue +++ b/docs/src/demos/Marks/Highlight/index.vue @@ -64,7 +64,7 @@ export default { Document, Paragraph, Text, - Highlight, + Highlight.configure({ multicolor: true }), ], content: `

This isn’t highlighted.

diff --git a/docs/src/docPages/api/marks/highlight.md b/docs/src/docPages/api/marks/highlight.md index 1d98c4340..f30f6ea01 100644 --- a/docs/src/docPages/api/marks/highlight.md +++ b/docs/src/docPages/api/marks/highlight.md @@ -13,9 +13,10 @@ yarn add @tiptap/extension-highlight ``` ## Settings -| Option | Type | Default | Description | -| -------------- | -------- | ------- | --------------------------------------------------------------------- | -| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. | +| Option | Type | Default | Description | +| -------------- | --------- | ------- | --------------------------------------------------------------------- | +| multicolor | `Boolean` | `false` | Add support for multiple colors. | +| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md index 804a84256..5d36660a3 100644 --- a/docs/src/docPages/guide/collaborative-editing.md +++ b/docs/src/docPages/guide/collaborative-editing.md @@ -216,7 +216,7 @@ const server = Server.configure({ const { requestHeaders, requestParameters } = data // Your code here, for example a request to an API - // If the user is not authorized … + // If the user is not authenticated … if (requestParameters.access_token !== 'super-secret-token') { return reject() } @@ -226,7 +226,7 @@ const server = Server.configure({ user_id: 1234, } - // If the user is authorized … + // If the user is authenticated … resolve(context) }, }) @@ -315,14 +315,41 @@ server.listen() There is no method to restore documents from an external source, so you’ll need a [persistence driver](#persist-the-document) though. Those persistence drivers store every change to the document. That’s 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) -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: + +:::warning Keep in mind +The redis adapter only syncs document changes. Collaboration cursors are not yet supported! +::: + +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. Import the Redis adapter and register it with hocuspocus. For a full documentation on all available redis and redis cluster options, check out the [ioredis API docs](https://github.com/luin/ioredis/blob/master/API.md). ```js import { Server } from '@hocuspocus/server' import { Redis } from '@hocuspocus/redis' const server = Server.configure({ - persistence: new Redis('redis://:password@127.0.0.1:1234/0'), + persistence: new Redis({ + host: '127.0.0.1', + port: 6379, + }), +}) + +server.listen() +``` + +If you want to use a redis cluster, use the redis cluster adapter: + +```js +import { Server } from '@hocuspocus/server' +import { RedisCluster } from '@hocuspocus/redis' + +const server = Server.configure({ + persistence: new RedisCluster({ + scaleReads: 'all', + redisOptions: { + host: '127.0.0.1', + port: 6379, + } + }), }) server.listen() diff --git a/packages/core/src/Extension.ts b/packages/core/src/Extension.ts index ac38d3c71..d285136bf 100644 --- a/packages/core/src/Extension.ts +++ b/packages/core/src/Extension.ts @@ -19,7 +19,7 @@ export interface ExtensionConfig { */ addGlobalAttributes?: (this: { options: Options, - }) => GlobalAttributes, + }) => GlobalAttributes | {}, /** * Commands diff --git a/packages/core/src/Mark.ts b/packages/core/src/Mark.ts index 3e0174982..57eb43b6b 100644 --- a/packages/core/src/Mark.ts +++ b/packages/core/src/Mark.ts @@ -60,7 +60,7 @@ export interface MarkConfig extends Overwrite Attributes, + ) => Attributes | {}, /** * Commands diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts index 1869164f8..b4a05b9bc 100644 --- a/packages/core/src/Node.ts +++ b/packages/core/src/Node.ts @@ -95,7 +95,7 @@ export interface NodeConfig extends Overwrite Attributes, + ) => Attributes | {}, /** * Commands diff --git a/packages/extension-highlight/src/index.ts b/packages/extension-highlight/src/index.ts index cd172077b..c1f298907 100644 --- a/packages/extension-highlight/src/index.ts +++ b/packages/extension-highlight/src/index.ts @@ -7,6 +7,7 @@ import { } from '@tiptap/core' export interface HighlightOptions { + multicolor: boolean, HTMLAttributes: { [key: string]: any }, @@ -19,10 +20,15 @@ const Highlight = Mark.create({ name: 'highlight', defaultOptions: { + multicolor: false, HTMLAttributes: {}, }, addAttributes() { + if (!this.options.multicolor) { + return {} + } + return { color: { default: null,