Hook de JavaScript para Composer

Desarrollador
1

Hola,

Tuve una publicación anterior que no recibió ninguna respuesta, quizás porque la solicitud era demasiado específica. Así que lo intento de nuevo: me gustaría integrarme en el editor de redacción para que, cuando el usuario escriba una secuencia determinada de caracteres (por ejemplo, --) seguida de una consulta, se muestre un cuadro emergente con los resultados de la búsqueda. Una vez que el usuario hace clic en uno de ellos, se inserta un enlace normal en lugar de la consulta escrita. ¿Cuál es la mejor práctica para acceder al elemento del editor y recibir una notificación de mi plugin cuando el usuario redacta una publicación? He revisado la API de plugins y algunos plugins en GitHub, pero no encontré un buen ejemplo.

Saludos cordiales,
Alexander

2

Sospecho que quieres seguir un ejemplo existente.

El lugar para buscar, creo, es discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

Específicamente:

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

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

Y tal vez eches un vistazo a:

  _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: No lo he explotado yo mismo, pero esa es mi suposición.

3

Hola @merefield,
muchas gracias, esto ya es bastante útil. Solo, ¿cuál es el mejor lugar para inicializar esto? ¿Debería verificar en la función de inicialización de mi complemento si el elemento .d-editor-input existe y conectarlo en consecuencia, o hay un lugar para registrar el complemento como una extensión de la vista de redacción, de modo que solo se cargue cuando el usuario abre realmente el editor?
Saludos cordiales,
Alexander

4

Esto es un Componente, por lo que querrás sobrescribir este método didInsertElement() en tu inicializador.

Ejemplo:

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

      api.modifyClass('component:load-more'

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

Si tienes suerte, solo puedes llamar a this._super(); y agregar tu lógica adicional al final.

5

¡Perfecto! Muchas gracias. Creo que esto hará el truco.