diff --git a/.changeset/itchy-swans-kick.md b/.changeset/itchy-swans-kick.md new file mode 100644 index 0000000000..b0c01a8b42 --- /dev/null +++ b/.changeset/itchy-swans-kick.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-yjs': patch +--- + +Allow BYO provider instead of plate hocuspocus setup. diff --git a/apps/www/content/docs/collaboration.mdx b/apps/www/content/docs/collaboration.mdx index 04793a286f..351ea7aa9a 100644 --- a/apps/www/content/docs/collaboration.mdx +++ b/apps/www/content/docs/collaboration.mdx @@ -35,8 +35,8 @@ const editor = createPlateEditor({ YjsPlugin.configure({ options: { hocuspocusProviderOptions: { - url: "https://hocuspocus.test/hocuspocus", - name: "test", + url: 'https://hocuspocus.test/hocuspocus', + name: 'test', }, }, }), @@ -44,6 +44,9 @@ const editor = createPlateEditor({ }); ``` +As an alternative to allowing plate to create the provider, you may want to pass it yourself. +This can be passed as the `provider` field to `options`. + ## Backend Follow the backend instructions in [Hocuspocus docs](https://tiptap.dev/hocuspocus/getting-started). diff --git a/packages/yjs/src/lib/BaseYjsPlugin.ts b/packages/yjs/src/lib/BaseYjsPlugin.ts index 4f8235fa3d..1d0c222729 100644 --- a/packages/yjs/src/lib/BaseYjsPlugin.ts +++ b/packages/yjs/src/lib/BaseYjsPlugin.ts @@ -1,4 +1,8 @@ -import type { HocuspocusProviderConfiguration } from '@hocuspocus/provider'; +import type { + HocuspocusProviderConfiguration, + onDisconnectParameters, + onSyncedParameters, +} from '@hocuspocus/provider'; import type { WithCursorsOptions } from '@slate-yjs/core'; import { HocuspocusProvider } from '@hocuspocus/provider'; @@ -44,11 +48,32 @@ export const BaseYjsPlugin = createTSlatePlugin({ options: { isConnected: false, isSynced: false, - provider: {} as any, }, }).extend(({ getOptions, setOption }) => { - const { hocuspocusProviderOptions } = getOptions(); + const { hocuspocusProviderOptions, provider } = getOptions(); + if (provider) { + provider.setConfiguration({ + onAwarenessChange() {}, + onConnect() { + setOption('isConnected', true); + provider.onConnect(); + }, + onDisconnect(data: onDisconnectParameters) { + setOption('isConnected', false); + setOption('isSynced', false); + provider.onDisconnect(data); + }, + onSynced(data: onSyncedParameters) { + setOption('isSynced', true); + provider.onSynced(data); + }, + }); + + return { + options: { provider }, + }; + } if (!hocuspocusProviderOptions) { throw new Error('HocuspocusProvider configuration is required'); } @@ -58,7 +83,7 @@ export const BaseYjsPlugin = createTSlatePlugin({ * connected ydoc, is not destroyed, the changes will be synced to other * clients via the connected server. */ - const provider = new HocuspocusProvider({ + const defaultProvider = new HocuspocusProvider({ ...hocuspocusProviderOptions, onAwarenessChange() {}, onConnect() { @@ -77,6 +102,6 @@ export const BaseYjsPlugin = createTSlatePlugin({ }); return { - options: { provider }, + options: { provider: defaultProvider }, }; });