Problema de renderizado de Markdown con imagen rodeada por HTML

Relacionado con Thumbnail generation & markdown rendering issue

Cuando Discourse descarga y reemplaza una imagen HTML con su sintaxis Markdown, en nuestro contexto esto resulta en:

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

Discourse no puede renderizar la imagen.

Imagen

image

Para solucionar el problema, necesitas al menos una línea en blanco arriba:

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

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

¿Sería posible permitir el renderizado de imágenes Markdown rodeadas por HTML, por favor?

@david

5 Me gusta

Probemos esto en Meta. Estoy enlazando directamente esta imagen dentro de un enlace:

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

Veamos qué sucede cuando se carga la imagen…

3 Me gusta

@Arkshine eso pareció funcionar bien: está renderizando <a href="https://discourse.org">![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</a> correctamente.

¿Podrías compartir un poco más de la estructura HTML que rodea el enlace?

2 Me gusta
Sin formato
<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">Comprar</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;Publicado en:&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;">Ya sea que sean jugadores o simplemente trabajen y estén sentados todo el día con la espalda gritando por una silla mejor, aquí tienen otra oferta exclusiva a precio de ganga!<br />
Silla de gaming cómoda, auriculares de gaming y envío rápido gratuito, con garantía del importador oficial &#8211; ¡solo por 679₪!!!</p>
<p style="text-align: center;">Utilice en el checkout el cupón exclusivo &#8211; <strong>GLA679</strong></p>
<div> ![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
<h3 style="text-align: center;">Silla de gaming profesional SPARKFOX GC60P</h3>
</div>
<div>Silla de gaming con diseño especial para juegos de computadora, ofreciendo comodidad máxima para el usuario</div>
<div>
<ul>
<li>Silla con respaldo alto</li>
<li>Comodidad máxima durante largas sesiones de juego</li>
<li>Par de almohadillas para soporte cervical y lumbar</li>
<li>Tipo de material: espuma moldeada</li>
<li>Tipo de estructura: metal</li>
<li>Material: cuero con fibras de carbono</li>
<li>Apoyabrazos: ajustables arriba/abajo</li>
<li>Tipo de mecanismo: mariposa</li>
<li>Tipo de elevación: hidráulica Clase 4</li>
<li>Rango de inclinación del respaldo: 90°-180°</li>
<li>Tipo de base: nailon</li>
<li>Material de las ruedas: nailon</li>
<li>Capacidad de carga: hasta 150 kg</li>
<li>Garantía: un año</li>
</ul>
<div><strong>Dimensiones</strong></div>
<div>
<ul>
<li>Ancho: 67 cm</li>
<li>Profundidad: 67 cm</li>
<li>Altura ajustable: 124-132 cm</li>
</ul>
<h3></h3>
<p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
<h3 style="text-align: center;">Auriculares de gaming SPARKFOX K1</h3>
<div>Auriculares de gaming con diseño especial para máxima comodidad en audio y voz, con cancelación de ruido ambiental</div>
<div>
<ul>
<li>Compatibles con la mayoría de las consolas disponibles en el mercado</li>
<li>Audio y gestión de llamadas en teléfonos y computadoras portátiles</li>
<li>Control de volumen ubicado en el cable de los auriculares para fácil acceso</li>
<li>Excelente sonido gracias a drivers grandes de 50 mm</li>
<li>Controles de volumen y mute</li>
<li>Auriculares acolchados grandes para máxima comodidad</li>
<li>Arco ajustable para un ajuste perfecto a su cabeza</li>
<li>Conexión directa a la salida de auriculares de 3.5 mm</li>
</ul>
</div>
<div>Incluye un adaptador especial para conectar los auriculares a una computadora de escritorio mediante un divisor de 3.5 mm a 2 salidas de 3.5 mm</div>
</div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Con formato
<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">Comprar</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;Publicado en:&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;">
    Ya sea que sean jugadores o simplemente trabajen y estén sentados todo el día con la espalda gritando por una silla mejor, aquí tienen otra oferta exclusiva a precio de ganga!<br />
    Silla de gaming cómoda, auriculares de gaming y envío rápido gratuito, con garantía del importador oficial &#8211; ¡solo por 679₪!!!
</p>
<p style="text-align: center;">Utilice en el checkout el cupón exclusivo &#8211; <strong>GLA679</strong></p>
<div>![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
    <h3 style="text-align: center;">Silla de gaming profesional SPARKFOX GC60P</h3>
</div>
<div>Silla de gaming con diseño especial para juegos de computadora, ofreciendo comodidad máxima para el usuario</div>
<div>
    <ul>
        <li>Silla con respaldo alto</li>
        <li>Comodidad máxima durante largas sesiones de juego</li>
        <li>Par de almohadillas para soporte cervical y lumbar</li>
        <li>Tipo de material: espuma moldeada</li>
        <li>Tipo de estructura: metal</li>
        <li>Material: cuero con fibras de carbono</li>
        <li>Apoyabrazos: ajustables arriba/abajo</li>
        <li>Tipo de mecanismo: mariposa</li>
        <li>Tipo de elevación: hidráulica Clase 4</li>
        <li>Rango de inclinación del respaldo: 90°-180°</li>
        <li>Tipo de base: nailon</li>
        <li>Material de las ruedas: nailon</li>
        <li>Capacidad de carga: hasta 150 kg</li>
        <li>Garantía: un año</li>
    </ul>
    <div><strong>Dimensiones</strong></div>
    <div>
        <ul>
            <li>Ancho: 67 cm</li>
            <li>Profundidad: 67 cm</li>
            <li>Altura ajustable: 124-132 cm</li>
        </ul>
        <h3></h3>
        <p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
        <h3 style="text-align: center;">Auriculares de gaming SPARKFOX K1</h3>
        <div>Auriculares de gaming con diseño especial para máxima comodidad en audio y voz, con cancelación de ruido ambiental</div>
        <div>
            <ul>
                <li>Compatibles con la mayoría de las consolas disponibles en el mercado</li>
                <li>Audio y gestión de llamadas en teléfonos y computadoras portátiles</li>
                <li>Control de volumen ubicado en el cable de los auriculares para fácil acceso</li>
                <li>Excelente sonido gracias a drivers grandes de 50 mm</li>
                <li>Controles de volumen y mute</li>
                <li>Auriculares acolchados grandes para máxima comodidad</li>
                <li>Arco ajustable para un ajuste perfecto a su cabeza</li>
                <li>Conexión directa a la salida de auriculares de 3.5 mm</li>
            </ul>
        </div>
        <div>Incluye un adaptador especial para conectar los auriculares a una computadora de escritorio mediante un divisor de 3.5 mm a 2 salidas de 3.5 mm</div>
    </div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Captura del compositor

1 me gusta

Este es el mismo problema que se menciona aquí: Images not publishing to Discourse in WP 5.3 - #6 by simon

3 Me gusta

¡Ajá! @simon, ¿actualizar el complemento de WordPress arreglará las publicaciones antiguas? ¿O solo las nuevas?

3 Me gusta

La corrección solo se aplica a las publicaciones que se publican con el editor de bloques de WordPress. Corregirá las publicaciones antiguas si se hace clic en el botón “Actualizar tema de Discourse” en WordPress. Será necesario hacerlo manualmente para cada publicación, a menos que alguien escriba un script para recorrer las publicaciones antiguas.

4 Me gusta

Intentemos este HTML:

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

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

4 Me gusta

Creo que esto también debería solucionarse en Discourse, por si acaso se publican mensajes mediante una integración que no sea de WordPress. Para resumir:

  1. Publicé <p><img src="..."/></p>. Esto es HTML perfectamente válido.

  2. pull_hotlinked_images recuperó la imagen y reemplazó el marcado por <p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>.

  3. Esto no se renderiza.

Por lo tanto, hay dos posibles soluciones. O bien:

  • Corregimos InlineUploads para que añada una línea en blanco en el marcado. Esto se renderiza correctamente:
    <p>
    
    ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
    </p>
    

O bien:

@sam, ¿sabes si hay una razón deliberada por la que las imágenes de Markdown no se renderizan en la misma línea que un <p>?

3 Me gusta

Esto forma parte de la especificación CommonMark

**prueba**

<p>**prueba**</p>

Definitivamente no queremos desviarnos de la especificación aquí. Supongo que arreglaremos las imágenes de hotlink externas inyectando dos saltos de línea para casos como este. Creo que es bastante raro, pero en cierto modo es un problema autoinfligido.

5 Me gusta

No creo que sea tan raro, especialmente cuando Discourse se asocia con herramientas populares como WP-Discourse o cualquier herramienta que utilice la API.

Por favor, considera agregar una línea en blanco. No parece que esto suponga un cambio incompatible y sería bastante fácil de implementar. :pray:

3 Me gusta

@Arkshine hemos estado discutiendo esto mucho internamente. Lo fundamental para nosotros es mantener la integridad del contenido, por lo que probablemente no se implementará la solución de las nuevas líneas.

Pero definitivamente haremos algo: que el trabajo de pull_hotlinked_images destruya las imágenes no es aceptable. Esperamos tener una solución pronto :eyes:

5 Me gusta

Una solución alternativa para este problema es evitar que Discourse descargue las imágenes remotas. Esto se puede hacer agregando el dominio de la imagen a la configuración del sitio ‘dominios de descarga de imágenes deshabilitados’. También es posible evitar que Discourse descargue todas las imágenes remotas deshabilitando la configuración del sitio ‘descargar imágenes remotas a local’. Consulta Fix broken images for posts created by the WP Discourse and RSS plugins para obtener más detalles.

4 Me gusta

En nuestro caso, no podemos hacerlo porque estamos utilizando el componente oficial de miniaturas de temas, el cual requiere una imagen local. Resolvimos el problema añadiendo saltos de línea antes de cualquier <img> en el contenido antes de que se cree el tema con WP-Discourse. No es una solución para todos, pero funciona para nosotros. Es un poco triste que Discourse no admita este uso legal.

Pero sí, si no estás atado a un plugin/componente y/o no puedes corregir el contenido antes de que se cree el tema, esta es sin duda una solución alternativa razonable.

2 Me gusta

Todavía planeamos solucionar el problema. Lamentablemente, se trata de un problema bastante profundo en nuestro sistema de renderizado de Markdown, lo cual es complejo de arreglar. Pero lo abordaremos: ¡perdón por tardar tanto!

5 Me gusta

Solo quiero añadir una nota aquí de que el problema también afecta a las publicaciones con imágenes creadas mediante el complemento RSS de Discourse.

6 Me gusta

Disculpa las múltiples publicaciones en este tema, pero el problema también afecta a las imágenes en los mensajes creados a través de nuestro plugin de Zendesk cuando la opción “sincronizar comentarios desde Zendesk” está habilitada. La dificultad en este caso es que no es posible conocer el origen de las imágenes con antelación, por lo que el método alternativo de agregar el src de la imagen a la opción “dominios de descarga de imágenes deshabilitados” no funcionará.

¿Existe alguna manera de evitar que las imágenes remotas se descarguen localmente si la etiqueta de imagen está envuelta en etiquetas HTML?

1 me gusta

Me temo que eso está totalmente descartado. Si hiciéramos algo así, permitiríamos que terceros rastreen el uso en un foro inyectando un GIF de seguimiento. La descarga de imágenes remotas es, en parte, una medida de seguridad.

En su lugar, creo que necesitamos un sistema “más inteligente” que funcione de manera similar a como @tgxworld construyó nuestros remapeadores de imágenes hace unos años: uno que trabaje hacia atrás desde el HTML y garantice la estabilidad del cambio mediante una nueva cocción. Lamentablemente, es un cambio muy complejo.

4 Me gusta

Este problema ha vuelto a aparecer

Solo estoy pensando en voz alta, pero me pregunto si podríamos omitir el problema complicado aquí (es decir, la conversión de HTML a Markdown). Para recapitular (solo para ayudar a reflexionar sobre esto):

  1. Discourse admite la importación de HTML para la creación de contenido de publicaciones (por ejemplo, HTML de WP Discourse).

  2. En algunos contextos, el usuario espera que la integridad del HTML original se conserve exactamente.

  3. La “integridad” aquí tiene al menos dos aspectos:

    1. Cómo se representa el contenido, por ejemplo, los saltos de línea.
    2. Dónde se alojan los medios, por ejemplo, descargar imágenes a local para evitar imágenes rotas o, potencialmente, por preocupaciones de seguridad.
  4. La conversión de HTML a Markdown puede generar problemas para el primer tipo de integridad; sin embargo, actualmente es necesaria para garantizar el segundo tipo de integridad.

Por lo tanto, tal vez una forma de abordar este problema para ciertas publicaciones importadas sería almacenar el HTML importado directamente como el contenido cocinado de la publicación, y el trabajo pull_hotlinked_images podría admitir la descarga de imágenes en dicho contenido sin convertir las etiquetas img a Markdown.

Sí, dicho más simplemente, quizás el código podría admitir la descarga de imágenes con enlaces externos sin requerir la conversión de img a Markdown. Para esas publicaciones, se podría interpolare la URL de la imagen descargada en el contenido cocinado en lugar de en el contenido sin procesar.

3 Me gusta

Lo complicado es cómo editarías nunca las publicaciones con esa bandera. El editor estaría en modo HTML sin formato y toda la barra de herramientas quedaría rota, etc.

1 me gusta