Sto sviluppando un’estensione Discourse per visualizzare snapblocks. Sono riuscito ad aggiungere tag bbcode che vengono sostituiti con i blocchi, sfortunatamente se si sceglie di citare i blocchi, si ottiene il testo nel blocco in un blocco di codice invece del tag bbcode originale.
Ho provato a cercare nel codice sorgente del plugin spoiler, ma non riesco a capire cosa sta facendo per consentire la citazione degli spoiler.
C’è un modo per risolvere questo problema e aggiungere il testo del codice del blocco originale all’interno dei tag bbcode personalizzati?
Ecco il codice sorgente del mio plugin che sto sviluppando.
Qualcosa che mi infastidisce davvero è che non esiste una documentazione standard facile da consultare, il che ha reso lo sviluppo del mio plugin molto più difficile.
Ho testato che, in effetti, mi ha permesso di aggiungere [sb] attorno al testo, sfortunatamente era solo il testo presente nell’elemento. Vorrei invece che citasse il testo originale, poiché quello contiene tutto il necessario per ricreare il blocco.
Sto attualmente cercando di vedere se riesco a fare in modo che l’svg effettivo non sia selezionabile, e che ci sia solo un elemento selezionabile nascosto con il sorgente originale sotto l’svg.
Ci sto riuscendo creando un contenitore che contiene 2 elementi, l’svg e il sorgente. Sto cercando di fare in modo che l’svg abbia position: relative in modo che possa uscire dal flusso e stare sopra il testo sorgente, oltre a fare in modo che il contenitore abbia le stesse dimensioni dell’svg per far sembrare che l’svg sia ancora all’interno del testo. Inoltre, il testo sorgente avrebbe opacity: 0 e una dimensione molto piccola in modo che sia invisibile nel caso in cui possa fuoriuscire dall’svg.
Mi chiedo se ci sia un modo più semplice per farlo, perché il modo in cui sto cercando di farlo richiederebbe la rielaborazione di tutti i post, e sembra anche una soluzione “hacky” per qualcosa che ritengo non dovrebbe richiedere di fare questo.
Modifica: dopo aver esaminato il codice della funzione addTagDecorateCallback(), sembra che io possa restituire del testo nel callback per sostituire qualsiasi testo che avrebbe utilizzato. Questo in realtà mi aiuterà molto di più, poiché spero di non dover affrontare il mio sistema “hacky” su cui stavo lavorando che funziona terribilmente.
Sono riuscito a farlo funzionare mantenendo il testo sorgente in un attributo sull’html, e poi nella funzione di callback addTagDecorateCallback(), lo restituisco semplicemente per ottenere il testo originale.
Ecco un po’ di codice per chiunque voglia sapere cosa ho fatto.
In assets/javascripts/lib/discourse-markdown/snapblocks-discourse.js, dove inizializza i tag bbcode, ho fatto in modo che memorizzasse il testo originale all’interno di un attributo snapblocks-source in modo da poterlo recuperare in seguito.
Nel file assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js, aggiungo il codice per gestire le citazioni.
// assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js
import {
addBlockDecorateCallback, // block bbcode tags
addTagDecorateCallback, // inline bbcode tags
} from "discourse/lib/to-markdown";
function initializeSnapblocks(api, siteSettings) {
addTagDecorateCallback(function () {
// this.element non è un elemento HTML
// ma include tutti gli attributi HTML
const { attributes } = this.element;
// Normalmente controlleresti se la "classe" è la tua classe
// ma tutto ciò di cui ho bisogno qui è "snapblocks-source"
if (attributes["snapblocks-source"]) {
let prefix = "[sb";
// Aggiunta di attributi al tag bbcode (che sono anche memorizzati
// sull'elemento come attributi).
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]";
// se restituisci del testo, questo verrà utilizzato al posto del testo selezionato
return attributes["snapblocks-source"];
}
});
}
Questo è lo stesso per i tag bbcode di blocco, devi solo usare addBlockDecorateCallback() invece.
Ora, sfortunatamente, dovrò rifare il baking dei post se voglio che i vecchi snippet di snapblocks siano citabili. Questo non gestisce nemmeno se selezioni il testo sull’svg, funziona solo se selezioni del testo prima e/o dopo, oltre ad almeno una parte del testo svg.
