Adding an outside widget to composer

[Dugen]

Im trying to add a widget to the composer, I have got far enough to where I can insert the code from the tool bar, but I am not sure how to get the javascript working within it. I am assuming that I will need to add the javascript internally either as a plug-in or theme component rather than calling it from an external site, but I am not sure how to go about doing that. Is this doable within the composer?

[awesomerobot (Kris)]

Can you be a little more specific about what you’re trying to do? Are you trying to add a new toolbar button that adds content to the composer textarea? something else?

[Dugen]

What I am trying to is to have users insert their specific widget from the composer where all the would have to do type a number and have the toolbar wrap around it. for example if typed 112756 it would wrap the following code around it.

<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>Loading PurpleAir Widget...</div>
<script src='https://www.purpleair.com/pa.widget.js?key=N6HB6JJ0BP1Z05SE&module=AQI&conversion=C0&average=10&layer=detailed&container=PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'></script>

it would hopefully look something like this

[awesomerobot (Kris)]

Ok so it sounds like you have already figured out how to add content to the composer? (If not, referencing this example may help GitHub - discourse/discourse-gifs - this theme component opens a modal when the button is clicked from the toolbar, and then inserts content into the composer based on clicking some content in the modal).

If you’re trying to get a script to load and do something to the post content, I think this post might get you pointed in the right direction… using loadScript and decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen

[merefield (Robert)]

You might be able to use this in some way (either directly or a forked customisation): Custom Mentionables which uses a special character instead of a composer button.

[Dugen]

Thanks for pointing me in the right direction, I do seem to run into another issue, it is not loading/rendering when opening the topic page that would use the script. Only after I refresh the page does it load properly, but not every time. Is this because Discourse is a Single Page Application, I’m am just trying to figure out if my knowledge of Discourse is lacking or if something that I need to program my self.

Here is the current code I am using. Any direction would be greatly appreciated

 let loadScript = require('discourse/lib/load-script').default;
  api.decorateCooked($elem => { $elem.children('div[data-PAWidget]').ready(function() {
         $elem.children('div[data-PAWidget]').append(" <div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>");
       loadScript("https://www.purpleair.com/pa.widget.js?key=21R72LUN79CXRZ50&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard").then(()=>{       
    })  
  })     
  });

[awesomerobot (Kris)]

I took a crack at this and ended up with similar results. I tried to use decorateCookedElement because we’ll eventually deprecate decorateCooked

 api.decorateCookedElement(
    (element) => {
      element.childNodes.forEach((node) => {
        if (node.dataset && node.dataset.pawidget) {
          node.insertAdjacentHTML(
            "beforeend",
            "<div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>"
          );

          loadScript(
            `https://www.purpleair.com/pa.widget.js?key=${node.dataset.pawidget}&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard`
          );
        }
      });
    },
    { id: "widget-append", onlyStream: true, afterAdopt: true }
  );

Slight difference here is that I passed in the key with the data attribute:

<div data-PAWidget="21R72LUN79CXRZ50"></div>

This works ok for me if it’s the first time the script has been loaded. If I view a post with the script, then go back to the topic list and re-enter the topic, it does not work (until I refresh). I can see decorateCookedElement is firing each time when the relevant post is loaded, but there’s something preventing the script from working again.

I’m not sure if it’s related, but I also see a Uncaught TypeError: i is null error in the console from pa.widget.js:

[Dugen]

Thanks for taking a crack at it. I did notice that the script is called roughly every 90 seconds to two minutes if I leave the page open.

So it does load eventually. Is there any documentation/posts on how/why it loads in at a later point?