Тег HTML5 «button» отображается в предпросмотре редактора, но не в опубликованных постах

Проблема

После сохранения содержимого поста он отображается примерно 4 мс в отрендеренном посте, затем на 2 мс появляется кружок загрузки, и всё исчезает:

Решения

Если отображение в предпросмотре случайно, а удаление из отрендеренного поста намеренное из-за неизвестных мне соображений безопасности, нельзя ли хотя бы заменить <button> на <button disabled>?

Я спрашиваю, потому что часто вижу неправильное использование <code> и <kbd> там, где семантически уместнее <button>, особенно в руководствах и шагах воспроизведения.

1 лайк

Не уверен, что это именно баг. Понимаю ваше замешательство.

Чтобы HTML-теги и атрибуты/имена классов не фильтровались, это нужно явно разрешить в ядре Discourse или в плагине.

Например, список по умолчанию можно найти здесь:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115

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

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js#L198

Вы видите кнопку в предпросмотре, потому что это побочный эффект разрешённого здесь тега.
Однако атрибут disabled игнорируется, так как он не определён.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js#L223

Я не проверял, как именно обрабатывается список разрешённых элементов; интересно, является ли это ожидаемым поведением. :thinking:. На данный момент кажется, что тег разрешён независимо от атрибутов. Я бы ожидал, что кнопка не будет отображаться, если вы не используете точно, например, <button class="alt-text-edit-ok btn btn-primary">.

Вы можете создать плагин, который разрешит <button> при рендеринге поста. Дайте знать, если нужна помощь.

2 лайка

@Arkshine, благодарю. Однако я не администратор инстанса. Я просто заметил это при создании контента.

Это один из многих случаев, когда отображение HTML5 и CSS3 в предпросмотре отличается от итогового рендеринга, что затрудняет работу с контентом для Discourse. Особенно это актуально, когда редактирование отключено или ограничено очень коротким промежутком времени для всего инстанса.

1 лайк

Понимаю, это имеет смысл! Согласен, это не лучший опыт.

Если хотите, я создал небольшой плагин, позволяющий использовать тег <button> с атрибутом disabled: GitHub - Arkshine/discourse-markdown-allowlist · GitHub

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

3 лайка

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

Обычно я создавал бы такую проблему в соответствующем репозитории GitHub, но раздел проблем отключен для Discourse.

Используйте здесь #feature вместо GitHub? Потому что bug это не так.

@Jagster, если бы этот тег был просто недоступен, я бы так подумал. Однако то, что предпросмотр не работает как предпросмотр, — это #Баг.

Как вы классифицируете это как функцию? Как бы вы переписали заголовок, чтобы это продемонстрировать?

1 лайк

#feature — это категория для отсутствующих функций. bug — для ошибок, а это не ошибка.

Возможно, вы хотели бы использовать это точно так же, как раздел задач (issues) в GitHub?

1 лайк

Я считаю, что несоответствие между предпросмотром и отрендеренными постами вполне можно рассматривать как #баг.

Решение, вероятно, будет заключаться в том, чтобы блокировать это и в предпросмотре, что означает, что «добавление поддержки <button> в постах» станет валидным запросом на #фичу в будущем :wink:

3 лайка

Действительно, @david. Мне следовало разделить это:

Приношу извинения и спасибо.

3 лайка