feat: add Super note type to list of note types (#2086)

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

@@ -7,6 +7,7 @@ import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
 
 export type EditorOption = DropdownItem & {
   value: FeatureIdentifier
+  isLabs?: boolean
 }
 
 export function noteTypeForEditorOptionValue(value: EditorOption['value'], application: WebApplication): NoteType {
@@ -45,14 +46,13 @@ export function getDropdownItemsForAllEditors(application: WebApplication): Edit
 
   options.push(plaintextOption)
 
-  if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
-    options.push({
-      icon: SuperEditorMetadata.icon,
-      iconClassName: SuperEditorMetadata.iconClassName,
-      label: SuperEditorMetadata.name,
-      value: FeatureIdentifier.SuperEditor,
-    })
-  }
+  options.push({
+    icon: SuperEditorMetadata.icon,
+    iconClassName: SuperEditorMetadata.iconClassName,
+    label: SuperEditorMetadata.name,
+    value: FeatureIdentifier.SuperEditor,
+    isLabs: true,
+  })
 
   options.sort((a, b) => {
     return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1

packages/web/src/javascripts/Utils/Items/Icons/getIconAndTintForNoteType.ts

@@ -2,7 +2,7 @@ import { PlainEditorMetadata, SuperEditorMetadata } from '@/Constants/Constants'
 import { NoteType } from '@standardnotes/features'
 import { IconType } from '@standardnotes/models'
 
-export function getIconAndTintForNoteType(noteType?: NoteType): [IconType, number] {
+export function getIconAndTintForNoteType(noteType?: NoteType, subtle?: boolean): [IconType, number] {
   switch (noteType) {
     case NoteType.RichText:
       return ['rich-text', 1]
@@ -17,7 +17,10 @@ export function getIconAndTintForNoteType(noteType?: NoteType): [IconType, numbe
     case NoteType.Code:
       return ['code', 4]
     case NoteType.Super:
-      return [SuperEditorMetadata.icon, SuperEditorMetadata.iconTintNumber]
+      return [
+        subtle ? (SuperEditorMetadata.subtleIcon as IconType) : SuperEditorMetadata.icon,
+        SuperEditorMetadata.iconTintNumber,
+      ]
     default:
       return [PlainEditorMetadata.icon, PlainEditorMetadata.iconTintNumber]
   }

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

@@ -72,7 +72,7 @@ const insertInstalledComponentsInMap = (
   })
 }
 
-const createGroupsFromMap = (map: NoteTypeToEditorRowsMap, application: WebApplication): EditorMenuGroup[] => {
+const createGroupsFromMap = (map: NoteTypeToEditorRowsMap, _application: WebApplication): EditorMenuGroup[] => {
   const groups: EditorMenuGroup[] = [
     {
       icon: 'plain-text',
@@ -80,6 +80,13 @@ const createGroupsFromMap = (map: NoteTypeToEditorRowsMap, application: WebAppli
       title: 'Plain text',
       items: map[NoteType.Plain],
     },
+    {
+      icon: SuperEditorMetadata.icon,
+      iconClassName: SuperEditorMetadata.iconClassName,
+      title: SuperEditorMetadata.name,
+      items: map[NoteType.Super],
+      featured: true,
+    },
     {
       icon: 'rich-text',
       iconClassName: 'text-accessory-tint-1',
@@ -124,16 +131,6 @@ const createGroupsFromMap = (map: NoteTypeToEditorRowsMap, application: WebAppli
     },
   ]
 
-  if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
-    groups.splice(1, 0, {
-      icon: SuperEditorMetadata.icon,
-      iconClassName: SuperEditorMetadata.iconClassName,
-      title: SuperEditorMetadata.name,
-      items: map[NoteType.Super],
-      featured: true,
-    })
-  }
-
   return groups
 }
 
@@ -146,7 +143,16 @@ const createBaselineMap = (application: WebApplication): NoteTypeToEditorRowsMap
         noteType: NoteType.Plain,
       },
     ],
-    [NoteType.Super]: [],
+    [NoteType.Super]: [
+      {
+        name: SuperEditorMetadata.name,
+        isEntitled: application.features.getFeatureStatus(FeatureIdentifier.SuperEditor) === FeatureStatus.Entitled,
+        noteType: NoteType.Super,
+        isLabs: true,
+        description:
+          'A new way to edit notes. Type / to bring up the block selection menu, or @ to embed images or link other tags and notes. Type - then space to start a list, or [] then space to start a checklist. Drag and drop an image or file to embed it in your note.',
+      },
+    ],
     [NoteType.RichText]: [],
     [NoteType.Markdown]: [],
     [NoteType.Task]: [],
@@ -156,14 +162,6 @@ const createBaselineMap = (application: WebApplication): NoteTypeToEditorRowsMap
     [NoteType.Unknown]: [],
   }
 
-  if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
-    map[NoteType.Super].push({
-      name: SuperEditorMetadata.name,
-      isEntitled: true,
-      noteType: NoteType.Super,
-    })
-  }
-
   return map
 }