company_banner

АМА с Хабром #21. Тестируем новый 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 до скролла

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

    Habr
    Create services for geeks

    Similar posts

    Comments 43

      +9

      https://habr.com/ru/company/itsumma/news/t/487982/


      deniskin
      12 февраля 2020 в 00:18
      +24
      Привет! К сожалению, пока обстоятельства на дают возможность развёрнуто прокомментировать эту историю, но я, как основатель сервиса, хочу заверить, что приватность и конфиденциальность пользователей является базовой и важной частью Хабра. Скоро мы обязательно прокомментируем эту историю в максимально развёрнутом виде, чтобы исключить любые интерпретации и недопонимание.

      Полгода уже прошло.

        0
        Пожалуйста, уменьшите интервал перед маркированным и нумерованным списками.
          +1

          На чем сделан редактор? С 0 писали или кастомизировали готовое решение?

            +3
            В основе ProseMirror
            0
            Починили локализацию времени в некоторых закромах
            А когда-нибудь почините, что в подписках время статьи указывается в духе «2 августа 2020 в 02:45», а на самом деле статья была опубликована «5 августа 2020 в 03:56»?
              0
              В трекере почему-то указывается дата создания черновика, да. Неужели ещё не починили?
                +1
                Ну, товарищ Milfgard уже не первый год из-за этого страдает, это точно.
                  0
                  Скорее его подписчики. Поэтому функция «Добавить в закладки» работает костылём.
              +2
              1. При тычке по трём точкам справа от блока вместе с менюшкой «удалить» вылезает ещё какая-то рамка, которой это троеточие можно перетаскивать (причём есть ещё значок перетаскивания, но само перетаскивание им не работает, что-то можно сделать только путём изменения размеров рамки). Это баг или фича? Если фича, то в чём смысл оной?
              Скриншот


              2. Хотелось бы опцию, по которой вместо выскакивающей менюшки добавления блоков был бы обычный тулбар с кнопками. Менюшка а) на мой взгляд неинтуитивна, б) требует прокрутки для просмотра всех пунктов, в) мешает набивать текст, в котором присутствуют слэши (например, юниксовые пути), г) подтормаживает при выскакивании.

              3. Если статья начинается с блока цитаты, списка или спойлера (возможно, и некоторые другие, все не проверял), то я не смог найти способа добавить блок или текст перед этим блоком. Курсор всегда находится внутри, и нет возможности добавить перевод строки снаружи этого блока, перед ним.

              4. Баг: Ставим курсор в тексте какого-нибудь блока. Щёлкаем мышью где-то совсем за пределами редактируемого текста (скажем, в пустом вертикальном поле слева от формы ввода). Курсор исчезает. Щёлкаем мышью внутри текста какого-нибудь блока (того же или другого). Курсор появляется в том месте, где был до исчезновения, а не там, где щёлкнули.

              Всё это проверял в PaleMoon 28.12.0 x64, Windows 7.
                +1
                Спасибо, 1 и 4 проверим, про 2 подумаем.

                Что касается добавления параграфа в самое начало (п. 3), то должен работать перевод строки от заголовка. То есть ставите курсор к последней букве заголовка статьи и жмете Enter.
                  +1
                  Про 3 — ах вон оно как! Подтверждаю, работает.
                  Больно уж привык воспринимать заголовок как совершенно отдельную сущность (отдельное поле ввода); даже в голову не пришло, что там можно Enter нажать…
                    +1
                    Рад, что помог. Также разобрались с п.1. Выкатим со следующим релизом.
                0

                А Markdown никогда не будет обновляться? К примеру, выравнивание в таблицах

                  +1
                  Очень круто. Спасибо большое. Ещё прошу буквально две вещи:
                  1. Возможность добавлять картинкам рамки. Например, 1px цветом #c4c4c4. Это нужно, когда картинка на белом фоне и содержит текст.
                  2. Фиксировать отображаемый размер картинки. Не все картинки нужно растягивать на всю ширину или обтекать их текстом.
                    +3

                    Пожалуйста, не постите картинки с текстом без крайней необходимости. Или, хотя бы, проверяйте как они на телефоне смотрятся и читаются

                      0
                      Вроде все работает именно так, как вы говорите. Рамку можно добавить выделив блок с картинкой и нажав на квадратик в квадратике сверху, а размер считается так: если картинка достаточно большая, чтобы растянуться на всю ширину колонки, то она это сделает, а если нет, будет как на скриншоте ниже:



                        0
                        Сейчас заметил, что рамка появляется только снизу и слева. Справа и сверху рамки нет.
                      0
                      В OpenSourse попадет?) очень понравился
                        +1
                        Пока что таких планов нет, но идея интересная :) спасибо!
                        +1
                        1. Не визивюг, но вёрстка. В комментариях уже давно сломаны отступы вокруг цитат (и не только).
                          В маркдауне появляется отступ сверху
                          image

                          А html-разметка – снизу
                          image

                          Вложенные цитаты на маркдауне, похоже, бесконечны
                          image

                          Html в этом плане понадёжнее
                          image

                          И на закуску. Вложенные цитаты в нумерованном списке случайно весь оставшийся комментарий
                          image

                          В общем, такая неконсистентность мешает красиво оформлять комментарии, и я переживаю. :3

                          Кстати, с md-таблицами, кажется, тоже то ещё веселье, но я их почти не использую, и за давностию лет не могу вспомнить, какое именно.
                        2. Хотелось бы иметь какую-то библиотеку стандартных элементов, например, стиль шрифта подписи к картинкам. По центру, курсивный и без отступа от картинки. А если бы ещё и отключаемую автонумерацию подключить...
                        3. Кстати, о багрепортах и фичереквестах. У Хабра есть какой-нибудь приоткрытый для общества багтрекер, или только через поддержку и топики добра?

                        К слову, у меня не получилось написать этот коммент в маркдауне, сломался же на первом спойлере.
                          +2
                          Не визивюг, но вёрстка. В комментариях уже давно сломаны отступы вокруг цитат (и не только).

                          Да куча багов, посмотрите по ссылке ниже по тегу markdown. И Markdown не совместим с GitHub, из-за чего статьи неудобно переносить оттуда.


                          Кстати, о багрепортах и фичереквестах. У Хабра есть какой-нибудь приоткрытый для общества багтрекер, или только через поддержку и топики добра?

                          Есть неофициальный: https://github.com/limonte/dear-habr

                            0
                            И ещё проблемы с семантикой и доступностью разметки.
                            Табы и переключатели на спанах. В SVG иконках неправильные `aria-*` аттрибуты. Фокус на кнопках никак не отображается.
                            +1

                            Видимо, такой расширенный редактор подходит именно для создания новых статей, а не для более-менее коротких комментариев.
                            Но непосредственно для комментариев хорошо бы добавить в мобильную версию тот небольшой редактор, который есть у комментариев в десктопной версии.
                            Сейчас в мобильной версии (по крайней мере на смартфоне) у комментариев вообще нет никакого редактора, что в некоторых случаях весьма неудобно (добавление ссылок и проч.).

                              0
                              Сейчас одна из наших крупных задач — перенос полной функциональности сайта в мобильную версию. Да, это займёт достаточно времени (полагаю до конца года), но мы это сделаем.
                                0
                                Я почти на 100% уверен, что мы сделаем в недалеком будущем адаптированную версию редактора для формы комментариев.
                                +1
                                Изображения (вставка с диска, минуя Habrastorage, либо из буфера обмена), включая SVG

                                А для комментариев такое когда-нибудь будет? Перетаскиваешь картинку в поле ввода, она автоматически грузится на habrastorage и вставляется ссылка в markdown. Как на GitHub, в общем. Это же очень удобно. Есть подозрение, что вы умышленно этого до сих пор не сделали, чтобы в комментариях лишний раз картинки не пихали.

                                  0

                                  Надеюсь что после обкатки спойлера на details в WYSIWYG дадите таки его использовать в markdown и HTML.


                                  Я пока не готов расставаться с возможностью написания и хранения текста отдельно от хабра.

                                    0

                                    А где вы храните исходники статей? Если на гитхабе, то есть тула для преобразования гитхабовского маркдауна в хабровский: MarkConv.

                                      +1

                                      Исходники я храню у себя на ноутбуке. В статьях я использую markdown хабра. Проблема в том что хабровский спойлер:


                                      <spоiler title="Заголовок спойлера">
                                      Текст
                                      </spоiler>

                                      Преобразуется хабром в такую конструкцию:


                                      <div class="spoiler" role="button" tabindex="0">
                                         <b class="spoiler_title">Заголовок спойлера</b>
                                         <div class="spoiler_text"><p>Текст</p></div>
                                      </div>

                                      И текст спойлера при выключенных скриптах не открыть.


                                      Если же использовать в HTML или markdown конструкцию <details> которая работает без скриптов и поддерживают её современные браузеры:


                                      <details>
                                      <summary>Заголовок спойлера</summary>
                                      Текст
                                      </details>

                                      То хабр просто выкинет теги <details> и <summary> оставив только текст.


                                      Заголовок спойлера<br>
                                      Текст<br>

                                      Но посмотрев результат вставки спойлера в WYSIWYG редакторе я заметил что он преобразуется в <details> и соответственно работает без скриптов:


                                      <details class="spoiler"><summary>Наконец то спойлер</summary><div class="spoiler__content"><p>Без скриптов</p></div></details>

                                      Вот поэтому я и надеюсь что они обкатают <details> на пользователях и разрешат мне использовать его в markdown и HTML редакторе.

                                        0

                                        Прошу прошения — запостил не совсем корректную ссылку, вот правильная: https://github.com/KvanTTT/MarkConv


                                        Также, наконец, залил README.

                                      0

                                      Мне только так кажется или это действительно так? — Сообщество хабра, можно сказать, проигнорировало новость о новом редакторе?


                                      3,7 К просмотров и 29 комментариев за два дня, причем в будни. Ладно бы еще только соседний пост о "двойном дне телеги" собрал больше просмотров, но, например, 20 психологических уловок в дизайне продуктов — казалось бы менее значимый пост — собрал 5 К просмотров.


                                      Более полугода роботы над редактором, а его презентация не вызвала особого интереса у сообщества. Это скоординированный игнор или есть более прозаичное объяснение?

                                        +1

                                        Предполагаю что WYSIWYG редактор может быть интересен новичкам которые только хотят начать писать статьи но не знают markdown и HTML. У них ещё нет подписчиков которые увидят эту статью при добавлении в закладки. А опытным авторам всёравно. Есть и есть.


                                        Мне вот без возможности забрать из него markdown или HTML он не подходит. Я помню что из за моих плагинов в браузере и очередных переделок на сайте статья может улететь в трубу поэтому я её в основном пишу в текстовом редакторе. Потом дорабатываю на хабре смотря что в итоге получается и снова сохраняю в текстовом редакторе. И потом уже публикую. И если статья вдруг не опубликовалась и не сохранилась в черновиках то у меня есть её копия.

                                          0
                                          большая часть аудитории не пишет статьи
                                            0

                                            Я это понимаю, и я тоже не собираюсь писать здесь статьи, но до сегодняшнего дня, мне казалось, что айтишникам должно быть интересно чем живет хабр чисто с технической точки зрения. Даже я — тот кто считает Российскую Федерацию врагом Украины — все равно интересуюсь "как там у кацап".

                                            +1

                                            Может потому что он не особо нужен для большей части авторов? Я например храню маркдаун-черновики в гите, и только в конце копирую результат на хабр.

                                            0

                                            Авторы всё так же неограничены размером картинок? Т.е. галерею из фото в 4k и в .png всё так же можно вставлять?

                                              0
                                              Класс. Зашел накидать черновик с очередной мыслью, а тут предложение попробовать новый редактор. Первое впечатление — прелесть! Очень удобно (относительно привычного старого). А попробовав новый редактор, сразу в поиск пошел искать «последнее AMA с хабром» :)
                                              Boomburum, молодцы. Вот реально спасибо, очень ускоряет верстку.
                                                0
                                                Спасибо, стараемся :)
                                                0
                                                А что насчет зафиксированного верхнего меню, не собираетесь убрать?
                                                А то в статьях иногда бывает вот так, даже в режиме инкогнито:



                                                Мне кажется, это больше влияет на имидж сайта, чем модное верхнее меню.
                                                  0
                                                  Кстати да, иногда такое вот поведение
                                                  наблюдается:
                                                  image

                                                  К сожалению, не выявил зависимости, какие условия вызывают данный баг.
                                                    0

                                                    По-моему это какой-то баг Firefox, я подобное на Stack Overflow иногда наблюдаю

                                                      0
                                                      Наверное, так, да.
                                                  0
                                                  Нововведение очень не удобно. Редактирование очень отличается от традиционного, как например в ворде, когда есть одно пространство — лист, и на нём происходит всё редактирование. Теперь этого нет. Взять и выделить через CTRL+A весь текст теперь не возможно. Вообще процесс нестандартный. Это какой-то VIX-конструктор для статей

                                                  Only users with full accounts can post comments. Log in, please.