html, copyright in Attribution at 4.x

[BrandonFlessner]

I'm attempting to use a 3rd party (Mapbox) basemap in 4.3 JavaScript API. I need to include copyright and links in the map attribution as per Mapbox's policy. I've included the html as a string in the layers copyright property, but the string is not 'translated' into html and instead shows the html as text.

  var basemap = new WebTileLayer({
    urlTemplate: "...",
    copyright: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>'
  });
  map.add(basemap);‍‍‍‍‍

Output:

The behavior can also be seen in this sample (click the attribution to see the Stamen copyright shown as text): ArcGIS API for JavaScript Sandbox 

This was valid in the 3.x API, how do I do this at 4.x?

[FC_Basson]

The problem is that the content for the attribution element is converted to HTML special characters, whereas to have working hyperlinks you need the actual <a></a> tag.

What I quickly tried was a simple conversion from HTML special characters to text:

// get attribution div
attrdiv = document.getElementsByClassName('esri-attribution__sources')[0]
// convert formatted HTML content to text
attrdiv.innerHTML = attrdiv.innerText‍‍‍‍‍‍‍‍

This should be done after the layers have been loaded and the attribution set.

[BrandonFlessner]

Thanks for your reply FC Basson. You code works, the trouble for me was figuring out all the events to wait for to make sure the layers were loaded and attribution set. The Mapbox layer is used as a basemap in my application and I have a basemap toggle which changes the attribution text when you toggle between basemaps. Here's my hackish solution: 

when the mapView is ready

   watch the attribution text

      if the attribution text equals the Mapbox copyright text

         try to update the text to make it html, but this doesn't work

         try to update it every 2 milliseconds

            if update successful, clear interval

mapView.watch('ready', function(){
 var attribution = mapView.ui._components[0];
 attribution.widget.viewModel.watch('attributionText', function(evt){
    if (evt == '<a href="http://mapbox.com/about/maps" class="mapbox-wordmark" target="_blank">Mapbox</a>© <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, © <a href="https://www.mapbox.com/map-feedback/" target="_blank"><strong>Improve this map</strong></a>'){
       document.getElementsByClassName('esri-attribution__sources')[0].innerHTML = evt; // never works, don't know why
       updateAttr = setInterval(function(){
          document.getElementsByClassName('esri-attribution__sources')[0].innerHTML = evt;
          if (document.getElementsByClassName('esri-attribution__sources')[0].innerText == "Mapbox© OpenStreetMap contributors, © Improve this map"){
             clearInterval(updateAttr);
            }
       }, 2);
     }
   });
});

Of course this would need to be edited if any operational layers had attribution or copyright text. Not a satisfying solution. This was so easy at 3.x!! Sure there is a better way.

[BjornSvensson · Accepted solution]

FYI - This is a 4.3 specific bug.  It worked in 4.0-4.2, and will work again at 4.4 ...