@finos/legend-application-studio 23.1.6 → 23.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "23.1.6",
+  "version": "23.1.8",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -44,18 +44,19 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "13.0.10",
-    "@finos/legend-art": "5.0.42",
-    "@finos/legend-graph": "26.0.3",
-    "@finos/legend-query-builder": "2.1.1",
-    "@finos/legend-server-depot": "4.4.12",
-    "@finos/legend-server-sdlc": "4.1.35",
-    "@finos/legend-shared": "8.0.5",
-    "@finos/legend-storage": "3.0.46",
+    "@finos/legend-application": "14.0.0",
+    "@finos/legend-art": "6.0.0",
+    "@finos/legend-graph": "26.0.5",
+    "@finos/legend-lego": "0.1.0",
+    "@finos/legend-query-builder": "2.1.3",
+    "@finos/legend-server-depot": "4.4.13",
+    "@finos/legend-server-sdlc": "4.1.36",
+    "@finos/legend-shared": "8.1.0",
+    "@finos/legend-storage": "3.0.47",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.0.33",
+    "@types/react": "18.0.34",
     "@types/react-dom": "18.0.11",
-    "fast-xml-parser": "4.1.3",
+    "fast-xml-parser": "4.2.0",
     "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
     "mobx-utils": "6.0.6",
@@ -68,15 +69,15 @@
     "yaml": "2.2.1"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.51",
+    "@finos/legend-dev-utils": "2.0.52",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
-    "eslint": "8.37.0",
+    "eslint": "8.38.0",
     "jest": "29.5.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "4.4.1",
-    "sass": "1.60.0",
-    "typescript": "5.0.3"
+    "rimraf": "5.0.0",
+    "sass": "1.62.0",
+    "typescript": "5.0.4"
   },
   "peerDependencies": {
     "react": "^18.0.0"
@@ -87,9 +88,5 @@
   "extensions": {
     "applicationStudioPlugin": "@finos/legend-application-studio-plugin-core",
     "dsl_external_format_applicationStudioPlugin": "@finos/legend-application-studio-plugin-dsl-external-format"
-  },
-  "typedoc": {
-    "entryPoint": "./src/index.ts",
-    "readmeFile": "./README.md"
   }
 }

package/src/application/LegendStudio.tsx

@@ -19,10 +19,8 @@ import { LegendStudioApplication } from '../components/LegendStudioApplication.j
 import { LegendStudioPluginManager } from './LegendStudioPluginManager.js';
 import {
   type LegendApplicationConfig,
-  type LegendApplicationLogger,
   ApplicationStoreProvider,
   LegendApplication,
-  setupLegendApplicationUILibrary,
   WebApplicationNavigatorProvider,
   type LegendApplicationConfigurationInput,
   BrowserRouter,
@@ -38,17 +36,8 @@ import { Core_LegendStudioApplicationPlugin } from '../components/extensions/Cor
 import {
   QueryBuilder_GraphManagerPreset,
   QueryBuilder_LegendApplicationPlugin,
-  setupQueryBuilderUILibrary,
 } from '@finos/legend-query-builder';
 
-const setupLegendStudioUILibrary = async (
-  pluginManager: LegendStudioPluginManager,
-  logger: LegendApplicationLogger,
-): Promise<void> => {
-  await setupLegendApplicationUILibrary(pluginManager, logger);
-  await setupQueryBuilderUILibrary();
-};
-
 export class LegendStudio extends LegendApplication {
   declare config: LegendStudioApplicationConfig;
   declare pluginManager: LegendStudioPluginManager;
@@ -74,15 +63,8 @@ export class LegendStudio extends LegendApplication {
   }
 
   async loadApplication(): Promise<void> {
-    // Setup React application libraries
-    await setupLegendStudioUILibrary(this.pluginManager, this.logger);
-
-    // Render React application
     const rootElement = createRoot(getRootElement());
     rootElement.render(
-      // TODO: would be great if we can have <React.StrictMode> here but since Mobx React is not ready for
-      // concurrency yet, we would have to wait
-      // See https://github.com/mobxjs/mobx/issues/2526
       <BrowserRouter basename={this.baseUrl}>
         <WebApplicationNavigatorProvider>
           <ApplicationStoreProvider

package/src/application/LegendStudioDocumentation.ts

@@ -69,6 +69,11 @@ export enum LEGEND_STUDIO_DOCUMENTATION_KEY {
   QUESTION_HOW_TO_WRITE_A_CONSTRAINT_LAMBDA = 'question.how-to-write-a-class-constraint-lambda',
   QUESTION_HOW_TO_SPECIFY_A_SUPERTYPE = 'question.how-to-specify-a-class-supertype',
   QUESTION_HOW_TO_UPDATE_PROJECT_GAV_COORDINATES = 'question.how-to-update-project-gav-coordinates',
+  QUESTION_WHEN_TO_CONFIGURE_PLATFORM_VERSIONS = 'question.when-to-configure-project-platform-dependencies-versions',
+  QUESTION_HOW_TO_WRITE_A_SERVICE_TEST = 'question.how-to-write-a-service-test',
+  QUESTION_WHY_DO_I_SEE_ERROR_WITH_ASSOCIATION_PROPERTY_TYPE = 'question.why-do-i-see-error-with-association-property-type',
+  QUESTION_HOW_TO_WRITE_SERVICE_CONNECTION_TEST_DATA = 'question.how-to-write-service-connection-test-data',
+  QUESTION_HOW_TO_CREATE_A_DATA_ELEMENT = 'question.how-to-create-a-data-element',
 
   // contexts
   CONTEXT_CLASS_EDITOR = 'context.class-editor',

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

@@ -71,8 +71,11 @@ import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../../store
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { PackageableDataEditorState } from '../../../stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
 import { DataElementEditor } from './data-editor/DataElementEditor.js';
-import { TabManager, type TabState } from '@finos/legend-application';
 import { ElementXTGenerationEditor } from './element-generation-editor/ElementXTGenerationEditor.js';
+import {
+  TabManager,
+  type TabState,
+} from '@finos/legend-application/components';
 
 export const ViewerEditPanelSplashScreen: React.FC = () => {
   const commandListWidth = 300;

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

@@ -29,7 +29,7 @@ import {
 } from '@finos/legend-art';
 import type { FileGenerationSpecification } from '@finos/legend-graph';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import { TextInputEditor } from '@finos/legend-application';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const FileGenerationViewer = observer(() => {
   const editorStore = useEditorStore();
@@ -90,7 +90,7 @@ export const FileGenerationViewer = observer(() => {
             </div>
           </div>
           <PanelContent>
-            <TextInputEditor
+            <CodeEditor
               inputValue={getTextContent(
                 generatedFile.content,
                 generatedFile.format,

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 ?? ''}
             />