プラグイン：モーダルから toolbarEvent へのアクセス

開発
1

プラグインがコンポーザーのツールバーにボタンを挿入します。このツールバーを開くとモーダルが表示され、モーダルを閉じたときに投稿にテキストを追加したいと考えています。すべての手順が完璧に機能しているのですが、最後のステップでつまずいています。それは、モーダルにコンポーザーへのアクセス権を渡す方法がわからないからです。

もしボタンをツールバーのメニューの下に配置すれば、すべて正常に動作します：

      api.modifyClass("controller:composer", {
        pluginId: "discourse-n8n-wf",
        actions: {
          showWfModal2() {
            showModal("discourse-n8n-wf").setProperties({"toolbarEvent": this.toolbarEvent});
          },
        },
      });
      api.addToolbarPopupMenuOptionsCallback(() => {
        return {
          action: "showWfModal2",
          icon: "network-wired",
          label: "n8n workflow"
        };
      });

しかし、トップレベルに配置すると、モーダルに渡すための toolbarEvent にアクセスできないようです

      Composer.reopen({
        actions: {
          showWfModal: function () {
            console.log(this.toolbarEvent); // undefined
            showModal('discourse-n8n-wf', {title:'Insert n8n workflow'});
          }
        }
      });

      api.onToolbarCreate(toolbar => {
        toolbar.addButton({
          id: 'discourse-n8n-wf',
          group: 'extras',
          icon: 'network-wired',
          action: 'showWfModal',
          title: 'Insert workflow'
        });
      });

何かアドバイスはありますか？

「いいね！」 2
2

toolbarEvent は、あなたのモーダルコントローラー（discourse-n8n-wf）で利用可能ですので、渡す必要はありません。他のモーダルがどのように実装しているかも確認できます。例えば、poll プラグイン内の discourse-post-event-builder.js.es6 を参照してください。

3

ありがとう、Penar！でも、まだ完全に理解できていないんです。

poll プラグインでは見つからなかったのですが、discourse-calendar プラグインであなたが参照していたファイルを見つけました。しかし、そこでは setProperties() を通じて toolbarEvent が確かにアクションに渡されているように見えるのですが？

4

@pmusaraj さん、これについて何か追加のご意見はありますか？とただ気になったのでお伺いしました。

5

@sirdavidoff さん、こんにちは。

まだこの問題で詰まっているか分かりませんが、私も同様にモーダルからツールバーイベントにアクセスする方法を調べていたところ、イベントをパラメータとして次のように渡せることを見つけました。

action: (event) =>

私はこのように使用しました。

  const composerController = api.container.lookup('controller:composer');

  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: 'math-editor',
      group: 'extras',
      icon: 'square-root-alt',
      sendAction: (event) => composerController.send('showMathEditor', event),
      title: themePrefix('insert_equation'),
    });
  });

そして、次のように action: {} メソッドで使用できます。

@action
showMathEditor(event) {
   showModal('matheditor-modal').set('toolbarEvent', event);
}
「いいね！」 2
6

数年後、私も同じ問題（モーダル内でtoolbarEventにアクセスできなかった）に遭遇しましたが、この解決策は私にも有効でした。

      api.onToolbarCreate((toolbar) => {
        toolbar.addButton({
          ...
          sendAction: (event) =>
            toolbar.context.send("triggerMyModal", event),
          ...
        });
      });

      api.modifyClass("component:d-editor", {
        modal: service(),
        pluginId: "poll",
        actions: {
          triggerMyModal(toolbarEvent) {
            this.modal.show(MyCustomModal, {
              model: {
                toolbarEvent,
              },
            });
          },
        },
      });

Keeganさん、助けてくれてありがとう。

「いいね！」 3