Poll-Button unten im Composer hinzufügen

Entwickler
7

Das ist tatsächlich kniffliger, als es scheint (wie schwer kann es schon sein, einen Button nach rechts zu verschieben? :slight_smile: )

Ich habe mich kurz damit beschäftigt, und der sauberste Weg scheint zu sein, die Editor-Werkzeugleiste des Compositors einer Controller-Eigenschaft zuzuweisen, auf die du im Outlet zugreifen kannst.

Wenn du versuchst, das Verhalten der Werkzeugleiste nachzubauen, stößt du sofort auf die von @spirobel genannten Probleme, wirst aber wahrscheinlich auch später weitere Schwierigkeiten bekommen, sobald die Text-Parsing-Logik angepasst wird.

Das Grundprinzip besteht darin, die Funktionalität auf der höchsten Abstraktionsebene zu nutzen. Das heißt: Wir benötigen die Werkzeugleiste des eigentlichen Compositor-Editors – also holen wir uns diese.

Zum Beispiel:

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

Anschließend holen wir uns im Outlet die Werkzeugleiste vom Compositor-Controller und fügen einen neuen Button hinzu. Es könnte einen Weg geben, den vorhandenen Umfragen-Button zu verwenden (das wäre ideal), aber er ist in die Popup-Menü-Logik eingebettet, und ich konnte keinen Weg finden, ihn herauszulösen.

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

Und dann in der Vorlage selbst:

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

@nexo Probier diese Theme-Komponente aus: discourse-poll-button-bottom.zip (2,5 KB)

P.S. Ich habe es gerade auf thepavilion.io geladen, und es scheint zu funktionieren (nur mobil).