use EditorTheme type

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -10,12 +10,27 @@ import {
 import { useIsIndentSizeForced } from '~/stores/context';
 import { useEditorSettings, useCurrentIndentSize } from '~/stores/editor';
 
-import { DEFAULT_THEME, type KeyMapMode } from '../../interfaces/editor-settings';
+import {
+  type EditorTheme, type KeyMapMode, DEFAULT_THEME, DEFAULT_KEYMAP,
+} from '../../interfaces/editor-settings';
 
 
-const AVAILABLE_THEMES = [
-  'DefaultLight', 'Eclipse', 'Basic', 'Ayu', 'Rosé Pine', 'DefaultDark', 'Material', 'Nord', 'Cobalt', 'Kimbie',
-];
+type EditorThemeToLabel = {
+  [key in EditorTheme]: string;
+}
+
+const EDITORTHEME_LABEL_MAP: EditorThemeToLabel = {
+  defaultlight: 'DefaultLight',
+  eclipse: 'Eclipse',
+  basic: 'Basic',
+  ayu: 'Ayu',
+  rosepine: 'Rosé Pine',
+  defaultdark: 'DefaultDark',
+  material: 'Material',
+  nord: 'Nord',
+  cobalt: 'Cobalt',
+  kimbie: 'Kimbie',
+};
 
 const TYPICAL_INDENT_SIZE = [2, 4];
 
@@ -28,10 +43,11 @@ const ThemeSelector = (): JSX.Element => {
 
   const menuItems = useMemo(() => (
     <>
-      { AVAILABLE_THEMES.map((theme) => {
+      { (Object.keys(EDITORTHEME_LABEL_MAP) as EditorTheme[]).map((theme) => {
+        const themeLabel = EDITORTHEME_LABEL_MAP[theme];
         return (
           <DropdownItem className="menuitem-label" onClick={() => update({ theme })}>
-            {theme}
+            {themeLabel}
           </DropdownItem>
         );
       }) }
@@ -98,7 +114,7 @@ const KeymapSelector = memo((): JSX.Element => {
     </>
   ), [update]);
 
-  const selectedKeymapMode = editorSettings?.keymapMode ?? 'default';
+  const selectedKeymapMode = editorSettings?.keymapMode ?? DEFAULT_KEYMAP;
 
   return (
     <div className="input-group flex-nowrap">
@@ -255,6 +271,7 @@ ConfigurationDropdown.displayName = 'ConfigurationDropdown';
 
 
 export const OptionsSelector = (): JSX.Element => {
+
   const { data: editorSettings } = useEditorSettings();
   const { data: isIndentSizeForced } = useIsIndentSizeForced();
   const { data: currentIndentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();

apps/app/src/interfaces/editor-settings.ts

@@ -1,4 +1,5 @@
-export const DEFAULT_THEME = 'DefaultLight';
+export const DEFAULT_KEYMAP = 'default';
+export const DEFAULT_THEME = 'defaultlight';
 
 const KeyMapMode = {
   default: 'default',
@@ -9,8 +10,23 @@ const KeyMapMode = {
 
 export type KeyMapMode = typeof KeyMapMode[keyof typeof KeyMapMode];
 
+const EditorTheme = {
+  defaultlight: 'defaultlight',
+  eclipse: 'eclipse',
+  basic: 'basic',
+  ayu: 'ayu',
+  rosepine:  'rosepine',
+  defaultdark: 'defaultdark',
+  material: 'material',
+  nord: 'nord',
+  cobalt: 'cobalt',
+  kimbie: 'kimbie',
+} as const;
+
+export type EditorTheme = typeof EditorTheme[keyof typeof EditorTheme];
+
 export interface IEditorSettings {
-  theme: undefined | string,
+  theme: undefined | EditorTheme,
   keymapMode: undefined | KeyMapMode,
   styleActiveLine: boolean,
   autoFormatMarkdownTable: boolean,

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -149,7 +149,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const [themeExtension, setThemeExtension] = useState<Extension | undefined>(undefined);
   useEffect(() => {
     const settingTheme = async(name?: EditorTheme) => {
-      setThemeExtension(await getEditorTheme(name ?? 'DefaultLight'));
+      setThemeExtension(await getEditorTheme(name ?? 'defaultlight'));
     };
     settingTheme(editorTheme as EditorTheme);
   }, [codeMirrorEditor, editorTheme, setThemeExtension]);

packages/editor/src/services/editor-theme/index.ts

@@ -2,41 +2,40 @@ import { Extension } from '@codemirror/state';
 
 export const getEditorTheme = async(themeName: EditorTheme): Promise<Extension> => {
   switch (themeName) {
-    case 'Eclipse':
+    case 'eclipse':
       return (await import('@uiw/codemirror-theme-eclipse')).eclipse;
-    case 'Basic':
+    case 'basic':
       return (await import('cm6-theme-basic-light')).basicLight;
-    case 'Ayu':
+    case 'ayu':
       return (await import('./ayu')).ayu;
-    case 'Rosé Pine':
+    case 'rosepine':
       return (await import('./rose-pine')).rosePine;
-    case 'DefaultDark':
+    case 'defaultdark':
       return (await import('./original-dark')).originalDark;
-    case 'Material':
+    case 'material':
       return (await import('cm6-theme-material-dark')).materialDark;
-    case 'Nord':
+    case 'nord':
       return (await import('cm6-theme-nord')).nord;
-    case 'Cobalt':
+    case 'cobalt':
       return (await import('./cobalt')).cobalt;
-    case 'Kimbie':
+    case 'kimbie':
       return (await import('@uiw/codemirror-theme-kimbie')).kimbie;
   }
   return (await import('./original-light')).originalLight;
 };
 
 const EditorTheme = {
-  DefaultLight: 'DefaultLight',
-  Eclipse: 'Eclipse',
-  Basic: 'Basic',
-  Ayu: 'Ayu',
-  'Rosé Pine': 'Rosé Pine',
-  DefaultDark: 'DefaultDark',
-  Material: 'Material',
-  Nord: 'Nord',
-  Cobalt: 'Cobalt',
-  Kimbie: 'Kimbie',
+  defaultlight: 'defaultlight',
+  eclipse: 'eclipse',
+  basic: 'basic',
+  ayu: 'ayu',
+  rosepine:  'rosepine',
+  defaultdark: 'defaultdark',
+  material: 'material',
+  nord: 'nord',
+  cobalt: 'cobalt',
+  kimbie: 'kimbie',
 } as const;
 
-
 export const AllEditorTheme = Object.values(EditorTheme);
 export type EditorTheme = typeof EditorTheme[keyof typeof EditorTheme]