New Console (#665)

* mod: update fetch space list logic * feat: add schema in console * mod: remove * feat: add editor hightlight * mod: update monaco editor * mod: update drawer * feat: add / history provider * feat: support running select rows * mod: code review --------- Co-authored-by: Nut He <[email protected]>
vesoft-inc · Nov 1, 2023 · 77a6d46 · 77a6d46
1 parent 4872aeb
commit 77a6d46
Show file tree

Hide file tree

Showing 27 changed files with 1,751 additions and 467 deletions.
diff --git a/app/components/CodeMirror/index.less b/app/components/CodeMirror/index.less
diff --git a/app/components/CodeMirror/index.tsx b/app/components/CodeMirror/index.tsx
diff --git a/app/components/GQLCodeMirror/index.tsx b/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} />;

diff --git a/app/components/MonacoEditor/index.module.less b/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;
+  }
+
+}