wip

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

@@ -8,7 +8,9 @@ import { EditorView } from '@codemirror/view';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../../consts';
-import { useFileDropzone, FileDropzoneOverlay, AllEditorTheme } from '../../services';
+import {
+  useFileDropzone, FileDropzoneOverlay, getEditorTheme,
+} from '../../services';
 import {
   getStrFromBol, adjustPasteData,
 } from '../../services/list-util/markdown-list-util';
@@ -140,20 +142,16 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [onScroll, codeMirrorEditor]);
 
   useEffect(() => {
-    if (editorTheme == null) {
-      return;
-    }
-    if (AllEditorTheme[editorTheme] == null) {
-      return;
-    }
-
-    const extension = AllEditorTheme[editorTheme];
-
-    // React CodeMirror has default theme which is default prec
-    // and extension have to be higher prec here than default theme.
-    const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.high(extension));
-    return cleanupFunction;
-
+    const settingTheme = async(editorTheme?: string) => {
+      const theme = editorTheme ?? 'DefaultLight';
+      const extension = await getEditorTheme(theme);
+
+      // React CodeMirror has default theme which is default prec
+      // and extension have to be higher prec here than default theme.
+      const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.high(extension));
+      return cleanupFunction;
+    };
+    settingTheme(editorTheme);
   }, [codeMirrorEditor, editorTheme]);
 
   const {

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

@@ -1,26 +1,25 @@
 import { Extension } from '@codemirror/state';
-import { eclipse } from '@uiw/codemirror-theme-eclipse';
-import { kimbie } from '@uiw/codemirror-theme-kimbie';
-import { basicLight } from 'cm6-theme-basic-light';
-import { materialDark as materialDarkCM6 } from 'cm6-theme-material-dark';
-import { nord as nordCM6 } from 'cm6-theme-nord';
 
-import { ayu } from './ayu';
-import { cobalt } from './cobalt';
-import { originalDark } from './original-dark';
-import { originalLight } from './original-light';
-import { rosePine } from './rose-pine';
-
-
-export const AllEditorTheme: Record<string, Extension> = {
-  DefaultLight: originalLight,
-  Eclipse: eclipse,
-  Basic: basicLight,
-  Ayu: ayu,
-  'Rosé Pine': rosePine,
-  DefaultDark: originalDark,
-  Material: materialDarkCM6,
-  Nord: nordCM6,
-  Cobalt: cobalt,
-  Kimbie: kimbie,
+export const getEditorTheme = async(themeName: string): Promise<Extension> => {
+  switch (themeName) {
+    case 'Eclipse':
+      return (await import('@uiw/codemirror-theme-eclipse')).eclipse;
+    case 'Basic':
+      return (await import('cm6-theme-basic-light')).basicLight;
+    case 'Ayu':
+      return (await import('./ayu')).ayu;
+    case 'Rosé Pine':
+      return (await import('./rose-pine')).rosePine;
+    case 'DefaultDark':
+      return (await import('./original-dark')).originalDark;
+    case 'Material':
+      return (await import('cm6-theme-material-dark')).materialDark;
+    case 'Nord':
+      return (await import('cm6-theme-nord')).nord;
+    case 'Cobalt':
+      return (await import('./cobalt')).cobalt;
+    case 'Kimbie':
+      return (await import('@uiw/codemirror-theme-kimbie')).kimbie;
+  }
+  return (await import('./original-light')).originalLight;
 };