Increase Documentation on building custom plugins

[eric-personal]

Hi I'm looking at the docs for plugins and I see an option for Yasr plugins but I'm not seeing anything for Yasqe plugins. It would be really nice to have some docs on how to pass properties to a newly registered plugin or how to go about building UI plugins in general.

### Problem: I'm trying to build out a simple stop query button that would go under or beside the submit query button. For queries that have long response times you could stop the query if you wanted. The first attempt was to add a plugin class as suggested in the docs.

class StopButton {
  constructor(yasqe) {
    this.yasqe = yasqe;
  }
}

export default StopButton;

Then I import it into my React project and inside my React component I have a useEffect() where I instantiate Yasgui Here is where I try to use registerPlugin ?

import StopButton from './plugins/stop-button';
useEffect(() => {
      Yasgui.Yasqe.registerPlugin("StopButton");
     new Yasgui(ref.current, {
      requestConfig: { endpoint: process.env.MY_END_POINT},
    });
},[])

After looking through the code there is no registerPlugin for Yasqe.registerPlugin How would I go about adding simple UI element like this using plugins ? If its possible ?

Thanks.

[GerwinBosch]

Hello @eric-personal,

Plugins within Yasgui terms are meant to be visualizations within YASR. There is a way to add more buttons to YASQE's interface however, you can only add HTMLElements e.g.

Yasgui.Yasqe.defaults.pluginButtons = () => {
  return document.createElement("button")
}

Yasgui already supports aborting a request, however that functionality has been disabled by using the suggested fix in #204.

[eric-personal]

Thank you @GerwinBosch this is perfect. Does it always append or is there anyway to control a prepend without doing a branch and alternating the code below ?

    if (this.config.pluginButtons) {
      const pluginButtons = this.config.pluginButtons();
      if (!pluginButtons) return;
      if (Array.isArray(pluginButtons)) {
        for (const button of pluginButtons) {
          buttons.append(button);
        }
      } else {
        buttons.appendChild(pluginButtons);
      }
    }

If not I can always use flex to change the order.

[GerwinBosch]

The buttons will be prepended to the "Run query button" otherwise they will be in order of how you supply them

[GerwinBosch]

I am closing this issue as I interpret the emoji to mean that the issue is resolved