Adding an outside widget to composer

Development
7

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:

Screen Shot 2021-11-08 at 9.11.39 PM