Ajout d'un bouton de sondage en bas du compositeur

Dev
7

C’est en fait plus compliqué qu’il n’y paraît (à quel point peut-il être difficile de déplacer un bouton, hein ? :))

J’ai brièvement tenté une approche et il semble que la méthode la moins désordonnée consiste à attribuer la barre d’outils de l’éditeur du compositeur à une propriété du contrôleur, que vous pourrez ensuite accéder via la prise de sortie.

Si vous essayez de recréer le comportement de la barre d’outils, vous vous heurterez immédiatement aux problèmes mentionnés par @spirobel, mais vous rencontrerez probablement d’autres problèmes plus tard, au fur et à mesure que la logique d’analyse du texte sera ajustée.

Le principe de base consiste à essayer d’utiliser la fonctionnalité au niveau le plus élevé d’abstraction, c’est-à-dire que nous avons besoin de la barre d’outils de l’éditeur du compositeur lui-même… alors récupérons-la.

Par exemple :

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

Ensuite, dans la prise de sortie, nous récupérons la barre d’outils du contrôleur du compositeur et ajoutons un nouveau bouton. Il pourrait exister un moyen d’utiliser le bouton de sondage existant (ce qui serait idéal), mais il est encapsulé dans la logique de popupMenu, et je n’ai pas trouvé de moyen de l’extraire.

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

Ensuite, dans le modèle lui-même :

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

@nexo Essayez ce composant de thème : discourse-poll-button-bottom.zip (2,5 Ko)

P.S. Je viens de le charger sur thepavilion.io et il semble fonctionner (uniquement sur mobile).