Попробуйте наш новый композер!

Мы работали над новым режимом редактора форматированного текста для нашего композитора, чтобы упростить написание постов на Discourse. Теперь мы готовы начать тестирование, чтобы получить больше отзывов от нашего сообщества об этой функции!

Наша реализация построена на основе отличного ProseMirror и его немодульного модуля Markdown, используя схемы, парсинг и определения сериализации этого модуля как основу для дальнейших функций, специфичных для Discourse.

Эта тема послужит как руководством по тестированию нового композитора, так и центром для отслеживания отзывов. Заранее спасибо за вашу помощь! :sparkling_heart:

:gear: Использование нового композитора в вашем сообществе

Мы по-прежнему считаем композитор экспериментальным, но вы можете начать использовать его в своем сообществе, включив настройку rich editor:

:writing_hand: Знакомство с новым композитором

Новый композитор — это редактор форматированного текста, который упрощает процесс написания, особенно для нетехнических пользователей, не знакомых с Markdown. Этот редактор по-прежнему поддерживает Markdown, но форматирование отображается мгновенно, обеспечивая опыт WYSIWYG («что видишь, то и получаешь»), похожий на другие современные инструменты веб-создания (например, Notion или Google Docs).

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

toggle

То, что вы тестируете сегодня, — это первая версия нового композитора. Она пока не предназначена для полной замены текущего композитора только в режиме Markdown. Мы сначала сосредоточились на базовых функциях, которые должны покрыть потребности большинства пользователей.

Пожалуйста, ознакомьтесь с разделами ниже, чтобы понять, что сейчас возможно, а что еще не готово в новом композиторе. Мы будем обновлять эти разделы по мере расширения поддержки!

:green_circle: Поддерживаемые функции

В новом композиторе поддерживаются следующие функции:

  • Возможность добавлять заголовок, устанавливать категории и теги
  • Однопанельный редактор в режиме форматированного текста (т.е. без панели предварительного просмотра)
  • Переключатель для перехода между режимом только Markdown и режимом форматированного текста
  • Базовое форматирование [1] поддерживаются в Markdown, сочетания клавиш и иконки панели инструментов
  • Поддержка эмодзи
  • Автоматическое преобразование Markdown в форматированный текст при вставке простого текста (например, **bold**bold)
  • Автоматическое преобразование эмодзи (например, :):slight_smile: )
  • Интерфейс изображения для изменения размера, добавления подписи или сетки для добавленных изображений
  • Интерфейс ссылки для посещения, редактирования, копирования или удаления добавленных ссылок и изменения их заголовков
  • Интерфейс конструктора таблиц
  • Интерфейс конструктора опросов
  • Сноски
  • Поддержка упоминаний и хэштегов
  • Встроенный HTML <tags> [2]
  • Замены типографа (например, ™ , → , ± )
  • Загрузка изображений
  • Вложения файлов
  • Цитаты тем и чатов
  • Скрыть детали
  • Размытие спойлера (с ограничениями, см. раздел «Отсутствующие функции»)
  • Oneboxes
  • Автоматическое преобразование горизонтальной линии (например, ввод --- преобразуется в горизонтальную линию)

:red_circle: Отсутствующие функции

Следующие функции, которые, как нам известно, сейчас отсутствуют или еще не полностью поддерживаются в новом композиторе:

  • Интерфейс таблицы для добавления или удаления столбцов и строк после создания таблицы
  • Интерфейс опроса для редактирования ранее созданных опросов
  • Поддержка панели инструментов для добавления заголовков
  • Улучшенная поддержка размытия спойлера для добавления размытия к существующему тексту, поддержка встроенного размытия и упрощение удаления размытия
  • Все остальное, что явно не указано в разделе поддерживаемых функций (например, поддержка диаграмм Mermaid)

:mega: Тестирование и обмен вашими отзывами

При тестировании вы можете столкнуться с ситуациями, когда композитор ведет себя не так, как вы ожидаете. В таком случае пожалуйста, сообщите нам! Ваши отзывы — бесценный актив, который поможет нам улучшить новый композитор, чтобы он был готов к использованию в вашем сообществе.

Пожалуйста, предоставьте конкретные шаги для воспроизведения проблемы, информацию о вашем браузере / устройстве и любые соответствующие скриншоты или записи! Вы также можете ознакомиться с нашим трекером известных проблем ниже, чтобы проверить, не сообщал ли кто-то уже о том, что вы наблюдаете. Мы будем обновлять эти разделы по мере выявления и исправления проблем.

Помните, что вы всегда можете переключиться обратно в режим только Markdown с помощью переключателя, если столкнулись с проблемой при использовании нового композитора.

:bug: Ошибки

  • В Firefox, похоже, невозможно разместить курсор перед упоминанием, когда оно начинается с поста (это технически возможно, но визуально неясно)

:art: Проблемы UX

  • Предотвратить частичное форматирование ссылок, чтобы избежать неожиданного стилизации
  • Применить ожидаемое визуальное отображение / валидацию к хэштегам категорий, тегов и каналов чата
  • Применить ожидаемое визуальное отображение / валидацию к упоминаниям пользователей и групп
  • Курсор фокусируется внутри цитаты (вместо строки ниже) при начале поста с цитаты или при копировании / вставке цитат

:wrench: Улучшения разработки

  • Улучшить парсинг встроенного HTML (например, для <a>)

  1. Жирный, курсив, подчеркивание (без поддержки панели инструментов), зачеркивание (только через Markdown с использованием ~~ ), ссылки, цитаты, код, флажки (только через Markdown с использованием ; поддержка панели инструментов скоро появится), маркированные списки, нумерованные списки ↩︎

  2. Некоторые преобразуются в ближайший Markdown (например, s, strike, strong, b, em, i, code; u специально не поддерживается, так как не преобразуется в реальное подчеркивание); другие будут разрешены как узлы «html_inline» (например, kbd, sup, sub, small, big, del, ins, mark) ↩︎

71 лайк

Выглядит отлично!

Однако есть несколько проблем с тегами спойлеров:

  1. Если выделить текст и выбрать «Скрыть спойлером», выделенный текст заменяется на «Этот текст будет скрыт», и исходное содержание теряется.

  2. Встроенные спойлеры не работают — они переносятся на новую строку.

  3. Нет возможности снова отключить спойлер.

11 лайков

Спасибо, Шон, в первом посте отмечено, что нам ещё предстоит поработать над спойлерами.

9 лайков

Я ждал этой функции, и она потрясающая — Discourse наконец сделал этот шаг :clap:

Пока только один момент: выглядит странно, что текстовое поле для написания поста такое узкое.

Очевидно, что я очень привык к виду редактора и предпросмотра бок о бок, но теперь это выглядит… странно. Возможно, мне просто нужно время. Да, скорее всего. :smile:

18 лайков

Отличный прогресс! :heart:

Вторая вещь, которую я заметил, заключается в том, что текущий стиль не визуально переключается (вкл/выкл) на панели инструментов, хотя продолжает действовать. Было бы очень приятно, если бы текущий стиль был подсвечен, пока он не будет выключен.

На этом пока всё!

(Мой отзыв основан на теме Grey Amber)

15 лайков

Это отличные замечания — на данный момент мы в основном сосредоточились на самом редакторе (где вы вводите текст), но у нас запланированы улучшения контейнера композера и панели инструментов, которые должны решить эти проблемы.

10 лайков

Немного странная ошибка, но когда открыт редактор, индикатор ответа ведёт себя так.

Позже, зайдя с десктопа, я проведу полное тестирование, но пока всё выглядит многообещающе.

4 лайка

Наконец-то здесь! :heart_eyes: Это огромная работа — фантастическая! Это будет большим плюсом для пользователей, которые не любят Markdown.

Проблема с загрузкой Edgy:

Если вы загружаете изображение и переключаетесь на Markdown, разметка загрузки отсутствует, и возникает ошибка:
image

И наоборот: если загрузить через Markdown, а затем переключиться на новый редактор, ошибки не будет, но изображение не отобразится.

12 лайков

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

11 лайков

Да, я думаю так же. Блокировка — отличная идея!
При загрузке большого изображения с медленным подключением я не удержался и нажимал переключатель, пока оно не загрузилось. :grinning_face_with_smiling_eyes:

11 лайков

Новый дизайн выглядит отлично. Мне нравится, как Discourse развивается со временем, пробует новые идеи и вовлекает сообщество.

Некоторые субъективные наблюдения, если вы ищете обратную связь:

  • Кнопка выравнивания (влево/вправо) использует нестандартную иконку, а сама функция кажется очень нишевой. Поскольку на мобильных устройствах иконки переносятся на две строки, я бы просто убрал эту функцию. Аналогично, функция «вставить дату» является продвинутой/нишевой и её можно было бы скрыть в меню :gear:. Таким образом, все оставшиеся иконки поместились бы на одной строке.
  • Функция загрузки видео вызвала у меня путаницу, даже несмотря на то, что я технический пользователь. Что именно нужно указывать в поле «источник видео»? Кроме того, кнопки визуально немного накладываются друг на друга (см. ниже).
  • Кнопка «M» (переключение между исходным текстом и предпросмотром) не раскрывает своего назначения, пока на неё не нажмёшь. Внизу редактора есть свободное место между кнопками :wastebasket: и GIF, и я думаю, что кнопка предпросмотра здесь была бы уместнее. К тому же у вас будет место для надписи «предпросмотр».

8 лайков

Эти функции мы когда-то включали на Meta, вероятно, для эксперимента. По умолчанию они недоступны, и мы можем либо отключить их, либо скрыть за :gear:

Я согласен с этим. Не понимаю, почему мы всегда размещаем это так заметно в меню. Я сам пользуюсь этим постоянно, но также часто использую множество функций, скрытых за меню :gear:!

Согласен, что хотя бы всплывающая подсказка при наведении мыши помогла бы здесь с обнаруживаемостью.

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

9 лайков

:megaphone: Эти пункты меню не имеют прямого отношения к новому редактору, поэтому здесь не стоит на них сосредотачиваться. Если у вас есть дополнительные отзывы по поводу пунктов меню, пожалуйста, создайте новые темы в канале #feature или выполните поиск.

Тем не менее:

  • Я убрал кнопку «Вставить видео» здесь, на Meta, так как она предоставляется через компонент темы Insert Video.

  • Кнопка «Переключить направление» зависит от настройки сайта support mixed text direction, которую мы оставим включенной на Meta, поскольку в настоящее время мы активно тестируем многоязычный функционал.

  • На Meta у нас также есть GIF и Ask AI, к которым мы хотим обеспечить заметный доступ.

6 лайков

Поздравляю, команда! Я заметил несоответствие, связанное с однобоксом. Вставка URL из адресной строки браузера создаёт однобокс, но его ручное вписывание — нет. Это происходит только после переключения обратно, когда появляется предпросмотр Markdown, что и запускает генерацию.

Тест: Вставка из адресной строки браузера здесь: https://google.com/ Ручной ввод здесь: https://google.com

6 лайков

Нажатие клавиши Return в новом WYSIWYG-редакторе создаёт двойной разрыв строки (разрыв абзаца). Мне это не нравится (хотя, наверное, это субъективно), но особенно меня раздражает это в маркированных и нумерованных списках, где между элементами списка слишком много пустого пространства.

  • это

  • слишком

  • много

  • пробелов

13 лайков

Вы можете использовать shift + enter, чтобы избежать двойного разрыва строки, хотя это не работает для списков.
Я согласен, что это изменение поведения не должно быть по умолчанию.

7 лайков

Отличная работа, это шаг в правильном направлении! Однако у меня всё ещё есть несколько базовых проблем с UX, которые, как я надеюсь, будут решены, но я вернусь к этому позже.

Плюсы:
Мне нравится новый режим одиночного редактора, он действительно крутой, и встроенные изображения в редакторе работают отлично.
Даже несмотря на то, что это превью, всё работает так, как я ожидаю. Лично я не заметил ничего недостающего (кроме ---, который я использую очень часто).

Минусы:
Кнопки разбросаны повсюду, что сбивает с толку; для них должно быть одно место. Замените иконку двойной стрелки вниз на крестик (X). Кроме того, вместо << возможно, стоит сделать перетаскивание по оси Y, чтобы мы могли контролировать его размер, а не просто открывать или закрывать?

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

На рабочем компьютере (Windows, Firefox) кнопка Markdown смещена.

image

Всё равно отлично, просто хотелось бы, чтобы эти проблемы исправили :+1:

Добавлено в наш раздел :art: Проблемы UX в первом сообщении (OP) для исправления.

Это известная отсутствующая функция, и мы планируем добавить поддержку:

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

По этому описанию или скриншоту я не могу точно понять, что именно пошло не здесь — не могли бы вы предоставить ещё несколько деталей, чтобы я мог разобраться?

5 лайков

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

1 лайк