Estoy desarrollando una extensión de Discourse para mostrar snapblocks. Pude agregar etiquetas bbcode que se reemplazan con los bloques, desafortunadamente si seleccionas citar los bloques, obtienes el texto del bloque en un bloque de código en lugar de la etiqueta bbcode original.
He intentado revisar el código fuente del plugin spoiler, pero no puedo entender qué está haciendo para permitir citar spoilers.
¿Hay alguna forma de solucionar esto y agregar el texto del código de bloque original dentro de las etiquetas bbcode personalizadas?
Aquí está el código fuente de mi plugin que estoy desarrollando.
Algo que realmente me molesta es que no hay documentación estándar que sea fácil de consultar, lo que ha hecho que el desarrollo de mi plugin sea mucho más difícil.
Para ayudar a depurar devolviendo el contenido del texto al seleccionarlo, puedes usar console.log(_selectedText); después de esta línea en un archivo principal:
Lo probé y, de hecho, me permitió agregar [sb] alrededor del texto, desafortunadamente solo era el texto del elemento. Me gustaría que citara el texto original en su lugar, ya que contiene todo para recrear el bloque.
Actualmente estoy tratando de ver si puedo hacer que el SVG real no sea seleccionable, y solo tener un elemento seleccionable oculto con el código fuente original debajo del SVG.
Lo estoy logrando creando un contenedor que contiene 2 elementos, el SVG y el código fuente. Estoy tratando de que el SVG tenga position: relative para que pueda estar fuera del flujo y encima del texto fuente, además de que el contenedor tenga el mismo tamaño que el SVG para que parezca que el SVG todavía está dentro del texto. Además, el texto fuente tendría opacity: 0 y un tamaño muy pequeño para que sea invisible en caso de que se desborde del SVG.
Me pregunto si hay una forma más fácil de hacer esto, porque la forma en que estoy tratando de hacerlo requeriría volver a procesar todas las publicaciones, y también se siente como una solución improvisada para algo que creo que no debería requerir hacerlo.
Editar: después de mirar el código de la función addTagDecorateCallback(), parece que puedo devolver texto en la devolución de llamada para reemplazar cualquier texto que hubiera usado. Eso en realidad ayudará mucho más, ya que espero no tener que lidiar con mi sistema improvisado en el que estaba trabajando y que funciona terriblemente.
Pude hacer que funcionara manteniendo el texto de origen en un atributo de HTML y, luego, en la función de devolución de llamada addTagDecorateCallback(), simplemente lo devuelvo para obtener el texto original.
Aquí hay un poco de código para cualquiera que quiera saber lo que hice.
En assets/javascripts/lib/discourse-markdown/snapblocks-discourse.js, donde inicializa las etiquetas bbcode, hice que almacene el texto original dentro de un atributo snapblocks-source para poder recuperarlo más tarde.
En el archivo assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js, agrego el código para manejar las citas.
// assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js
import {
addBlockDecorateCallback, // etiquetas bbcode de bloque
addTagDecorateCallback, // etiquetas bbcode en línea
} from "discourse/lib/to-markdown";
function initializeSnapblocks(api, siteSettings) {
addTagDecorateCallback(function () {
// this.element no es un elemento HTML
// pero incluye todos los atributos HTML
const { attributes } = this.element;
// Normalmente comprobarías si la "clase" es tu clase
// pero todo lo que necesito aquí es "snapblocks-source"
if (attributes["snapblocks-source"]) {
let prefix = "[sb";
// Añadiendo atributos a la etiqueta bbcode (que también se almacenan
// en el elemento como atributos).
const attrs = [
"blockstyle",
"wrap",
"wrapsize",
"zebra",
"showspaces",
"santa",
];
for (const attr of attrs) {
if (attributes[attr]) {
prefix += ` ${attr}=${attributes[attr]}`;
}
}
prefix += "]";
this.prefix = prefix;
this.suffix = "[/sb]";
// si devuelves texto, este se usará en lugar del texto seleccionado
return attributes["snapblocks-source"];
}
});
}
Esto es lo mismo para las etiquetas bbcode de bloque, solo tienes que usar addBlockDecorateCallback() en su lugar.
Ahora, desafortunadamente, tendré que volver a hornear las publicaciones si quiero que los fragmentos antiguos de snapblocks sean citables. Esto tampoco maneja si seleccionas el texto en el svg, solo funciona si seleccionas algún texto antes y/o después, así como al menos parte del texto del svg.
