@richhtmleditor/collab

Real-time collaboration plugin for Rich HTML Editor via Yjs. Syncs document HTML through a shared Y.Text field, shows a presence bar, and renders remote cursor overlays — built on @richhtmleditor/core.

Current release: 1.2.9 — Depends on @richhtmleditor/core ^1.2.9.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API. Doc Preview joint demo: doc-preview-app.vercel.app/demo/enterprise

What's in 1.2.9

• createCollabPlugin — returns an EditorPlugin with Yjs sync lifecycle
• HTML sync — document HTML synced via shared Y.Text field html
• Presence bar — shows connected peers with name and color chips
• Remote cursors — cursor overlay with awareness positions
• attachYjsSync — lower-level async helper when you manage your own Y.Doc

Peer dependencies: yjs (required for sync), y-websocket (optional, when websocketUrl is set).

Keywords: richhtmleditor collaboration yjs crdt realtime websocket

Install

npm install @richhtmleditor/collab @richhtmleditor/core yjs
# Optional WebSocket relay:
npm install y-websocket

Usage — plugin

import { createEditor } from "@richhtmleditor/core";
import { createCollabPlugin } from "@richhtmleditor/collab";
import "@richhtmleditor/themes/richhtmleditor.css";

const collab = createCollabPlugin({
  roomId: "doc-123",
  websocketUrl: "wss://your-yjs-server.example.com",
  userName: "Alex"
});

const editor = createEditor({
  element: document.getElementById("editor")!,
  toolbar: { preset: "standard" },
  plugins: [collab]
});

Document HTML is synced through a shared Y.Text field named html. Remote updates call editor.setContent(..., { silent: true }) to avoid feedback loops.

Usage — custom Y.Doc

import * as Y from "yjs";
import { createEditor } from "@richhtmleditor/core";
import { attachYjsSync } from "@richhtmleditor/collab";

const ydoc = new Y.Doc();
const editor = createEditor({ element: host, toolbar: "standard" });

const handle = await attachYjsSync(editor, {
  roomId: "doc-123",
  ydoc,
  userName: "Alex",
  userColor: "#2563eb"
});

// Later:
handle.destroy();

API

createCollabPlugin(options)

| Option | Type | Description | | --- | --- | --- | | roomId | string | Required. Shared document room identifier. | | websocketUrl | string | WebSocket server URL (uses y-websocket when set). | | ydoc | Y.Doc | Existing Yjs document (created internally when omitted). | | userName | string | Display name in presence bar and cursor labels. | | userColor | string | Hex color for local user chip. | | presenceHost | HTMLElement | Element for presence bar (defaults to editor.element). |

Lower-level exports

| Export | Description | | --- | --- | | attachYjsSync(editor, options) | Async Yjs binding; returns { destroy } handle. | | mountCursorOverlay(host, options) | Render remote cursor overlay. | | readLocalCursorRect() | Read local caret rectangle for awareness. |

Types

| Type | Description | | --- | --- | | CollabPlugin | EditorPlugin with id: "collab". | | CollabPeer | { clientId, name, color } presence entry. | | RemoteCursor | Remote caret position for overlay rendering. |

Related packages

• @richhtmleditor/core — editor engine.
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/react — React wrapper.
• @richhtmleditor/angular — Angular wrapper.

License

MIT