Как реализовать интерфейс комментирования в стиле Medium в VueJS

Question

Мне очень нравится интерфейс комментирования, используемый Medium, позволяющий пользователям выделять часть статьи и комментировать эту конкретную c часть.

Я хотел бы реализовать аналогичное средство комментирования в VueJS app.

Я нашел этот пакет, который делает нечто похожее: http://aroc.github.io/side-comments-demo/, но я хочу попытаться найти что-то, что было обновлено совсем недавно. Кроме того, для этого требуется jquery, который я в настоящее время не использую, и я хотел бы избежать добавления этой зависимости, если это возможно.

Я хотел бы знать, видел ли кто-нибудь что-нибудь, что могло бы помочь.

Answer 1

Я создал образец в https://codesandbox.io/s/medium-style-text-select-comment-box-h5o9r

Здесь я добавляю компонент комментариев к компоненту root, чтобы он был доступен глобально. На хуке компонента mount() я присоединяю метод mouseup к объекту window, где все сделанные проверки проверяются с использованием

if (window.getSelection() && !window.getSelection().isCollapsed) {
    //execute only with the getSelection() method is available 
    //and the current selection is not collapsed
}

Как только у нас есть выбор, позиция на странице рассчитывается с использованием позиции выбора и ее размеров, а компонент плавающих комментариев располагается соответственно.

Мы можем получить выделенный текст, используя

window.getSelection().toString();

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