feat(editor-moanco): add support for switching language (#3979)

Author: char0n

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

@@ -1,11 +1,15 @@
-import lazyMonacoContribution, { isLanguageRegistered } from './language/monaco.contribution.js';
+import lazyMonacoContribution, {
+  isLanguageRegistered,
+  apidomDefaults,
+} from './language/monaco.contribution.js';
 
 const makeAfterLoad =
   ({ createData = {} } = {}) =>
-  () => {
+  (system) => {
     if (isLanguageRegistered()) return;
 
     lazyMonacoContribution({ createData });
+    system.editorActions.setLanguage(apidomDefaults.getLanguageId());
   };
 
 export default makeAfterLoad;

src/plugins/editor-monaco/actions.js

@@ -10,6 +10,8 @@ export const EDITOR_SET_REQUEST_JUMP_TO_EDITOR_MARKER = 'editor_set_request_jump
 export const EDITOR_CLEAR_REQUEST_JUMP_TO_EDITOR_MARKER =
   'editor_clear_request_jump_to_editor_marker';
 
+export const EDITOR_SET_LANGUAGE = 'editor_set_language';
+
 export const updateEditorTheme = (theme = 'my-vs-dark') => {
   return {
     payload: theme,
@@ -61,3 +63,10 @@ export const clearRequestJumpToEditorMarker = () => {
     type: EDITOR_CLEAR_REQUEST_JUMP_TO_EDITOR_MARKER,
   };
 };
+
+export const setLanguage = (languageId) => {
+  return {
+    payload: languageId,
+    type: EDITOR_SET_LANGUAGE,
+  };
+};

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

@@ -8,6 +8,7 @@ const MonacoEditorContainer = ({ editorActions, editorSelectors, isReadOnly }) =
   const jumpToMarker = editorSelectors.selectEditorJumpToMarker();
   const requestJumpToMarker = editorSelectors.selectEditorRequestJumpToMarker();
   const value = editorSelectors.selectContent();
+  const language = editorSelectors.selectLanguage();
 
   const handleEditorDidMount = useCallback(
     (editor) => {
@@ -55,7 +56,7 @@ const MonacoEditorContainer = ({ editorActions, editorSelectors, isReadOnly }) =
 
   return (
     <MonacoEditor
-      language="apidom"
+      language={language}
       theme={theme}
       value={value}
       isReadOnly={isReadOnly}
@@ -84,6 +85,7 @@ MonacoEditorContainer.propTypes = {
     clearRequestJumpToEditorMarker: PropTypes.func.isRequired,
   }).isRequired,
   editorSelectors: PropTypes.shape({
+    selectLanguage: PropTypes.func.isRequired,
     selectContent: PropTypes.func.isRequired,
     selectEditorTheme: PropTypes.func.isRequired,
     selectEditorJumpToMarker: PropTypes.func.isRequired,

src/plugins/editor-monaco/index.js

@@ -8,6 +8,7 @@ import EditorPaneBarBottomWrapper from './wrap-components/EditorPaneBarBottomWra
 import {
   updateEditorTheme,
   setMarkers,
+  setLanguage,
   appendMarkers,
   clearMarkers,
   setJumpToEditorMarker,
@@ -21,6 +22,7 @@ import {
   selectMarkers,
   selectEditorJumpToMarker,
   selectEditorRequestJumpToMarker,
+  selectLanguage,
 } from './selectors.js';
 import afterLoad from './after-load.js';
 
@@ -50,13 +52,15 @@ const EditorMonacoPlugin = () => ({
         clearJumpToEditorMarker,
         setRequestJumpToEditorMarker,
         clearRequestJumpToEditorMarker,
+        setLanguage,
       },
       reducers,
       selectors: {
         selectEditorTheme,
         selectMarkers,
         selectEditorJumpToMarker,
         selectEditorRequestJumpToMarker,
+        selectLanguage,
       },
     },
   },

src/plugins/editor-monaco/reducers.js

@@ -9,6 +9,7 @@ import {
   EDITOR_CLEAR_JUMP_TO_EDITOR_MARKER,
   EDITOR_SET_REQUEST_JUMP_TO_EDITOR_MARKER,
   EDITOR_CLEAR_REQUEST_JUMP_TO_EDITOR_MARKER,
+  EDITOR_SET_LANGUAGE,
 } from './actions.js';
 
 const reducers = {
@@ -41,6 +42,9 @@ const reducers = {
   [EDITOR_CLEAR_REQUEST_JUMP_TO_EDITOR_MARKER]: (state, action) => {
     return state.set('editorRequestJumpToMarker', action.payload);
   },
+  [EDITOR_SET_LANGUAGE]: (state, action) => {
+    return state.set('editorLanguage', action.payload);
+  },
 };
 
 export default reducers;

src/plugins/editor-monaco/selectors.js

@@ -15,4 +15,6 @@ export const selectEditorJumpToMarker = createSelector(
   }
 );
 
+export const selectLanguage = (state) => state.get('editorLanguage', 'plaintext');
+
 export const selectEditorRequestJumpToMarker = (state) => state.get('editorRequestJumpToMarker');