الملحق: الوصول إلى toolbarEvent من النافذة المنبثقة

مطور
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)
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

مرحباً @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,
              },
            });
          },
        },
      });

شكرًا للمساعدة يا كيغان.

3 إعجابات