Редактор Rich Text в темах ломает пробельные символы разными способами

Всем привет!

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

Моя тестовая среда

  • ОС: MacOS 15.6.1
  • Браузер: Google Chrome 139.0.7258.140 (Официальная сборка) (arm64)

Первоначальное наблюдение

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

Иногда пользователи публиковали несколько однострочных фрагментов кода, теряя отступы в YAML. Иногда это был многострочный код, подсвечиваемый как одна строка, иногда — одна строка внутри блока кода. Это происходило слишком часто, поэтому вчера я протестировал режим «Rich Text», но отложил составление отчета. Сегодня мне не удалось воспроизвести эту проблему, однако я обнаружил другой способ нарушения разрывов строк в коде в редакторе «Rich Text».

Я не был уверен, что это баг, поэтому просто обсудил проблему с нашими модераторами, ожидая подтверждения того, что баг исправлен. Оказалось, что мы даже не наблюдали одинакового поведения, но все проблемы были связаны с пробелами. За исключением того, что я не смог воспроизвести проблему, упомянутую другим модератором, но понял, что это связано с тем, что он копировал текст из редактора кода или терминала, а я копировал его из своего предыдущего блока кода на форуме, поэтому проблема с пробелами проявлялась по-разному.

Различные способы нарушения пробелов в блоках кода

Первый способ

  • Скопируйте вывод из терминала.
  • Вставьте вывод в поле ввода в режиме «Rich Text» следующим образом (часть вывода runc без аргументов):
COMMANDS:
   checkpoint  checkpoint a running container
   create      create a container
   delete      delete any resources held by the container often used with detached
  • Вы увидите многострочный вывод, но отступы будут удалены.
  • Затем, осознав, что нужен блок кода, выделите текст и нажмите кнопку «Код».
  • Теперь код выглядит немного странно: он похож на код, но не как блок кода. Переключитесь обратно в Markdown, чтобы понять почему, и обратите внимание на следующее:
`COMMANDS:`
`checkpoint  checkpoint a running container`
`create      create a container`
`delete      delete any resources held by the container often used with detached container`

Копирование кода из другой темы или другого поста в той же теме

Существующая тема, которую я нашел: `white-space` CSS property of clipboard data not respected when pasting in rich text editor

Конечно, это не правильный способ копирования в Discourse, так как для выделенного текста есть кнопка «Цитата», которая обычно работает и с частями блоков кода, а также есть кнопка копирования в углу каждого блока кода. Однако именно так я обнаружил проблему, причем кнопка копирования тоже не работала.

  • Скопируйте многострочный код с HTML-страницы.
  • Вставьте его в поле ввода в режиме «Rich Text».
  • Обратите внимание, что разрывы строк исчезли.
  • В этот момент можно подумать, что проблема только в HTML, поэтому попробуйте сделать это кодом.
  • Разрывы строк не вернулись.

Использование кнопки «Копировать» в правом верхнем углу блока кода в другом посте

  • Наведите курсор мыши на существующий блок кода.
  • Обратите внимание, что в правом верхнем углу появилась маленькая кнопка «Копировать».
  • Нажмите на эту кнопку, чтобы скопировать код.
  • Вставьте его в поле ввода в режиме «Rich Text».
  • Разрывы строк сохраняются, но отступы исчезают так же, как при копировании напрямую из HTML.
  • Сделайте это блоком кода, и вы получите несколько однострочных фрагментов кода без отступов.

Вероятно, исправленная проблема, возникавшая при переключении обратно в Markdown

  • Напишите блок кода в редакторе «Rich Text».
  • Вы увидите идеально корректный многострочный блок кода.
  • Переключитесь обратно в Markdown.
  • Вместо блока кода вы увидите одну строку.
  • Обратите внимание, что это больше не блок кода, но если текст длинный, вы можете не заметить, что отступы тоже исчезли.
  • Сделайте это блоком кода.
  • Опубликуйте пост и получите блок кода, содержащий одну строку, где разрывы строк удалены полностью, даже пробелы не сохранились.

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

Заключение

Итак, похоже, что режим «Rich Text» имеет проблемы с блоками кода несколькими способами. Это усложняет модерацию, так как мы часто предполагаем, что пользователь неправильно оформил свой пост, и отправляем ему ссылку на руководство по форматированию, которое не будет работать в режиме «Rich Text». Однако это не главная проблема, так как руководства можно изменить. Реальная проблема в том, что пользователи действительно пытаются оформить свой пост, но терпят неудачу из-за редактора «Rich Text».

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

На этом этапе я также хочу упомянуть эту тему о полном отключении редактора «Rich Text»: How can i set disable Markdown & Default to Rich Text

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

P.S.: Я использовал функцию проверки орфографии в этом посте. Это потрясающе!

Здесь есть отдельный отчёт об ошибке:

1 лайк

Спасибо! Я думал, что уже достаточно времени потратил на поиск, но не нашёл этого.

Привет @rimelek, спасибо за подробный отчёт, мы ценим это.

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

3 лайка

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

Думаю, остаётся следующая «проблема»: если вы вставляете обычный текст в редактор, и нет указания на то, что это предварительно отформатированный текст, мы не можем автоматически создать блок кода. Например, при копировании из моего терминала в буфер обмена попадает только plain/text, а для автоматического создания блока кода нам сейчас нужен text/html с элементом pre.

Не могли бы вы проверить, улучшилась ли ситуация с тех пор? И сообщите, если что-то всё ещё работает некорректно.

Спасибо!

2 лайка