Estoy intentando agregar un widget al compositor. He avanzado lo suficiente como para poder insertar el código desde la barra de herramientas, pero no estoy seguro de cómo hacer que el JavaScript funcione dentro de él. Asumo que necesitaré agregar el JavaScript internamente, ya sea como un complemento o un componente del tema, en lugar de llamarlo desde un sitio externo, pero no estoy seguro de cómo hacerlo. ¿Es esto posible dentro del compositor?
¿Puede ser un poco más específico sobre lo que está intentando hacer? ¿Está intentando agregar un nuevo botón en la barra de herramientas que añada contenido al área de texto del editor? ¿O algo más?
Lo que estoy intentando hacer es permitir que los usuarios inserten su widget específico desde el compositor, donde todo lo que tendrían que hacer es escribir un número y que la barra de herramientas lo envuelva. Por ejemplo, si escriben 112756, se envolvería el siguiente código alrededor de él.
<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>Cargando widget de PurpleAir...</div>
<script src='https://www.purpleair.com/pa.widget.js?key=N6HB6JJ0BP1Z05SE&module=AQI&conversion=C0&average=10&layer=detailed&container=PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'></script>
Esperamos que se vea algo así
Ok, así que parece que ya has descubierto cómo agregar contenido al editor de texto. (Si no es así, consultar este ejemplo puede ayudar: GitHub - discourse/discourse-gifs · GitHub. Este componente del tema abre un modal cuando se hace clic en el botón de la barra de herramientas y luego inserta contenido en el editor de texto al hacer clic en algún contenido dentro del modal).
Si estás intentando cargar un script para que realice alguna acción en el contenido de la publicación, creo que esta publicación podría orientarte en la dirección correcta… utilizando loadScript y decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen
Podrías ser capaz de usar esto de alguna manera (ya sea directamente o una personalización bifurcada): Mentionables que utiliza un carácter especial en lugar de un botón del compositor.
Gracias por señalarme la dirección correcta, parece que me encuentro con otro problema, no se carga/renderiza al abrir la página del tema que usaría el script. Solo después de actualizar la página se carga correctamente, pero no siempre. ¿Es esto porque Discourse es una aplicación de página única? Solo estoy tratando de averiguar si mi conocimiento de Discourse es deficiente o si es algo que debo programar yo mismo.
Aquí está el código actual que estoy usando. Cualquier dirección sería muy apreciada.
let loadScript = require('discourse/lib/load-script').default;
api.decorateCooked($elem => { $elem.children('div[data-PAWidget]').ready(function() {
$elem.children('div[data-PAWidget]').append(" <div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Cargando PurpleAir Widget...</div>");
loadScript("https://www.purpleair.com/pa.widget.js?key=21R72LUN79CXRZ50&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard").then(() => {
})
})
});
Hice un intento y obtuve resultados similares. Intenté usar decorateCookedElement porque eventualmente desaprobaremos decorateCooked.
api.decorateCookedElement(
(element) => {
element.childNodes.forEach((node) => {
if (node.dataset && node.dataset.pawidget) {
node.insertAdjacentHTML(
"beforeend",
"<div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Cargando PurpleAir Widget...</div>"
);
loadScript(
`https://www.purpleair.com/pa.widget.js?key=${node.dataset.pawidget}&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard`
);
}
});
},
{ id: "widget-append", onlyStream: true, afterAdopt: true }
);
La ligera diferencia aquí es que pasé la clave con el atributo de datos:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Esto funciona bien para mí si es la primera vez que se carga el script. Si veo una publicación con el script, luego vuelvo a la lista de temas y vuelvo a ingresar al tema, no funciona (hasta que actualizo). Puedo ver que decorateCookedElement se activa cada vez que se carga la publicación relevante, pero hay algo que impide que el script funcione de nuevo.
No estoy seguro si está relacionado, pero también veo un error Uncaught TypeError: i is null en la consola de pa.widget.js:
