Как создать плагин с вызовами бэкенд API для заполнения Composer во время черновика?

Я пытаюсь создать плагин, который решает следующую задачу:

  1. Рядом с полями редактора (composer-fields) появляется новая кнопка «Поиск».
  2. При нажатии на кнопку открывается всплывающее окно (overlay) с формой поиска.
  3. В форме поиска пользователь может ввести поисковый запрос (например, название города), после чего инициируется поиск изображений с использованием проприетарного поискового движка (работающего по моему собственному URL и требующего API-ключ), чтобы найти изображения этого города.
  4. Пользователю отображаются 5 лучших изображений. Пользователь выбирает одно изображение, всплывающее окно закрывается, а изображение вместе с поисковым запросом добавляется в редактор в качестве черновика. Теперь пользователь может продолжить написание своего поста.

Мой реальный случай немного сложнее, но суть примерно такая. Цель — просто помочь пользователям создавать черновики постов с изображениями гораздо удобнее, чем переходить в поисковую систему и вручную копировать изображение в редактор для создания черновика.

Мне уже удалось создать плагин с новой кнопкой, использующей поля редактора в качестве коннектора. Кнопку можно нажать, и она запускает действие. Но теперь я застрял.

Вопросы:

  1. Существуют ли какие-либо плагины, которые упростили бы мою жизнь? Я думал, например, о плагине-масте Pavilion, но видел, что вызовы API доступны только в платной версии, а пока мне рано решать, стоит ли тратить на это деньги.
  2. Какой правильный CSS-класс / ID div-элемента, на который можно ориентироваться для активации всплывающего окна?
  3. Какой пример был бы хорош для понимания того, как сделать вызов API через бэкенд? Я не хочу передавать API-ключ поисковой системы клиенту, поэтому запрос должен идти через бэкенд.
  4. Я не уверен, что такое API плагинов на самом деле и нужен ли он мне. (Я немного запутался из-за того, что документация разбросана по разным местам.)

Все остальные советы и подсказки приветствуются.

Тем временем я нашёл несколько полезных ресурсов. Очень хотелось бы, чтобы они были более заметны в руководстве «Как написать плагин». Для новичков не очевидно, что они вообще существуют.

  1. Собственное API Discourse (не поможет в написании плагинов, но всё же актуально для новичков): https://docs.discourse.org/
  2. API клиентских плагинов (не поможет в написании бэкенда плагина, но определённо упрощает работу с фронтендом):
    A versioned API for client side plugins
    https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs

Также я понял, что API бэкенд-плагинов по сути представляет собой Rails или Ruby, но неясно, как именно фронтенд и бэкенд взаимодействуют друг с другом и где находится начальный «хук» для бэкенда. Конечно, есть файл plugin.rb, который нужно разместить, но остаётся вопрос: есть ли документация о том, какая точка входа используется в этом файле. Возможно, для программистов Ruby on Rails это очевидно, но я не из их числа, поэтому порог входа здесь довольно высок.

Кажется, что никаких изменений в бэкенде не требуется. Поведение, которое вы описываете, очень похоже на то, как работает наше модальное окно «Вставить гиперссылку»: вы можете искать темы, выбирать одну из них для добавления в виде ссылки, и при подтверждении ссылка будет добавлена в редактор.

Вы можете добавить кнопку в точке подключения плагина или на панель инструментов через api.onToolbarCreate, добавленную в инициализатор, и открыть модальное окно аналогично тому, как это делается для модального окна «Вставить гиперссылку». Оно способно добавить текст в редактор, используя объект toolbarEvent из действия на панели инструментов (если вам нужна точка подключения, вы также можете взаимодействовать с редактором через триггеры appEvents).

Спасибо, это очень полезно. Да, модальное окно действительно кажется тем, что я ищу: оно прерывает поток пользователя, и только после того, как пользователь завершит работу с модальным окном, всё возвращается в предыдущее состояние. Я изучу, как работает модальное окно «Вставить гиперссылку».

Вопрос: Где я могу найти документацию по DModal, DButton и другим специфичным для Discourse объектам?

Вот здесь:

Также стоит обратить внимание:

Вы можете посмотреть примеры в Discourse/plugins/theme components.

Спасибо, сеньор!

Вот ещё один фрагмент, который, похоже, довольно важен, так как в нём описывается, как фронтенд и бэкенд соединяются через маршруты:

Также важно для моего случая использование FormKit: Discourse toolkit to render forms

Ещё несколько фрагментов головоломки:

Ключи API можно безопасно хранить в разделе /admin/api/keys.

Наконец-то я нашел отличный урок о том, как написать плагин.