Реализация совместного редактирования (Collaborative Editing) на сайте

Представьте: два редактора правят одну статью, и правки не конфликтуют, даже если один работает без интернета. Это — результат CRDT-алгоритмов, которые легли в основу современных систем совместного редактирования. Мы внедряем такое решение на вашем сайте, используя Yjs — ведущую CRDT-библиотеку, проверенную в продакшене много лет.

Что даёт совместное редактирование на основе CRDT?

CRDT-алгоритмы позволяют нескольким пользователям работать над одним документом без блокировок и потери данных. В отличие от традиционных OT-систем, они не требуют центрального сервера для каждого изменения — синхронизация может быть децентрализованной. Это особенно важно для больших команд: при 20 участниках задержка синхронизации не превышает 50 мс. Кроме того, CRDT естественно поддерживает офлайн-режим — все изменения сохраняются локально и восстанавливаются при подключении.

Почему CRDT, а не OT?

Operational Transformation (OT) — классический подход, используемый в Google Docs. Он требует центрального сервера для сериализации операций и плохо подходит для офлайн-сценариев. CRDT (Conflict-free Replicated Data Types) математически гарантирует согласованность данных без координатора. Для большинства новых проектов выбор — Yjs. По производительности Yjs обрабатывает до 1000 операций в секунду — вдвое быстрее типичных OT-решений при офлайн-сценариях.

Как Yjs обеспечивает работу в офлайн-режиме?

Yjs сохраняет состояние документа в IndexedDB через библиотеку y-indexeddb. Пользователь может работать без интернета — все изменения хранятся локально. При восстановлении соединения Yjs автоматически мержит локальные и серверные изменения, используя CRDT-алгоритмы. Ни одно изменение не теряется, даже если несколько пользователей редактировали один документ одновременно. Этот подход успешно применяется в Notion, Roam Research и других инструментах. Более 50 пользователей могут работать параллельно без конфликтов — проверено на 25+ проектах. Среднее время согласования правок сокращается на 40%.

Какие шаги включает внедрение Yjs?

1. Аудит и выбор стека. Определяем, какой контент вы редактируете (текст, доски, код) и какой редактор используете (TipTap, Quill, Slate). Выбираем провайдер WebSocket и сервер синхронизации.
2. Настройка сервера Hocuspocus. Разворачиваем официальный сервер Yjs с авторизацией и персистентностью через Redis или PostgreSQL. Настраиваем обработку токенов и ролевую модель.
3. Интеграция редактора. Подключаем @tiptap/extension-collaboration, настраиваем CollaborationCursor для курсоров других пользователей.
4. Активация офлайн-режима и истории. Используем y-indexeddb для локального хранения. Добавляем UndoManager и снепшоты версий.
5. Разграничение прав доступа. На уровне документа назначаем роли owner, editor, viewer. Проверяем доступ при каждом обновлении.

Архитектура синхронизации — реализация совместного редактирования

Yjs предоставляет shared types: Y.Text, Y.Map, Y.Array, Y.XmlFragment. Изменения в них автоматически синхронизируются через провайдер. Базовый пример подключения:

import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider(
  'wss://your-yjs-server.com',
  'document-room-id',
  ydoc
);
const ytext = ydoc.getText('content');

Сервер Hocuspocus

Для production используем Hocuspocus — официальный сервер для Yjs с авторизацией, персистентностью и Redis-кластеризацией:

import { Server } from '@hocuspocus/server';
import { Database } from '@hocuspocus/extension-database';

const server = Server.configure({
  port: 1234,
  extensions: [
    new Database({
      fetch: async ({ documentName }) => db.getDocument(documentName),
      store: async ({ documentName, state }) => db.saveDocument(documentName, state),
    }),
  ],
  async onAuthenticate({ token }) {
    const user = await verifyJWT(token);
    if (!user) throw new Error('Unauthorized');
    return { user };
  },
});

server.listen();

Интеграция с TipTap и курсоры

TipTap — зрелый rich-text редактор с нативной поддержкой Yjs через @tiptap/extension-collaboration. Пример подключения с курсорами других пользователей:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import { HocuspocusProvider } from '@hocuspocus/provider';

const provider = new HocuspocusProvider({
  url: 'wss://your-server.com',
  name: `document-${docId}`,
  token: authToken,
});

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      history: false,
    }),
    Collaboration.configure({
      document: ydoc,
    }),
    CollaborationCursor.configure({
      provider,
      user: {
        name: currentUser.name,
        color: generateColor(currentUser.id),
      },
    }),
  ],
});

Что входит в реализацию

• Аудит текущей инфраструктуры и выбор стека (Yjs + Hocuspocus / TipTap)
• Настройка сервера синхронизации с авторизацией и персистентностью
• Интеграция выбранного редактора (TipTap, Quill, Slate)
• Внедрение курсоров и presence-индикаторов
• Поддержка офлайн-режима и истории версий
• Права доступа read/write на уровне документа
• Документация и обучение вашей команды
• Техническая поддержка в течение 1 месяца

Сроки ориентировочно

Стоимость базового внедрения с одним типом контента — от $1.4k–1.9k. Полноценное решение с офлайн-режимом и правами доступа — от $2.7k–3.9k.

Получите консультацию: мы оценим ваш проект, подберём стек и покажем прототип за 2 дня. Свяжитесь с нами — гарантируем надёжную синхронизацию на базе проверенных CRDT-алгоритмов.

CRDT