add other themes

packages/editor/package.json

@@ -25,6 +25,7 @@
     "@codemirror/language": "^6.8.0",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/state": "^6.2.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.15.3",
     "@popperjs/core": "^2.11.8",
     "@types/react": "^18.2.14",
@@ -33,6 +34,14 @@
     "@uiw/codemirror-themes-all": "^4.21.21",
     "@uiw/react-codemirror": "^4.21.8",
     "bootstrap": "^5.3.1",
+    "cm6-theme-basic-dark": "^0.2.0",
+    "cm6-theme-basic-light": "^0.2.0",
+    "cm6-theme-gruvbox-dark": "^0.2.0",
+    "cm6-theme-gruvbox-light": "^0.2.0",
+    "cm6-theme-material-dark": "^0.2.0",
+    "cm6-theme-nord": "^0.2.0",
+    "cm6-theme-solarized-dark": "^0.2.0",
+    "cm6-theme-solarized-light": "^0.2.0",
     "codemirror": "^6.0.1",
     "emoji-mart": "npm:panta82-emoji-mart@^3.0.1",
     "eslint-plugin-react-refresh": "^0.4.1",
@@ -41,6 +50,7 @@
     "react-toastify": "^9.1.3",
     "reactstrap": "^9.2.0",
     "swr": "^2.2.2",
+    "thememirror": "^2.0.1",
     "ts-deepmerge": "^6.2.0"
   }
 }

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

@@ -3,7 +3,9 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
-import { PlaygroundAllEditorTheme, PlaygroundReactCodeMirror } from '../../services';
+import {
+  PlaygroundOfficial, PlaygroundCM6Themes, PlaygroundThemeMirror, PlaygroundAllEditorTheme, PlaygroundReactCodeMirror,
+} from '../../services';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
 export const InitEditorValueRow = (): JSX.Element => {
@@ -109,6 +111,24 @@ const SetThemeRow = (props: SetThemeRowProps): JSX.Element => {
           {createItems(Object.keys(PlaygroundReactCodeMirror))}
         </div>
       </div>
+      <div className="row mt-3">
+        <h2>ThemeMirror</h2>
+        <div className="col">
+          {createItems(Object.keys(PlaygroundThemeMirror))}
+        </div>
+      </div>
+      <div className="row mt-3">
+        <h2>CM6-Theme</h2>
+        <div className="col">
+          {createItems(Object.keys(PlaygroundCM6Themes))}
+        </div>
+      </div>
+      <div className="row mt-3">
+        <h2>OneDark</h2>
+        <div className="col">
+          {createItems(Object.keys(PlaygroundOfficial))}
+        </div>
+      </div>
     </>
   );
 };

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

@@ -1,4 +1,5 @@
 import { Extension } from '@codemirror/state';
+import { oneDarkTheme } from '@codemirror/theme-one-dark';
 import {
   abcdef,
   abyss,
@@ -41,58 +42,28 @@ import {
   vscodeDark,
   xcodeLight,
   xcodeDark,
+  material,
 } from '@uiw/codemirror-themes-all';
+import { basicDark as basicDarkCM6 } from 'cm6-theme-basic-dark';
+import { basicLight as basicLightCM6 } from 'cm6-theme-basic-light';
+import { gruvboxDark as gruvboxDarkCM6 } from 'cm6-theme-gruvbox-dark';
+import { gruvboxLight as gruvboxLightCM6 } from 'cm6-theme-gruvbox-light';
+import { materialDark as materialDarkCM6 } from 'cm6-theme-material-dark';
+import { nord as nordCM6 } from 'cm6-theme-nord';
+import { solarizedDark as solarizedDarkCM6 } from 'cm6-theme-solarized-dark';
+import { solarizedLight as solarizedLightCM6 } from 'cm6-theme-solarized-light';
+import * as thememirror from 'thememirror';
 
-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,
+  eclipse,
+  elegant: red,
+  neo: red,
+  'mdn-like': red,
+  material,
   dracula,
   monokai,
-  eclipse,
+  twilight: red,
 };
 
 export const PlaygroundReactCodeMirror: Record<string, Extension> = {
@@ -138,3 +109,43 @@ export const PlaygroundReactCodeMirror: Record<string, Extension> = {
   xcodeLight,
   xcodeDark,
 };
+
+export const PlaygroundThemeMirror: Record<string, Extension> = {
+  'amy-tm': thememirror.amy,
+  'ayu light-tm': thememirror.ayuLight,
+  'barf-tm': thememirror.barf,
+  'bespin-tm': thememirror.bespin,
+  'birds of paradise': thememirror.birdsOfParadise,
+  'cobalt-tm': thememirror.cobalt,
+  'cool glow': thememirror.coolGlow,
+  'dracula-tm': thememirror.dracula,
+  'espresso-tm': thememirror.espresso,
+  'noctis lilac': thememirror.noctisLilac,
+  'tomorrow-tm': thememirror.tomorrow,
+  'smoothy-tm': thememirror.smoothy,
+  "rose' Pine Dawn": thememirror.rosePineDawn,
+  'solarized light-tm': thememirror.solarizedLight,
+};
+
+export const PlaygroundCM6Themes: Record<string, Extension> = {
+  basicLightCM6,
+  basicDarkCM6,
+  solarizedLightCM6,
+  solarizedDarkCM6,
+  materialDarkCM6,
+  nordCM6,
+  gruvboxLightCM6,
+  gruvboxDarkCM6,
+};
+
+export const PlaygroundOfficial: Record<string, Extension> = {
+  oneDarkTheme,
+};
+
+export const AllEditorTheme: Record<string, Extension> = {
+  ...PlaygroundReactCodeMirror,
+  ...PlaygroundThemeMirror,
+  ...PlaygroundCM6Themes,
+  ...PlaygroundOfficial,
+  ...PlaygroundAllEditorTheme,
+};

yarn.lock

@@ -1533,7 +1533,7 @@
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73"
   integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==
 
-"@codemirror/theme-one-dark@^6.0.0":
+"@codemirror/theme-one-dark@^6.0.0", "@codemirror/theme-one-dark@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
   integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
@@ -6362,6 +6362,46 @@ clsx@^1.0.4, clsx@^1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+cm6-theme-basic-dark@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-basic-dark/-/cm6-theme-basic-dark-0.2.0.tgz#8b672c60bedc5c8b577f9e69196a00ec5a5da669"
+  integrity sha512-+mNNJecRtxS/KkloMDCQF0oTrT6aFGRZTjnBcdT5UG1pcDO4Brq8l1+0KR/8dZ7hub2gOGOzoi3rGFD8GzlH7Q==
+
+cm6-theme-basic-light@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-basic-light/-/cm6-theme-basic-light-0.2.0.tgz#29d2d6b9675feb7b563b31eda6f3da37d9ae3167"
+  integrity sha512-1prg2gv44sYfpHscP26uLT/ePrh0mlmVwMSoSd3zYKQ92Ab3jPRLzyCnpyOCQLJbK+YdNs4HvMRqMNYdy4pMhA==
+
+cm6-theme-gruvbox-dark@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-gruvbox-dark/-/cm6-theme-gruvbox-dark-0.2.0.tgz#9aab54346d0632bbcbeca02457c5f931ded007db"
+  integrity sha512-xyqsG19qV+nb7ZHTMocSNWwZHMExfQxDm0FlbNMqEGKeQR96WryssXJH/IZZQudwrPpWU2dCoyOgMFhti2UTYA==
+
+cm6-theme-gruvbox-light@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-gruvbox-light/-/cm6-theme-gruvbox-light-0.2.0.tgz#7382fe53f30de4b3fcd890aac779a486a12708e2"
+  integrity sha512-sc4dEMLU5y4F3QGLjwMQs1H3Q0a0ooXA1EvyWnknxLEGQVXwJrxkkV67gs1TqWASl2i63iomt4zyz5pkbfO1yg==
+
+cm6-theme-material-dark@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-material-dark/-/cm6-theme-material-dark-0.2.0.tgz#c733243a8a31da5d953fa551b2548f358aa37a64"
+  integrity sha512-H09JZihzg4w0mTtOqo5bQdxItkQWw+ergKlk7BSfwYjaR2nOi+wIN0R+ByAo7bON8GbFODvjTxH3EIqdhovFeA==
+
+cm6-theme-nord@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-nord/-/cm6-theme-nord-0.2.0.tgz#2a00c47cdf6119b8248dbed8d9b572841bf321a7"
+  integrity sha512-jTh+5nvl+N/5CtTK7UVcrxDCj2AOStvbNM8uP6tx6amq4QaaLDlapjMw+MNzEkvxcPnHY+YM91tbklS2KNlR2w==
+
+cm6-theme-solarized-dark@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-solarized-dark/-/cm6-theme-solarized-dark-0.2.0.tgz#f4238aa74289b6c4cb8aedb70e430acb18b774c7"
+  integrity sha512-FWtYHcX8NLzNSs21yGbkLF+q/5m2u80ug0JytKoI9nMZWPP5dcnsFYp1iZBEegLehiZnpv1qcmTsLTUG2KD39w==
+
+cm6-theme-solarized-light@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cm6-theme-solarized-light/-/cm6-theme-solarized-light-0.2.0.tgz#53948ec3efcbd4bbe592398931dff586c728c9f5"
+  integrity sha512-Iw7Xv+9A6NlT7sRGlM2pOwD3ZBETkAqpb7c6O0LPj5kjwcK6C3k+mvjzaQt1gzfBErMmhL1HHuK07zICeXkE+w==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -17285,6 +17325,11 @@ tfunk@^4.0.0:
     chalk "^1.1.3"
     dlv "^1.1.3"
 
+thememirror@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/thememirror/-/thememirror-2.0.1.tgz#ae9eb4ce7e8d0303d4fbabcc860ed38a0b45b079"
+  integrity sha512-d5i6FVvWWPkwrm4cHLI3t9AT1OrkAt7Ig8dtdYSofgF7C/eiyNuq6zQzSTusWTde3jpW9WLvA9J/fzNKMUsd0w==
+
 thenify-all@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"