Merge pull request #8447 from weseek/139331-139908-theme-dynamic-import

imprv: Dynamic import for theme

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

@@ -1,4 +1,4 @@
-export const DEFAULT_THEME = 'elegant';
+export const DEFAULT_THEME = 'DefaultLight';
 
 const KeyMapMode = {
   default: 'default',

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

@@ -1,14 +1,16 @@
 import {
-  forwardRef, useMemo, useRef, useEffect,
+  forwardRef, useMemo, useRef, useEffect, useState,
 } from 'react';
 
 import { indentUnit } from '@codemirror/language';
-import { Prec } from '@codemirror/state';
+import { Prec, Extension } from '@codemirror/state';
 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, type EditorTheme,
+} from '../../services';
 import {
   adjustPasteData, getStrFromBol,
 } from '../../services/list-util/markdown-list-util';
@@ -139,22 +141,24 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [onScroll, codeMirrorEditor]);
 
+
+  const [themeExtension, setThemeExtension] = useState<Extension | undefined>(undefined);
   useEffect(() => {
-    if (editorTheme == null) {
-      return;
-    }
-    if (AllEditorTheme[editorTheme] == null) {
+    const settingTheme = async(name?: EditorTheme) => {
+      setThemeExtension(await getEditorTheme(name ?? 'DefaultLight'));
+    };
+    settingTheme(editorTheme as EditorTheme);
+  }, [codeMirrorEditor, editorTheme, setThemeExtension]);
+
+  useEffect(() => {
+    if (themeExtension == 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));
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.high(themeExtension));
     return cleanupFunction;
-
-  }, [codeMirrorEditor, editorTheme]);
+  }, [codeMirrorEditor, themeExtension]);
 
   const {
     getRootProps,

packages/editor/src/components/playground/PlaygroundController.tsx

@@ -3,9 +3,7 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
-import {
-  AllEditorTheme,
-} from '../../services';
+import { AllEditorTheme } from '../../services';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
 export const InitEditorValueRow = (): JSX.Element => {
@@ -102,7 +100,7 @@ const SetThemeRow = (props: SetThemeRowProps): JSX.Element => {
       <div className="row mt-3">
         <h2>default</h2>
         <div className="col">
-          {createItems(Object.keys(AllEditorTheme))}
+          {createItems(AllEditorTheme)}
         </div>
       </div>
     </>

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

@@ -1,26 +1,42 @@
 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 getEditorTheme = async(themeName: EditorTheme): 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;
+};
 
+const EditorTheme = {
+  DefaultLight: 'DefaultLight',
+  Eclipse: 'Eclipse',
+  Basic: 'Basic',
+  Ayu: 'Ayu',
+  'Rosé Pine': 'Rosé Pine',
+  DefaultDark: 'DefaultDark',
+  Material: 'Material',
+  Nord: 'Nord',
+  Cobalt: 'Cobalt',
+  Kimbie: 'Kimbie',
+} as const;
 
-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 AllEditorTheme = Object.values(EditorTheme);
+export type EditorTheme = typeof EditorTheme[keyof typeof EditorTheme]