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

snapblocks を表示する Discourse 拡張機能を開発しています。ブロックに置き換えられる bbcode タグを追加できましたが、残念ながらブロックを引用すると、元の bbcode タグの代わりにブロック内のテキストがコードブロックとして表示されてしまいます。

ネタバレプラグインのソースコードを調べましたが、引用を許可するために何をしているのか理解できませんでした。

これを修正して、カスタム bbcode タグ内に元のブロックコードテキストを追加する方法はありますか?

開発中のプラグインのソースコードはこちらです。

本当に困っているのは、標準的なドキュメントが簡単に見つからず、プラグインの開発が非常に難しくなっていることです。

「いいね!」 1

DecorateCallBack関数だと思います:

関連テスト:

選択したテキストの内容を返すことでデバッグを支援するには、コアファイル内のこの行の後に console.log(_selectedText); を追加できます:

ブラウザのコンソールインターフェイスのスクリーンショット。様々なテキスト要素とナビゲーションバーが表示されている。(AIによるキャプション)

「いいね!」 3

要素のテキストの周りに [sb] を追加できるようになりましたが、それは要素のテキストのみでした。代わりに、ブロックを再現するために必要なすべてを含む元のテキストを引用したいと思います。

現在、実際の SVG を選択不可にし、SVG の下に元のソースを含む非表示の選択可能な要素のみを持つことができるかどうかを確認しています。

これは、SVG とソースの 2 つの要素を含むコンテナーを作成することによって実現しています。SVG に position: relative を設定して、フローから外れてソース テキストの上に配置できるようにし、コンテナーを SVG と同じサイズにして、SVG がテキスト内にまだあるように見せたいと考えています。また、ソース テキストは opacity: 0 で非常に小さいサイズにして、SVG からオーバーフローした場合に表示されないようにします。

これを行うより簡単な方法があるかどうか疑問に思っています。なぜなら、私が試している方法はすべての投稿を再ベイクする必要があり、これを行う必要がないと思われることに対するハッキーな解決策のように感じるからです。

編集: addTagDecorateCallback() 関数のコードを確認したところ、コールバックでテキストを返して、使用されるテキストを置き換えることができるようです。これは、私が取り組んでいたハッキーなシステムを扱う必要がなくなるため、非常に役立ちます。このシステムはひどく機能していました。

「いいね!」 1

元のテキストを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

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