You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The video shows incorrect behavior, and I can't figure out how to fix this issue. Here is the code for the provider and the plugin.
`
import type {Doc} from 'yjs';
import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {ExcludedProperties, Provider} from '@lexical/yjs';
import {useEffect, useMemo} from 'react';
import {InitialEditorStateType} from './LexicalComposer';
import {
CursorsContainerRef,
useYjsCollaboration,
useYjsFocusTracking,
useYjsHistory,
} from './shared/useYjsCollaboration';
type Props = {
id: string;
providerFactory: (
// eslint-disable-next-line no-shadow
id: string,
yjsDocMap: Map<string, Doc>,
) => Provider;
shouldBootstrap: boolean;
username?: string;
cursorColor?: string;
cursorsContainerRef?: CursorsContainerRef;
initialEditorState?: InitialEditorStateType;
excludedProperties?: ExcludedProperties;
// awarenessData parameter allows arbitrary data to be added to the awareness.
awarenessData?: object;
};
return () => {
// Reseting flag only when unmount top level editor collab plugin. Nested
// editors (e.g. image caption) should unmount without affecting it
if (editor._parentEditor == null) {
collabContext.isCollabActive = false;
}
};
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
-.-2024-04-12-.-11.43.25.mp4
The video shows incorrect behavior, and I can't figure out how to fix this issue. Here is the code for the provider and the plugin.
`
import type {Doc} from 'yjs';
import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {ExcludedProperties, Provider} from '@lexical/yjs';
import {useEffect, useMemo} from 'react';
import {InitialEditorStateType} from './LexicalComposer';
import {
CursorsContainerRef,
useYjsCollaboration,
useYjsFocusTracking,
useYjsHistory,
} from './shared/useYjsCollaboration';
type Props = {
id: string;
providerFactory: (
// eslint-disable-next-line no-shadow
id: string,
yjsDocMap: Map<string, Doc>,
) => Provider;
shouldBootstrap: boolean;
username?: string;
cursorColor?: string;
cursorsContainerRef?: CursorsContainerRef;
initialEditorState?: InitialEditorStateType;
excludedProperties?: ExcludedProperties;
//
awarenessData
parameter allows arbitrary data to be added to the awareness.awarenessData?: object;
};
export function CollaborationPlugin({
id,
providerFactory,
shouldBootstrap,
username,
cursorColor,
cursorsContainerRef,
initialEditorState,
excludedProperties,
awarenessData,
}: Props): JSX.Element {
const collabContext = useCollaborationContext(username, cursorColor);
const {yjsDocMap, name, color} = collabContext;
const [editor] = useLexicalComposerContext();
useEffect(() => {
collabContext.isCollabActive = true;
}, [collabContext, editor]);
const provider = useMemo(
() => providerFactory(id, yjsDocMap),
[id, providerFactory, yjsDocMap],
);
const [cursors, binding] = useYjsCollaboration(
editor,
id,
provider,
yjsDocMap,
name,
color,
shouldBootstrap,
cursorsContainerRef,
initialEditorState,
excludedProperties,
awarenessData,
);
collabContext.clientID = binding.clientID;
useYjsHistory(editor, binding);
useYjsFocusTracking(editor, provider, name, color, awarenessData);
return cursors;
}`
import { Provider } from '@lexical/yjs';
import { WebsocketProvider } from 'y-websocket';
import { Doc } from 'yjs';
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const WEBSOCKET_ENDPOINT = params.get('collabEndpoint') || 'ws://localhost:1234';
const WEBSOCKET_SLUG = 'playground';
const WEBSOCKET_ID = params.get('collabId') || '0';
// parent dom -> child doc
export function createWebsocketProvider(id: string, yjsDocMap: Map<string, Doc>): Provider {
let doc = yjsDocMap.get(id);
}
<CollaborationPlugin
id={
${params.docId}
}providerFactory={createWebsocketProvider}
shouldBootstrap={!skipCollaborationInit}
initialEditorState={value}
/>
Beta Was this translation helpful? Give feedback.
All reactions