Interacción entre el componente de tema, el javascript del tema y las "previsualizaciones"

[craigconstantine]

j/s

Tengo algo de j/s personalizado en mi tema. (Es mi solución para: Interactive SVG using <object>? - #9 by craigconstantine ) Eventualmente, moveré el j/s a un repositorio Git e lo instalaré como un componente de tema adecuado. Por ahora, simplemente tengo el j/s pegado en el encabezado de mi tema. Supongo que este problema podría desaparecer si instalara este j/s como un componente adecuado, pero no me parece que vaya a ser así.

Mi j/s modifica el DOM antes de enviarse al navegador…

api.decorateCooked(
    $elem =\u003e $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
    { id: 'umbdv' }
);

En acción…

Selecciona los \u003cdiv data-custom="… apropiados y luego agrega nuevos elementos. Por ejemplo, en la siguiente captura de pantalla, todo lo que está debajo de las flechas fue insertado por el j/s. (Puedes verlo en acción aquí: https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 )

Lo que estoy viendo…

Estoy utilizando el componente Topic List Previews ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub ) y parece que mi j/s no se ejecuta.

En esta captura de pantalla, la cadena /vmm/gibberish… es el contenido desnudo del \u003cdiv data-custom="… que se muestra porque mi j/s nunca llega a él mediante api.decorateCooked(….

Lo mismo ocurre en los correos electrónicos que se envían…

Lo que me gustaría…

En realidad, no quiero que haga el reemplazo completo. Es una historia larga. Solo me gustaría expandir mi j/s para que pueda colocar una cadena estática allí, en lugar del sinsentido desnudo de mi bloque \u003cdiv data-custom="….

¿Existe algún otro método api. al que pueda conectarme?

[david (David Taylor)]

Lamentablemente, no existe una API de JavaScript para modificar los “extractos” de los temas en la lista de temas. Además, por razones de seguridad, los componentes de temas tampoco tienen acceso al contenido renderizado en el servidor (como los correos electrónicos). Si deseas modificar los correos electrónicos, deberás utilizar un plugin.

Sin embargo, me pregunto si podemos resolver esto de otra manera. Ahora mismo estás pegando algo así en el editor:

<div data-custom="umbdv">/vmm/longstringhere</div>

En su lugar, podrías hacer algo como esto:

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  contenido de respaldo para correos electrónicos/extractos
</div>

O, si te sientes muy creativo, podrías utilizar el envoltorio genérico de BBCode para hacerlo:

[wrap=umbdv longstring="/vmm/longstringhere"]
Contenido de respaldo
[/wrap]

Esto generará automáticamente un div como este:

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">Contenido de respaldo</p>
</div>

Luego, tendrás que ajustar el código de tu componente de tema para que elimine el contenido de respaldo y lo reemplace con lo que quieras mostrar.

[craigconstantine]

…oooooooooooh, eso lo solucionaría. Haré algunas pruebas y te informaré.

[craigconstantine]

…sí, funciona a la perfección @david, ¡gracias!

[pfaffman (Jay Pfaffman)]

A veces el no es suficiente. Esta es una gran respuesta, y estoy muy cerca de entender JavaScript y CSS lo suficientemente bien como para d-wrap mi cabeza al respecto.