/loro-prosemirror

Prosemirror Binding for Loro

Primary LanguageTypeScriptMIT LicenseMIT

Prosemirror Binding for Loro

  • Sync document state with Loro
  • Sync cursors with Loro's Awareness and Cursor
  • Undo/Redo in collaborative editing
  • 🎨 Try it online
import {
  CursorAwareness,
  LoroCursorPlugin,
  LoroSyncPlugin,
  LoroUndoPlugin,
  undo,
  redo,
} from "loro-prosemirror";
import { Loro } from "loro-crdt";

const doc = new Loro();
const awareness = new CursorAwareness(doc.peerIdStr);
const plugins = [
  ...pmPlugins,
  LoroSyncPlugin({ doc }),
  LoroUndoPlugin({ doc }),
  keymap({
    "Mod-z": (state) => undo(state, () => {}),
    "Mod-y": (state) => redo(state, () => {}),
    "Mod-Shift-z": (state) => redo(state, () => {}),
  }),
  LoroCursorPlugin(awareness, {}),
];
const editor = new EditorView(editorDom, {
  state: EditorState.create({ doc, plugins }),
});
collab-undo.mp4