mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-24 19:59:02 +08:00
Merge branch 'main' of github.com:ueberdosis/tiptap-next into main
This commit is contained in:
commit
037658e701
@ -64,7 +64,7 @@ export default {
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
Highlight,
|
||||
Highlight.configure({ multicolor: true }),
|
||||
],
|
||||
content: `
|
||||
<p>This isn’t highlighted.</s></p>
|
||||
|
@ -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 |
|
||||
|
@ -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()
|
||||
|
@ -19,7 +19,7 @@ export interface ExtensionConfig<Options = any, Commands = {}> {
|
||||
*/
|
||||
addGlobalAttributes?: (this: {
|
||||
options: Options,
|
||||
}) => GlobalAttributes,
|
||||
}) => GlobalAttributes | {},
|
||||
|
||||
/**
|
||||
* Commands
|
||||
|
@ -60,7 +60,7 @@ export interface MarkConfig<Options = any, Commands = {}> extends Overwrite<Exte
|
||||
this: {
|
||||
options: Options,
|
||||
},
|
||||
) => Attributes,
|
||||
) => Attributes | {},
|
||||
|
||||
/**
|
||||
* Commands
|
||||
|
@ -95,7 +95,7 @@ export interface NodeConfig<Options = any, Commands = {}> extends Overwrite<Exte
|
||||
this: {
|
||||
options: Options,
|
||||
},
|
||||
) => Attributes,
|
||||
) => Attributes | {},
|
||||
|
||||
/**
|
||||
* Commands
|
||||
|
@ -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: <HighlightOptions>{
|
||||
multicolor: false,
|
||||
HTMLAttributes: {},
|
||||
},
|
||||
|
||||
addAttributes() {
|
||||
if (!this.options.multicolor) {
|
||||
return {}
|
||||
}
|
||||
|
||||
return {
|
||||
color: {
|
||||
default: null,
|
||||
|
Loading…
Reference in New Issue
Block a user