@finos/legend-application-studio 23.1.7 → 23.1.8

package/src/components/editor/edit-panel/GrammarTextEditor.tsx

@@ -23,27 +23,29 @@ import {
 } from 'monaco-editor';
 import {
   ContextMenu,
-  disposeEditor,
-  getBaseTextEditorOptions,
-  resetLineNumberGutterWidth,
   clsx,
   WordWrapIcon,
-  getEditorValue,
-  normalizeLineEnding,
   MoreHorizontalIcon,
   PanelContent,
   useResizeDetector,
+  MenuContent,
+  MenuContentItem,
+} from '@finos/legend-art';
+import {
+  disposeCodeEditor,
+  getBaseCodeEditorOptions,
+  resetLineNumberGutterWidth,
+  getCodeEditorValue,
+  normalizeLineEnding,
   setWarningMarkers,
   clearMarkers,
   setErrorMarkers,
   moveCursorToPosition,
-  MenuContent,
-  MenuContentItem,
-} from '@finos/legend-art';
+} from '@finos/legend-lego/code-editor';
 import {
   TAB_SIZE,
-  EDITOR_THEME,
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
+  CODE_EDITOR_LANGUAGE,
   useApplicationStore,
   useApplicationNavigationContext,
   getInlineSnippetSuggestions,
@@ -722,13 +724,13 @@ export const GrammarTextEditor = observer(() => {
     if (!editor && textEditorRef.current) {
       const element = textEditorRef.current;
       const _editor = monacoEditorAPI.create(element, {
-        ...getBaseTextEditorOptions(),
-        language: EDITOR_LANGUAGE.PURE,
-        theme: EDITOR_THEME.LEGEND,
+        ...getBaseCodeEditorOptions(),
+        language: CODE_EDITOR_LANGUAGE.PURE,
+        theme: CODE_EDITOR_THEME.LEGEND,
         renderValidationDecorations: 'on',
       });
       _editor.onDidChangeModelContent(() => {
-        grammarTextEditorState.setGraphGrammarText(getEditorValue(_editor));
+        grammarTextEditorState.setGraphGrammarText(getCodeEditorValue(_editor));
         clearMarkers();
         // NOTE: we can technically can reset the current element label regex string here
         // but if we do that on first load, the cursor will not jump to the current element
@@ -788,7 +790,7 @@ export const GrammarTextEditor = observer(() => {
 
   if (editor) {
     // Set the value of the editor
-    const currentValue = getEditorValue(editor);
+    const currentValue = getCodeEditorValue(editor);
     if (currentValue !== value) {
       editor.setValue(value);
     }
@@ -844,7 +846,7 @@ export const GrammarTextEditor = observer(() => {
   // hover
   hoverProviderDisposer.current?.dispose();
   hoverProviderDisposer.current = monacoLanguagesAPI.registerHoverProvider(
-    EDITOR_LANGUAGE.PURE,
+    CODE_EDITOR_LANGUAGE.PURE,
     {
       provideHover: (model, position) => {
         const currentWord = model.getWordAtPosition(position);
@@ -944,42 +946,45 @@ export const GrammarTextEditor = observer(() => {
   // suggestion
   suggestionProviderDisposer.current?.dispose();
   suggestionProviderDisposer.current =
-    monacoLanguagesAPI.registerCompletionItemProvider(EDITOR_LANGUAGE.PURE, {
-      // NOTE: we need to specify this to show suggestions for section
-      // because by default, only alphanumeric characters trigger completion item provider
-      // See https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.CompletionContext.html#triggerCharacter
-      // See https://github.com/microsoft/monaco-editor/issues/2530#issuecomment-861757198
-      triggerCharacters: ['#'],
-      provideCompletionItems: (model, position) => {
-        let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
+    monacoLanguagesAPI.registerCompletionItemProvider(
+      CODE_EDITOR_LANGUAGE.PURE,
+      {
+        // NOTE: we need to specify this to show suggestions for section
+        // because by default, only alphanumeric characters trigger completion item provider
+        // See https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.CompletionContext.html#triggerCharacter
+        // See https://github.com/microsoft/monaco-editor/issues/2530#issuecomment-861757198
+        triggerCharacters: ['#'],
+        provideCompletionItems: (model, position) => {
+          let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
 
-        // suggestions for parser keyword
-        suggestions = suggestions.concat(
-          getParserKeywordSuggestions(
-            position,
-            model,
-            collectParserKeywordSuggestions(editorStore),
-          ),
-        );
+          // suggestions for parser keyword
+          suggestions = suggestions.concat(
+            getParserKeywordSuggestions(
+              position,
+              model,
+              collectParserKeywordSuggestions(editorStore),
+            ),
+          );
 
-        // suggestions for parser element snippets
-        suggestions = suggestions.concat(
-          getParserElementSnippetSuggestions(
-            position,
-            model,
-            (parserName: string) =>
-              collectParserElementSnippetSuggestions(editorStore, parserName),
-          ),
-        );
+          // suggestions for parser element snippets
+          suggestions = suggestions.concat(
+            getParserElementSnippetSuggestions(
+              position,
+              model,
+              (parserName: string) =>
+                collectParserElementSnippetSuggestions(editorStore, parserName),
+            ),
+          );
 
-        // inline code snippet suggestions
-        suggestions = suggestions.concat(
-          getInlineSnippetSuggestions(position, model),
-        );
+          // inline code snippet suggestions
+          suggestions = suggestions.concat(
+            getInlineSnippetSuggestions(position, model),
+          );
 
-        return { suggestions };
+          return { suggestions };
+        },
       },
-    });
+    );
 
   useEffect(() => {
     if (editor && forcedCursorPosition) {
@@ -1025,7 +1030,7 @@ export const GrammarTextEditor = observer(() => {
   useEffect(
     () => (): void => {
       if (editor) {
-        disposeEditor(editor);
+        disposeCodeEditor(editor);
       }
       // NOTE: make sure the call the disposer again after leaving this editor
       // else we would end up with duplicated suggestions and hover infos
@@ -1080,8 +1085,8 @@ export const GrammarTextEditor = observer(() => {
         </div>
       </div>
       <PanelContent className="edit-panel__content">
-        <div ref={ref} className="text-editor__container">
-          <div className="text-editor__body" ref={textEditorRef} />
+        <div ref={ref} className="code-editor__container">
+          <div className="code-editor__body" ref={textEditorRef} />
         </div>
       </PanelContent>
     </div>

package/src/components/editor/edit-panel/ModelImporter.tsx

@@ -40,15 +40,15 @@ import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
   useApplicationStore,
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_LANGUAGE,
   useApplicationNavigationContext,
-  TextInputEditor,
 } from '@finos/legend-application';
 import type { ModelImporterExtensionConfiguration } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../application/LegendStudioApplicationNavigationContext.js';
 import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
 import { SchemaSetModelGenerationEditor } from './external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.js';
 import { SchemaSetGeneralEditor } from './external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const ExternalFormatModelImporterEditor = observer(
   (props: { externalFormatState: ExternalFormatModelImporterState }) => {
@@ -189,12 +189,12 @@ export const ModelImporter = observer(() => {
         modelImportEditorState.setModelText(val);
       return (
         <div className="panel__content model-loader__editor">
-          <TextInputEditor
+          <CodeEditor
             language={
               modelImportEditorState.nativeType ===
               MODEL_IMPORT_NATIVE_INPUT_TYPE.PURE_GRAMMAR
-                ? EDITOR_LANGUAGE.PURE
-                : EDITOR_LANGUAGE.JSON
+                ? CODE_EDITOR_LANGUAGE.PURE
+                : CODE_EDITOR_LANGUAGE.JSON
             }
             inputValue={modelImportEditorState.modelText}
             updateInput={updateModel}

package/src/components/editor/edit-panel/connection-editor/DatabaseBuilder.tsx

@@ -45,8 +45,7 @@ import {
 } from '../../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
 import { capitalize } from '@finos/legend-shared';
 import {
-  EDITOR_LANGUAGE,
-  TextInputEditor,
+  CODE_EDITOR_LANGUAGE,
   useApplicationStore,
   useConditionedApplicationNavigationContext,
 } from '@finos/legend-application';
@@ -56,6 +55,7 @@ import {
 } from './DatabaseEditorHelper.js';
 import { flowResult } from 'mobx';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const getNodeIcon = (node: DatabaseBuilderTreeNodeData): React.ReactNode => {
   if (node instanceof SchemaDatabaseBuilderTreeNodeData) {
@@ -344,8 +344,8 @@ export const DatabaseBuilder = observer(
                     </div>
                   </div>
                   <PanelContent>
-                    <TextInputEditor
-                      language={EDITOR_LANGUAGE.PURE}
+                    <CodeEditor
+                      language={CODE_EDITOR_LANGUAGE.PURE}
                       inputValue={databaseBuilderState.databaseGrammarCode}
                       isReadOnly={true}
                     />

package/src/components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -89,10 +89,9 @@ import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../
 import { DatabaseBuilder } from './DatabaseBuilder.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_LANGUAGE,
   buildElementOption,
   type PackageableElementOption,
-  TextInputEditor,
 } from '@finos/legend-application';
 import { connection_setStore } from '../../../../stores/editor/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import {
@@ -165,6 +164,7 @@ import {
 import { MapperPostProcessorEditor } from './post-processor-editor/MapperPostProcessorEditor.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { MapperPostProcessorEditorState } from '../../../../stores/editor/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const LocalH2DatasourceSpecificationEditor = observer(
   (props: {
@@ -186,7 +186,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
               <Modal darkMode={true} className="editor-modal">
                 <ModalHeader title="test data setup SQL" />
                 <ModalBody className="modal__body__large">
-                  <TextInputEditor
+                  <CodeEditor
                     inputValue={SQLValue}
                     updateInput={(value: string | undefined): void =>
                       localH2DatasourceSpecification_setTestDataSetupSqls(
@@ -195,7 +195,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
                       )
                     }
                     isReadOnly={isReadOnly}
-                    language={EDITOR_LANGUAGE.SQL}
+                    language={CODE_EDITOR_LANGUAGE.SQL}
                   />
                 </ModalBody>
                 <ModalFooter>
@@ -218,7 +218,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
             </Button>
           </div>
           <div className="panel__content__form__section__text-editor">
-            <TextInputEditor
+            <CodeEditor
               inputValue={SQLValue}
               updateInput={(value: string | undefined): void =>
                 localH2DatasourceSpecification_setTestDataSetupSqls(
@@ -227,7 +227,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
                 )
               }
               isReadOnly={isReadOnly}
-              language={EDITOR_LANGUAGE.SQL}
+              language={CODE_EDITOR_LANGUAGE.SQL}
             />
           </div>
         </div>

package/src/components/editor/edit-panel/data-editor/DataElementEditor.tsx

@@ -72,12 +72,12 @@ import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-sta
 import type { ExternalFormatDataState } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
 import { renderEmbeddedDataEditor } from './EmbeddedDataEditor.js';
 import {
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
-  TextInputEditor,
   useApplicationNavigationContext,
   useApplicationStore,
 } from '@finos/legend-application';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../application/LegendStudioDocumentation.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const ExternalFormatDataEditor = observer(
   (props: {
@@ -154,7 +154,7 @@ export const ExternalFormatDataEditor = observer(
         </div>
         <div className={clsx('external-format-data-editor__content')}>
           <div className="external-format-data-editor__content__input">
-            <TextInputEditor
+            <CodeEditor
               language={language}
               inputValue={externalFormatDataState.embeddedData.data}
               updateInput={changeData}
@@ -269,7 +269,7 @@ export const DataElementEditor = observer(() => {
   );
   const seeDocumentation = (): void =>
     applicationStore.assistantService.openDocumentationEntry(
-      LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_CREATE_A_DATA_ELEMENT,
+      LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_CREATE_A_DATA_ELEMENT,
     );
 
   useApplicationNavigationContext(

package/src/components/editor/edit-panel/data-editor/EmbeddedDataEditor.tsx

@@ -45,8 +45,9 @@ import {
   RelationalCSVDataState,
 } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
 import type { DataElement } from '@finos/legend-graph';
-import { buildElementOption, TextInputEditor } from '@finos/legend-application';
+import { buildElementOption } from '@finos/legend-application';
 import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const ExternalFormatDataEditor = observer(
   (props: {
@@ -134,7 +135,7 @@ export const ExternalFormatDataEditor = observer(
         </div>
         <div className={clsx('external-format-data-editor__content')}>
           <div className="external-format-data-editor__content__input">
-            <TextInputEditor
+            <CodeEditor
               language={language}
               inputValue={externalFormatDataState.embeddedData.data}
               updateInput={changeData}

package/src/components/editor/edit-panel/data-editor/RelationalCSVDataEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-application';
 import {
   BlankPanelPlaceholder,
   clsx,
@@ -32,6 +32,7 @@ import type { RelationalCSVDataTable } from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useState } from 'react';
 import type { RelationalCSVDataState } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const RelationalTableIdentifierModal = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
@@ -225,11 +226,11 @@ export const RelationalCSVDataEditor = observer(
             <div className="relational-data-editor__content">
               {currentTableState && (
                 <div className="relational-data-editor__values">
-                  <TextInputEditor
+                  <CodeEditor
                     inputValue={currentTableState.table.values}
                     updateInput={updateTableValues}
                     isReadOnly={isReadOnly}
-                    language={EDITOR_LANGUAGE.TEXT}
+                    language={CODE_EDITOR_LANGUAGE.TEXT}
                   />
                 </div>
               )}

package/src/components/editor/edit-panel/diff-editor/EntityChangeConflictEditor.tsx

@@ -24,8 +24,8 @@ import {
 } from 'monaco-editor';
 import {
   TAB_SIZE,
-  EDITOR_THEME,
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
+  CODE_EDITOR_LANGUAGE,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -44,19 +44,21 @@ import {
 import {
   clsx,
   CustomSelectorInput,
-  disposeEditor,
-  getBaseTextEditorOptions,
-  moveCursorToPosition,
-  setErrorMarkers,
-  resetLineNumberGutterWidth,
-  getEditorValue,
-  normalizeLineEnding,
   CompareIcon,
   ArrowDownIcon,
   ArrowUpIcon,
   useResizeDetector,
-  clearMarkers,
 } from '@finos/legend-art';
+import {
+  disposeCodeEditor,
+  getBaseCodeEditorOptions,
+  moveCursorToPosition,
+  setErrorMarkers,
+  resetLineNumberGutterWidth,
+  getCodeEditorValue,
+  normalizeLineEnding,
+  clearMarkers,
+} from '@finos/legend-lego/code-editor';
 import { TextDiffView } from '../../../shared/DiffView.js';
 import { getPrettyLabelForRevision } from '../../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
 import { flowResult } from 'mobx';
@@ -192,9 +194,9 @@ const MergeConflictEditor = observer(
       if (!editor && textInputRef.current) {
         const element = textInputRef.current;
         const _editor = monacoEditorAPI.create(element, {
-          ...getBaseTextEditorOptions(),
-          theme: EDITOR_THEME.LEGEND,
-          language: EDITOR_LANGUAGE.PURE,
+          ...getBaseCodeEditorOptions(),
+          theme: CODE_EDITOR_THEME.LEGEND,
+          language: CODE_EDITOR_LANGUAGE.PURE,
           minimap: { enabled: false },
           formatOnType: true,
           formatOnPaste: true,
@@ -210,7 +212,7 @@ const MergeConflictEditor = observer(
       onDidChangeModelContentEventDisposer.current?.dispose();
       onDidChangeModelContentEventDisposer.current =
         editor.onDidChangeModelContent(() => {
-          conflictEditorState.setMergedText(getEditorValue(editor));
+          conflictEditorState.setMergedText(getCodeEditorValue(editor));
           conflictEditorState.clearMergeEditorError();
         });
 
@@ -280,7 +282,7 @@ const MergeConflictEditor = observer(
       // CodeLens registration
       mergeConflictResolutionCodeLensDisposer.current?.dispose();
       mergeConflictResolutionCodeLensDisposer.current =
-        monacoLanguagesAPI.registerCodeLensProvider(EDITOR_LANGUAGE.PURE, {
+        monacoLanguagesAPI.registerCodeLensProvider(CODE_EDITOR_LANGUAGE.PURE, {
           provideCodeLenses: (model, token) => ({
             lenses: conflictEditorState.mergeConflicts.flatMap((conflict) =>
               [
@@ -522,7 +524,7 @@ const MergeConflictEditor = observer(
     useEffect(() => {
       if (editor) {
         const editorModel = editor.getModel();
-        const currentValue = getEditorValue(editor);
+        const currentValue = getCodeEditorValue(editor);
         if (editorModel && currentValue !== value) {
           if (!hasInitializedTextValue) {
             editor.setValue(value);
@@ -576,7 +578,7 @@ const MergeConflictEditor = observer(
     useEffect(
       () => (): void => {
         if (editor) {
-          disposeEditor(editor);
+          disposeCodeEditor(editor);
         }
         onDidChangeModelContentEventDisposer.current?.dispose();
         onDidChangeCursorPositionEventDisposer.current?.dispose();
@@ -588,8 +590,8 @@ const MergeConflictEditor = observer(
     ); // dispose editor
 
     return (
-      <div ref={ref} className="text-editor__container">
-        <div className="text-editor__body" ref={textInputRef} />
+      <div ref={ref} className="code-editor__container">
+        <div className="code-editor__body" ref={textInputRef} />
       </div>
     );
   },
@@ -764,7 +766,7 @@ export const EntityChangeConflictEditor = observer(
           {currentMode !==
             ENTITY_CHANGE_CONFLICT_EDITOR_VIEW_MODE.MERGE_VIEW && (
             <TextDiffView
-              language={EDITOR_LANGUAGE.PURE}
+              language={CODE_EDITOR_LANGUAGE.PURE}
               from={currentModeComparisonViewInfo.fromGrammarText ?? ''}
               to={currentModeComparisonViewInfo.toGrammarText ?? ''}
             />

package/src/components/editor/edit-panel/diff-editor/EntityDiffView.tsx

@@ -28,7 +28,7 @@ import { type EntityDiff, EntityChangeType } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   useApplicationStore,
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_LANGUAGE,
 } from '@finos/legend-application';
 import { sortObjectKeys } from '@finos/legend-shared';
 
@@ -153,7 +153,7 @@ export const EntityDiffView = observer(
         <div className="entity-diff-view__content">
           {diffEditorState.diffMode === DIFF_VIEW_MODE.GRAMMAR && (
             <TextDiffView
-              language={EDITOR_LANGUAGE.PURE}
+              language={CODE_EDITOR_LANGUAGE.PURE}
               from={fromGrammarText}
               to={toGrammarText}
             />

package/src/components/editor/edit-panel/element-generation-editor/ElementNativeView.tsx

@@ -21,9 +21,9 @@ import { ELEMENT_NATIVE_VIEW_MODE } from '../../../../stores/editor/EditorConfig
 import { flowResult } from 'mobx';
 import {
   useApplicationStore,
-  EDITOR_LANGUAGE,
-  TextInputEditor,
+  CODE_EDITOR_LANGUAGE,
 } from '@finos/legend-application';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const ElementNativeView = observer(
   (props: { currentElementState: ElementEditorState }) => {
@@ -32,8 +32,8 @@ export const ElementNativeView = observer(
     const generatedText = currentElementState.textContent;
     const editorLanguage =
       currentElementState.editMode === ELEMENT_NATIVE_VIEW_MODE.GRAMMAR
-        ? EDITOR_LANGUAGE.PURE
-        : EDITOR_LANGUAGE.JSON;
+        ? CODE_EDITOR_LANGUAGE.PURE
+        : CODE_EDITOR_LANGUAGE.JSON;
 
     useEffect(() => {
       switch (currentElementState.editMode) {
@@ -51,7 +51,7 @@ export const ElementNativeView = observer(
     }, [applicationStore, currentElementState, currentElementState.editMode]);
 
     return (
-      <TextInputEditor
+      <CodeEditor
         inputValue={generatedText}
         language={editorLanguage}
         isReadOnly={true}

package/src/components/editor/edit-panel/element-generation-editor/FileSystemViewer.tsx

@@ -49,11 +49,9 @@ import {
   FileSystem_File,
   getFileSystemChildNodes,
 } from '../../../../stores/editor/shared/FileSystemTreeUtils.js';
-import {
-  TextInputEditor,
-  useApplicationStore,
-} from '@finos/legend-application';
+import { useApplicationStore } from '@finos/legend-application';
 import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const FileSystemTreeNodeContainer: React.FC<
   TreeNodeContainerProps<
@@ -278,7 +276,7 @@ export const FileSystemViewer = observer(
             </div>
             <PanelContent>
               {fileNode instanceof FileSystem_File && (
-                <TextInputEditor
+                <CodeEditor
                   inputValue={getTextContent(fileNode.content, fileNode.format)}
                   isReadOnly={true}
                   language={getEditorLanguageForFormat(fileNode.format)}

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -44,7 +44,7 @@ import {
   type InnerSchemaSetEditorState,
   SCHEMA_SET_TAB_TYPE,
 } from '../../../../stores/editor/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
-import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-application';
 import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/FileGenerationViewerState.js';
 import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -56,6 +56,7 @@ import {
   externalFormat_schema_setLocation,
 } from '../../../../stores/editor/shared/modifier/DSL_ExternalFormat_GraphModifierHelper.js';
 import { SchemaSetModelGenerationEditor } from './DSL_ExternalFormat_SchemaSetModelGenerationEditor.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const SchemaLoader = observer(
   (props: {
@@ -147,7 +148,7 @@ const SchemaLoader = observer(
 const SchemaBasicEditor = observer(
   (props: {
     schema: Schema;
-    language: EDITOR_LANGUAGE;
+    language: CODE_EDITOR_LANGUAGE;
     isReadOnly: boolean;
   }) => {
     const { schema, isReadOnly, language } = props;
@@ -176,7 +177,7 @@ const SchemaBasicEditor = observer(
         />
         <div className={clsx('schema-editor__content')}>
           <div className="schema-editor__content__input">
-            <TextInputEditor
+            <CodeEditor
               inputValue={schema.content}
               language={language}
               updateInput={(val: string): void => {
@@ -207,7 +208,7 @@ export const SchemaSetGeneralEditor = observer(
     // TEMPROARY engine api should return `fileformat`.
     const language = description
       ? getEditorLanguageForFormat(description.name)
-      : EDITOR_LANGUAGE.TEXT;
+      : CODE_EDITOR_LANGUAGE.TEXT;
     const changeState =
       (schema: Schema): (() => void) =>
       (): void => {

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx

@@ -31,7 +31,8 @@ import {
   ResizablePanelSplitterLine,
 } from '@finos/legend-art';
 import { GenerationPropertyEditor } from '../element-generation-editor/FileGenerationEditor.js';
-import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-application';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 enum HIDDEN_CONFIGURATION_PROPERTIES {
   FORMAT = 'format',
@@ -212,10 +213,10 @@ export const SchemaSetModelGenerationEditor = observer(
                       .isInProgress
                   }
                 />
-                <TextInputEditor
+                <CodeEditor
                   inputValue={modelGenerationState.generationValue}
                   isReadOnly={true}
-                  language={EDITOR_LANGUAGE.PURE}
+                  language={CODE_EDITOR_LANGUAGE.PURE}
                 />
               </PanelContent>
             </div>

package/src/components/editor/edit-panel/mapping-editor/MappingEditor.tsx

@@ -50,7 +50,7 @@ import {
 import { MappingElementState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementState.js';
 import { MappingExplorer } from './MappingExplorer.js';
 import { MappingTestEditor } from './MappingTestEditor.js';
-import { DEPRECATED_MappingTestState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingTestState.js';
+import { DEPRECATED__MappingTestState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingTestState.js';
 import { MappingTestsExplorer } from './MappingTestsExplorer.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { MappingExecutionState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionState.js';
@@ -151,7 +151,7 @@ export const MappingEditor = observer(() => {
   const isReadOnly = mappingEditorState.isReadOnly;
   const currentTabState = mappingEditorState.currentTabState;
   const renderActiveMappingElementTab = (): React.ReactNode => {
-    if (currentTabState instanceof DEPRECATED_MappingTestState) {
+    if (currentTabState instanceof DEPRECATED__MappingTestState) {
       return (
         <MappingTestEditor
           key={currentTabState.uuid}
@@ -256,7 +256,7 @@ export const MappingEditor = observer(() => {
                         />
                       }
                     >
-                      {tabState instanceof DEPRECATED_MappingTestState && (
+                      {tabState instanceof DEPRECATED__MappingTestState && (
                         <>
                           <FlaskIcon className="mapping-editor__header__tab__icon--test" />
                           <button