Hook do JavaScript para Composer

Dev
1

Olá,
Eu fiz um post anterior que não recebeu nenhuma resposta, talvez porque a solicitação fosse muito restrita. Então, estou tentando novamente: gostaria de integrar ao editor de composição para que, quando o usuário digitar uma determinada sequência de caracteres (por exemplo, --) seguida de uma consulta, eu possa exibir um popup com resultados de pesquisa. Assim que o usuário clicar em um deles, um link normal será inserido no local onde a consulta foi digitada. Qual é a melhor prática para acessar o elemento do editor de composição e fazer com que meu plugin seja notificado assim que o usuário começar a escrever uma postagem? Analisei a API de plugins e alguns plugins no GitHub, mas não encontrei nenhum bom exemplo.
Atenciosamente,
Alexander

2

Suspeito que você queira seguir um exemplo existente.

O lugar para procurar, suspeito, é discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

Especificamente:

  didInsertElement() {
    this._super(...arguments);

    const $editorInput = $(this.element.querySelector(".d-editor-input"));
    this._applyEmojiAutocomplete($editorInput);
    this._applyCategoryHashtagAutocomplete($editorInput);

E talvez dê uma olhada em:

  _applyCategoryHashtagAutocomplete() {
    const siteSettings = this.siteSettings;

    $(this.element.querySelector(".d-editor-input")).autocomplete({
      template: findRawTemplate("category-tag-autocomplete"),
      key: "#",
      afterComplete: () => this._focusTextArea(),
      transformComplete: obj => {
        return obj.text;
      },
      dataSource: term => {
        if (term.match(/\s/)) {
          return null;
        }
        return searchCategoryTag(term, siteSettings);
      },
      triggerRule: (textarea, opts) => {
        return categoryHashtagTriggerRule(textarea, opts);
      }
    });
  },

NB: Eu mesmo não explorei isso, mas essa é a minha suposição.

3

Olá @merefield,
Muito obrigado, isso já é bastante útil. Apenas, qual é o melhor lugar para inicializar isso? Devo verificar na função de inicialização do meu plugin se o elemento .d-editor-input existe e conectá-lo de acordo, ou há um lugar para registrar o plugin como uma extensão na visualização de composição, de modo que ele seja carregado apenas quando o usuário realmente abrir o editor?
Atenciosamente,
Alexander

4

Este é um componente, convenientemente, então você gostaria de sobrescrever o método didInsertElement() no seu inicializador.

Exemplo:

withPluginApi('0.8.12', (api) => {

      api.modifyClass('component:load-more'

a partir daqui https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6

Se você tiver sorte, poderá apenas chamar this._super(); e adicionar sua lógica adicional no final.

5

Perfeito! Muito obrigado. Acho que isso vai resolver o problema.