플러그인: 모달에서 toolbarEvent에 액세스

개발
1

플러그인이 작성 도구 모음(composer toolbar)에 버튼을 삽입합니다. 이 도구 모음은 모달을 열며, 모달이 닫힐 때 게시글에 텍스트를 추가하려고 합니다. 마지막 단계만 제외하면 모든 것이 완벽하게 작동하는데, 모달이 작성기(composer)에 접근할 수 없기 때문입니다.

도구 모음의 메뉴 아래에 버튼을 배치하면 모든 것이 정상적으로 작동합니다:

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

하지만 최상위 레벨에 배치하면 모달에 전달할 toolbarEvent에 접근할 수 없는 것 같습니다.

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

어떤 팁이 있을까요?

2

toolbarEvent는 모달 컨트롤러(discourse-n8n-wf)에서 이미 사용 가능하므로 별도로 전달할 필요가 없습니다. 다른 모달들이 이를 어떻게 처리하는지 참고할 수도 있으며, 예를 들어 poll 플러그인의 discourse-post-event-builder.js.es6 파일을 확인해 보세요.

3

고맙습니다, Penar! 아직 완전히 해결되지는 않았는데:

discourse-calendar 플러그인에서 언급하신 파일을 찾았어요 (poll 플러그인에서는 찾을 수 없었어요). 그런데 거기서 toolbarEvent가 실제로 액션에 전달되고 있는 것 같네요 (setProperties()를 통해)?

4

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

도움 주셔서 감사합니다, Keegan.