Hook JavaScript pour Composer

Dev
1

Bonjour,

J’avais créé un post précédent qui n’a reçu aucune réponse, peut-être parce que la demande était trop spécifique. Je réessaie donc ici : je souhaite intégrer mon plugin à l’éditeur de composition afin que, lorsque l’utilisateur tape une certaine séquence de caractères (par exemple --) suivie d’une requête, une fenêtre contextuelle s’affiche avec les résultats de la recherche. Une fois que l’utilisateur clique sur l’un des résultats, un lien normal est inséré à la place de la requête saisie. Quelle est la meilleure pratique pour accéder à l’élément de l’éditeur de composition et notifier mon plugin dès que l’utilisateur rédige un message ? J’ai examiné l’API des plugins et certains plugins sur GitHub, mais je n’ai pas trouvé d’exemple pertinent.

Cordialement,
Alexander

2

Je soupçonne que vous souhaitez suivre un exemple existant.

Le lieu à examiner, je le soupçonne, est discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

Plus précisément :

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

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

Et peut-être jeter un coup d’œil à :

  _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 : Je ne l’ai pas exploité moi-même, mais c’est mon hypothèse.

3

Bonjour @merefield,
merci beaucoup, cela est déjà très utile. Où est le meilleur endroit pour initialiser cela ? Dois-je vérifier dans la fonction d’initialisation de mon plugin si l’élément .d-editor-input existe et le configurer en conséquence, ou existe-t-il un endroit pour enregistrer le plugin en tant qu’extension de la vue de rédaction, afin qu’il ne soit chargé que lorsque l’utilisateur ouvre effectivement le compositeur ?
Cordialement,
Alexander

4

Ceci est un composant, et de manière pratique, vous voudrez donc remplacer cette méthode didInsertElement() dans votre initialiseur.

Exemple :

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

      api.modifyClass('component:load-more'

à partir d’ici https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6

Si vous avez de la chance, vous pourrez simplement appeler this._super(); et ajouter votre logique supplémentaire à la fin.

5

Parfait ! Merci beaucoup. Je pense que cela fera l’affaire.