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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Спойлеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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