add playground theme change

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

@@ -14,6 +14,7 @@ import { Preview } from './Preview';
 export const Playground = (): JSX.Element => {
 
   const [markdownToPreview, setMarkdownToPreview] = useState('');
+  const [editorTheme, setEditorTheme] = useState('');
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
@@ -61,11 +62,12 @@ export const Playground = (): JSX.Element => {
             onUpload={uploadHandler}
             indentSize={4}
             acceptedFileType={AcceptedUploadFileType.ALL}
+            editorTheme={editorTheme}
           />
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">
           <Preview markdown={markdownToPreview} />
-          <PlaygroundController />
+          <PlaygroundController setEditorTheme={setEditorTheme} />
         </div>
       </div>
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>

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

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { PlaygroundAllEditorTheme, PlaygroundReactCodeMirror } from '../../services';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
 export const InitEditorValueRow = (): JSX.Element => {
@@ -68,11 +69,62 @@ export const SetCaretLineRow = (): JSX.Element => {
   );
 };
 
-export const PlaygroundController = (): JSX.Element => {
+type SetThemeRowProps = {
+  setEditorTheme: (value: string) => void,
+}
+const SetThemeRow = (props: SetThemeRowProps): JSX.Element => {
+
+  const { setEditorTheme } = props;
+
+  const createItems = (items: string[]): JSX.Element => {
+    return (
+      <div>
+        { items.map((theme) => {
+          return (
+            <button
+              type="button"
+              className="btn btn-outline-secondary"
+              onClick={() => {
+                setEditorTheme(theme);
+              }}
+            >{theme}
+            </button>
+          );
+        }) }
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="row mt-3">
+        <h2>default</h2>
+        <div className="col">
+          {createItems(Object.keys(PlaygroundAllEditorTheme))}
+        </div>
+      </div>
+      <div className="row mt-3">
+        <h2>ReactCodeMirror</h2>
+        <div className="col">
+          {createItems(Object.keys(PlaygroundReactCodeMirror))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+
+type PlaygroundControllerProps = {
+  setEditorTheme: (value: string) => void
+};
+
+export const PlaygroundController = (props: PlaygroundControllerProps): JSX.Element => {
+  const { setEditorTheme } = props;
   return (
     <div className="container mt-5">
       <InitEditorValueRow />
       <SetCaretLineRow />
+      <SetThemeRow setEditorTheme={setEditorTheme} />
     </div>
   );
 };

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

@@ -1,10 +1,140 @@
+import { Extension } from '@codemirror/state';
 import {
-  monokai, material, eclipse, dracula,
+  abcdef,
+  abyss,
+  androidstudio,
+  andromeda,
+  atomone,
+  aura,
+  bbedit,
+  basicLight,
+  basicDark,
+  bespin,
+  copilot,
+  dracula,
+  darcula,
+  duotoneLight,
+  duotoneDark,
+  eclipse,
+  githubLight,
+  githubDark,
+  gruvboxLight,
+  gruvboxDark,
+  materialLight,
+  materialDark,
+  monokai,
+  monokaiDimmed,
+  kimbie,
+  noctisLilac,
+  nord,
+  okaidia,
+  quietlight,
+  red,
+  solarizedLight,
+  solarizedDark,
+  sublime,
+  tokyoNight,
+  tokyoNightDay,
+  tomorrowNightBlue,
+  whiteLight,
+  whiteDark,
+  vscodeDark,
+  xcodeLight,
+  xcodeDark,
 } from '@uiw/codemirror-themes-all';
 
-export const AllEditorTheme = {
-  material,
+export const AllEditorTheme: Record<string, Extension> = {
+  abcdef,
+  abyss,
+  androidstudio,
+  andromeda,
+  atomone,
+  aura,
+  bbedit,
+  basicLight,
+  basicDark,
+  bespin,
+  copilot,
+  dracula,
+  darcula,
+  duotoneLight,
+  duotoneDark,
+  eclipse,
+  githubLight,
+  githubDark,
+  gruvboxLight,
+  gruvboxDark,
+  materialLight,
+  materialDark,
+  monokai,
+  monokaiDimmed,
+  kimbie,
+  noctisLilac,
+  nord,
+  okaidia,
+  quietlight,
+  red,
+  solarizedLight,
+  solarizedDark,
+  sublime,
+  tokyoNight,
+  tokyoNightDay,
+  tomorrowNightBlue,
+  whiteLight,
+  whiteDark,
+  vscodeDark,
+  xcodeLight,
+  xcodeDark,
+
+};
+
+export const PlaygroundAllEditorTheme: Record<string, Extension> = {
+  materialLight,
   dracula,
   monokai,
   eclipse,
 };
+
+export const PlaygroundReactCodeMirror: Record<string, Extension> = {
+  abcdef,
+  abyss,
+  androidstudio,
+  andromeda,
+  atomone,
+  aura,
+  bbedit,
+  basicLight,
+  basicDark,
+  bespin,
+  copilot,
+  dracula,
+  darcula,
+  duotoneLight,
+  duotoneDark,
+  eclipse,
+  githubLight,
+  githubDark,
+  gruvboxLight,
+  gruvboxDark,
+  materialLight,
+  materialDark,
+  monokai,
+  monokaiDimmed,
+  kimbie,
+  noctisLilac,
+  nord,
+  okaidia,
+  quietlight,
+  red,
+  solarizedLight,
+  solarizedDark,
+  sublime,
+  tokyoNight,
+  tokyoNightDay,
+  tomorrowNightBlue,
+  whiteLight,
+  whiteDark,
+  vscodeDark,
+  xcodeLight,
+  xcodeDark,
+};