fix: infobox html block styling (#562)

* Fix infobox styling * Update colors * Add reearth prefix * Edit link colors --------- Co-authored-by: basel.issmail <basel.issmail@gmail.com>
reearth · Mar 22, 2023 · 32b2481 · 32b2481
1 parent f2b2f26
commit 32b2481
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/src/components/molecules/Visualizer/Block/HTML/index.tsx b/src/components/molecules/Visualizer/Block/HTML/index.tsx
@@ -105,8 +105,21 @@ const HTMLBlock: React.FC<Props> = ({
 
     // Initialize styles
     frameWindow.document.documentElement.style.margin = "0";
-    frameWindow.document.body.style.color = themeColor ?? getComputedStyle(frameRef).color;
-    frameWindow.document.body.style.margin = "0";
+
+    // Check if a style element has already been appended to the head
+    let style: HTMLElement | null = frameWindow.document.querySelector(
+      'style[data-id="reearth-iframe-style"]',
+    );
+    if (!style) {
+      // Create a new style element if it doesn't exist
+      style = frameWindow.document.createElement("style");
+      style.dataset.id = "reearth-iframe-style";
+      frameWindow.document.head.append(style);
+    }
+    // Update the content of the existing or new style element
+    style.textContent = `body { color:${themeColor ?? getComputedStyle(frameRef).color}; 
+    font-family:Noto Sans, hiragino sans, hiragino kaku gothic proN, -apple-system, BlinkMacSystem, sans-serif; 
+    font-size: ${fonts.sizes.s}px; } a {color:${themeColor ?? getComputedStyle(frameRef).color};}`;
 
     const handleFrameClick = () => handleClick();
 
@@ -131,7 +144,7 @@ const HTMLBlock: React.FC<Props> = ({
       frameWindow.document.removeEventListener("click", handleFrameClick);
       resizeObserver.disconnect();
     };
-  }, [frameRef, startEditing, isEditable, handleClick, html, themeColor]);
+  }, [frameRef, themeColor, isEditable, html, handleClick, startEditing]);
 
   useLayoutEffect(() => initializeIframe(), [initializeIframe]);
 

diff --git a/src/core/Crust/Infobox/Block/HTML/index.tsx b/src/core/Crust/Infobox/Block/HTML/index.tsx
@@ -103,8 +103,21 @@ const HTMLBlock: React.FC<Props> = ({
 
     // Initialize styles
     frameWindow.document.documentElement.style.margin = "0";
-    frameWindow.document.body.style.color = themeColor ?? getComputedStyle(frameRef).color;
-    frameWindow.document.body.style.margin = "0";
+
+    // Check if a style element has already been appended to the head
+    let style: HTMLElement | null = frameWindow.document.querySelector(
+      'style[data-id="reearth-iframe-style"]',
+    );
+    if (!style) {
+      // Create a new style element if it doesn't exist
+      style = frameWindow.document.createElement("style");
+      style.dataset.id = "reearth-iframe-style";
+      frameWindow.document.head.append(style);
+    }
+    // Update the content of the existing or new style element
+    style.textContent = `body { color:${themeColor ?? getComputedStyle(frameRef).color}; 
+    font-family:Noto Sans, hiragino sans, hiragino kaku gothic proN, -apple-system, BlinkMacSystem, sans-serif; 
+    font-size: ${fonts.sizes.s}px; } a { color:${themeColor ?? getComputedStyle(frameRef).color};}`;
 
     const handleFrameClick = () => handleClick();
 
@@ -129,7 +142,7 @@ const HTMLBlock: React.FC<Props> = ({
       frameWindow.document.removeEventListener("click", handleFrameClick);
       resizeObserver.disconnect();
     };
-  }, [frameRef, startEditing, isEditable, handleClick, html, themeColor]);
+  }, [frameRef, themeColor, isEditable, html, handleClick, startEditing]);
 
   useLayoutEffect(() => initializeIframe(), [initializeIframe]);
 

diff --git a/yarn.lock b/yarn.lock
@@ -16210,7 +16210,7 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resium@^1.16.1:
+resium@1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/resium/-/resium-1.16.1.tgz#9ace9a39104c40c1e5717a21f84f54eff2a38d25"
   integrity sha512-I9vyClyR4+JZzQGUv5wc9DSc+bQWh9S7qMUwy6vYWJ3GkeSQW4vgTa7qiCv87w5zyw6lL+dRXZFjuiKogYnHJA==