Hello, I am trying to get the collaboration cursor plugin to work. On adding it to the TipTap editor, it throws an undefined doc error at runtime. It seems the error has to do with the cursor-plugin. Here’s the stack trace. ‘doc’ refers to a Y.Doc.
What eludes me is that it works with the HocusPocus backend but I am trying to get it to work with the y-websocket provider.
Here’s my code for reference. Section and SectionManager are my own extensions.
const Editor = (props: IEditor) => {
const socketProtocol = location.protocol === "https:" ? "wss:" : "ws:";
const context = useContext(DocumentContext);
const currentUser = useContext(UserContext);
const documentOwner = context.owner;
const wsProvider = new WebsocketProvider(
`${socketProtocol}//` + location.host + "/ws",
"document",
doc,
{
disableBc: true
},
);
const editor = useEditor({
autofocus: true,
extensions: [
StarterKit.configure({
history: false,
}),
Collaboration.configure({
document: doc,
}),
CollaborationCursor.configure({
provider: wsProvider,
}),
Section,
SectionManagerExtension,
],
});
if (editor) {
editor.storage.sectionManagerExtension.documentOwner = documentOwner;
editor.storage.sectionManagerExtension.currentUser = currentUser.username;
}
return (
<>
{editor && <SectionToolbarButton editor={editor} />}
<div
style={{
marginTop: 10,
marginLeft: 200,
marginRight: 200,
}}
>
<h1>{context.documentName}</h1>
<EditorContent
editor={editor}
/>
{props.debug && <pre>{JSON.stringify(editor?.getJSON(), null, 2)}</pre>}
</div>
</>
);
};
export default Editor;