Как я могу отобразить курсор удаленного пользователя и выделение в Quill

Question

Я работал с Quill в течение короткого времени и сосредоточился на совместной работе над редактированием. Пока все идет хорошо, и у меня есть полностью работающий совместный редактор!

Я хочу показать выбор и положение курсора других пользователей, но не могу придумать, как правильно решить эту проблему с помощью Quill.

По сути, я хочу добавить разметку к визуализированному документу, не добавляя никакого контента к реальной модели документа. Это возможно? С чего мне начать?

Answer 1

В Quill 0.20 был пример работы нескольких курсоров. Подход был абсолютно позиционирован <div> которые содержали курсоры и синхронизировались с selection-change Информация от редактора. Чтобы не откладывать выпуск 1.0, эта демонстрация и функция не были обновлены с новым API, но поддержка планируется. Тем временем вы можете попробовать аналогичный подход, и, конечно, код все еще доступен. Вы также можете отслеживать эту функцию в Github Issues.

Answer 2

Вам нужно использовать пакет quill-cursors, а затем прослушать событие selection-change:

 editor.on("selection-change", function (range, oldRange, source) {
    console.log("Local cursor change: ", range); 
 });

Затем транслируйте эти данные другим удаленным пользователям, а затем отобразите удаленный курсор:

const cursors = editor.getModule("cursors");
cursors.createCursor(id, user.name, userColor);
cursors.moveCursor(id, cursorRange); // <== cursor data from previous step
cursors.toggleFlag(id, true);