Frontend

Предистория. Сущетсвует компания TipTap она предоставляет редактор в концепции WYSUWYG (what you see is what you get) который по стилю похож на Notion. Они поддерживают несколько opensource проектов, конкретно в нашем случае важно сфокусироваться на редакторе и на сервере.

Цель:

Развернуть минимальоне локальное совместное редактирование документа с использованием:

• Hocuspocus (WebSocket сервер для Yjs)

• Tiptap Editor (на React)

• В общих чертах понять и суметь объяснить как это работает, какие технологии используются и зачем

Успешным результатом можно считать, 2 вкладки открытые в браузере, редактирующий один и тот же документ (т.е. обновляя один документ, второй автоматически отображает эти изменения)

Задачи:

1️⃣ Развернуть Hocuspocus локально (через Docker или Node.js).
2️⃣ Сделать простую страницу с Tiptap Editor, подключить её к Hocuspocus через Yjs WebSocket Provider.
3️⃣ Открыть два разных браузера (или инкогнито окна) на одном компьютере и проверить одновременное редактирование одного документа в реальном времени.

Ожидаемый результат:

• Видео повторяющие видео выше (можете показать больше примеров).

• Ссылку на репозиторий (можно 1 где будет и Frontend и Backend) можно на 2, если захотите сделать раздельно.

Важно!

Вы не ограничены приведенной документацией, рекомендациями и чем либо другим. Сделайте все как вам будет удобно, цель этого тестового задания, понять, насколько быстро вы поймете взаимосвязь систем. Качество кода не имеет значения, ваша задача запустить и понять общую картину, детали не важны и по ним не будет проведенна оценка. Важен будет разговор о том, что вы поняли выполняя это тестовое задание. Если вы уже работали с аналогичными системами и чувствуете, что вы достаточно информирвоаны, тестовое задание можно не делать и сразу перейти к разговору.

Рекомендации

Запуск HocusPocus Server

Проще всего это сделать используя Docker и Postgres.

docker run --name pg -e POSTGRES_PASSWORD=postgres -p 5432:5432 -d postgres:16

Если будет нужно сохранять данные при перезапуске, то используйте volume.

docker run --name pg -e POSTGRES_PASSWORD=postgres -p 5432:5432 -v pgdata:/var/lib/postgresql/data -d postgres:16

Конифиг для HosucPocus получится

const pgConfig: ClientConfig = {
    host: 'localhost',
    user: "postgres",
    database: "postgres",
    password: "postgres",
    port: 5432,
}

Тут вы найдете базовый пример запуска сервера на node.js.

А тут как настроить Postgres для него.

Настройка редактора для React

Тут вы найдете описание того, как все настроить для React.

А тут как настроить редактор совместно с HocusPocus