Editor Setup

npm install @hocuspocus/provider yjs

import { HocuspocusProviderWebsocket } from "@hocuspocus/provider";

const socket = new HocuspocusProviderWebsocket({
  // Use the URL resolved via Discovery API
  url: "wss://eu-central-1.wiresocket.net",
});

import { HocuspocusProvider } from "@hocuspocus/provider";
import * as Y from "yjs";

const ydoc = new Y.Doc();

const provider = new HocuspocusProvider({
  websocketProvider: socket,
  name: "my-document-id",
  document: ydoc,

  // Use the access_token sub-protocol for authentication
  token: "YOUR_JWT_TOKEN",

  // Lifecycle Callbacks
  onAuthenticated: () => console.log("Authenticated with WireSocket!"),
  onSynced: () => console.log("Content is up to date."),
});

const socket = new HocuspocusProviderWebsocket({
  url: "wss://eu-central-1.wiresocket.net",
  // Pass the token as a sub-protocol
  parameters: {
    protocols: ["access_token", "YOUR_JWT"],
  },
});

const socket = new HocuspocusProviderWebsocket({
  url: "wss://eu-central-1.wiresocket.net?token=YOUR_JWT",
});

// Set local user state
provider.setAwarenessField("user", {
  name: "Jane Doe",
  color: "#ffcc00",
});

// Listen for remote changes
provider.awareness.on("change", () => {
  console.log("Current active users:", provider.awareness.getStates());
});

import { Editor } from "@tiptap/core";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";

const editor = new Editor({
  extensions: [
    Collaboration.configure({
      document: provider.document,
    }),
    CollaborationCursor.configure({
      provider: provider,
    }),
  ],
});

useEffect(() => {
  const provider = new HocuspocusProvider({
    websocketProvider: socket,
    name: docId,
    token: jwt,
  });

  return () => {
    provider.destroy();
  };
}, [socket, docId, jwt]);

const sharedSocket = new HocuspocusProviderWebsocket({
  url: "wss://eu-central-1.wiresocket.net",
});

const docA = new HocuspocusProvider({
  websocketProvider: sharedSocket,
  name: "document-a",
});

const docB = new HocuspocusProvider({
  websocketProvider: sharedSocket,
  name: "document-b",
});