Composer 用の JavaScript フック

開発
1

こんにちは、

以前に 投稿 をしましたが、反応がありませんでした。おそらくリクエストが狭すぎたためでしょう。そこで、もう一度挑戦します。コンポーザーエディタにフックし、ユーザーが特定の文字列（例：–）の後にクエリを入力すると、検索結果を含むポップアップを表示したいと考えています。ユーザーがその中のいずれかをクリックすると、入力されたクエリの場所に通常のリンクが挿入されます。コンポーザー要素にアクセスし、ユーザーが投稿を作成した際にプラグインに通知されるようにするためのベストプラクティスは何でしょうか？プラグイン API や GitHub 上のいくつかのプラグインを確認しましたが、良い例は見つかりませんでした。

よろしくお願いいたします、
Alexander

「いいね！」 1
2

既存の例を参考にしたいのだと思います。

見るべき場所は、おそらくこちらです：discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

具体的には以下の部分です：

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

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

そして、以下も参照してみてください：

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

なお、私はこの方法を自分で活用したことはありませんが、これが私の推測です。

「いいね！」 1
3

@merefield さん、こんにちは。
大変ありがとうございます。これはすでに非常に役立っています。
ただ、これを初期化する最適な場所はどこでしょうか？プラグインの初期化関数で .d-editor-input 要素が存在するかチェックして、それに応じてフックを設定すべきでしょうか、それともユーザーが実際にコンポーザーを開いたときにのみ読み込まれるように、コンポーズビューへの拡張機能としてプラグインを登録する場所があるのでしょうか？
よろしくお願いいたします。
Alexander

4

これはコンポーネントです。したがって、イニシャライザーでこのメソッド didInsertElement() をオーバーライドしたいはずです。

例:

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

      api.modifyClass('component:load-more'

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

運が良ければ、this._super(); を呼び出して、最後に独自のロジックを追加するだけで済みます。

「いいね！」 3
5

完璧です！ありがとうございます。これでうまくいくと思います。

「いいね！」 1