fix: styles not working as expected in plugin (#322)

* fix link elements not being in head * Revert script code * Remove unused code, reorder functions * updates based on review * update based on review
reearth · Oct 3, 2022 · 21329d8 · 21329d8
1 parent 747dac6
commit 21329d8
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/src/components/atoms/Plugin/IFrame/hooks.ts b/src/components/atoms/Plugin/IFrame/hooks.ts
@@ -131,6 +131,8 @@ export default function useHook({
 
     doc.body.innerHTML = html;
 
+    linksToHead(doc, doc.body.querySelectorAll("link"));
+
     const onScriptsLoaded = () => {
       // post pending messages
       if (pendingMesages.current.length) {
@@ -228,3 +230,17 @@ function runScript(oldScript: HTMLScriptElement) {
     }
   });
 }
+
+function linksToHead(doc: Document, links: NodeListOf<HTMLLinkElement>) {
+  for (const link of links) {
+    const newLink = document.createElement("link");
+    for (const attr of link.attributes) {
+      newLink.setAttribute(attr.name, attr.value);
+    }
+    if (link.innerText) {
+      newLink.appendChild(document.createTextNode(link.innerText));
+    }
+    doc.head.appendChild(newLink);
+    doc.body.removeChild(link);
+  }
+}