chore: super conversion dialog (#2669)

packages/web/src/javascripts/Components/ComponentView/IframeFeatureView.tsx

@@ -21,6 +21,7 @@ interface Props {
   requestReload?: (viewer: ComponentViewerInterface, force?: boolean) => void
   onLoad?: () => void
   readonly?: boolean
+  usedInModal?: boolean
 }
 
 /**
@@ -31,7 +32,13 @@ const MaxLoadThreshold = 4000
 const VisibilityChangeKey = 'visibilitychange'
 const MSToWaitAfterIframeLoadToAvoidFlicker = 35
 
-const IframeFeatureView: FunctionComponent<Props> = ({ onLoad, componentViewer, requestReload, readonly = false }) => {
+const IframeFeatureView: FunctionComponent<Props> = ({
+  onLoad,
+  componentViewer,
+  requestReload,
+  readonly = false,
+  usedInModal = false,
+}) => {
   const application = useApplication()
 
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
@@ -241,6 +248,7 @@ const IframeFeatureView: FunctionComponent<Props> = ({ onLoad, componentViewer,
           frameBorder={0}
           src={componentViewer.url || ''}
           sandbox={sandboxAttributes.join(' ')}
+          {...(usedInModal && { 'data-used-in-modal': true })}
         >
           Loading
         </iframe>

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -134,7 +134,11 @@ const PositionedPopoverContent = ({
         }}
         onBlur={() => {
           setTimeout(() => {
-            if (document.activeElement && document.activeElement.tagName === 'IFRAME') {
+            if (
+              document.activeElement &&
+              document.activeElement.tagName === 'IFRAME' &&
+              !document.activeElement.getAttribute('data-used-in-modal')
+            ) {
               togglePopover?.()
             }
           })

packages/web/src/javascripts/Components/SuperEditor/SuperNoteConverter.tsx

@@ -191,7 +191,12 @@ const SuperNoteConverter = ({
       ) : null}
       {componentViewer ? (
         <div className="component-view min-h-0">
-          <IframeFeatureView key={componentViewer.identifier} componentViewer={componentViewer} />
+          <IframeFeatureView
+            usedInModal
+            readonly={true}
+            key={componentViewer.identifier}
+            componentViewer={componentViewer}
+          />
         </div>
       ) : (
         <div className="h-full min-h-0 overflow-hidden">