Plugin : accès à toolbarEvent depuis modal

Dev
1

Mon plugin insère un bouton dans la barre d’outils de l’éditeur. Cette barre d’outils ouvre une fenêtre modale, et lorsque celle-ci est fermée, je souhaite ajouter du texte au message. Tout fonctionne parfaitement sauf la dernière étape, car j’ai du mal à donner accès à la fenêtre modale pour qu’elle puisse interagir avec l’éditeur.

Si je place le bouton sous un menu dans la barre d’outils, tout fonctionne bien :

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

Mais si je le place au niveau supérieur, il semble que je n’aie pas accès à l’événement toolbarEvent à transmettre à la fenêtre modale :

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

Des conseils ?

2 « J'aime »
2

L’événement toolbarEvent devrait être disponible dans votre contrôleur de modal (discourse-n8n-wf), vous n’avez donc pas besoin de le transmettre. Vous pouvez également consulter la façon dont d’autres modales gèrent cela, par exemple, en examinant discourse-post-event-builder.js.es6 dans le plugin poll.

3

Merci, Penar ! Je ne suis pas encore tout à fait là cependant :

J’ai trouvé le fichier que vous avez référencé dans le plugin discourse-calendar (je ne l’ai pas trouvé dans celui des sondages), mais il semble que toolbarEvent soit bien transmis dans l’action (via setProperties())?

4

Je me demandais simplement si vous aviez d’autres réflexions à ce sujet, @pmusaraj ?

5

Salut @sirdavidoff

Je ne suis pas sûr si vous êtes toujours bloqué sur ce point, mais j’ai exploré en profondeur comment accéder à l’événement de la barre d’outils depuis une modale, et j’ai découvert que vous pouvez passer l’événement comme paramètre comme ceci :

action: (event) =>

Je l’ai donc utilisé comme ceci :

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

et ensuite vous pouvez l’utiliser dans votre méthode action: {} comme ceci :

@action
showMathEditor(event) {
   showModal('matheditor-modal').set('toolbarEvent', event);
}
2 « J'aime »
6

Je veux ajouter mon grain de sel – des années plus tard, j’ai eu le même problème (je n’avais pas accès à toolbarEvent à l’intérieur d’une modale), et cette solution a également fonctionné pour moi.

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

Merci pour votre aide, Keegan.

3 « J'aime »