ドラフト作成中にバックエンドAPI呼び出しでコンポーザーを埋めるプラグインの作成方法

開発
1

以下のようなプラグインを作成しようとしています。

  1. composer-fieldsの隣に「検索」という新しいボタンが表示される。
  2. ボタンをクリックすると、検索フォームが表示されるオーバーレイがポップアップ表示される。
  3. 検索フォームでユーザーは検索語（例えば都市名）を入力でき、独自の画像検索エンジン（APIキーが必要な私のURLで実行される）でその都市の画像を検索する。
  4. 上位5枚の画像が表示される。ユーザーが1枚の画像を選択すると、オーバーレイが消え、画像と検索文字列がコンポーザー内にドラフトとして追加される。ユーザーはその後、投稿の続きを書くことができる。

実際のユースケースはもう少し複雑ですが、大まかにはこのようなことを達成したいと考えています。目標は、検索エンジンに手動で行き、画像をコピーしてドラフトを作成するよりも、ユーザーが画像付きの投稿ドラフトをより便利に作成できるようにすることです。

すでに、composer-fieldをコネクタとして使用して新しいボタンを作成することには成功しています。ボタンはクリックでき、アクションをトリガーします。しかし、ここで行き詰まっています。

質問：

  1. 私の作業を楽にしてくれるプラグインはありますか？ Pavilion wizard pluginを考えていましたが、APIへの呼び出しは有料版のみで提供されていること、そして現時点ではこのプラグインにお金を費やす価値があるかどうかを判断するには時期尚早であることを知りました。
  2. オーバーレイをアクティブ化するためにターゲットにできる適切なCSSクラス/div IDは何ですか？
  3. バックエンド経由でAPI呼び出しを行う方法を理解するための良い例は何ですか？検索エンジンのAPIキーをクライアントに渡したくないので、バックエンド経由で行う必要があります。
  4. プラグインAPIが実際には何であるか、そしてそれが必要かどうかはわかりません。（ドキュメントがあちこちに散らばっていて少し苦労しています。）

その他のヒントやアドバイスも歓迎します。

2

その間、いくつか有益なリソースを見つけました。これらを「プラグインの書き方」チュートリアルで、より目立つように配置できればと思います。初心者には、それらの存在さえ明らかではありません。

  1. Discourse自身のAPI（プラグイン作成には役立ちませんが、初心者には関連性があります）：https://docs.discourse.org/
  2. クライアントプラグインAPI（プラグインのバックエンド作成には役立ちませんが、フロントエンドにとっては間違いなく作業が容易になります）：
    A versioned API for client side plugins
    discourse/app/assets/javascripts/discourse/app/lib/plugin-api.gjs at main · discourse/discourse · GitHub

バックエンドプラグインAPIは基本的にRailsまたはRubyであると理解しましたが、フロントエンドとバックエンドがどのように相互作用するのか、またはバックエンドの最初の「フック」がどこにあるのかは明確ではありません。もちろん、配置するplugin.rbはありますが、このファイルへのエントリポイントに関するドキュメントがあるかどうか疑問に思っています。Ruby on Railsプログラマーにとっては明白かもしれませんが、私はそうではないので、これは急な学習曲線です。

3

バックエンドの変更は必要ないようです。説明されている動作は、当社の「ハイパーリンクの挿入」モーダルの動作と非常によく似ています。トピックを検索し、リンクとして追加するトピックを選択すると、確認時にコンポーザーにリンクが追加されます。

プラグインのアウトレットまたはapi.onToolbarCreateをイニシャライザに追加してツールバーに追加し、「ハイパーリンクの挿入」モーダルと同様の方法でモーダルを開くことができます。ツールバーアクションからのtoolbarEvent オブジェクトを活用してコンポーザーにaddTextを追加できます（アウトレットが必要な場合は、appEvents トリガーを介してコンポーザーと対話することもできます）。

4

ありがとうございます。大変参考になります。モーダルはまさに私が探していたものです。ユーザーのフローを中断させ、ユーザーがモーダルを完了したときにのみ、元の状態に戻ります。ハイパーリンク挿入モーダルがどのように機能するか見てみます。

質問: DModal、DButton、その他のDiscourse固有のオブジェクトのドキュメントはどこで見つけられますか？

5

こちらです：

こちらも注目に値します：

例については、Discourse/plugins/theme components を参照してください。

6

ありがとうございます、旦那様！

7

フロントエンドとバックエンドがルーティングによってどのように連携されているかを説明している、こちらも非常に重要な記事です。

8

FormKitも私のユースケースにとって重要です: Discourse toolkit to render forms

9

さらにパズルピースです。

API キーは、/admin/api/keys で安全に保存できます。

10

ついに、プラグインの作成方法に関する素晴らしいチュートリアルを見つけました。