Show a modal dialog after clicking toolbar button via a plugin

Development

AI-generated summary

peter.be seeks help implementing a modal dialog triggered by a toolbar button in a Discourse plugin, noting their limited experience with Rails and JavaScript. They’ve successfully added the button via toolbar.addButton but struggle to display the modal, despite trying various folder structures and components suggested by ChatGPT. Canapin responds by sharing two existing plugins that add composer buttons opening modals, which peter.be finds helpful. Canapin encourages peter.be to share the working code once complete, which peter.be later fulfills by linking to their published plugin: Discourse Audio Message.

1

Hello everyone,

I have a background in iOS (Swift) development, only surface level experience with Rails and Javascript. I’m trying to develop a plugin for discourse, and I’m having trouble showing a modal dialog after clicking a button in the toolbar of the post editor UI.

I have successfully added the button through something like this:

assets/javascripts/discourse/initializers/audio-message-button.js.es6

import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeWithApi(api) {
  api.onToolbarCreate(toolbar => {
    toolbar.addButton({
      id: "audio_message",
      group: "extras",
      icon: "microphone",
      perform: (editor) => {
        
      }
    });
  });
}

export default {
  name: 'audio-message-button',
  initialize(container) {
    withPluginApi('0.12.0', api => initializeWithApi(api));
  }
};

I’ve been trying to utilize ChatGPT to help me with the development, and it made several suggestions in regards to the folder structure. Using components, templates, controller files, but I can’t get the dialog to show. Either I get error messages or nothing happens at all.

I’ve tried to search the forum here, but I can’t really find anything that would help with this.

Can someone please point me in the right direction as to how I have to set up the folder structure and especially naming conventions of the files involved, so that I can show a simple modal dialog to get me started?

Thank you in advance!

EDIT: I’m aware the perform function doesn’t do anything in the code above. I’ve tried several methods to make it work, nothing helped tho. So I left it blank here, just demonstrating what I did so far to make the button show up in the toolbar.

2

Hi peter :slight_smile:

I don’t have the knowledge to answer your question, but here are a plugin and a theme component that both add a button to the composer that opens a modal, maybe you’ll find some pointers in their code:

3

Thank you @Canapin,

these plugins helped pointing me in the right direction :slight_smile:

4

Feel free to share your working code here, it will surely help other people :slight_smile:

5

I’ll definitely share the working code here, the entire plugin in fact, when it’s cleaned up and I’m done with it :slightly_smiling_face:

6

Sharing this here as promised: