Composer용 JavaScript 훅

개발
1

안녕하세요,

이전에 게시글을 작성했지만, 요청이 너무 구체적이어서 답변을 받지 못한 것 같습니다. 그래서 다시 시도해 봅니다. 작성 편집기에 훅을 걸어서 사용자가 특정 문자열(예: --)을 입력한 뒤 쿼리를 입력하면 검색 결과를 담은 팝업을 표시하고, 사용자가 그중 하나를 클릭하면 쿼리가 입력되었던 위치에 일반 링크가 삽입되도록 하고 싶습니다. 작성 편집기 요소에 접근하고 사용자가 게시글을 작성할 때 플러그인이 알림을 받기 위한 최선의 방법은 무엇일까요? 플러그인 API와 GitHub의 몇 가지 플러그인을 살펴봤지만 좋은 예시를 찾지 못했습니다.

감사합니다.
Alexander

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

참고로 저는 이 방식을 직접 사용해 본 적은 없지만, 제 추측으로는 이 정도가 될 것 같습니다.

3

@merefield 님, 안녕하세요.
정말 감사합니다. 이미 꽤 도움이 되고 있습니다. 그런데 이걸 초기화하는 가장 좋은 위치가 어디일까요? 플러그인의 초기화 함수에서 .d-editor-input 요소가 존재하는지 확인하고 그에 따라 연결하는 방식이 좋을까요, 아니면 컴포저 뷰의 확장으로 플러그인을 등록할 수 있는 곳이 있어서 사용자가 실제로 컴포저를 열 때만 로드되도록 할 수 있을까요.
감사합니다.
알렉산더

4

이것은 컴포넌트입니다. 따라서 편리하게 초기화 프로그램(initializer)에서 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

완벽합니다! 정말 감사합니다. 이 방법으로 해결될 것 같습니다.