Hook JavaScript per Composer

Sviluppatore
1

Ciao,

Ho pubblicato un post precedente che non ha ricevuto alcuna risposta, forse perché la richiesta era troppo specifica. Quindi provo di nuovo: vorrei collegarmi all’editor di composizione in modo che quando l’utente digita una certa sequenza di caratteri (ad esempio --) seguita da una query, possa mostrare un popup con i risultati della ricerca. Una volta che l’utente clicca su uno di questi, viene inserito un normale link al posto della query digitata. Qual è la migliore pratica per accedere all’elemento del compositore e far sì che il mio plugin venga notificato non appena l’utente compone un post? Ho dato un’occhiata alla API dei plugin e ad alcuni plugin su GitHub, ma non sono riuscito a trovare un buon esempio.

Cordiali saluti,
Alexander

2

Sospetto che tu voglia seguire un esempio esistente.

Il posto dove guardare, a mio avviso, è discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

Nello specifico:

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

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

E forse dà un’occhiata anche a:

  _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: Non l’ho sfruttato io stesso, ma è la mia ipotesi.

3

Ciao @merefield,
grazie mille, è già molto utile. Ma qual è il posto migliore per inizializzarlo? Dovrei verificare nella funzione di inizializzazione del mio plugin se l’elemento .d-editor-input esiste e collegarlo di conseguenza, oppure esiste un posto per registrare il plugin come estensione della vista di composizione, in modo che venga caricato solo quando l’utente apre effettivamente il compositore?

Cordiali saluti,
Alexander

4

Questo è un Componente, quindi vorrai sovrascrivere questo metodo didInsertElement() nel tuo initializer.

Esempio:

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

      api.modifyClass('component:load-more'

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

Se sei fortunato, puoi semplicemente chiamare this._super(); e aggiungere la tua logica aggiuntiva alla fine.

5

Perfetto! Grazie mille. Penso che questo farà al caso nostro.