JavaScript-Hook für Composer

Entwickler
1

Hallo,
ich hatte bereits einen vorherigen Beitrag, der keine Antwort erhielt, möglicherweise weil die Anfrage zu spezifisch war. Daher versuche ich es noch einmal: Ich möchte den Composer-Editor so erweitern, dass beim Eingeben einer bestimmten Zeichenfolge (z. B. --) gefolgt von einer Suchanfrage ein Popup mit Suchergebnissen angezeigt wird. Sobald der Benutzer eines dieser Ergebnisse anklickt, wird an der Stelle, an der die Suchanfrage eingegeben wurde, ein normaler Link eingefügt. Was ist die beste Vorgehensweise, um auf das Composer-Element zuzugreifen und mein Plugin benachrichtigen zu lassen, sobald der Benutzer einen Beitrag verfasst? Ich habe mir die Plugin-API und einige Plugins auf GitHub angesehen, konnte jedoch kein gutes Beispiel finden.

Mit freundlichen Grüßen
Alexander

2

Ich vermute, du möchtest einem bestehenden Beispiel folgen.

Der Ort, an dem du suchen solltest, ist meiner Vermutung nach discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

Insbesondere:

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

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

Und vielleicht werfe einen Blick darauf:

  _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);
      }
    });
  },

Hinweis: Ich habe dies selbst nicht genutzt, aber das ist meine Vermutung.

3

Hallo @merefield,
vielen Dank, das ist bereits sehr hilfreich. Wo ist jedoch der beste Ort, um dies zu initialisieren? Soll ich in der Initialisierungsfunktion meines Plugins prüfen, ob das Element .d-editor-input existiert, und es entsprechend einbinden, oder gibt es eine Möglichkeit, das Plugin als Erweiterung für die Composer-Ansicht zu registrieren, sodass es erst geladen wird, wenn der Benutzer den Composer tatsächlich öffnet?

Mit freundlichen Grüßen
Alexander

4

Dies ist eine Komponente, daher möchten Sie diese Methode didInsertElement() in Ihrem Initialisierer überschreiben.

Beispiel:

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

      api.modifyClass('component:load-more'

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

Wenn Sie Glück haben, können Sie einfach this._super(); aufrufen und Ihre zusätzliche Logik am Ende anfügen.

5

Perfekt! Vielen Dank. Ich denke, das wird den Job erledigen.