АМА с Хабром #20. Тестируем новый WYSIWYG

в 10:05, , рубрики: ama, wysiwyg, Блог компании Хабр, Разработка веб-сайтов, редактор

У меня есть причины не любить аббревиатуру WYSIWYG. Во-первых, я до сих пор не могу сходу её написать — всё время сначала проговариваю про себя расшифровку (What You See Is what You Get) и только потом пишу. Во-вторых, она ужасно читается, «визивиг» или, что ещё хуже, «висивиг» — отвратительнее только иметь дело с бандой tough-though-trough-through-thorough-thought-throw. В третьих, в ней аж две буквы «y», которая залипает в моём ноутбуке, но это так, совсем уж личное.

АМА с Хабром #20. Тестируем новый WYSIWYG - 1

Есть ещё четвёртая причина, которая за годы присутствия в интернете стала граничить с фобией — как правило, говоря «визивиг» (ааа!), в мыслях мы представляем какой-то кухонный комбайн, за которым прячется КаМАЗ кода. И в итоге всё это если и работает «как задумывалось», то в лучшем случае в каком-то одном браузере. И даже в нём лишь с костылями. Ну или это всё мой негативный опыт, «просто ещё не встретил» идеальный редактор.

Тем не менее последние полгода (а может и больше) мы работали именно над этим — над новым редактором публикаций. Можно было бы прокачать текущую форму создания публикаций (которая практически не менялась с момента создания Хабра), но всё же мы подумали, что вёрстка постов с помощью HTML-тегов в 2020 году — это в принципе не дело, а для части пользователей так вообще неподъёмное дело.


Новый редактор условно делится на две части: на первой странице находятся только поле для заголовка и простыня для написания текста публикации из блоков. Мы решили пойти по пути блочного конструктора — для вставки блоков можно пользоваться как «плюсиком» в левой части (для вставки блоков), так и клавишей «/». 

Поддерживается markdown-разметка, горячие клавиши (CTRL/⌘ + B, U, I, S, K) и вставка из буфера обмена (с форматированием).

Вторая страница отведена под настройки: выбор типа поста и языка, поля для добавления хабов, тегов и текста анонса, а также загрузку картинки для соцсетей.

АМА с Хабром #20. Тестируем новый WYSIWYG - 2

Что поддерживает новый редактор

  • Заголовки (в том числе через #)

  • Цитаты (с отбивкой слева, как раньше, а не в жёлтом блоке как в текущем редакторе)

  • Маркированные и нумерованные списки (вложенность добавляется через Tab)

  • Медиаэлементы (посты из соцсетей, треки, видеоролики, Codepen и т. д.)

  • Изображения (вставка с диска, минуя Habrastorage, либо из буфера обмена), включая SVG

  • Разделители

  • Таблицы (с поддержкой выравнивания, вставки и удаления строк и столбцов, а также объединения ячеек)

  • Код (с подсветкой синтаксиса) — как строчный, так и блочный (в том числе через ``)

  • Формулы в TeX-формате

  • Спойлеры

Мы делали WYSIWYG с мыслью о том, что для создания поста не нужно пользоваться сторонними редакторами — садись и пиши прямо на Хабре, сохраняй в черновики, если не удалось написать всё в один заход. Но даже если вы хотите перенести наброски откуда-то извне, в 9 из 10 случаев достаточно будет нажать Ctrl/⌘+A → Ctrl/⌘+C → Ctrl/⌘+V, и всё перенесётся само, включая ссылки, форматирование и даже картинки — они сами зальются на наш Habrastorage.

Естественно, это не финал — это бета-версия. Поэтому все предложения, замечания и идеи оставляйте на странице бета-тестирования «визивига». Изучим весь поступивший фидбек и вместе сделаем новый редактор ещё лучше.

Что и как проверять

Пока мы не делаем новый редактор доступным для всех, а только тем, кто является бета-тестером Хабра. Если хотите присоединиться — жмите на свою аватарку в правом верхнем углу и выбирайте в меню пункт «Бета-тестирование». Там уже создан новый эпик про редактор — все найденные баги и аномалии следует писать в комментариях к нему.

АМА с Хабром #20. Тестируем новый WYSIWYG - 3

Что ещё сделали за август

Так как все силы были брошены на доделывание редактора, больше особо ничего не успели сделать. Тем не менее:

  • Поменяли логику работы блока «Новости». Раньше там выводилось 5 новостей и ссылка «Все новости» для перехода в новостной раздел. Теперь — 5 новостей и кнопка «Показать ещё», показывающая ещё 5 новостей, и только после неё ссылка для перехода в раздел новостей.

  • Пофиксили прогрузку списка хабов на странице управления подпиской

  • Починили вывод даты последней активности в некоторых профилях

  • Исправили ссылку «Написать в ЛС» в блоке автора под постом

  • Починили локализацию времени в некоторых закромах

  • Поколдовали над сервисом вывода похожих постов

  • Исправили отступы в блоках читают сейчас

  • Исправили поведение правого сайдбара

  • Починили открытие якоря публикации в новом окне

  • Исправили отображения футера на страницах ошибок

  • Наладили отображение AMP-публикаций, созданных через новый редактор

  • Сделали подгрузку картинок в постах и комментариях за 500px до скролла

Всем визивиг!

Автор: Алексей

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js