api.addPostMenuButton の条件付き追加

開発
1

まず、私の拙い英語をお詫びします。
「もっと見る…」ボタンを追加したいのです。
下の画像にある投稿は10行のテキストで構成されていますが、5行しか表示されていません。

ユーザーはShowMoreをクリックすることで全文を見ることができます。

image
image780×200 2.85 KB

このボタンは、各投稿の調理済み部分の高さ、または行数に応じて、ボタンを付与するかしないかの分岐を与えるべきです。

image
image789×159 2.13 KB

api.addPostMenuButtonを使用して分岐する方法がわからないため、現在では次のような1行しかない小さな投稿にもこのボタンが付与されています。

これは私にとってあまり望ましいことではありません。

条件分岐でCOOKEDの高さや行数（または文字数）を取得できる必要があると考えています。
ドキュメントを見ましたが、api.addPostMenuButtonのオプションが見つかりませんでした。
どなたか助けていただけると幸いです。

「いいね！」 1
2

api.addPostMenuButton メソッドは、返された値のみを考慮します。その値はオブジェクトである必要があります。return の前に行うことはすべて無関係です。ボタンは各投稿に対してレンダリングされ、メソッドは作業に使用できる post オブジェクトを提供します。

たとえば、ボタンを 300 語を超える投稿にのみ表示したいとします。その場合、次のようなことができます。

common > header

<script type="text/discourse-plugin" version="0.8">
  const MIN_WORD_COUNT = 300;

  api.addPostMenuButton("myButton", (post) => {
    // 投稿のプロパティをログに記録して、何が利用可能かを確認できます
    // console.log(post);

    // 例
    const roughWordCount = post.cooked.match(/\S+/g).length;

    if (roughWordCount < MIN_WORD_COUNT) {
      // ボタンはレンダリングされません
      return;
    }

    // ボタンはレンダリングされます。戻り値のオブジェクトを作成します
    const result = {
      action: SOME_ACTION,
      icon: ICON_NAME,
      title: TITLE_TRANSLATION_KEY,
      className: CLASSNAMES,
      position: "first", // `first`、`last`、または `second-last-hidden` にできます
    };

    // デスクトップの場合、ラベルを追加します
    if (!post.mobileView) {
      result.label = LABLE_TRANSLATION_KEY;
    }

    // オブジェクトを返します
    return result;
  });
</script>

大文字の部分を実際のデータに変更し、300 語を超える投稿で試してみてください。そこでレンダリングされることがわかります。