JSFiddle - React, Tailwind, and code Playground

by Jowed

HTML

<head>
  <script src="https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js"></script>
</head>
<body>
  <div class="container">
    <iframe
        id="showcase"
        frameborder="0"
        allow="xr-spatial-tracking; fullscreen"
      ></iframe>
  </div>
</body>

CSS

.container{
  width: 90vw;
  height: 90vh;
}
#showcase{
  width: 70%;
  height: 70%;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa"; //jsfiddle key
let iframe;


document.addEventListener("DOMContentLoaded", () => {
	iframe = document.getElementById('showcase');
  iframe.addEventListener("load", showcaseHandler);
  iframe.setAttribute('src', 'https://my.matterport.com/show/?m=e7VsF6wKKBk&play=1&qs=1');
});

async function showcaseHandler(){
    const sdk = await window.MP_SDK.connect(iframe, key, '3.7');

    const tags = await sdk.Mattertag.getData();
    // code injection logic for a single tag starts below
    let tagDesc = tags[0].description;
    
    // replace tag links in description with spans
    tagDesc = tagDesc.replaceAll(/\[(.*)\]\((.*)\)/ig, `<span class='link' value=\"$2\">$1</span>`);
		
    // Build injected html
		const htmlToInject = `
          <style>
            .link {
              color: white;
              text-decoration: underline;
            }
            .link:hover{
              cursor: pointer;
            }
          </style>
          
          <p>${tagDesc}</p>
          
          <script>
            const links = document.querySelectorAll('.link');
            links.forEach(link => {
            	link.addEventListener('click', () => {
              	window.send('link.open', link.getAttribute('value'));
              });
            });
            
          </scrip` + `t>`; // jsfiddle is kind of funny in that it doesn't really allow script tags so we have to break up the closing tag into separate strings here
     
     // remove description in billboard
     sdk.Mattertag.editBillboard(tags[0].sid, {description: ""});
     
     // actual replacement here
     const messenger = await sdk.Mattertag.injectHTML(tags[0].sid, htmlToInject);
     
     messenger.on('link.open', function(linkToNavigate){
       // handle the link for how you need
       console.log(linkToNavigate);
       window.location.replace(linkToNavigate);
     });
     
    
}