Plugin: Zugriff auf toolbarEvent aus dem Modal

Entwickler
1

My plugin inserts a button in the composer toolbar. This toolbar opens a modal, and when the modal is closed I want to add text to the post. Everything works perfectly except the last step, because I’m struggling to give the modal access to the composer.

If I put the button under a menu in the toolbar, everything works fine:

      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"
        };
      });

But if I put it on the top level, I don’t seem to have access to the toolbarEvent to pass to the modal

      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'
        });
      });

Any tips?

2 „Gefällt mir“
2

The toolbarEvent should be available in your modal controller (discourse-n8n-wf), you don’t need to pass it. You can also look at how other modals do this, for example, see discourse-post-event-builder.js.es6 in the poll plugin.

3

Thanks, Penar! I’m not quite there yet though:

I found the file you referenced in the discourse-calendar plugin (couldn’t find it in the poll one), but there it seems like the toolbarEvent is indeed being passed in the action (through setProperties())?

4

Was just wondering whether you had any more thoughts here, @pmusaraj?

5

Hallo @sirdavidoff

Ich bin mir nicht sicher, ob du hier noch feststeckst, aber ich bin auch der Sache nachgegangen, wie man von einem Modal aus auf das Toolbar-Ereignis zugreifen kann, und ich habe herausgefunden, dass man das Ereignis als Parameter wie folgt übergeben kann:

action: (event) =>

Ich habe es also so verwendet:

  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'),
    });
  });

und dann kannst du es in deiner action: {} Methode wie folgt verwenden:

@action
showMathEditor(event) {
   showModal('matheditor-modal').set('toolbarEvent', event);
}
2 „Gefällt mir“
6

Ich möchte hinzufügen – Jahre später hatte ich dasselbe Problem (hatte keinen Zugriff auf toolbarEvent innerhalb eines Modals) und diese Lösung hat auch für mich funktioniert.

      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,
              },
            });
          },
        },
      });

Danke für die Hilfe, Keegan.

3 „Gefällt mir“