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">

packages/web/src/javascripts/Utils/createEditorMenuGroups.ts

@@ -24,8 +24,7 @@ const insertNativeEditorsInMap = (map: NoteTypeToEditorRowsMap, application: Web
       continue
     }
 
-    const isDeprecated = editorFeature.deprecated
-    if (isDeprecated) {
+    if (editorFeature.deprecated) {
       continue
     }
 
@@ -47,8 +46,16 @@ const insertInstalledComponentsInMap = (map: NoteTypeToEditorRowsMap, applicatio
     })
 
   for (const editor of thirdPartyOrInstalledEditors) {
-    const nativeFeature = FindNativeFeature(editor.identifier)
-    if (nativeFeature && !nativeFeature.deprecated) {
+    const nativeFeature = FindNativeFeature(editor.identifier) as IframeComponentFeatureDescription
+
+    if (nativeFeature) {
+      map[nativeFeature.note_type].push({
+        isEntitled:
+          application.features.getFeatureStatus(NativeFeatureIdentifier.create(nativeFeature.identifier).getValue()) ===
+          FeatureStatus.Entitled,
+        uiFeature: new UIFeature(nativeFeature),
+      })
+
       continue
     }