ダイアログモーダルのHTMLサポート

[Don]

こんにちは。

カテゴリページで、ユーザーがトピックを作成できない場合に、信頼レベルに関するトピックへのリンク付きバナーテキストを使用しています。

バナーではHTMLは正常に機能します。

しかし、+ New Topic をクリックすると、モーダルはHTMLを処理しません。

以前使用していたbootboxモーダルのように、モーダルでもHTMLを処理できるようになると非常に良いのですが。

ありがとうございます

[TimJensen]

@pmusaraj は、こちらでHTMLコンテンツをサポートするソリューションを提供しました。

[Don]

こんにちは、ティムさん

ヒントをありがとうございます modifyClass でこれを変更しましたが、カテゴリバナーも HTML を処理するため、このダイアログをコアで htmlSafe にすることは妥当な変更だと思います。

import { htmlSafe } from "@ember/template";

export default {
  name: "dialog-html-support",

  initialize() {
    withPluginApi("0.8.7", (api) => {
      api.modifyClass("component:d-navigation", {
        pluginId: "dialog-html-support",

        actions: {
          clickCreateTopicButton() {
            if (this.categoryReadOnlyBanner && !this.hasDraft) {
              this.dialog.alert({
                message: htmlSafe(this.categoryReadOnlyBanner),
              });
            } else {
              this.createTopic();
            }
          },
        },
      });
    });
  },
};

[Heliosurge (Dan DeMontmorency)]

こんにちは、チームの皆さん！

以下の設定について、リンクを使用できるオプションをリクエストしたいと思います。私の場合は、カテゴリは誰でも表示できます。ただし、トピックの作成と返信を行うには、グループに所属する必要があります。

「このカテゴリでユーザーがトピックを作成できない場合のバナーテキスト：」

そのため、次のようなテキストを試しました。

参加するには「グループへのリンクを申請」する必要があります。

残念ながら、この設定はプレーンテキストのみをサポートしており、リンクはサポートされていません。チームで変更を検討していただけますでしょうか？

[JammyDodger]

この変更に関するリクエストをまとめておくために、あなたの投稿をこのトピックに移動しました。

[Heliosurge (Dan DeMontmorency)]

Jammydodgerさん、ありがとうございます！

どこに投稿するのが最適か気づくのが難しいことがあります。Discourseは巨大ですが、それは必ずしも悪いことではありません。しかし、まだ比較的慣れていない私たちにとっては、時に威圧的に感じられることがあります。

しかし、そこにこそ、あなたの素晴らしいチームとコミュニティが、私たち全員を支援する上で、しばしば重要な役割を果たしてくれています！

[Heliosurge (Dan DeMontmorency)]

こんにちは、Don & @TimJensen このソリューションは、以下の私の例のようなマークダウンも修正しますか？

カテゴリに参加するには、[Apply](/g/groupname/members)する必要があります。

コードもテーマコンポーネントを作成する必要があると思います。どのセクションに入力する必要がありますか？

---

編集:
うーん..現時点ではjsファイルを追加するのは私の現在のスキルレベルを超えているかもしれません。 これを成功させるには、もう少し手取り足取りの指導が必要になります。

[Don]

こんにちは、ダン。

バナーはHTMLに対応しています。このトピックは、「トピックを作成」ボタンをクリックしたときに表示されるダイアログに関するものです。

@Heliosurge

このソリューションはMarkdownも修正しますか？

いいえ、HTMLに対応しています。あなたの例は以下のようになります：↓

カテゴリに参加するには、<a href="/g/groupname/members">申し込む</a>必要があります。

---

これはダイアログでHTMLをサポートするためにHeaderで機能するはずです。

<script type="text/discourse-plugin" version="0.8">
  const { htmlSafe } = require("@ember/template");

  api.modifyClass("component:d-navigation", {
    pluginId: "dialog-html-support",
        
    actions: {
      clickCreateTopicButton() {
        if (this.categoryReadOnlyBanner && !this.hasDraft) {
          this.dialog.alert({
            message: htmlSafe(this.categoryReadOnlyBanner),
          });
        } else {
          this.createTopic();
        }
      },
    },
  });
</script>

[Heliosurge (Dan DeMontmorency)]

クール、つまりマークダウンの代わりにHTMLを使えばいいんですね。

カテゴリ内で返信したり、新しいトピックを作成しようとした場合でも、バナーは機能しますか？私の理解が正しければ、あなたのリクエストは、例えば新しいトピックボタンのテーマコンポーネントに関連するものですか？

あなたのJavaScriptを使えば、新しいテーマコンポーネントを作成して*.jsファイルをアップロードするだけでいいのでしょうか？CSSなどの部分で他に何か必要ですか？それとも、ただ機能するだけですか？

リンクボタンの前にダイアログを表示したい場合は、コード的には何が必要になりますか？まだ学習中なので、申し訳ありません。

[Don]

@Heliosurge

JavaScriptで新しいテーマコンポーネントを作成し、*.jsファイルをアップロードするだけでよろしいでしょうか？CSSなどの部分で他に何か必要ですか？それとも、そのまま機能しますか？

管理画面で新しいコンポーネントを作成し、上記のコードを「Common > Header」セクションに貼り付けるだけです。これにより、新しいトピックボタンをクリックしたときにモーダルでHTMLを処理できるようになります。

デモ

コードなし
ご覧のとおり、バナーはHTMLをサポートしていますが、新しいトピックボタンをクリックすると、モーダル（ダイアログ）はそれをサポートしません。

---

コードあり

---

が何を意味するのか分かりません。

@Heliosurge

リンクボタンの前にダイアログを表示したい場合、コード的には何をすればよいでしょうか。

[Heliosurge (Dan DeMontmorency)]

コードをHTMLの修正に追加する場所を説明していただきありがとうございます。

@Don

が何を意味するのか分かりません。

@Heliosurge

リンクボタンの前にダイアログを表示したい場合、コード的には何が必要になりますか？

実際、最初の動画で私の質問が完璧に解決し、明確になりました。リンクボタンの前のダイアログテキストは、Markdownの手順と同じです。（最初の動画では、コードが配置されていない場合に失敗する様子が示されています）コード例でも見落としていました

つまり

「Markdown」で参加する
「HTML」で参加する

ご親切に教えていただき、本当にありがとうございました。

Dan

[pmusaraj (Penar Musaraj)]

お待たせしました。これで修正されるはずです: FIX: Allow HTML in category read-only dialog by pmusaraj · Pull Request #20349 · discourse/discourse · GitHub