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

nexo · Fevereiro 27, 2020, 3:38am

@Steven was kind enough to help and was able to put together this script that almost works but tapping the button doesn’t do anything:

<script type='text/x-handlebars' data-template-name='composer'>
{{#composer-body composer=model
                 showPreview=showPreview
                 openIfDraft=(action "openIfDraft")
                 typed=(action "typed")
                 cancelled=(action "cancelled")
                 save=(action "save")}}
  <div class="grippie"></div>
  {{#if visible}}
      {{composer-messages composer=model
                          messageCount=messageCount
                          addLinkLookup=(action "addLinkLookup")}}
      {{#if model.viewOpenOrFullscreen}}
        <div class="reply-area {{if canEditTags 'with-tags'}}">
          <div class='composer-fields'>
            {{plugin-outlet name="composer-open" args=(hash model=model)}}
            <div class='reply-to'>
              {{#unless model.viewFullscreen}}
                <div class="reply-details">
                  {{composer-action-title
                    model=model
                    openComposer=(action "openComposer")
                    closeComposer=(action "closeComposer")
                    canWhisper=canWhisper
                    tabindex=8}}
                  {{plugin-outlet name="composer-action-after" noTags=true args=(hash model=model)}}

                  {{#unless site.mobileView}}
                    {{#if isWhispering}}
                      <span class='whisper'>{{d-icon "far-eye-slash"}}</span>
                    {{/if}}
                    {{#if model.unlistTopic}}
                      <span class='whisper'>({{i18n 'composer.unlist'}})</span>
                    {{/if}}
                    {{#if model.noBump}}
                      <span class="no-bump">{{d-icon "anchor"}}</span>
                    {{/if}}
                  {{/unless}}

                  {{#if canEdit}}
                    {{#link-to-input onClick=(action "displayEditReason") showInput=showEditReason icon="info-circle" class="display-edit-reason"}}
                      {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
                    {{/link-to-input}}
                  {{/if}}
                </div>
              {{/unless}}
              {{composer-toggles composeState=model.composeState
                        toggleComposer=(action "toggle")
                        toggleToolbar=(action "toggleToolbar")
                        toggleFullscreen=(action "fullscreenComposer")}}
            </div>
            {{#unless model.viewFullscreen}}
              {{#if model.canEditTitle}}
                {{#if model.creatingPrivateMessage}}
                  <div class='user-selector'>
                    {{composer-user-selector topicId=topicModel.id
                                             usernames=model.targetRecipients
                                             hasGroups=model.hasTargetGroups
                                             focusTarget=focusTarget
                                             class="users-input"}}
                    {{#if showWarning}}
                      <label class='add-warning'>
                        {{input type="checkbox" checked=model.isWarning tabindex="3"}}
                        {{i18n "composer.add_warning"}}
                      </label>
                    {{/if}}
                  </div>
                {{/if}}

                <div class="title-and-category {{if showPreview 'with-preview'}}">

                  {{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}

                  {{#if model.showCategoryChooser}}
                    <div class="category-input">
                      {{category-chooser
                        value=model.categoryId
                        tabindex="3"
                        onChange=(action (mut model.categoryId))
                        isDisabled=disableCategoryChooser
                        options=(hash
                          scopedCategoryId=scopedCategoryId
                        )
                      }}
                      {{popup-input-tip validation=categoryValidation}}
                    </div>
                  {{/if}}
                  {{#if canEditTags}}
                    {{mini-tag-chooser
                      value=model.tags
                      tabindex=4
                      isDisabled=disableTagsChooser
                      onChange=(action (mut model.tags))
                      options=(hash
                        categoryId=model.categoryId
                        minimum=model.minimumRequiredTags
                      )
                    }}
                    {{popup-input-tip validation=tagValidation}}
                  {{/if}}
                </div>
              {{/if}}

              {{plugin-outlet name="composer-fields" args=(hash model=model)}}
            {{/unless}}

          </div>

          {{composer-editor topic=topic
                            composer=model
                            lastValidatedAt=lastValidatedAt
                            canWhisper=canWhisper
                            storeToolbarState=(action "storeToolbarState")
                            onPopupMenuAction=(action "onPopupMenuAction")
                            showUploadModal=(route-action "showUploadSelector")
                            popupMenuOptions=popupMenuOptions
                            draftStatus=model.draftStatus
                            isUploading=isUploading
                            allowUpload=allowUpload
                            uploadIcon=uploadIcon
                            isCancellable=isCancellable
                            uploadProgress=uploadProgress
                            groupsMentioned=(action "groupsMentioned")
                            cannotSeeMention=(action "cannotSeeMention")
                            importQuote=(action "importQuote")
                            togglePreview=(action "togglePreview")
                            showToolbar=showToolbar
                            afterRefresh=(action "afterRefresh")
                            focusTarget=focusTarget}}

          <div class='submit-panel'>
            {{plugin-outlet name="composer-fields-below" args=(hash model=model)}}

            <div class='save-or-cancel'>
              {{#unless model.viewFullscreen}}
                {{composer-save-button action=(action "save")
                                       icon=saveIcon
                                       label=saveLabel
                                       disableSubmit=disableSubmit}}

              {{#if site.mobileView}}
                <a href {{action "cancel"}} class='cancel' tabindex="6" title="{{i18n 'cancel'}}">
                  {{#if canEdit}}
                    {{d-icon "times"}}
                  {{else}}
                    {{d-icon "far-trash-alt"}}
                  {{/if}}
                </a>
              {{else}}
                <a href {{action "cancel"}} class='cancel' tabindex="6" >{{i18n 'cancel'}}</a>
              {{/if}}
            {{/unless}}


              {{#if site.mobileView}}
                {{#if whisperOrUnlistTopic}}
                  <span class='whisper'>
                    {{d-icon "far-eye-slash"}}
                  </span>
                {{/if}}
                {{#if model.noBump}}
                  <span class="no-bump">{{d-icon "anchor"}}</span>
                {{/if}}
              {{/if}}


              {{#if isUploading}}
                <div id="file-uploading">
                  {{loading-spinner size="small"}}<span>{{i18n 'upload_selector.uploading'}} {{uploadProgress}}%</span>
                  {{#if isCancellable}}
                    <a href id="cancel-file-upload" {{action "cancelUpload"}}>{{d-icon "times"}}</a>
                  {{/if}}
                </div>
              {{/if}}
              <div id='draft-status' class="{{if isUploading 'hidden'}}">
                {{#if model.draftSaving}}<div class="spinner small"></div>{{/if}}
                {{#if model.draftSaved}}{{d-icon 'check' class='save-animation'}}{{/if}}
                {{#if model.draftStatus}}
                  <span title="{{model.draftStatus}}">
                    {{#if model.draftConflictUser}}
                      {{avatar model.draftConflictUser imageSize="small"}} {{d-icon 'user-edit'}}
                    {{else}}
                      {{d-icon 'sync-alt'}}
                    {{/if}}
                    {{#unless site.mobileView}}
                      {{model.draftStatus}}
                    {{/unless}}
                  </span>
                {{/if}}
              </div>
            </div>

              {{#if site.mobileView}}
                {{#if allowUpload}}
                  <a class="btn btn-default no-text mobile-file-upload {{if isUploading 'hidden'}}">
                    {{d-icon uploadIcon}}
                  </a>
                {{/if}}

                <a href class="btn btn-default no-text mobile-preview" {{action "showPollBuilder"}}>
                  {{d-icon "chart-bar"}}
                </a>
                
                <a href class="btn btn-default no-text mobile-preview" title="{{i18n 'composer.show_preview'}}" {{action "togglePreview"}}>
                  {{d-icon "desktop"}}
                </a>

                {{#if showPreview}}
                  {{d-button action=(action "togglePreview") class="hide-preview" label="composer.hide_preview"}}
                {{/if}}
              {{else}}
                <a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
              {{/if}}

          </div>
        </div>

      {{else}}
        <div class='saving-text'>
          {{#if model.createdPost}}
            {{i18n 'composer.saved'}} <a class='permalink' href="{{unbound createdPost.url}}" {{action "viewNewReply"}}>{{i18n 'composer.view_new_post'}}</a>
          {{else}}
            {{i18n 'composer.saving'}} {{loading-spinner size="small"}}
          {{/if}}
        </div>

        <div class='draft-text'>
          {{#if model.topic}}
            {{d-icon "share"}} {{{draftTitle}}}
          {{else}}
            {{i18n "composer.saved_draft"}}
          {{/if}}
        </div>

        {{composer-toggles composeState=model.composeState
          toggleFullscreen=(action "openIfDraft")
          toggleComposer=(action "toggle")
          toggleToolbar=(action "toggleToolbar")}}

      {{/if}}

  {{/if}}

{{/composer-body}}
</script>

His potential reasoning was: “It only works if we use the poll button of the composer before. I think it’s because Discourse will only trigger the action showPollBuilder (this is what opens the poll builder) after we trigger the action onPopupMenuAction (the icon that open the list of actions in the toolbar, like hide details, blur spoiler, build poll).”

Would anybody mind taking over?
(Thanks again Steven for the super generous assistance!)

mbcahyono · Fevereiro 27, 2020, 3:57am

Você provavelmente não precisa sobrescrever todo o template composer. Use a saída composer-fields-below em vez disso.

spirobel · Fevereiro 27, 2020, 11:15am

Não consegui me segurar e acabei caindo um pouco na toca do coelho. haha e agora já se passaram 2 horas.

Você precisa adicionar o arquivo handlebars assim para exibir o botão

e então você precisa de alguma ação semelhante à do plugin de enquete:

github.com/discourse/discourse

plugins/poll/assets/javascripts/initializers/add-poll-ui-builder.js.es6

f51806565


      
                pollEnabled &&
                (pmWithNonHumanUser ||
                  (this.currentUser &&
                    (this.currentUser.staff ||
                      this.currentUser.trust_level >= minimumTrustLevel)))
              );
            },
          
            actions: {
              showPollBuilder() {
                showModal("poll-ui-builder").set("toolbarEvent", this.toolbarEvent);
              }
            }
          });
          
          api.addToolbarPopupMenuOptionsCallback(() => {
            return {
              action: "showPollBuilder",
              icon: "chart-bar",
              label: "poll.ui_builder.title",
              condition: "canBuildPoll"

podemos alimentar o modal do construtor de enquetes com um evento de barra de ferramentas “falso”, mas o problema é que você também precisa replicar a lógica no componente do editor

github.com/discourse/discourse

app/assets/javascripts/discourse/components/d-editor.js.es6

9c96511ec


      
          }
          
          const selected = this._getSelected(button.trimLeading);
          const toolbarEvent = {
            selected,
            selectText: (from, length) => this._selectText(from, length),
            applySurround: (head, tail, exampleKey, opts) =>
              this._applySurround(selected, head, tail, exampleKey, opts),
            applyList: (head, exampleKey, opts) =>
              this._applyList(selected, head, exampleKey, opts),
            addText: text => this._addText(selected, text),
            replaceText: text => this._addText({ pre: "", post: "" }, text),
            getText: () => this.value,
            toggleDirection: () => this._toggleDirection()
          };
          
          if (button.sendAction) {
            return button.sendAction(toolbarEvent);
          } else {
            button.perform(toolbarEvent);
          }

a parte com _getSelected e _addText. Eu ficaria muito interessado em saber se existe alguma API para adicionar texto programaticamente à área de texto do editor “de fora”.

Steven · Fevereiro 27, 2020, 9:22pm

Esse era o plano. Para fins de teste, foi mais fácil reescrever o template do composer, já que a saída do plugin pode precisar de alguns ajustes para se adaptar ao tema dele.

Mas eu queria fazer o código funcionar primeiro e adaptar depois, porém fiquei preso na codificação.

j.jaffeux · Fevereiro 27, 2020, 9:28pm

Não, AFAIK, não temos nada para fazer isso no momento.

nexo · Fevereiro 27, 2020, 10:40pm

Ah, entendi. Ótimo trabalho!

angus · Fevereiro 27, 2020, 11:13pm

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).

spirobel · Fevereiro 27, 2020, 11:23pm

uau, isso parece uma solução incrível. a minha é bem chata em comparação:

export default {
  actions: {
    showPollBuilderNextToSave() {
$("button[title='Options']").trigger('click')



console.log($("button[title='Options']"))
Ember.run.later((function() {
  $("li[data-value='showPollBuilder']").trigger('click');
    console.log($("li[data-value='showPollBuilder']"))
 
}), 50);

    }
  }
};

Eu só uso jQuery para clicar no botão talvez exista uma maneira melhor de encontrar o primeiro seletor sem codificar o título das opções, caso isso possa ser um problema.

angus · Fevereiro 27, 2020, 11:26pm

É, muito bom Também é uma opção.

nexo · Fevereiro 28, 2020, 1:03am

Uau, estou sem palavras, Angus… isso é incrível, você é um gênio, meu rapaz! Você me motivou a começar a aprender desenvolvimento a partir de hoje, assim como o Johani me motivou a aprender CSS há um ano. Obrigado, Angus, simplesmente deslumbrante.

Tópico		Respostas	Visualizações
Composer Button Bonanza Theme component composer	25	889	22 de Março de 2026
Why is there no UI to create a poll? UX	38	8341	22 de Junho de 2016
Editor buttons for spoiler, poll, emoji? Feature	13	1854	4 de Dezembro de 2025
Add a direct button to canned replies in editor Development	5	1451	6 de Abril de 2023
MD Composer extras Theme component	70	8926	8 de Julho de 2025

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

Tópicos relacionados