Plugin: acceso a toolbarEvent desde modal

Desarrollador
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 Me gusta
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

Hola @sirdavidoff

No estoy seguro de si todavía estás atascado en esto, pero me he metido en el problema de intentar averiguar cómo acceder al evento de la barra de herramientas desde una ventana modal también, y descubrí que puedes pasar el evento como un parámetro de esta manera:

action: (event) =>

Así que lo usé de esta manera:

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

y luego puedes usarlo en tu método action: {} de esta manera:

@action
showMathEditor(event) {
   showModal('matheditor-modal').set('toolbarEvent', event);
}
2 Me gusta
6

Quiero añadir mi experiencia, años después, tuve el mismo problema (no tenía acceso a toolbarEvent dentro de un modal) y esta solución también me funcionó.

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

Gracias por la ayuda, Keegan.

3 Me gusta