Show a modal dialog after clicking toolbar button via a plugin

dev
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:

1 Like
3

Thank you @Canapin,

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

1 Like
4

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

1 Like
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:

1 Like
6

Sharing this here as promised:

1 Like