Je développe une extension Discourse pour afficher des snapblocks. J’ai réussi à ajouter des balises bbcode qui sont remplacées par les blocs. Malheureusement, si vous choisissez de citer les blocs, vous obtenez le texte du bloc dans un bloc de code au lieu de la balise bbcode d’origine.
J’ai essayé de parcourir le code source du plugin spoiler, mais je n’arrive pas à comprendre ce qu’il fait pour permettre la citation des spoilers.
Existe-t-il un moyen de corriger cela et d’ajouter le texte du code de bloc d’origine à l’intérieur des balises bbcode personnalisées ?
Voici le code source de mon plugin en cours de développement.
Quelque chose qui m’agace vraiment, c’est qu’il n’y a pas de documentation standard facile à parcourir, ce qui a rendu le développement de mon plugin beaucoup plus difficile.
Je pense que ce sont les fonctions DecorateCallBack :
Test associé :
Pour aider au débogage en renvoyant le contenu du texte lors de la sélection, vous pouvez console.log(_selectedText); après cette ligne dans un fichier principal :
J’ai testé cela, et cela m’a effectivement permis d’ajouter [sb] autour du texte, malheureusement ce n’était que le texte de l’élément. Je voudrais plutôt qu’il cite le texte original, car celui-ci contient tout pour recréer le bloc.
J’essaie actuellement de voir si je peux rendre le svg réel non sélectionnable, et avoir seulement un élément sélectionnable caché avec la source originale sous le svg.
J’y parviens en créant un conteneur qui contient 2 éléments, le svg et la source. J’essaie de faire en sorte que le svg ait position: relative afin qu’il sorte du flux et se superpose au texte source, tout en faisant en sorte que le conteneur ait la même taille que le svg pour donner l’impression que le svg est toujours à l’intérieur du texte. De plus, le texte source aurait opacity: 0 et une très petite taille afin qu’il soit invisible au cas où il déborderait du svg.
Je me demande s’il existe un moyen plus simple de faire cela, car la façon dont j’essaie de le faire nécessiterait de refondre tous les posts, et cela ressemble aussi à une solution de contournement pour quelque chose qui, je pense, ne devrait pas nécessiter de le faire.
Edit : après avoir examiné le code de la fonction addTagDecorateCallback(), il semble que je puisse retourner du texte dans le callback pour remplacer le texte qu’il aurait utilisé. Cela va en fait beaucoup plus m’aider, car j’espère que je n’aurai pas à gérer mon système de contournement sur lequel je travaillais et qui fonctionne terriblement.
J’ai réussi à le faire fonctionner en conservant le texte source dans un attribut sur le HTML, puis dans la fonction de rappel addTagDecorateCallback(), je le retourne simplement pour obtenir le texte original.
Voici un peu de code pour ceux qui veulent savoir ce que j’ai fait.
Dans assets/javascripts/lib/discourse-markdown/snapblocks-discourse.js, là où il initialise les balises bbcode, j’ai fait en sorte qu’il stocke le texte original dans un attribut snapblocks-source afin que je puisse le récupérer plus tard.
Dans le fichier assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js, j’ajoute le code pour gérer la citation.
// assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js
import {
addBlockDecorateCallback, // balises bbcode de bloc
addTagDecorateCallback, // balises bbcode en ligne
} from "discourse/lib/to-markdown";
function initializeSnapblocks(api, siteSettings) {
addTagDecorateCallback(function () {
// this.element n'est pas un élément HTML
// mais il inclut tous les attributs HTML
const { attributes } = this.element;
// Normalement, vous vérifieriez si la "classe" est votre classe
// mais tout ce dont j'ai besoin ici est "snapblocks-source"
if (attributes["snapblocks-source"]) {
let prefix = "[sb";
// Ajout d'attributs à la balise bbcode (qui sont également stockés
// sur l'élément sous forme d'attributs).
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 vous retournez du texte, il sera utilisé à la place du texte sélectionné
return attributes["snapblocks-source"];
}
});
}
C’est la même chose pour les balises bbcode de bloc, il suffit d’utiliser addBlockDecorateCallback() à la place.
Malheureusement, je devrai réanalyser les messages si je veux que les anciens extraits snapblocks soient citables. Cela ne gère pas non plus le cas où vous sélectionnez le texte sur le SVG, cela ne fonctionne que si vous sélectionnez du texte avant et/ou après, ainsi qu’au moins une partie du texte SVG.
