Я улучшил редактор DTF
И добавил туда удобное управление с сенсорных устройств, интеграцию эмбедов Twitter с Telegram и многое другое.
Предисловие
Я фронтенд-разработчик, и некоторое время назад я начал свой очередной пет-проект, который должен был стать клоном DTF/VC, исключая бэкенд-часть (ее заменяла связка серверного API Nuxt 3 с Supabase).
Для реализации интерфейса редактора была выбрана библиотека под названием Editor.js, форк этой же библиотеки используется тут на DTF и VC. Собственно, теперь эту библиотеку поддерживают некоторые ребята из Комитета, но не суть.
Библиотека эта оказалось не очень приспособленной для реализации интерфейса редактора, используя современные фронтенд-фреймворки.
Проблемы Editor.js
- Неудобное управление с сенсорных устройств. Чтобы показать кнопки управления блоком, нужно тапнуть в редактор, что вызывает открытие клавиатуры, сужение эффективной области просмотра контента и скакание интерфейса, а при добавлении некоторых блоков (например, блока с эмбедом ютуба) вообще невозможно вызвать эти кнопки, потому что блок занимает всю ширину редактора и блокирует возможность их вызова. А если я хочу удалить этот блок, как мне это сделать в таком случае? Такой себе пользовательский опыт.
- Нет возможности полной кастомизации интерфейса, поставляемого из коробки. Можно поменять только цвета, шрифты и пр., невозможно поменять местоположение всплывающих менюшек, чтобы они нормально работали с вьюпортом пользователя и не вылезали за него.
- Нет возможности использовать фронтенд-компоненты. Все пользовательские инструменты для редактора реализуются исключительно на классическом JS и HTML, поэтому забудьте про повторное использование элементов интерфейса и их нормальное совпадение по дизайну с остальной частью сайта.
- Слабая защита от XSS-атак. Редактор отдает данные в виде JSON, но он содержит HTML-разметку. Поэтому, в добавок к этой библиотеке, в проекте нужно будет использовать какой-нибудь валидатор HTML и прописывать сложные правила очищения от опасной разметки, что уже накладывает дополнительные ресурсы на разработчика по поддержке проекта.
Поковырявшись в этой библиотеке пару недель, я принял решение отказаться от нее и искать другой способ реализации интерфейса редактора.
По совету знакомого разработчика я посмотрел на Tiptap. Это библиотека, которая предоставляет headless-интерфейс редактора (без стилей и с минимальной разметкой) с богатыми методами для взаимодействия с содержимым, в которой можно переделать интерфейс под себя, используя обычные компоненты известных фронтенд-фреймворков (Vue, React), чем я и воспользовался.
К тому же, у этой библиотеки есть и другое неоспоримое преимущество перед Editor.js - более лучшая устойчивость к XSS-атакам.
Дизайн
На мобильных устройствах
На маленьких экранах дизайн редактора сде��ан от края до края. Нет никаких больших отступов, съедающих полезное пространство для интерфейса и контента.
На десктопе
На десктопе дизайн редактора сделан в виде диалогового окна поверх другого содержимого сайта, которое можно раскрывать на весь экран и наоборот.
Управление
На мобильных устройствах
Чтобы вызвать меню управления блоком, или меню добавления нового, можно просто свайпнуть блок влево или вправо. При этом снизу экрана выедет пролистываемое меню, которое закрывается свайпом по нему сверху-вниз, что очень удобно делать одной рукой.
Подпункты меню открываются путем перемещения между "экранами", из которых можно удобно вернуться назад.
При помощи такого взаимодействия очень легко и просто работать с блоками: менять их тип, менять расположение в посте.
На десктопе
На десктопе кнопки управления блоком появляются, когда курсор мыши находится на самом блоке. Подпункты меню выполнены в виде выпадающего списка.
Работа с текстом
Редактор поддерживает классическую работу с текстом, что и Editor.js. Можно применить инлайн-форматирование к выделенному тексту (сделать жирным/курсивом/подчеркнутым, вставить ссылку и пр.).
Работает аналогичным образом и на мобильных устройствах, и на десктопе.
Работа с медиа
Работа с медиа в редакторе очень удобная. Есть возможность формировать галерею из картинок/видео путем вставки из буфера обмена, просматривать картинки/видео на весь экран, менять их местами между собой, чего нет тут на DTF, к примеру. Для просмотра картинок и видео пришлось писать собственный аналог функционала библиотеки Photoswipe, которая используется и тут, и на VC.
Работает аналогичным образом и на мобильных устройствах, и на десктопе.
Кстати, у нас получился такой пост.
Работа с эмбедами
В данный момент в редакторе поддерживается вставка эмбедов с YouTube, Twitter (X) и Telegram.
Работает аналогичным образом и на мобильных устройствах, и на десктопе.
YouTube
Twitter (X) и Telegram
Ранее редактор DTF, TJ и VC поддерживал вставку "нормальных" эмбедов из Twitter и Telegram, но со временем эту поддержку прекратили, оставив лишь отображение ссылки на пост. Я реализовал такую поддержку, потому что у нее есть очевидные плюсы: пост могут посмотреть люди, у которых нет аккаунта в обоих соцсетях и когда у них не включен ВПН.
В данных эмбедах доступнен просмотр картинок и видео, если они присутствуют в посте.
Для чего это все
Прежде всего, проект был исследовательским: я хотел понять, чего можно достичь при помощи современного веба. Как мы видим, достичь можно многого, и представленное в данной статье не предел.
Итог
Editor.js прекрасен для быстрого прототипирования редактора, но ужасен, если хочется подстроить его поведение под себя. С Tiptap же открывается безграничное море возможностей для реализации интерфейсов для создания и управления контентом с богатым содержимым, будь то посты, комментарии и пр.
Я в поисках работы
Если вы вдруг внимательно дочитали пост до этого места, то хочу сообщить, что я открыт к предложениям по работе. Пишите мне тут в ЛС, если заинтересовались мною, я скину свои контакты и CV :)