Merge branch 'main' of github.com:ueberdosis/tiptap-next into main
This commit is contained in:
@@ -64,7 +64,7 @@ export default {
|
|||||||
Document,
|
Document,
|
||||||
Paragraph,
|
Paragraph,
|
||||||
Text,
|
Text,
|
||||||
Highlight,
|
Highlight.configure({ multicolor: true }),
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>This isn’t highlighted.</s></p>
|
<p>This isn’t highlighted.</s></p>
|
||||||
|
|||||||
@@ -13,9 +13,10 @@ yarn add @tiptap/extension-highlight
|
|||||||
```
|
```
|
||||||
|
|
||||||
## Settings
|
## Settings
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
|
| -------------- | --------- | ------- | --------------------------------------------------------------------- |
|
||||||
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
| multicolor | `Boolean` | `false` | Add support for multiple colors. |
|
||||||
|
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
||||||
|
|
||||||
## Commands
|
## Commands
|
||||||
| Command | Options | Description |
|
| Command | Options | Description |
|
||||||
|
|||||||
@@ -216,7 +216,7 @@ const server = Server.configure({
|
|||||||
const { requestHeaders, requestParameters } = data
|
const { requestHeaders, requestParameters } = data
|
||||||
// Your code here, for example a request to an API
|
// 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') {
|
if (requestParameters.access_token !== 'super-secret-token') {
|
||||||
return reject()
|
return reject()
|
||||||
}
|
}
|
||||||
@@ -226,7 +226,7 @@ const server = Server.configure({
|
|||||||
user_id: 1234,
|
user_id: 1234,
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the user is authorized …
|
// If the user is authenticated …
|
||||||
resolve(context)
|
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.
|
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)
|
### 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
|
```js
|
||||||
import { Server } from '@hocuspocus/server'
|
import { Server } from '@hocuspocus/server'
|
||||||
import { Redis } from '@hocuspocus/redis'
|
import { Redis } from '@hocuspocus/redis'
|
||||||
|
|
||||||
const server = Server.configure({
|
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()
|
server.listen()
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export interface ExtensionConfig<Options = any, Commands = {}> {
|
|||||||
*/
|
*/
|
||||||
addGlobalAttributes?: (this: {
|
addGlobalAttributes?: (this: {
|
||||||
options: Options,
|
options: Options,
|
||||||
}) => GlobalAttributes,
|
}) => GlobalAttributes | {},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Commands
|
* Commands
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export interface MarkConfig<Options = any, Commands = {}> extends Overwrite<Exte
|
|||||||
this: {
|
this: {
|
||||||
options: Options,
|
options: Options,
|
||||||
},
|
},
|
||||||
) => Attributes,
|
) => Attributes | {},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Commands
|
* Commands
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export interface NodeConfig<Options = any, Commands = {}> extends Overwrite<Exte
|
|||||||
this: {
|
this: {
|
||||||
options: Options,
|
options: Options,
|
||||||
},
|
},
|
||||||
) => Attributes,
|
) => Attributes | {},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Commands
|
* Commands
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import {
|
|||||||
} from '@tiptap/core'
|
} from '@tiptap/core'
|
||||||
|
|
||||||
export interface HighlightOptions {
|
export interface HighlightOptions {
|
||||||
|
multicolor: boolean,
|
||||||
HTMLAttributes: {
|
HTMLAttributes: {
|
||||||
[key: string]: any
|
[key: string]: any
|
||||||
},
|
},
|
||||||
@@ -19,10 +20,15 @@ const Highlight = Mark.create({
|
|||||||
name: 'highlight',
|
name: 'highlight',
|
||||||
|
|
||||||
defaultOptions: <HighlightOptions>{
|
defaultOptions: <HighlightOptions>{
|
||||||
|
multicolor: false,
|
||||||
HTMLAttributes: {},
|
HTMLAttributes: {},
|
||||||
},
|
},
|
||||||
|
|
||||||
addAttributes() {
|
addAttributes() {
|
||||||
|
if (!this.options.multicolor) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: {
|
color: {
|
||||||
default: null,
|
default: null,
|
||||||
|
|||||||
Reference in New Issue
Block a user