refactor: native feature management (#2350)

packages/web/src/javascripts/Components/NotesOptions/EditorMenuItem.tsx

@@ -1,10 +1,11 @@
-import { NoteType, SNComponent } from '@standardnotes/snjs'
+import {
+  ComponentOrNativeFeature,
+  EditorFeatureDescription,
+  IframeComponentFeatureDescription,
+} from '@standardnotes/snjs'
 
 export type EditorMenuItem = {
-  name: string
-  component?: SNComponent
+  uiFeature: ComponentOrNativeFeature<EditorFeatureDescription | IframeComponentFeatureDescription>
   isEntitled: boolean
-  noteType: NoteType
   isLabs?: boolean
-  description?: string
 }

packages/web/src/javascripts/Components/NotesOptions/NoteAttributes.tsx

@@ -1,10 +1,11 @@
 import { useMemo, FunctionComponent } from 'react'
-import { SNApplication, SNNote, classNames } from '@standardnotes/snjs'
+import { SNNote, classNames } from '@standardnotes/snjs'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { calculateReadTime } from './Utils/calculateReadTime'
 import { countNoteAttributes } from './Utils/countNoteAttributes'
+import { WebApplicationInterface } from '@standardnotes/ui-services'
 
-export const useNoteAttributes = (application: SNApplication, note: SNNote) => {
+export const useNoteAttributes = (application: WebApplicationInterface, note: SNNote) => {
   const { words, characters, paragraphs } = useMemo(() => countNoteAttributes(note.text), [note.text])
 
   const readTime = useMemo(() => (typeof words === 'number' ? calculateReadTime(words) : 'N/A'), [words])
@@ -14,7 +15,7 @@ export const useNoteAttributes = (application: SNApplication, note: SNNote) => {
   const dateCreated = useMemo(() => formatDateForContextMenu(note.created_at), [note.created_at])
 
   const editor = application.componentManager.editorForNote(note)
-  const format = editor?.package_info?.file_type || 'txt'
+  const format = editor.fileType
 
   return {
     words,
@@ -28,7 +29,7 @@ export const useNoteAttributes = (application: SNApplication, note: SNNote) => {
 }
 
 export const NoteAttributes: FunctionComponent<{
-  application: SNApplication
+  application: WebApplicationInterface
   note: SNNote
   className?: string
 }> = ({ application, note, className }) => {

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

@@ -409,7 +409,9 @@ const NotesOptions = ({
 
           <HorizontalSeparator classes="my-2" />
 
-          <SpellcheckOptions editorForNote={editorForNote} notesController={notesController} note={notes[0]} />
+          {editorForNote && (
+            <SpellcheckOptions editorForNote={editorForNote} notesController={notesController} note={notes[0]} />
+          )}
 
           <HorizontalSeparator classes="my-2" />
 

packages/web/src/javascripts/Components/NotesOptions/SpellcheckOptions.tsx

@@ -1,16 +1,21 @@
 import Icon from '@/Components/Icon/Icon'
 import { FunctionComponent } from 'react'
-import { SNComponent, SNNote } from '@standardnotes/snjs'
+import {
+  ComponentOrNativeFeature,
+  EditorFeatureDescription,
+  IframeComponentFeatureDescription,
+  SNNote,
+} from '@standardnotes/snjs'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { iconClass } from './ClassNames'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 
 export const SpellcheckOptions: FunctionComponent<{
-  editorForNote: SNComponent | undefined
+  editorForNote: ComponentOrNativeFeature<EditorFeatureDescription | IframeComponentFeatureDescription>
   notesController: NotesController
   note: SNNote
 }> = ({ editorForNote, notesController, note }) => {
-  const spellcheckControllable = Boolean(!editorForNote || editorForNote.package_info.spellcheckControl)
+  const spellcheckControllable = editorForNote.featureDescription.spellcheckControl
   const noteSpellcheck = !spellcheckControllable
     ? true
     : note