Problema di rendering Markdown con immagine circondata da HTML

Related to Thumbnail generation & markdown rendering issue

When discourse downloads and replaces an image HTML with its markdown syntax – in our context, this results as:

[...]<a href="<link_here>" target="_blank">![|150x150](upload://l0iarnA6SPVAyJN5l7pnQxZnPvE.jpeg)</a>[...]

Discourse is unable to render the image

Image

image

To fix the issue, you need at least an empty line above:

[...]<a href="<link_here>" target="_blank">

![|150x150](upload://l0iarnA6SPVAyJN5l7pnQxZnPvE.jpeg)</a>[...]
Image

image

Would it be possible to allow rendering markdown image surrounded by HTML, please?

@david

5 Mi Piace

Let’s try this on meta. I am hotlinking this image inside a link:

<a href="https://discourse.org"><img src="..."/></a>

Let’s see what happens when the image is pulled…

3 Mi Piace

@Arkshine that seemed to work ok - it’s rendering <a href="https://discourse.org">![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</a> successfully.

Can you share a little more of the HTML structure surrounding the link?

2 Mi Piace
Unformatted
<div data-wp><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">![](upload://vAPxoqZB2QvWCrX4kbbzSO5BYYb.png)</a><div><div data-buy><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">קנייה</a><span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i></div><div data-price>₪679 <span data-old-price>₪1378</span></div></div></div><hr /><p><small>&nbsp;פורסם ב:&nbsp;<a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a></small></p><br><p>![](upload://npQfkOhEIdPiFymVdtVyKmwRShL.png)</p>
<p style="text-align: center;">בין אם אתם גיימרים ובין אם אתם פשוט עובדים ויושבים כל היום והגב כבר זועק לכיסא טוב יותר, הנה לכם עוד מבצע בלעדי במחיר חטיפה!<br />
כיסא גיימינג מפנק, אוזניות גיימינג ומשלוח מהיר בחינם, עם אחריות יבואן רשמי &#8211; רק ב679₪!!!</p>
<p style="text-align: center;">השתמשו בקופה בקופון הבלעדי &#8211; <strong>GLA679</strong></p>
<div> ![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
<h3 style="text-align: center;">מושב גיימינג מקצועי SPARKFOX GC60P</h3>
</div>
<div>מושב גיימינג בעל עיצוב מיוחד למשחקי מחשב לנוחות מקסימאלית למשתמש</div>
<div>
<ul>
<li>מושב בעל משענת גב גבוהה</li>
<li>נוחות המקסימאלית למשך זמן משחק ארוך</li>
<li>זוג כריות לתמיכה בצוואר ובגב התחתון</li>
<li>סוג חומר: ספוג יצוק</li>
<li>סוג מסגרת: מתכת</li>
<li>חומר: עור עם סיבי פחם</li>
<li>משענות ידיים: מתכווננות מעלה / מטה</li>
<li>סוג מנגנון: פרפר</li>
<li>סוג הרמה: הידראולית Class4</li>
<li>טווח משענת גב: 90°-180°</li>
<li>סוג בסיס: ניילון</li>
<li>חומר גלגל: ניילון</li>
<li>יכולת נשיאה: עד 150 ק”ג</li>
<li>אחריות: שנה</li>
</ul>
<div><strong>מידות</strong></div>
<div>
<ul>
<li>רוחב: 67 ס&quot;מ</li>
<li>עומק: 67 ס&quot;מ</li>
<li>גובה משתנה: 124-132 ס&quot;מ</li>
</ul>
<h3></h3>
<p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
<h3 style="text-align: center;">אוזניות גיימינג SPARKFOX K1</h3>
<div>אוזניות גיימינג בעיצוב מיוחד לנוחות מקסימלית לשמע ודיבור וביטול רעשי רקע</div>
<div>
<ul>
<li>ניתנות לשימוש ברוב הקונסולות הקיימות בשוק</li>
<li>שמע וניהול שיחות בטלפונים ובמחשבים ניידים</li>
<li>ווסת עוצמת השמע הינו בכבל של האוזנייה- לגישה נוחה</li>
<li>שמע מעולה ממנהלי התקנים גדולים של 50 מ&quot;מ</li>
<li>בקרי עוצמת הקול וההשתקה</li>
<li>כוסות אוזניים מרופדות גדולות לנוחות מרבית</li>
<li>קשת האוזנייה מתכווננת להתאמה מושלמת לראשכם</li>
<li>מתחבר ישירות ליציאת בקרי 3.5 מ&quot;מ</li>
</ul>
</div>
<div>מצורף מתאם מיוחד לחיבור האוזניות למחשב נייח ע&quot;י מפצל 3.5 מ&quot;מ ל 2 יציאות 3.5 מ&quot;מ</div>
</div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Formatted
<div data-wp>
    <a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">![](upload://vAPxoqZB2QvWCrX4kbbzSO5BYYb.png)</a>
    <div>
        <div data-buy>
            <a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">קנייה</a
            ><span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i>
        </div>
        <div data-price>₪679 <span data-old-price>₪1378</span></div>
    </div>
</div>
<hr />
<p>
    <small
        >&nbsp;פורסם ב:&nbsp;<a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a
    ></small>
</p>
<br />
<p>![](upload://npQfkOhEIdPiFymVdtVyKmwRShL.png)</p>
<p style="text-align: center;">
    בין אם אתם גיימרים ובין אם אתם פשוט עובדים ויושבים כל היום והגב כבר זועק לכיסא טוב יותר, הנה לכם עוד מבצע בלעדי במחיר חטיפה!<br />
    כיסא גיימינג מפנק, אוזניות גיימינג ומשלוח מהיר בחינם, עם אחריות יבואן רשמי &#8211; רק ב679₪!!!
</p>
<p style="text-align: center;">השתמשו בקופה בקופון הבלעדי &#8211; <strong>GLA679</strong></p>
<div>![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
    <h3 style="text-align: center;">מושב גיימינג מקצועי SPARKFOX GC60P</h3>
</div>
<div>מושב גיימינג בעל עיצוב מיוחד למשחקי מחשב לנוחות מקסימאלית למשתמש</div>
<div>
    <ul>
        <li>מושב בעל משענת גב גבוהה</li>
        <li>נוחות המקסימאלית למשך זמן משחק ארוך</li>
        <li>זוג כריות לתמיכה בצוואר ובגב התחתון</li>
        <li>סוג חומר: ספוג יצוק</li>
        <li>סוג מסגרת: מתכת</li>
        <li>חומר: עור עם סיבי פחם</li>
        <li>משענות ידיים: מתכווננות מעלה / מטה</li>
        <li>סוג מנגנון: פרפר</li>
        <li>סוג הרמה: הידראולית Class4</li>
        <li>טווח משענת גב: 90°-180°</li>
        <li>סוג בסיס: ניילון</li>
        <li>חומר גלגל: ניילון</li>
        <li>יכולת נשיאה: עד 150 ק”ג</li>
        <li>אחריות: שנה</li>
    </ul>
    <div><strong>מידות</strong></div>
    <div>
        <ul>
            <li>רוחב: 67 ס&quot;מ</li>
            <li>עומק: 67 ס&quot;מ</li>
            <li>גובה משתנה: 124-132 ס&quot;מ</li>
        </ul>
        <h3></h3>
        <p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
        <h3 style="text-align: center;">אוזניות גיימינג SPARKFOX K1</h3>
        <div>אוזניות גיימינג בעיצוב מיוחד לנוחות מקסימלית לשמע ודיבור וביטול רעשי רקע</div>
        <div>
            <ul>
                <li>ניתנות לשימוש ברוב הקונסולות הקיימות בשוק</li>
                <li>שמע וניהול שיחות בטלפונים ובמחשבים ניידים</li>
                <li>ווסת עוצמת השמע הינו בכבל של האוזנייה- לגישה נוחה</li>
                <li>שמע מעולה ממנהלי התקנים גדולים של 50 מ&quot;מ</li>
                <li>בקרי עוצמת הקול וההשתקה</li>
                <li>כוסות אוזניים מרופדות גדולות לנוחות מרבית</li>
                <li>קשת האוזנייה מתכווננת להתאמה מושלמת לראשכם</li>
                <li>מתחבר ישירות ליציאת בקרי 3.5 מ&quot;מ</li>
            </ul>
        </div>
        <div>מצורף מתאם מיוחד לחיבור האוזניות למחשב נייח ע&quot;י מפצל 3.5 מ&quot;מ ל 2 יציאות 3.5 מ&quot;מ</div>
    </div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Screenshot of composer

1 Mi Piace

This is the same issue as is brought up here: Images not publishing to Discourse in WP 5.3

3 Mi Piace

Aha! @simon will upgrading the wordpress plugin fix old posts? Or only new posts?

3 Mi Piace

The fix only applies to posts that are published with the WordPress Block editor. It will fix old posts if the “Update Discourse Topic” button is clicked on WordPress. It will need to be done manually for each post unless someone writes a script to loop through old posts.

4 Mi Piace

Let’s try this HTML:

<p><img src="..."/></p>

![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)

4 Mi Piace

I think this should be fixed in Discourse as well, just in case posts are made by a non-wordpress integration. To summarise:

  1. I posted <p><img src="..."/></p>. This is perfectly valid HTML

  2. pull_hotlinked_images fetched the image, and replaced the markup with <p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>

  3. This does not render

So there are two possible fixes here. Either:

  • We fix InlineUploads so that it adds a blank line in the markup. This renders fine:
    <p>
    
    ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
    </p>
    

OR

@sam do you know if there’s a deliberate reason that markdown images won’t render on the same line as a <p>?

3 Mi Piace

This is part of the CommonMark spec

**test**

<p>**test**</p>

Absolutely do not want to deviate from the spec here. I guess we fix pull hotlink images to allow for this by injecting 2 newlines for cases like this. I think it is rather rare though and sort of self inflicted.

5 Mi Piace

I don’t think it’s that rare, especially when Discourse is associated to popular tools such as WP-Discourse or any tools which uses the API.

Please consider to add a blank line. It does not seems that would be a breaking change and fairly easy to implement. :pray:

3 Mi Piace

@Arkshine we have been discussing this a lot internally. The key thing for us is to maintain the integrity of the content, so the newline solution will probably not happen.

But we will definitely be doing something - having the pull_hotlinked_images job destroy the images is not acceptable. Hope to have a solution soon :eyes:

5 Mi Piace

A workaround for this issue is to prevent Discourse from downloading the remote images. This can be done by adding the image domain to the disabled image download domains site setting. It is also possible to prevent Discourse from downloading all remote images by disabling the download remote images to local site setting. See Fix broken images for posts created by the WP Discourse and RSS plugins for details.

4 Mi Piace

In our case, we can’t because we’re using the official topic thumbnail component which requires a local image. We solved the issue by adding newlines before any <img> in the content before topic being created with WP-Discourse. Not a solution for everyone but it works for us. A bit sad Discourse doesn’t support this legal usage.

But yes, if you are not tightened to a plugin/component and/or can’t fix the content before topic is created, this is for sure a reasonable workaround.

2 Mi Piace

We are still planning to fix the issue. Unfortunately it is a problem quite deep in our markdown rendering system which is complex to fix. But we will get to it - sorry it is taking so long!

5 Mi Piace

I’m just adding a note here that the issue affects posts with images that are created via the Discourse RSS plugin as well.

6 Mi Piace

Scusa per i numerosi post in questo argomento, ma il problema riguarda anche le immagini nei post creati tramite il nostro plugin Zendesk quando l’impostazione sync comments from zendesk è abilitata. La difficoltà in questo caso è che non è possibile conoscere in anticipo la fonte delle immagini, quindi l’alternativa di aggiungere l’URL dell’immagine all’impostazione disabled image download domains non funzionerà.

Esiste un modo per impedire il download delle immagini remote sul locale se il tag immagine è racchiuso in tag HTML?

1 Mi Piace

Temo che questa opzione sia completamente fuori discussione; se facessimo qualcosa del genere, permetteremmo a terze parti di tracciare l’utilizzo su un forum iniettando un’immagine di tracciamento. Il download delle immagini remote è una funzione di sicurezza.

Invece, penso che abbiamo bisogno di un sistema “più intelligente” che funzioni in modo simile a come @tgxworld ha implementato i nostri mappatori di immagini alcuni anni fa, uno che opera all’indietro partendo dall’HTML e garantisce la stabilità della modifica attraverso una nuova cottura. Purtroppo, si tratta di una modifica molto complessa.

4 Mi Piace

Questo problema è riemerso

Sto solo pensando ad alta voce, ma mi chiedo se possiamo evitare il problema complesso qui (cioè la conversione da HTML a Markdown). Per riassumere (solo per aiutarmi a ragionare su questo)

  1. Discourse supporta l’importazione di HTML per la creazione del contenuto dei post (ad esempio HTML da WP Discourse).

  2. In alcuni contesti, l’utente si aspetta che l’integrità dell’HTML originale venga mantenuta esattamente.

  3. “Integrità” qui ha almeno due aspetti:

    1. Come viene renderizzato il contenuto, ad esempio i ritorni a capo
    2. Dove sono ospitati i media, ad esempio il download delle immagini in locale per evitare immagini rotte o potenzialmente per motivi di sicurezza
  4. La conversione da HTML a Markdown potenzialmente crea problemi per il primo tipo di integrità, ma è attualmente necessaria per garantire il secondo tipo di integrità.

Quindi, forse un modo per affrontare questo problema per determinati post importati sarebbe salvare l’HTML importato direttamente come contenuto cotto del post, e il job pull_hotlinked_images supporterebbe il download delle immagini in tale contenuto senza convertire img in Markdown.

Sì, più semplicemente, forse il codice potrebbe supportare il download delle immagini collegate senza richiedere la conversione di img in Markdown. Per tali post, interpoleresti l’URL dell’immagine scaricata nel contenuto cotto invece che nel contenuto grezzo.

3 Mi Piace

La cosa complicata è: come potresti mai modificare i post con quel flag? L’editor si troverebbe in modalità HTML grezzo e l’intera barra degli strumenti non funzionerebbe, ecc.

1 Mi Piace