fix: Fixes issue where lock screen would not use previously active theme (#2372)

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

@@ -1,11 +1,15 @@
-import { FeatureIdentifier } from '@standardnotes/snjs'
-import { ComponentArea, FindNativeFeature, GetIframeAndNativeEditors } from '@standardnotes/features'
+import {
+  ComponentArea,
+  FindNativeFeature,
+  GetIframeAndNativeEditors,
+  NativeFeatureIdentifier,
+} from '@standardnotes/features'
 import { getIconAndTintForNoteType } from './Items/Icons/getIconAndTintForNoteType'
 import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
 import { WebApplicationInterface } from '@standardnotes/ui-services'
 
 export type EditorOption = DropdownItem & {
-  value: FeatureIdentifier
+  value: string
   isLabs?: boolean
 }
 
@@ -19,6 +23,7 @@ export function getDropdownItemsForAllEditors(application: WebApplicationInterfa
       return {
         label: editor.name,
         value: editor.identifier,
+        id: NativeFeatureIdentifier.create(editor.identifier).getValue(),
         ...(iconType ? { icon: iconType } : null),
         ...(tint ? { iconClassName: `text-accessory-tint-${tint}` } : null),
       }
@@ -30,12 +35,11 @@ export function getDropdownItemsForAllEditors(application: WebApplicationInterfa
       .thirdPartyComponentsForArea(ComponentArea.Editor)
       .filter((component) => FindNativeFeature(component.identifier) === undefined)
       .map((editor): EditorOption => {
-        const identifier = editor.package_info.identifier
         const [iconType, tint] = getIconAndTintForNoteType(editor.noteType)
 
         return {
           label: editor.displayName,
-          value: identifier,
+          value: editor.uuid,
           ...(iconType ? { icon: iconType } : null),
           ...(tint ? { iconClassName: `text-accessory-tint-${tint}` } : null),
         }

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

@@ -1,7 +1,7 @@
-import { UIFeature, FeatureIdentifier, ThemeFeatureDescription } from '@standardnotes/snjs'
+import { UIFeature, NativeFeatureIdentifier, ThemeFeatureDescription } from '@standardnotes/snjs'
 
 const isDarkModeTheme = (theme: UIFeature<ThemeFeatureDescription>) =>
-  theme.featureIdentifier === FeatureIdentifier.DarkTheme
+  theme.featureIdentifier === NativeFeatureIdentifier.TYPES.DarkTheme
 
 export const sortThemes = (a: UIFeature<ThemeFeatureDescription>, b: UIFeature<ThemeFeatureDescription>) => {
   const aIsLayerable = a.layerable

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

@@ -7,6 +7,8 @@ import {
   GetSuperNoteFeature,
   UIFeature,
   IframeComponentFeatureDescription,
+  Uuid,
+  NativeFeatureIdentifier,
 } from '@standardnotes/snjs'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
 import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
@@ -29,7 +31,9 @@ const insertNativeEditorsInMap = (map: NoteTypeToEditorRowsMap, application: Web
 
     const noteType = editorFeature.note_type
     map[noteType].push({
-      isEntitled: application.features.getFeatureStatus(editorFeature.identifier) === FeatureStatus.Entitled,
+      isEntitled:
+        application.features.getFeatureStatus(NativeFeatureIdentifier.create(editorFeature.identifier).getValue()) ===
+        FeatureStatus.Entitled,
       uiFeature: new UIFeature(editorFeature),
     })
   }
@@ -52,7 +56,7 @@ const insertInstalledComponentsInMap = (map: NoteTypeToEditorRowsMap, applicatio
 
     const editorItem: EditorMenuItem = {
       uiFeature: new UIFeature<IframeComponentFeatureDescription>(editor),
-      isEntitled: application.features.getFeatureStatus(editor.identifier) === FeatureStatus.Entitled,
+      isEntitled: application.features.getFeatureStatus(Uuid.create(editor.uuid).getValue()) === FeatureStatus.Entitled,
     }
 
     map[noteType].push(editorItem)