作曲エリア下部に投票ボタンを追加

開発
7

これは実際には見た目以上に難しいです（ボタンを右に移動させるだけなのに、どれくらい大変だろう？ :)）

私は少し試してみましたが、最も整理された方法は、コンポーザーエディターのツールバーをコントローラーのプロパティに割り当て、それをOutletからアクセスできるようにすることのようです。

ツールバーの動作を再現しようとすると、@spirobel が指摘した即座の問題に直面しますが、テキスト解析ロジックが調整されるにつれて、将来的に他の問題にも直面する可能性が高いでしょう。

基本的な原則は、抽象化の最も高いレベルで機能を使おうとすることです。つまり、実際のコンポーザーエディターのツールバーが必要なので、それを取り出しましょう。

具体的には：

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

その後、Outlet側でコンポーザーコントローラーからツールバーを取得し、新しいボタンを追加します。既存の投票ボタンを利用できる方法があるかもしれません（それが理想ですが）、それは 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)

追伸：thepavilion.io にロードしてみましたが、動作しているようです（モバイルのみ）。