diff --git a/services/plugin/src/Plugin.tsx b/services/plugin/src/Plugin.tsx index ed566224..abbad198 100644 --- a/services/plugin/src/Plugin.tsx +++ b/services/plugin/src/Plugin.tsx @@ -59,7 +59,14 @@ export const Plugin = ({ useState(false) const [inErrorState, setInErrorState] = useState(false) + // height and width values to be set by callbacks passed to the plugin + // (these default sizes will be quickly overwritten by the plugin) + // in order to behave like a normal block element, by default, the height + // will be set by plugin contents, this state will be used const [resizedHeight, setPluginHeight] = useState(150) + // ...and by default, plugin width will be defined by the container + // (width = 100%), so this state won't be used unless the `clientWidth` + // prop is used to have plugin width defined by plugin contents const [resizedWidth, setPluginWidth] = useState(500) // since we do not know what props are passed, the dependency array has to be keys of whatever is standard prop @@ -91,8 +98,10 @@ export const Plugin = ({ const iframeProps = { ...memoizedPropsToPass, alertsAdd, + // if a dimension is specified or container driven, don't send + // a resize callback to the plugin setPluginHeight: !height ? setPluginHeight : null, - setPluginWidth: !width ? setPluginWidth : null, + setPluginWidth: !width && clientWidth ? setPluginWidth : null, setInErrorState, setCommunicationReceived, clientWidth, @@ -152,8 +161,10 @@ export const Plugin = ({ ref={iframeRef} src={pluginSource} className={className} + // if clientWidth is set, then we want width to be set by plugin. + // otherwise, width={clientWidth ? resizedWidth : width ?? '100%'} - height={height ?? resizedHeight + 'px'} + height={height ?? resizedHeight} style={{ border: 'none' }} /> )