JavaScript Hook для Composer

Разработка
1

Привет,

Ранее я создавал сообщение, которое не получило отклика — возможно, потому что запрос был слишком узким. Поэтому я попробую ещё раз: мне нужно интегрироваться в редактор написания сообщений, чтобы при вводе пользователем определённой последовательности символов (например, --), за которой следует поисковый запрос, отображалось всплывающее окно с результатами поиска. После выбора пользователем одного из результатов в месте ввода запроса должен быть вставлен обычная ссылка. Каковы лучшие практики для доступа к элементу редактора и получения уведомления плагина о том, что пользователь начинает composing поста? Я изучил API плагинов и несколько проектов на GitHub, но не нашёл подходящих примеров.

С уважением,
Александр

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

NB: Я сам этим не пользовался, но это моё предположение.

3

Привет @merefield,
спасибо большое, это уже довольно полезно. Подскажите, где лучше всего инициализировать это? Мне стоит проверять наличие элемента .d-editor-input в функции инициализации моего плагина и подключать его соответствующим образом, или есть возможность зарегистрировать плагин как расширение для представления редактора, чтобы он загружался только тогда, когда пользователь фактически открывает редактор?
С уважением,
Александр

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(); и добавить свою логику в конец.

5

Отлично! Большое спасибо. Думаю, это сработает.