feat: Dropdown component

feat: Add editor icons

feat: Implement default editor selection

app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx

@@ -1,4 +1,5 @@
 import { Dropdown, DropdownItem } from '@/components/Dropdown';
+import { IconType } from '@/components/Icon';
 import {
   PreferencesGroup,
   PreferencesSegment,
@@ -7,7 +8,11 @@ import {
   Title,
 } from '@/preferences/components';
 import { WebApplication } from '@/ui_models/application';
-import { ComponentArea } from '@standardnotes/snjs';
+import {
+  ComponentArea,
+  ComponentMutator,
+  SNComponent,
+} from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
@@ -15,21 +20,85 @@ type Props = {
   application: WebApplication;
 };
 
+const getEditorIconType = (name: string): IconType | null => {
+  switch (name) {
+    case 'Bold Editor':
+    case 'Plus Editor':
+      return 'rich-text';
+    case 'TokenVault':
+      return 'authenticator';
+    case 'Secure Spreadsheets':
+      return 'spreadsheets';
+    case 'Task Editor':
+      return 'tasks';
+    case 'Code Editor':
+      return 'code';
+  }
+  if (name.includes('Markdown')) {
+    return 'markdown';
+  }
+  return null;
+};
+
+const makeEditorDefault = (
+  application: WebApplication,
+  component: SNComponent,
+  currentDefault: SNComponent
+) => {
+  if (currentDefault) {
+    application.changeItem(currentDefault.uuid, (m) => {
+      const mutator = m as ComponentMutator;
+      mutator.defaultEditor = false;
+    });
+  }
+  application.changeAndSaveItem(component.uuid, (m) => {
+    const mutator = m as ComponentMutator;
+    mutator.defaultEditor = true;
+  });
+};
+
+const removeEditorDefault = (
+  application: WebApplication,
+  component: SNComponent
+) => {
+  application.changeAndSaveItem(component.uuid, (m) => {
+    const mutator = m as ComponentMutator;
+    mutator.defaultEditor = false;
+  });
+};
+
+const getDefaultEditor = (application: WebApplication) => {
+  return application.componentManager
+    .componentsForArea(ComponentArea.Editor)
+    .filter((e) => e.isDefaultEditor())[0];
+};
+
 export const Defaults: FunctionComponent<Props> = ({ application }) => {
   const [editorItems, setEditorItems] = useState<DropdownItem[]>([]);
+  const [defaultEditorValue] = useState(
+    () =>
+      getDefaultEditor(application)?.package_info?.identifier || 'plain-editor'
+  );
 
   useEffect(() => {
     const editors = application.componentManager
       .componentsForArea(ComponentArea.Editor)
+      .sort((a, b) => {
+        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+      })
       .map((editor) => {
+        const iconType = getEditorIconType(editor.name);
+
         return {
           label: editor.name,
           value: editor.package_info.identifier,
+          ...(iconType ? { icon: iconType } : null),
         };
       });
 
     setEditorItems([
       {
+        icon: 'plain-text',
         label: 'Plain Editor',
         value: 'plain-editor',
       },
@@ -37,6 +106,22 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
     ]);
   }, [application]);
 
+  const setDefaultEditor = (value: string) => {
+    const editors = application.componentManager.componentsForArea(
+      ComponentArea.Editor
+    );
+    const currentDefault = getDefaultEditor(application);
+
+    if (value !== 'plain-editor') {
+      const editorComponent = editors.filter(
+        (e) => e.package_info.identifier === value
+      )[0];
+      makeEditorDefault(application, editorComponent, currentDefault);
+    } else {
+      removeEditorDefault(application, currentDefault);
+    }
+  };
+
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -49,7 +134,8 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
               id="def-editor-dropdown"
               srLabel="Select the default editor"
               items={editorItems}
-              defaultValue="plain-editor"
+              defaultValue={defaultEditorValue}
+              onChange={setDefaultEditor}
             />
           </div>
         </div>