В завершение сегодняшнего дня расскажу о том, какие фронтенд-задачи пришлось решать при разработке редактора
Кроссбраузерный и единообразный HTML-код. Как известно, contenteditable в разных браузерах может производить разный HTML.
Более того, часто это зависит не только от браузера, а от положения курсора внутри блока. Есть статья на эту тему: medium.engineering/why-contentedi…
Авторы trix-editor.org тоже пишут об этом же самом. Наше решение: Virtual DOM + генерация из него корректного единообразного HTML
Т.е. каждый HTML-элемент парсится и попадает в специальную обертку, а она уже умеет генерить тот HTML, который нужен нам.
Таким образом, мы всегда имеем в наличии полное дерево элементов поста, из которого можно сгенерировать как HTML, так и что угодно другое
В принципе, виртуальным DOM'ом сейчас уже никого не удивишь. Отмечу лишь, что он и здесь нашел себе применение.
Следующая большая тема — очистка (санитайзинг) HTML и copy&paste.
В наших изданиях посты часто пишутся в Google Docs или в Word, а затем вставляются в редактор. Иногда куски текста берутся с веб-страниц.
Разумеется, всё это нужно чистить перед тем, как оно попадает в editable-область. Пока что мы используем для этого npmjs.com/package/saniti…
Он хорошо работает и имеет много настроек, но сильно утяжеляет редактор. Поэтому в дальнейшем скорее всего заменим на более легкую версию.
Copy&paste — отдельная история. Т.к. мы стараемся дать пользователям максимум удобства, наш редактор позволяет копировать целые блоки.
Т.е. можно зажать Cmd/Ctrl, выделить несколько блоков (сеток, картинок), и затем их скопировать при помощи Cmd + C
Чтобы реализовать это, пришлось воспользоваться способом, который описал разработчик Trello: stackoverflow.com/a/17528590
Вкратце: при нажатии на Cmd они открывают невидимую textarea, заполняют ее контентом и ставят туда курсор...
И когда пользователь нажимает C, то у него копируется содержимое этой textarea. Так Trello копирует карточки целиком.
У нас способ более умный, с использованием событий вроде onBeforeCopy, но в целом без хаков тоже не обошлось.
Кроссбраузерная работа с буфером обмена пока что еще остается нетривиальной задачей.
Помимо хоткеев у нас еще свое контекстное меню по правой кнопке. Тут же не обойтись без document.execCommand
