Добавление кнопки опроса в нижнюю часть редактора

Разработка
7

На самом деле это сложнее, чем кажется (ну что тут такого — сдвинуть кнопку вправо? :slight_smile: )

Я немного покопался в этом, и кажется, что наименее запутанный способ — назначить панель инструментов редактора композера свойству контроллера, к которому затем можно получить доступ в 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)

p.s. Я только что загрузил его на thepavilion.io, и, похоже, всё работает (только на мобильных устройствах).