Проблема с рендерингом Markdown при изображении, окруженном HTML

Да, если вы полностью пойдете по этому пути, вам придется пожертвовать возможностью редактирования контента в Discourse ради полной целостности HTML.

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

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

2 лайка

Да, я думаю, что это, вероятно, лучший вариант. Я начал работу над этим ещё в июне 2020 года, но в итоге это потребовало слишком много усилий, и мне пришлось переключиться на другие проекты. У меня было несколько подходов к разрешению URL-адресов вида upload:// в тегах <img… ни один из них не идеален. Из моих заметок:


Вариант 1 реализации:

В конвейере markdown разбирать содержимое каждого html_block (немного злоупотребляя библиотекой xss.js) и обрабатывать любые теги изображений с атрибутами src вида upload://.

Плюсы: всё в конвейере markdown, такая обработка выполняется только для токенов html_block

Минусы: довольно некорректное использование санитайзера xss.js. Это может быть не идеальный парсер HTML5

Этот вариант можно улучшить, используя на сервере стандартную реализацию DOM на JavaScript (например, jsdom), но это кажется довольно громоздким решением.

Вариант 2 реализации:

Разрешить атрибуты src вида upload:// на всём протяжении конвейера markdown, а затем заменить их позже. На клиенте это на самом деле довольно просто — мы уже асинхронно заменяли URL-адреса upload:// после обработки. На сервере это требует дополнительного шага обработки с использованием Nokogiri.

Плюсы: парсер соответствует стандартам HTML5

Минусы: различная реализация на клиенте и сервере, немного усложняет конвейер


Я думаю, что вариант 2, вероятно, стоит выбрать. Тогда нам нужно будет обновить задачу pull_hotlinked_images, чтобы она сохраняла теги <img, не заменяя их на Markdown. Надеюсь, скоро у меня найдётся время вернуться к этому :crossed_fingers:

4 лайка

Я действительно не понимаю, в чём здесь сложность. Очевидно, что HTML-тег изображения заменяется на markdown — например, ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg). Почему бы просто не добавить два символа переноса строки перед !? Это обеспечит корректный рендеринг и позволит функции загрузки изображений работать, предотвращая битые картинки и проблемы с межсайтовыми запросами.

Существует ли реальная, а не теоретическая ситуация, когда этот пробел может вызвать проблему? И является ли эта проблема хуже, чем текущее состояние плагина, когда «картинки постоянно ломаются»?

@david, вы отмечаете, что «решение с переносом строки, вероятно, не будет реализовано», потому что «для нас ключевым моментом является сохранение целостности контента». Но целостность контента уже нарушена при вставке тегов изначально. Я… действительно не понимаю, как это может быть лучше.

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

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

1 лайк

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

Давайте попробуем это здесь на Мета.

<div>
Изображение в HTML-блоке:
<img src="..." width=100 height=100>
</div>
Изображение в HTML-блоке:
6 лайков

Эта тема была автоматически закрыта через 5 дней. Новые ответы больше не принимаются.