New Console

app/components/GQLCodeMirror/index.tsx

@@ -1,26 +1,19 @@
 import { Collapse, CollapseProps } from 'antd';
 import { useI18n } from '@vesoft-inc/i18n';
 
-import CodeMirror from '@app/components/CodeMirror';
+import MonacoEditor from '@app/components/MonacoEditor';
 
 import styles from './index.module.less';
 interface IOptions {
   [propName: string]: any;
 }
 const GQLCodeMirror = (props: { currentGQL: string; option?: IOptions }) => {
-  const options = {
-    keyMap: 'sublime',
-    fullScreen: true,
-    mode: 'nebula',
-    readOnly: true,
-    ...props.option,
-  };
   const { intl } = useI18n();
   const items: CollapseProps['items'] = [
     {
       key: 'ngql',
       label: intl.get('common.exportNGQL'),
-      children: <CodeMirror value={props.currentGQL} options={options} height="80px" />,
+      children: <MonacoEditor value={props.currentGQL} readOnly height="80px" />,
     },
   ];
   return <Collapse className={styles.exportGql} items={items} />;

app/components/MonacoEditor/index.module.less

@@ -0,0 +1,32 @@
+:global {
+  /* padding between the gutter and code */
+  .monaco-editor .view-line {
+    padding-left: 5px;
+  }
+
+  /* fix cursor location */
+  .monaco-editor .cursor {
+    margin-left: 5px;
+  }
+
+  /* fix highlighted text selection */
+  .monaco-editor .selectionHighlight {
+    margin-left: 5px;
+  }
+
+  /* fix highlighted brackets */
+  .monaco-editor .bracket-match {
+    margin-left: 5px;
+  }
+
+  /* fix multiline text selection */
+  .monaco-editor .cslr.selected-text {
+    margin-left: 5px;
+  }
+
+  /* fix multiline text selection */
+  .monaco-editor .bottom-left-radius, .monaco-editor .top-left-radius {
+    margin-left: 5px;
+  }
+
+}