カスタムマークダウン引用bbcodeタグを追加

開発
4

元のテキストをHTMLの属性として保持し、addTagDecorateCallback() コールバック関数でそれを返すことで元のテキストを取得できるようにすることで、動作させることができました。

以下に、私が何をしたかを知りたい人のために、コードを少し示します。

assets/javascripts/lib/discourse-markdown/snapblocks-discourse.js でbbcodeタグを初期化する際に、元のテキストを snapblocks-source 属性に保存するようにしたので、後で取得できます。

assets\\javascripts\\discourse\\initializers\\snapblocks-discourse.js ファイルで、引用を処理するコードを追加します。

// 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 はHTML要素ではありません
    // しかし、すべてのHTML属性が含まれています
    const { attributes } = this.element;

    // 通常は "class" があなたのクラスかどうかを確認します
    // しかし、ここで必要なのは "snapblocks-source" だけです
    if (attributes["snapblocks-source"]) {
      let prefix = "[sb";

      // bbcodeタグに属性を追加します（これらも要素に属性として保存されています）。
      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]";
      // テキストを返すと、選択されたテキストの代わりにこれが使用されます
      return attributes["snapblocks-source"];
    }
  });
}

ブロックbbcodeタグについても同様ですが、addBlockDecorateCallback() を使用する必要があります。

残念ながら、古いsnapblocksスニペットを引用可能にするには、投稿を再ベイクする必要があります。また、SVG上のテキストを選択した場合の処理はされておらず、選択したテキストの前後に少なくとも一部のSVGテキストが含まれている場合にのみ機能します。

「いいね！」 3