feat: allowing widget and block plugins to resize when they are expandable

src/components/atoms/Plugin/IFrame/hooks.ts

@@ -28,7 +28,7 @@ export default function useHook({
   autoResizeMessageKey?: string;
   html?: string;
   ref?: Ref<RefType>;
-  autoResize?: boolean;
+  autoResize?: "both" | "width-only" | "height-only";
   visible?: boolean;
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
@@ -137,8 +137,17 @@ export default function useHook({
     () => ({
       style: {
         display: visible ? undefined : "none",
-        width: visible ? (autoResize ? iFrameSize?.[0] : "100%") : "0px",
-        height: visible ? (autoResize ? iFrameSize?.[1] : "100%") : "0px",
+        // TODO: width iFrameSize?.[0]
+        width: visible
+          ? autoResize == "height-only" || autoResize == "both"
+            ? "100%"
+            : iFrameSize?.[0]
+          : "0px",
+        height: visible
+          ? autoResize == "width-only" || autoResize == "both"
+            ? "100%"
+            : iFrameSize?.[1]
+          : "0px",
         minWidth: "100%",
         maxWidth: "100%",
         ...iFrameProps?.style,

src/components/atoms/Plugin/IFrame/index.stories.tsx

@@ -29,7 +29,6 @@ export const Default: Story<Props> = args => {
 };
 
 Default.args = {
-  autoResize: false,
   visible: true,
   iFrameProps: {
     style: {

src/components/atoms/Plugin/IFrame/index.tsx

@@ -5,7 +5,7 @@ import useHook, { RefType } from "./hooks";
 export type Ref = RefType;
 
 export type Props = {
-  autoResize?: boolean;
+  autoResize?: "both" | "width-only" | "height-only";
   className?: string;
   html?: string;
   visible?: boolean;
@@ -37,7 +37,7 @@ const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
   return html ? (
     <iframe
       frameBorder="no"
-      scrolling={autoResize ? "no" : undefined}
+      scrolling={autoResize ? undefined : "no"}
       data-testid="iframe"
       srcDoc=""
       key={html}

src/components/atoms/Plugin/index.tsx

@@ -13,7 +13,7 @@ export type Props = {
   src?: string;
   sourceCode?: string;
   renderPlaceholder?: ReactNode;
-  filled?: boolean;
+  autoResize?: "both" | "width-only" | "height-only";
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   isMarshalable?: boolean | "json" | ((target: any) => boolean | "json");
   exposed?: ((api: IFrameAPI) => { [key: string]: any }) | { [key: string]: any };
@@ -31,7 +31,7 @@ const Plugin: React.FC<Props> = ({
   src,
   sourceCode,
   renderPlaceholder,
-  filled,
+  autoResize,
   iFrameProps,
   isMarshalable,
   exposed,
@@ -55,7 +55,7 @@ const Plugin: React.FC<Props> = ({
 
   return iFrameHtml ? (
     <IFrame
-      autoResize={!filled}
+      autoResize={autoResize}
       className={className}
       html={iFrameHtml}
       ref={iFrameRef}

src/components/molecules/Visualizer/Block/index.tsx

@@ -44,6 +44,7 @@ export default function BlockComponent<P = any, PP = any>({
   ) : (
     <Wrapper editable={props?.isEditable} onClick={props?.onClick} selected={props?.isSelected}>
       <Plugin
+        autoResize="height-only"
         pluginId={props.block?.pluginId}
         extensionId={props.block?.extensionId}
         sourceCode={(props.block as any)?.__REEARTH_SOURCECODE} // for debugging

src/components/molecules/Visualizer/Plugin/hooks.ts

@@ -13,6 +13,7 @@ export default function ({
   pluginId,
   extensionId,
   pluginBaseUrl,
+  autoResize,
   extensionType,
   block,
   layer,
@@ -22,6 +23,7 @@ export default function ({
   pluginId?: string;
   extensionId?: string;
   pluginBaseUrl?: string;
+  autoResize?: "both" | "width-only" | "height-only";
   extensionType?: string;
   layer?: Layer;
   widget?: Widget;
@@ -51,6 +53,16 @@ export default function ({
       ? `${pluginBaseUrl}/${`${pluginId}/${extensionId}`.replace(/\.\./g, "")}.js`
       : undefined;
 
+  const actualAutoResize =
+    autoResize ??
+    (widget?.extended?.horizontally && widget.extended.vertically
+      ? "both"
+      : widget?.extended?.vertically
+      ? "width-only"
+      : widget?.extended?.horizontally
+      ? "height-only"
+      : undefined);
+
   return {
     skip: !staticExposed,
     src,
@@ -60,6 +72,7 @@ export default function ({
     onMessage,
     onPreInit,
     onDispose,
+    actualAutoResize,
   };
 }
 

src/components/molecules/Visualizer/Plugin/index.tsx

@@ -23,6 +23,7 @@ export type Props = {
   pluginId?: string;
   extensionId?: string;
   extensionType?: string;
+  autoResize?: "both" | "width-only" | "height-only";
   visible?: boolean;
   iFrameProps?: PluginProps["iFrameProps"];
   property?: any;
@@ -40,6 +41,7 @@ export default function Plugin({
   pluginId,
   extensionId,
   extensionType,
+  autoResize,
   iFrameProps,
   visible,
   pluginBaseUrl = "/plugins",
@@ -49,11 +51,22 @@ export default function Plugin({
   pluginProperty,
   onClick,
 }: Props): JSX.Element | null {
-  const { skip, src, isMarshalable, onPreInit, onDispose, exposed, onError, onMessage } = useHooks({
+  const {
+    skip,
+    src,
+    isMarshalable,
+    actualAutoResize,
+    onPreInit,
+    onDispose,
+    exposed,
+    onError,
+    onMessage,
+  } = useHooks({
     pluginId,
     extensionId,
     extensionType,
     pluginBaseUrl,
+    autoResize,
     layer,
     widget,
     block,
@@ -65,7 +78,7 @@ export default function Plugin({
       className={className}
       src={src}
       sourceCode={sourceCode}
-      filled={!!widget?.extended?.horizontally || !!widget?.extended?.vertically}
+      autoResize={actualAutoResize}
       iFrameProps={iFrameProps}
       canBeVisible={visible}
       isMarshalable={isMarshalable}