Fügen Sie benutzerdefinierte Markdown-Zitat-BBCode-Tags hinzu

Entwickler
1

Ich entwickle eine Discourse-Erweiterung, um snapblocks anzuzeigen. Ich konnte BBCode-Tags hinzufügen, die durch die Blöcke ersetzt werden. Wenn Sie jedoch die Blöcke zitieren, erhalten Sie den Text im Block in einem Codeblock anstelle des ursprünglichen BBCode-Tags.

Ich habe versucht, den Quellcode des Spoiler-Plugins zu durchsuchen, aber ich kann nicht herausfinden, wie es das Zitieren von Spoilern ermöglicht.

Gibt es eine Möglichkeit, dies zu beheben und den ursprünglichen Blockcode-Text innerhalb der benutzerdefinierten BBCode-Tags hinzuzufügen?

Hier ist der Quellcode meines Plugins, das ich entwickle.

Etwas, das mich wirklich ärgert, ist, dass es keine standardisierte Dokumentation gibt, die leicht zu durchsuchen ist, was die Entwicklung meines Plugins erheblich erschwert hat.

1 „Gefällt mir“
2

Ich glaube, es sind die DecorateCallBack-Funktionen:

Zugehöriger Test:

Um beim Debuggen zu helfen, indem der Inhalt des Textes bei Auswahl zurückgegeben wird, können Sie console.log(_selectedText); nach dieser Zeile in einer Kerndatei einfügen:

Ein Screenshot einer Browser-Konsolenoberfläche mit verschiedenen Textelementen und einer Navigationsleiste. (Beschriftet von KI)

3 „Gefällt mir“
3

Ich habe das getestet und es hat mir tatsächlich erlaubt, [sb] um den Text zu setzen, leider war es nur der Text, der sich im Element befindet. Ich möchte stattdessen, dass der ursprüngliche Text zitiert wird, da dieser alles enthält, um den Block neu zu erstellen.

Ich versuche derzeit herauszufinden, ob ich das eigentliche SVG nicht auswählbar machen kann und nur ein verstecktes, auswählbares Element mit dem ursprünglichen Quelltext unter dem SVG habe.

Ich erreiche dies, indem ich einen Container erstelle, der 2 Elemente enthält: das SVG und die Quelle. Ich versuche, dem SVG position: relative zu geben, damit es aus dem Fluss genommen werden kann und über dem Quelltext liegt, und gleichzeitig den Container so groß wie das SVG zu machen, damit es so aussieht, als wäre das SVG immer noch im Text enthalten. Außerdem hätte der Quelltext opacity: 0 und eine sehr kleine Größe, damit er unsichtbar ist, falls er das SVG überlappt.

Ich frage mich, ob es einen einfacheren Weg gibt, dies zu tun, da der Weg, den ich versuche, das erneute Einbetten aller Beiträge erfordern würde und es sich auch wie eine umständliche Lösung für etwas anfühlt, das keine solche Lösung erfordern sollte.

Bearbeitung: Nachdem ich mir den Code für die Funktion addTagDecorateCallback() angesehen habe, scheint es, dass ich im Callback Text zurückgeben kann, um den Text zu ersetzen, den er verwendet hätte. Das wird tatsächlich viel mehr helfen, da ich mich hoffentlich nicht mehr mit meinem umständlichen System auseinandersetzen muss, an dem ich gearbeitet habe und das furchtbar funktioniert.

1 „Gefällt mir“
4

Ich konnte es zum Laufen bringen, indem ich den Quelltext in einem Attribut auf dem HTML belassen habe und dann in der Callback-Funktion addTagDecorateCallback() einfach diesen zurückgegeben habe, um den Originaltext zu erhalten.

Hier ist ein kleiner Code für alle, die wissen möchten, was ich getan habe.

In assets/javascripts/lib/discourse-markdown/snapblocks-discourse.js, wo die bbcode-Tags initialisiert werden, habe ich den Originaltext in einem Attribut namens snapblocks-source gespeichert, damit ich ihn später abrufen kann.

In der Datei assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js füge ich den Code zum Behandeln des Zitierens hinzu.

// 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 ist kein HTML-Element
    // aber es enthält alle HTML-Attribute
    const { attributes } = this.element;

    // Normalerweise würden Sie prüfen, ob die "class" Ihre Klasse ist
    // aber alles, was ich hier brauche, ist "snapblocks-source"
    if (attributes["snapblocks-source"]) {
      let prefix = "[sb";

      // Hinzufügen von Attributen zum bbcode-Tag (die auch
      // auf dem Element als Attribute gespeichert sind).
      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]";
      // wenn Sie Text zurückgeben, wird dieser anstelle des ausgewählten Textes verwendet
      return attributes["snapblocks-source"];
    }
  });
}

Das Gleiche gilt für die Block-bbcode-Tags, Sie müssen nur addBlockDecorateCallback() verwenden.

Leider muss ich Beiträge neu backen, wenn ich möchte, dass alte Snapblocks-Snippets zitierfähig sind. Dies behandelt auch nicht den Fall, wenn Sie den Text auf dem SVG auswählen. Es funktioniert nur, wenn Sie Text davor und/oder danach sowie mindestens einen Teil des SVG-Textes auswählen.

3 „Gefällt mir“
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.