refactor: native feature management (#2350)

packages/web/src/javascripts/Components/SuperEditor/Plugins/RemoteImagePlugin/RemoteImageComponent.tsx

@@ -41,7 +41,7 @@ const RemoteImageComponent = ({ className, src, alt, node, format, nodeKey }: Pr
       const blob = await response.blob()
       const file = new File([blob], src, { type: blob.type })
 
-      const { filesController, linkingController } = application.getViewControllerManager()
+      const { filesController, linkingController } = application.controllers
 
       const uploadedFile = await filesController.uploadNewFile(file, false)
 

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

@@ -6,6 +6,10 @@ import {
   EditorLineHeight,
   isPayloadSourceRetrieved,
   PrefKey,
+  PrefDefaults,
+  FeatureIdentifier,
+  FeatureStatus,
+  GetSuperNoteFeature,
 } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { BlocksEditor } from './BlocksEditor'
@@ -30,7 +34,6 @@ import {
   ChangeEditorFunction,
 } from './Plugins/ChangeContentCallback/ChangeContentCallback'
 import PasswordPlugin from './Plugins/PasswordPlugin/PasswordPlugin'
-import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { useCommandService } from '@/Components/CommandProvider'
 import { SUPER_SHOW_MARKDOWN_PREVIEW } from '@standardnotes/ui-services'
 import { SuperNoteMarkdownPreview } from './SuperNoteMarkdownPreview'
@@ -45,6 +48,7 @@ import ModalOverlay from '@/Components/Modal/ModalOverlay'
 import MobileToolbarPlugin from './Plugins/MobileToolbarPlugin/MobileToolbarPlugin'
 import CodeOptionsPlugin from './Plugins/CodeOptionsPlugin/CodeOptions'
 import RemoteImagePlugin from './Plugins/RemoteImagePlugin/RemoteImagePlugin'
+import NotEntitledBanner from '../ComponentView/NotEntitledBanner'
 
 export const SuperNotePreviewCharLimit = 160
 
@@ -68,6 +72,11 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const ignoreNextChange = useRef(false)
   const [showMarkdownPreview, setShowMarkdownPreview] = useState(false)
   const getMarkdownPlugin = useRef<GetMarkdownPluginInterface | null>(null)
+  const [featureStatus, setFeatureStatus] = useState<FeatureStatus>(FeatureStatus.Entitled)
+
+  useEffect(() => {
+    setFeatureStatus(application.features.getFeatureStatus(FeatureIdentifier.SuperEditor))
+  }, [application.features])
 
   const commandService = useCommandService()
 
@@ -194,6 +203,9 @@ export const SuperEditor: FunctionComponent<Props> = ({
 
   return (
     <div className="font-editor relative flex h-full w-full flex-col md:block" ref={ref}>
+      {featureStatus !== FeatureStatus.Entitled && (
+        <NotEntitledBanner featureStatus={featureStatus} feature={GetSuperNoteFeature()} />
+      )}
       <ErrorBoundary>
         <LinkingControllerProvider controller={linkingController}>
           <FilesControllerProvider controller={filesController}>

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

@@ -1,7 +1,14 @@
-import { ContentType, NoteContent, NoteType, SNNote, spaceSeparatedStrings } from '@standardnotes/snjs'
+import {
+  ContentType,
+  NoteContent,
+  NoteType,
+  SNNote,
+  isIframeUIFeature,
+  spaceSeparatedStrings,
+} from '@standardnotes/snjs'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useApplication } from '../ApplicationProvider'
-import ComponentView from '../ComponentView/ComponentView'
+import IframeFeatureView from '../ComponentView/IframeFeatureView'
 import Icon from '../Icon/Icon'
 import Modal, { ModalAction } from '../Modal/Modal'
 import { EditorMenuItem } from '../NotesOptions/EditorMenuItem'
@@ -20,27 +27,30 @@ const SuperNoteConverter = ({
   onComplete: () => void
 }) => {
   const application = useApplication()
-  const { name, noteType, component } = convertTo
+  const { uiFeature } = convertTo
 
   const format = useMemo(() => {
-    if (component && component.package_info.file_type) {
-      return component.package_info.file_type
+    if (uiFeature) {
+      const fileType = uiFeature.fileType
+      if (fileType) {
+        return fileType
+      }
     }
 
-    if (noteType === NoteType.Markdown) {
+    if (uiFeature.noteType === NoteType.Markdown) {
       return 'md'
     }
 
-    if (noteType === NoteType.RichText) {
+    if (uiFeature.noteType === NoteType.RichText) {
       return 'html'
     }
 
-    if (noteType === NoteType.Plain) {
+    if (uiFeature.noteType === NoteType.Plain) {
       return 'txt'
     }
 
     return 'json'
-  }, [component, noteType])
+  }, [uiFeature])
 
   const convertedContent = useMemo(() => {
     if (note.text.length === 0) {
@@ -51,7 +61,7 @@ const SuperNoteConverter = ({
   }, [format, note])
 
   const componentViewer = useMemo(() => {
-    if (!component) {
+    if (!uiFeature || !isIframeUIFeature(uiFeature)) {
       return undefined
     }
 
@@ -61,12 +71,12 @@ const SuperNoteConverter = ({
       references: note.references,
     })
 
-    const componentViewer = application.componentManager.createComponentViewer(component)
-    componentViewer.setReadonly(true)
-    componentViewer.lockReadonly = true
-    componentViewer.overrideContextItem = templateNoteForRevision
+    const componentViewer = application.componentManager.createComponentViewer(uiFeature, {
+      readonlyItem: templateNoteForRevision,
+    })
+
     return componentViewer
-  }, [application.componentManager, application.items, component, convertedContent, note.references, note.title])
+  }, [application.componentManager, application.items, uiFeature, convertedContent, note.references, note.title])
 
   useEffect(() => {
     return () => {
@@ -163,7 +173,7 @@ const SuperNoteConverter = ({
       ) : null}
       {componentViewer ? (
         <div className="component-view min-h-0">
-          <ComponentView key={componentViewer.identifier} componentViewer={componentViewer} application={application} />
+          <IframeFeatureView key={componentViewer.identifier} componentViewer={componentViewer} />
         </div>
       ) : (
         <div className="h-full min-h-0 overflow-hidden">