Plugin: acesso ao toolbarEvent a partir do modal

Dev
1

Meu plugin insere um botão na barra de ferramentas do editor. Essa barra abre um modal e, quando o modal é fechado, quero adicionar texto à postagem. Tudo funciona perfeitamente, exceto a última etapa, pois estou com dificuldade para dar ao modal acesso ao editor.

Se eu colocar o botão sob um menu na barra de ferramentas, tudo funciona bem:

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

Mas se eu colocá-lo no nível superior, parece que não tenho acesso ao toolbarEvent para passar ao 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'
        });
      });

Alguma dica?

2 curtidas
2

O toolbarEvent deve estar disponível no seu controlador de modal (discourse-n8n-wf), então você não precisa passá-lo. Você também pode ver como outros modais fazem isso; por exemplo, consulte discourse-post-event-builder.js.es6 no plugin poll.

3

Obrigado, Penar! Ainda não cheguei lá completamente, no entanto:

Encontrei o arquivo que você mencionou no plugin discourse-calendar (não consegui encontrá-lo no plugin de enquetes), mas lá parece que o toolbarEvent está realmente sendo passado na ação (através do setProperties())?

4

Só estava pensando se você tinha mais alguma opinião sobre isso, @pmusaraj?

5

Olá @sirdavidoff

Não tenho certeza se você ainda está preso nisso, mas eu também mergulhei fundo tentando descobrir como acessar o evento da barra de ferramentas de um modal, e descobri que você pode passar o evento como um parâmetro assim:

action: (event) =>

Então eu o usei assim:

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

e então você pode usá-lo em seu método action: {} assim:

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

Quero acrescentar – anos depois, tive o mesmo problema (não tinha acesso a toolbarEvent dentro de um modal), e esta solução também funcionou para mim.

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

Obrigado pela ajuda, Keegan.

3 curtidas