How to create a plugin with backend API calls to populate composer while drafting?

Dev
1

I am trying to create a plugin that achieves the following:

  1. Next to composer-fields there is a new button “search”.
  2. When clicking the button, then an overlay is popping up with a search form.
  3. The search form allows the user to enter some search terms (let’s say, a city name), and a search with a proprietary image search engine (running under my own URL that requires an API key) is being triggered to search for images of that city.
  4. Top 5 images are shown to the user. The user selects one image, the overlay disappears, the image plus search string is then added inside the composer as a draft. The use can now continue writing whatever their post was.

My actual use case is a bit more complicated, but that’s roughly what I want to achieve. The goal is simply to help the user to create post drafts with images much more conveniently than to go to the search engine and manually copy an image into the composer to create a draft.

I have already managed to create a plugin with a new button using composer-field as a connector. The button can be clicked and it triggers an action. But now I’m stuck.

Some questions:

  1. Are there any plugins that would make my life easier? I was thinking maybe about Pavilion wizard plugin, but I’ve seen that making calls to an API only comes with the paid version, and right now it’s too early for me to decide if it’s worth spending money on this.
  2. What is the right CSS class / div ID that I could target for activating an overlay?
  3. What would be a good example to figure out how to make an API call via the backend? I don’t want to give the API key of the search engine to the client, so it must go via backend.
  4. I’m not sure what the plugin API actually is and whether I’d need that. (I’m struggling a little bit with docs being all over the place.)

All other tips and hints are welcome.

1 Like
2

In the meanwhile I found a few resources that I found informative. I really wish these could be put more prominently in the “How to write a plugin” tutorial. For beginners it is not obvious they even exist.

  1. Discourse’s own API (not helpful for writing plugins, but still relevant for beginners): https://docs.discourse.org/
  2. Client Plugin API (not helpful for writing a plugin’s backend, but makes things definitely easier for frontend):
    A versioned API for client side plugins
    discourse/app/assets/javascripts/discourse/app/lib/plugin-api.gjs at main · discourse/discourse · GitHub

I also understood that Backend Plugin API is essentially Rails or Ruby - but it’s not clear how exactly frontend and backend interact with each other, or where the initial “hook” for the backend is. Sure, there’s a plugin.rb to be placed, but I’m left wondering whether there’s any docs on what’s the entry point into this file. Maybe that’s totally obvious for Ruby on Rails programmers, but I’m not one of them, so it’s a steep entry here.

3

It doesn’t seem like you need any backend changes. The behavior you describe is very similar to how our “Insert Hyperlink” modal works – you can search for topics, select one of them to add as a link, and a link will be added to the composer when you confirm.

You can add the button to a plugin outlet, or to the toolbar via a api.onToolbarCreate added to an initializer, and open a modal similarly to how we’re doing it for the “Insert Hyperlink” modal. It’s able to addText to the composer by levering the toolbarEvent object from the toolbar action (if you need an outlet, you can also interact with the composer via appEvents triggers).

1 Like