@jodit/collab

Real-time collaborative editing for Jodit: the browser-side plugin that makes several people edit one document at once, see each other's cursors, and leave threaded comments — while only patches travel over the wire, never HTML.

Pairs with the jodit-collaboration server. Docs: https://jodit.github.io/jodit-collaboration/

User input (typing, Enter, paste) ─────────┐
Legacy Jodit code (commitStyle, plugins) ──┼──► real DOM mutations
Remote patches from peers ─────────────────┘         │
                                          MutationObserver (capture-transaction)
                                                      │
                                       normalize → [ {op:'text', nodeId, …},
                                                     {op:'insert', parentId, …} ]
                                                      │
                                    ┌─────────────────┼──────────────────┐
                                    ▼                 ▼                  ▼
                              network (peers)   history / replay   cursor overlay

How it works

Classic WYSIWYG editors can't easily do collaboration because contentEditable owns the state. Rewriting Jodit on a virtual document would mean re-implementing commitStyle, enter, backspace, paste-from-word, tables — years of edge cases. This plugin takes the opposite route: all the existing Jodit code keeps running on the real DOM, and the result is captured.

• A MutationObserver watches the editor; a normalizer folds the raw mutation records into a minimal, id-addressed patch list (insert / remove / text-splice / attr). Transient nodes (Jodit selection markers, the <font> wrappers of wrapInTagGen) collapse to nothing.
• The hot path — plain typing and single-character deletes — is intercepted at beforeinput and expressed as a patch before the browser mutates the DOM.
• Nodes are addressed by stable ids (kept in a WeakMap, never written to the document HTML), so concurrent structural edits commute.

Features

• Live multi-user editing that converges (OT via @jodit/collab-protocol)
• Remote cursors / selections with name flags, and a participant-avatars presence bar in the editor's top slot
• In-editor comments panel (mounted in Jodit's right workplace slot): anchors live in the document, threaded replies, resolve, moderation, and "orphaned" threads when the anchored text is deleted
• Tracked changes (suggestions): propose insertions (green underline) and deletions (red strike-through) as marked content; a review panel with author, time and per-card accept / reject (server-authoritative, converges live and lands in history)
• CollabClient — WebSocket transport with reconnect, sinceSeq delta, optimistic local edits + rebase, and structured error handling
• Server-assigned identities (the page can never impersonate a user)

Quick start

npm install @jodit/collab-plugin jodit

import { Jodit } from 'jodit'; // or 'jodit-pro'
import collab from '@jodit/collab-plugin';

Jodit.plugins.add('collab', collab);

const editor = Jodit.make('#editor', {
  collab: {
    url: 'wss://collab.example.com/collab/ws',
    docId: 'doc-123',
    // string, or a function called on every reconnect (JWT refresh); omit in demo mode
    token: async () => (await fetch('/api/collab-token')).text(),
  },
});

That's the whole integration — the plugin adds its own toolbar button and wires up capture, WebSocket sync, remote cursors and the comments panel. The live handle is editor.collab. Optional collab hooks (onIdentity, onPeers, onStatus, onEntry, onError) let you drive your own presence bar / status / log; the runnable demo/ uses them. For custom clients, the lower-level attachCollab / CollabClient / CommentsPanel are also exported.

Scripts

npm start        # demo: one editor per tab against a local collab server
npm test         # jsdom unit tests (capture → replay, input, comment ordering)
npm run e2e      # real-Chromium end-to-end against a running server
npm run build    # dist/jodit-collab.js (+ .min + .d.ts)

Status

Pre-1.0 — the collaboration engine, input interception, transport client and comments panel are implemented and covered by unit + end-to-end tests; APIs may still change before the first stable release. Part of Jodit Collaboration. See licensing.

License

Commercial — see LICENSE.md. Free to evaluate; a paid license is required for production use. Read more at https://xdsoft.net/jodit/pro/.