fix: htmlblock on safari (#548)

* fix: htmlblock on safari * Update src/components/molecules/Visualizer/Block/index.tsx Co-authored-by: rot1024 <[email protected]> --------- Co-authored-by: rot1024 <[email protected]>
reearth · Mar 15, 2023 · 392fc70 · 392fc70
1 parent be37180
commit 392fc70
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 48 deletions.
diff --git a/src/components/molecules/Visualizer/Block/HTML/index.tsx b/src/components/molecules/Visualizer/Block/HTML/index.tsx
@@ -17,7 +17,15 @@ export type Property = {
   };
 };
 
-const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, onClick }) => {
+const HTMLBlock: React.FC<Props> = ({
+  block,
+  isSelected,
+  isEditable,
+  theme,
+  infoboxProperty,
+  onChange,
+  onClick,
+}) => {
   const t = useT();
   const { html, title } = block?.property?.default ?? {};
 
@@ -78,6 +86,7 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
   );
 
   // iframe
+  const themeColor = infoboxProperty?.default?.typography?.color ?? theme?.themeTextColor;
   const [frameRef, setFrameRef] = useState<HTMLIFrameElement | null>(null);
   const [height, setHeight] = useState(15);
   const initializeIframe = useCallback(() => {
@@ -87,29 +96,42 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
       return;
     }
 
-    frameWindow.addEventListener("load", () => {
-      // Initialize styles
-      frameWindow.document.body.style.color = getComputedStyle(frameRef).color;
-      frameWindow.document.body.style.margin = "0";
-
-      if (isEditable) {
-        frameWindow.document.body.style.cursor = "pointer";
-        frameWindow.document.addEventListener("dblclick", startEditing);
-        frameWindow.document.addEventListener("click", () => handleClick());
-      }
-
-      const resize = () => {
-        const rect = frameWindow.document.body.getBoundingClientRect();
-        setHeight(rect.top + rect.bottom);
-      };
-
-      // Resize
-      const resizeObserver = new ResizeObserver(() => {
-        resize();
-      });
-      resizeObserver.observe(frameWindow.document.body);
+    if (!frameDocument.body.innerHTML.length) {
+      // `document.write()` is not recommended API by HTML spec,
+      // but we need to use this API to make it work correctly on Safari.
+      // If Safari supports `onLoad` event with `srcDoc`, we can remove this line.
+      frameDocument.write(html || "");
+    }
+
+    // Initialize styles
+    frameWindow.document.body.style.color = themeColor ?? getComputedStyle(frameRef).color;
+    frameWindow.document.body.style.margin = "0";
+
+    const handleFrameClick = () => handleClick();
+
+    if (isEditable) {
+      frameWindow.document.body.style.cursor = "pointer";
+      frameWindow.document.addEventListener("dblclick", startEditing);
+      frameWindow.document.addEventListener("click", handleFrameClick);
+    }
+
+    const resize = () => {
+      const rect = frameWindow.document.body.getBoundingClientRect();
+      setHeight(rect.top + rect.bottom);
+    };
+
+    // Resize
+    const resizeObserver = new ResizeObserver(() => {
+      resize();
     });
-  }, [frameRef, startEditing, isEditable, handleClick]);
+    resizeObserver.observe(frameWindow.document.body);
+
+    return () => {
+      frameWindow.document.removeEventListener("dblclick", startEditing);
+      frameWindow.document.removeEventListener("click", handleFrameClick);
+      resizeObserver.disconnect();
+    };
+  }, [frameRef, startEditing, isEditable, handleClick, html, themeColor]);
 
   useLayoutEffect(() => initializeIframe(), [initializeIframe]);
 
@@ -145,7 +167,6 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
             <IFrame
               key={html}
               ref={setFrameRef}
-              srcDoc={html}
               frameBorder="0"
               scrolling="no"
               $height={height}
@@ -180,10 +201,12 @@ const Title = styled.div`
 `;
 
 const IFrame = styled.iframe<{ $height: number }>`
+  display: block;
   border: none;
   padding: 5px;
   height: ${({ $height }) => $height}px;
   width: 100%;
+  min-width: 100%;
 `;
 
 const InputField = styled.textarea<{ minHeight: number }>`

diff --git a/src/components/molecules/Visualizer/Block/index.tsx b/src/components/molecules/Visualizer/Block/index.tsx
@@ -3,6 +3,7 @@ import { ComponentType } from "react";
 import { styled } from "@reearth/theme";
 import { ValueType, ValueTypes } from "@reearth/util/value";
 
+import type { SceneProperty } from "../Engine";
 import { Viewport } from "../hooks";
 import Plugin from "../Plugin";
 import type { Block, Layer, InfoboxProperty, CommonProps as PluginCommonProps } from "../Plugin";
@@ -19,6 +20,7 @@ export type Props<BP = any> = {
   block?: Block<BP>;
   infoboxProperty?: InfoboxProperty;
   viewport?: Viewport;
+  theme?: SceneProperty["theme"];
   onClick?: () => void;
   onChange?: <T extends ValueType>(
     schemaItemId: string,

diff --git a/src/components/molecules/Visualizer/Infobox/index.tsx b/src/components/molecules/Visualizer/Infobox/index.tsx
@@ -125,6 +125,7 @@ const Infobox: React.FC<Props> = ({
             isEditable={isEditable}
             isBuilt={isBuilt}
             infoboxProperty={property}
+            theme={sceneProperty?.theme}
             pluginProperty={
               b.pluginId && b.extensionId
                 ? pluginProperty?.[`${b.pluginId}/${b.extensionId}`]

diff --git a/src/core/Crust/Infobox/Block/HTML/index.tsx b/src/core/Crust/Infobox/Block/HTML/index.tsx
@@ -15,7 +15,15 @@ export type Property = {
   title?: string;
 };
 
-const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, onClick }) => {
+const HTMLBlock: React.FC<Props> = ({
+  block,
+  isSelected,
+  isEditable,
+  infoboxProperty,
+  theme,
+  onChange,
+  onClick,
+}) => {
   const t = useT();
   const { html, title } = block?.property ?? {};
 
@@ -76,6 +84,7 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
   );
 
   // iframe
+  const themeColor = infoboxProperty?.typography?.color ?? theme?.mainText;
   const [frameRef, setFrameRef] = useState<HTMLIFrameElement | null>(null);
   const [height, setHeight] = useState(15);
   const initializeIframe = useCallback(() => {
@@ -85,29 +94,42 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
       return;
     }
 
-    frameWindow.addEventListener("load", () => {
-      // Initialize styles
-      frameWindow.document.body.style.color = getComputedStyle(frameRef).color;
-      frameWindow.document.body.style.margin = "0";
-
-      if (isEditable) {
-        frameWindow.document.body.style.cursor = "pointer";
-        frameWindow.document.addEventListener("dblclick", startEditing);
-        frameWindow.document.addEventListener("click", () => handleClick());
-      }
-
-      const resize = () => {
-        const rect = frameWindow.document.body.getBoundingClientRect();
-        setHeight(rect.top + rect.bottom);
-      };
-
-      // Resize
-      const resizeObserver = new ResizeObserver(() => {
-        resize();
-      });
-      resizeObserver.observe(frameWindow.document.body);
+    if (!frameDocument.body.innerHTML.length) {
+      // `document.write()` is not recommended API by HTML spec,
+      // but we need to use this API to make it work correctly on Safari.
+      // If Safari supports `onLoad` event with `srcDoc`, we can remove this line.
+      frameDocument.write(html || "");
+    }
+
+    // Initialize styles
+    frameWindow.document.body.style.color = themeColor ?? getComputedStyle(frameRef).color;
+    frameWindow.document.body.style.margin = "0";
+
+    const handleFrameClick = () => handleClick();
+
+    if (isEditable) {
+      frameWindow.document.body.style.cursor = "pointer";
+      frameWindow.document.addEventListener("dblclick", startEditing);
+      frameWindow.document.addEventListener("click", handleFrameClick);
+    }
+
+    const resize = () => {
+      const rect = frameWindow.document.body.getBoundingClientRect();
+      setHeight(rect.top + rect.bottom);
+    };
+
+    // Resize
+    const resizeObserver = new ResizeObserver(() => {
+      resize();
     });
-  }, [frameRef, startEditing, isEditable, handleClick]);
+    resizeObserver.observe(frameWindow.document.body);
+
+    return () => {
+      frameWindow.document.removeEventListener("dblclick", startEditing);
+      frameWindow.document.removeEventListener("click", handleFrameClick);
+      resizeObserver.disconnect();
+    };
+  }, [frameRef, startEditing, isEditable, handleClick, html, themeColor]);
 
   useLayoutEffect(() => initializeIframe(), [initializeIframe]);
 
@@ -145,7 +167,6 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
               ref={setFrameRef}
               frameBorder="0"
               scrolling="no"
-              srcDoc={html}
               $height={height}
               allowFullScreen
               sandbox="allow-same-origin allow-popups allow-forms"
@@ -178,10 +199,12 @@ const Title = styled.div`
 `;
 
 const IFrame = styled.iframe<{ $height: number }>`
+  display: block;
   border: none;
   padding: 5px;
   height: ${({ $height }) => $height}px;
   width: 100%;
+  min-width: 100%;
 `;
 
 const InputField = styled.textarea<{ minHeight: number }>`

diff --git a/src/core/Crust/Infobox/Block/index.tsx b/src/core/Crust/Infobox/Block/index.tsx
@@ -4,6 +4,7 @@ import type { Layer } from "@reearth/core/mantle";
 import { styled } from "@reearth/theme";
 import type { ValueType, ValueTypes } from "@reearth/util/value";
 
+import { Theme } from "../../types";
 import type { Block, BlockProps, InfoboxProperty } from "../types";
 
 import builtin from "./builtin";
@@ -21,6 +22,7 @@ export type CommonProps<BP = any> = {
   isSelected?: boolean;
   block?: Block<BP>;
   infoboxProperty?: InfoboxProperty;
+  theme?: Theme;
   onClick?: () => void;
   onChange?: <T extends ValueType>(
     schemaItemId: string,

diff --git a/src/core/Crust/Infobox/index.tsx b/src/core/Crust/Infobox/index.tsx
@@ -125,6 +125,7 @@ const Infobox: React.FC<Props> = ({
             isEditable={isEditable}
             isBuilt={isBuilt}
             infoboxProperty={property}
+            theme={infoboxTheme}
             onChange={(...args) => onBlockChange?.(b.id, ...args, props.layer)}
             onClick={() => {
               if (b.id && selectedBlockId !== b.id) {