Adicionar um botão de enquete na parte inferior do compositor

Dev
7

Isso é na verdade mais complicado do que parece (quão difícil pode ser mover um botão para a direita, certo? :))

Eu fiz uma breve tentativa com isso e parece que a maneira menos confusa é atribuir a barra de ferramentas do editor do compositor a uma propriedade do controlador que você pode acessar posteriormente na saída (outlet).

Se você tentar recriar o comportamento da barra de ferramentas, encontrará os problemas imediatos mencionados por @spirobel, mas provavelmente encontrará outros problemas no futuro à medida que a lógica de análise de texto for ajustada.

O princípio básico é tentar usar a funcionalidade no nível mais alto de abstração, ou seja, precisamos da barra de ferramentas do próprio editor do compositor… então vamos obtê-la.

Ou seja:

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

Em seguida, na saída, obtemos a barra de ferramentas do controlador do compositor e adicionamos um novo botão a ela. Pode haver uma maneira de usar o botão de enquete existente (isso seria ideal), mas ele está encapsulado na lógica do popupMenu, e não consegui ver uma maneira de extraí-lo.

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

Então, no próprio template:

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

@nexo Dê uma chance a este componente de tema: discourse-poll-button-bottom.zip (2,5 KB)

P.S.: Acabei de carregá-lo no thepavilion.io e parece estar funcionando (apenas em dispositivos móveis).