작성 화면 하단에 투표 버튼 추가

개발
7

실제로는 보이는 것보다 더 까다로운 문제입니다 (버튼을 이동하는 게 얼마나 어렵겠어요? :)).

이 문제를 잠시 살펴보았는데, 가장 덜 지저분한 방법은 composer 에디터의 툴바를 컨트롤러의 프로퍼티에 할당하여 아웃렛(outlet)에서 접근할 수 있도록 하는 것 같습니다.

툴바의 동작을 재현하려고 하면 @spirobel 님이 언급한 즉각적인 문제에 부딪히게 되며, 텍스트 파싱 로직이 조정될 때 다른 문제들도 발생할 가능성이 큽니다.

기본 원칙은 추상화 수준이 가장 높은 곳에서 기능을 사용하려는 것입니다. 즉, 실제 composer 에디터의 툴바가 필요합니다. 따라서 그 툴바를 가져오겠습니다.

즉,

api.modifyClass("component:d-editor", {
  @on('didInsertElement')
  makeToolbarAccessible() {
    if (this.outletArgs && this.outletArgs.editorType === 'composer') {
      const controller = getOwner(this).lookup('controller:composer');
      controller.set('editorToolbar', this.toolbar);
    }
  }
});

그런 다음 아웃렛에서 composer 컨트롤러로부터 툴바를 가져와 새 버튼을 추가합니다. 기존 투표 버튼을 사용하는 방법이 있을 수 있습니다(그것이 이상적이겠지만), 그것은 popupMenu 로직에 묶여 있어 분리하는 방법을 찾지 못했습니다.

setupComponent(attrs, ctx) {
  const controller = getOwner(this).lookup('controller:composer');
  
  controller.addObserver('editorToolbar', function() {
    if (this._state === 'destroying') return;

    const toolbar = controller.editorToolbar;
          
    toolbar.addButton({
      group: "extras",
      icon: "chart-bar",
      title: "poll.ui_builder.title",
      sendAction: e => {
        controller.send('storeToolbarState', e);
        this.send("showPollBuilder");
      }
    });
    
    const extras = toolbar.groups.find(g => g.group == 'extras');
    const pollButton = extras.buttons.find(b => b.icon == "chart-bar");
        
    ctx.set('pb', pollButton);
  });
}

그리고 템플릿 자체에서는

{{d-button
  type="button"
  action=pb.action
  actionParam=pb
  translatedTitle=pb.title
  icon=pb.icon
  class=pb.className}}

@nexo 이 테마 컴포넌트를 한번 시도해 보세요: discourse-poll-button-bottom.zip (2.5 KB)

p.s. 방금 thepavilion.io에 로드해 보았는데 작동하는 것 같습니다 (모바일 전용).