refactor(editor-monaco): consolidate themes (#3980)

Author: char0n

.eslintrc

@@ -42,7 +42,8 @@
     "import/no-unresolved": [2, {
       "ignore": [
         // https://github.com/import-js/eslint-plugin-import/issues/1810
-        "^monaco-languageclient\/monaco-converter$"
+        "^monaco-languageclient\/monaco-converter$",
+        "^vscode\/services$"
       ]
     }]
   }

src/plugins/editor-monaco/actions.js

@@ -1,4 +1,4 @@
-export const EDITOR_UPDATE_THEME = 'editor_update_theme';
+export const EDITOR_SET_THEME = 'editor_set_theme';
 
 export const EDITOR_SET_MARKERS = 'editor_set_markers';
 export const EDITOR_APPEND_MARKERS = 'editor_append_markers';
@@ -12,10 +12,10 @@ export const EDITOR_CLEAR_REQUEST_JUMP_TO_EDITOR_MARKER =
 
 export const EDITOR_SET_LANGUAGE = 'editor_set_language';
 
-export const updateEditorTheme = (theme = 'my-vs-dark') => {
+export const setTheme = (theme = 'my-vs-dark') => {
   return {
     payload: theme,
-    type: EDITOR_UPDATE_THEME,
+    type: EDITOR_SET_THEME,
   };
 };
 

src/plugins/editor-monaco/after-load.js

@@ -1,4 +1,4 @@
-import { StandaloneServices, IStorageService } from 'vscode/services'; // eslint-disable-line import/no-unresolved
+import { StandaloneServices, IStorageService } from 'vscode/services';
 
 const afterLoad = () => {
   /**

src/plugins/editor-monaco/components/MonacoEditor/MonacoEditor.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import * as monaco from 'monaco-editor';
 import noop from 'lodash/noop.js';
 
-import getStyleMetadataLight, { themes as themesLight } from '../../utils/monaco-theme-light.js';
-import getStyleMetadataDark, { themes as themesDark } from '../../utils/monaco-theme-dark.js';
+import seVsDarkTheme from '../../themes/se-vs-dark.js';
+import seVsLightTheme from '../../themes/se-vs-light.js';
 import { dereference } from '../../utils/monaco-action-apidom-deref.js';
 import { requestGetJsonPointerPosition } from '../../utils/monaco-jump-from-path-to-line.js';
 import { useMount, useUpdate, useSmoothResize } from './hooks.js';
@@ -90,8 +90,8 @@ const MonacoEditor = ({
 
   // defining the custom themes and setting the active one
   useMount(() => {
-    monaco.editor.defineTheme('my-vs-dark', themesDark.seVsDark);
-    monaco.editor.defineTheme('my-vs-light', themesLight.seVsLight);
+    monaco.editor.defineTheme('se-vs-dark', seVsDarkTheme);
+    monaco.editor.defineTheme('se-vs-light', seVsLightTheme);
   });
 
   // update language
@@ -163,7 +163,7 @@ const MonacoEditor = ({
           // then clear the request itself
           onClearRequestJumpToMarker();
         } else {
-          // just clear the request anyways
+          // just clear the request anyway
           onClearRequestJumpToMarker();
         }
       }
@@ -188,35 +188,7 @@ const MonacoEditor = ({
 
   // settings the theme if changed
   useEffect(() => {
-    // START dev demo test unrelated to the setTheme
-    // async function findMarkerPosition() {
-    //   const mockPath =
-    //     '/channels/smartylighting.streetlights.1.0.event.{streetlightId}.lighting.measured'; // asyncapi
-    //   // via apidom-ls
-    //   const foundMarkerPosition = await requestGetJsonPointerPosition(editorRef.current, mockPath);
-    //   console.log('mock...foundMarkerPosition', foundMarkerPosition);
-    //   if (foundMarkerPosition?.data) {
-    //     onSetRequestJumpToMarker(foundMarkerPosition.data);
-    //     onClearRequestJumpToMarker();
-    //   } else {
-    //     onClearRequestJumpToMarker();
-    //   }
-    // }
-    // if (editorRef?.current?.getModel) {
-    //   findMarkerPosition();
-    // }
-    // END dev demo test
-    if (theme === 'vs-dark') {
-      monaco.editor.setTheme('vs-dark');
-      // eslint-disable-next-line no-underscore-dangle
-      editorRef.current._themeService._theme.getTokenStyleMetadata = getStyleMetadataDark;
-    } else if (['vs-light', 'vs'].includes(theme)) {
-      monaco.editor.setTheme('vs');
-      // eslint-disable-next-line no-underscore-dangle
-      editorRef.current._themeService._theme.getTokenStyleMetadata = getStyleMetadataLight;
-    } else {
-      monaco.editor.setTheme(theme);
-    }
+    monaco.editor.setTheme(theme);
   }, [theme]);
 
   // register listener for validation markers

src/plugins/editor-monaco/components/MonacoEditor/MonacoEditorContainer.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import MonacoEditor from './MonacoEditor.jsx';
 
 const MonacoEditorContainer = ({ editorActions, editorSelectors, isReadOnly }) => {
-  const theme = editorSelectors.selectEditorTheme();
+  const theme = editorSelectors.selectTheme();
   const jumpToMarker = editorSelectors.selectEditorJumpToMarker();
   const requestJumpToMarker = editorSelectors.selectEditorRequestJumpToMarker();
   const value = editorSelectors.selectContent();
@@ -87,7 +87,7 @@ MonacoEditorContainer.propTypes = {
   editorSelectors: PropTypes.shape({
     selectLanguage: PropTypes.func.isRequired,
     selectContent: PropTypes.func.isRequired,
-    selectEditorTheme: PropTypes.func.isRequired,
+    selectTheme: PropTypes.func.isRequired,
     selectEditorJumpToMarker: PropTypes.func.isRequired,
     selectEditorRequestJumpToMarker: PropTypes.func.isRequired,
   }).isRequired,

src/plugins/editor-monaco/components/ThemeSelectionIcon.jsx

@@ -2,43 +2,43 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { MoonIcon, SunIcon } from '@primer/octicons-react';
 
-const themeList = ['vs', 'vs-light', 'vs-dark', 'my-vs-light', 'my-vs-dark'];
-
 const ThemeSelectionIcon = ({ editorSelectors, editorActions }) => {
-  const theme = editorSelectors.selectEditorTheme();
+  const theme = editorSelectors.selectTheme();
 
   const handleChange = (newTheme) => () => {
-    if (themeList.includes(newTheme)) {
-      editorActions.updateEditorTheme(newTheme);
-    }
+    editorActions.setTheme(newTheme);
   };
 
-  return theme === 'vs' || theme === 'vs-light' || theme === 'my-vs-light' ? (
+  return theme === 'se-vs-dark' ? (
     <div className="swagger-editor__generic-padding-thin-top-bottom">
       <button
         type="button"
         className="swagger-editor__editor-pane-bar-control"
-        onClick={handleChange('my-vs-dark')}
+        onClick={handleChange('se-vs-light')}
       >
-        <MoonIcon size="small" aria-label="Dark theme" />
+        <SunIcon size="small" aria-label="Light theme" />
       </button>
     </div>
   ) : (
     <div className="swagger-editor__generic-padding-thin-top-bottom">
       <button
         type="button"
         className="swagger-editor__editor-pane-bar-control"
-        onClick={handleChange('my-vs-light')}
+        onClick={handleChange('se-vs-dark')}
       >
-        <SunIcon size="small" aria-label="Light theme" />
+        <MoonIcon size="small" aria-label="Dark theme" />
       </button>
     </div>
   );
 };
 
 ThemeSelectionIcon.propTypes = {
-  editorActions: PropTypes.oneOfType([PropTypes.object]).isRequired,
-  editorSelectors: PropTypes.oneOfType([PropTypes.object]).isRequired,
+  editorActions: PropTypes.shape({
+    setTheme: PropTypes.func.isRequired,
+  }).isRequired,
+  editorSelectors: PropTypes.shape({
+    selectTheme: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 export default ThemeSelectionIcon;

src/plugins/editor-monaco/index.js

@@ -6,7 +6,7 @@ import ThemeSelectionIcon from './components/ThemeSelectionIcon.jsx';
 import EditorPaneBarTopWrapper from './wrap-components/EditorPaneBarTopWrapper.jsx';
 import EditorPaneBarBottomWrapper from './wrap-components/EditorPaneBarBottomWrapper.jsx';
 import {
-  updateEditorTheme,
+  setTheme,
   setMarkers,
   setLanguage,
   appendMarkers,
@@ -18,7 +18,7 @@ import {
 } from './actions.js';
 import reducers from './reducers.js';
 import {
-  selectEditorTheme,
+  selectTheme,
   selectMarkers,
   selectEditorJumpToMarker,
   selectEditorRequestJumpToMarker,
@@ -44,7 +44,7 @@ const EditorMonacoPlugin = () => ({
   statePlugins: {
     editor: {
       actions: {
-        updateEditorTheme,
+        setTheme,
         setMarkers,
         appendMarkers,
         clearMarkers,
@@ -56,7 +56,7 @@ const EditorMonacoPlugin = () => ({
       },
       reducers,
       selectors: {
-        selectEditorTheme,
+        selectTheme,
         selectMarkers,
         selectEditorJumpToMarker,
         selectEditorRequestJumpToMarker,

src/plugins/editor-monaco/reducers.js

@@ -1,7 +1,7 @@
 import { fromJS, List } from 'immutable';
 
 import {
-  EDITOR_UPDATE_THEME,
+  EDITOR_SET_THEME,
   EDITOR_SET_MARKERS,
   EDITOR_CLEAR_MARKERS,
   EDITOR_APPEND_MARKERS,
@@ -13,8 +13,8 @@ import {
 } from './actions.js';
 
 const reducers = {
-  [EDITOR_UPDATE_THEME]: (state, action) => {
-    return state.set('editorTheme', action.payload);
+  [EDITOR_SET_THEME]: (state, action) => {
+    return state.set('theme', action.payload);
   },
   [EDITOR_SET_MARKERS]: (state, action) => {
     return state.set('markers', fromJS(action.payload));
@@ -43,7 +43,7 @@ const reducers = {
     return state.set('editorRequestJumpToMarker', action.payload);
   },
   [EDITOR_SET_LANGUAGE]: (state, action) => {
-    return state.set('editorLanguage', action.payload);
+    return state.set('language', action.payload);
   },
 };
 

src/plugins/editor-monaco/selectors.js

@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect';
 import { List } from 'immutable';
 
-export const selectEditorTheme = (state) => state.get('editorTheme') || 'my-vs-dark';
+export const selectTheme = (state) => state.get('theme', 'se-vs-dark');
 
 export const selectMarkers = createSelector(
   (state) => state.get('markers', List()),
@@ -15,6 +15,6 @@ export const selectEditorJumpToMarker = createSelector(
   }
 );
 
-export const selectLanguage = (state) => state.get('editorLanguage', 'plaintext');
+export const selectLanguage = (state) => state.get('language', 'plaintext');
 
 export const selectEditorRequestJumpToMarker = (state) => state.get('editorRequestJumpToMarker');