feat(labs): super editor (#2001)

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

@@ -1,23 +1,34 @@
-import { ComponentArea, FeatureIdentifier } from '@standardnotes/features'
-import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
+import { FeatureIdentifier } from '@standardnotes/snjs'
+import { ComponentArea, NoteType } from '@standardnotes/features'
 import { WebApplication } from '@/Application/Application'
-import { BLOCKS_EDITOR_NAME, PLAIN_EDITOR_NAME } from '@/Constants/Constants'
-import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
+import { PlainEditorMetadata, SuperEditorMetadata } from '@/Constants/Constants'
 import { getIconAndTintForNoteType } from './Items/Icons/getIconAndTintForNoteType'
-
-export const PlainEditorType = 'plain-editor'
-export const BlocksType = 'blocks-editor'
+import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
 
 export type EditorOption = DropdownItem & {
-  value: FeatureIdentifier | typeof PlainEditorType | typeof BlocksType
+  value: FeatureIdentifier
 }
 
-export function getDropdownItemsForAllEditors(application: WebApplication) {
+export function noteTypeForEditorOptionValue(value: EditorOption['value'], application: WebApplication): NoteType {
+  if (value === FeatureIdentifier.PlainEditor) {
+    return NoteType.Plain
+  } else if (value === FeatureIdentifier.SuperEditor) {
+    return NoteType.Super
+  }
+
+  const matchingEditor = application.componentManager
+    .componentsForArea(ComponentArea.Editor)
+    .find((editor) => editor.identifier === value)
+
+  return matchingEditor ? matchingEditor.noteType : NoteType.Unknown
+}
+
+export function getDropdownItemsForAllEditors(application: WebApplication): EditorOption[] {
   const plaintextOption: EditorOption = {
-    icon: 'plain-text',
-    iconClassName: 'text-accessory-tint-1',
-    label: PLAIN_EDITOR_NAME,
-    value: PlainEditorType,
+    icon: PlainEditorMetadata.icon,
+    iconClassName: PlainEditorMetadata.iconClassName,
+    label: PlainEditorMetadata.name,
+    value: FeatureIdentifier.PlainEditor,
   }
 
   const options = application.componentManager.componentsForArea(ComponentArea.Editor).map((editor): EditorOption => {
@@ -34,12 +45,12 @@ export function getDropdownItemsForAllEditors(application: WebApplication) {
 
   options.push(plaintextOption)
 
-  if (featureTrunkEnabled(FeatureTrunkName.Blocks)) {
+  if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
     options.push({
-      icon: 'dashboard',
-      iconClassName: 'text-accessory-tint-1',
-      label: BLOCKS_EDITOR_NAME,
-      value: BlocksType,
+      icon: SuperEditorMetadata.icon,
+      iconClassName: SuperEditorMetadata.iconClassName,
+      label: SuperEditorMetadata.name,
+      value: FeatureIdentifier.SuperEditor,
     })
   }
 

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

@@ -1,3 +1,4 @@
+import { PlainEditorMetadata, SuperEditorMetadata } from '@/Constants/Constants'
 import { NoteType } from '@standardnotes/features'
 import { IconType } from '@standardnotes/models'
 
@@ -15,7 +16,9 @@ export function getIconAndTintForNoteType(noteType?: NoteType): [IconType, numbe
       return ['tasks', 3]
     case NoteType.Code:
       return ['code', 4]
+    case NoteType.Super:
+      return [SuperEditorMetadata.icon, SuperEditorMetadata.iconTintNumber]
     default:
-      return ['plain-text', 1]
+      return [PlainEditorMetadata.icon, PlainEditorMetadata.iconTintNumber]
   }
 }

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

@@ -1,4 +1,3 @@
-import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
 import { WebApplication } from '@/Application/Application'
 import {
   ContentType,
@@ -8,10 +7,11 @@ import {
   FeatureDescription,
   GetFeatures,
   NoteType,
+  FeatureIdentifier,
 } from '@standardnotes/snjs'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
 import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
-import { BLOCKS_EDITOR_NAME, PLAIN_EDITOR_NAME } from '@/Constants/Constants'
+import { PlainEditorMetadata, SuperEditorMetadata } from '@/Constants/Constants'
 
 type NoteTypeToEditorRowsMap = Record<NoteType, EditorMenuItem[]>
 
@@ -72,7 +72,7 @@ const insertInstalledComponentsInMap = (
   })
 }
 
-const createGroupsFromMap = (map: NoteTypeToEditorRowsMap): EditorMenuGroup[] => {
+const createGroupsFromMap = (map: NoteTypeToEditorRowsMap, application: WebApplication): EditorMenuGroup[] => {
   const groups: EditorMenuGroup[] = [
     {
       icon: 'plain-text',
@@ -124,12 +124,12 @@ const createGroupsFromMap = (map: NoteTypeToEditorRowsMap): EditorMenuGroup[] =>
     },
   ]
 
-  if (featureTrunkEnabled(FeatureTrunkName.Blocks)) {
+  if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
     groups.splice(1, 0, {
-      icon: 'file-doc',
-      iconClassName: 'text-accessory-tint-4',
-      title: BLOCKS_EDITOR_NAME,
-      items: map[NoteType.Blocks],
+      icon: SuperEditorMetadata.icon,
+      iconClassName: SuperEditorMetadata.iconClassName,
+      title: SuperEditorMetadata.name,
+      items: map[NoteType.Super],
       featured: true,
     })
   }
@@ -137,16 +137,16 @@ const createGroupsFromMap = (map: NoteTypeToEditorRowsMap): EditorMenuGroup[] =>
   return groups
 }
 
-const createBaselineMap = (): NoteTypeToEditorRowsMap => {
+const createBaselineMap = (application: WebApplication): NoteTypeToEditorRowsMap => {
   const map: NoteTypeToEditorRowsMap = {
     [NoteType.Plain]: [
       {
-        name: PLAIN_EDITOR_NAME,
+        name: PlainEditorMetadata.name,
         isEntitled: true,
         noteType: NoteType.Plain,
       },
     ],
-    [NoteType.Blocks]: [],
+    [NoteType.Super]: [],
     [NoteType.RichText]: [],
     [NoteType.Markdown]: [],
     [NoteType.Task]: [],
@@ -156,11 +156,11 @@ const createBaselineMap = (): NoteTypeToEditorRowsMap => {
     [NoteType.Unknown]: [],
   }
 
-  if (featureTrunkEnabled(FeatureTrunkName.Blocks)) {
-    map[NoteType.Blocks].push({
-      name: BLOCKS_EDITOR_NAME,
+  if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
+    map[NoteType.Super].push({
+      name: SuperEditorMetadata.name,
       isEntitled: true,
-      noteType: NoteType.Blocks,
+      noteType: NoteType.Super,
     })
   }
 
@@ -168,11 +168,11 @@ const createBaselineMap = (): NoteTypeToEditorRowsMap => {
 }
 
 export const createEditorMenuGroups = (application: WebApplication, components: SNComponent[]) => {
-  const map = createBaselineMap()
+  const map = createBaselineMap(application)
 
   insertNonInstalledNativeComponentsInMap(map, components, application)
 
   insertInstalledComponentsInMap(map, components, application)
 
-  return createGroupsFromMap(map)
+  return createGroupsFromMap(map, application)
 }