feat(console): code editor component (#366)

* feat(console): code editor component

* fix: peer dep for monaco

* fix: options type

packages/console/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@logto/phrases": "^0.1.0",
     "@logto/schemas": "^0.1.0",
+    "@monaco-editor/react": "^4.3.1",
     "@silverhand/essentials": "^1.1.6",
     "classnames": "^2.3.1",
     "csstype": "^3.0.11",
@@ -25,6 +26,7 @@
     "i18next-browser-languagedetector": "^6.1.3",
     "ky": "^0.30.0",
     "lodash.kebabcase": "^4.1.1",
+    "monaco-editor": "^0.32.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.27.1",

packages/console/src/components/CodeEditor/index.module.scss

@@ -2,8 +2,4 @@
 
 .editor {
   margin: _.unit(1) 0;
-
-  textarea {
-    width: 100%;
-  }
 }

packages/console/src/components/CodeEditor/index.tsx

@@ -1,21 +1,51 @@
-import React, { ChangeEventHandler } from 'react';
+import MonacoEditor from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import React from 'react';
 
 import * as styles from './index.module.scss';
 
-// Will be implemented in LOG-1708, defined 2 basic props for now.
 type Props = {
+  language: string;
+  isDarkMode?: boolean;
+  height?: string;
+  isReadonly?: boolean;
   value?: string;
   onChange?: (value: string) => void;
 };
 
-const CodeEditor = ({ value, onChange }: Props) => {
-  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
-    onChange?.(event.target.value);
+const CodeEditor = ({
+  value,
+  onChange,
+  language,
+  height = '300px',
+  isReadonly = false,
+  isDarkMode,
+}: Props) => {
+  const handleChange = (changedValue = '') => {
+    onChange?.(changedValue);
+  };
+
+  // See https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.EditorOption.html
+  const options: monaco.editor.IStandaloneEditorConstructionOptions = {
+    readOnly: isReadonly,
+    scrollBeyondLastLine: false,
+    codeLens: false,
+    minimap: {
+      enabled: false,
+    },
+    folding: false,
   };
 
   return (
     <div className={styles.editor}>
-      <textarea rows={10} value={value} onChange={handleChange} />
+      <MonacoEditor
+        language={language}
+        height={height}
+        theme={isDarkMode ? 'vs-dark' : 'vs-light'}
+        value={value}
+        options={options}
+        onChange={handleChange}
+      />
     </div>
   );
 };

packages/console/src/components/Status/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   status: 'operational' | 'offline';

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -133,6 +133,7 @@ const ConnectorDetails = () => {
           </TabNav>
           <div className={styles.space} />
           <CodeEditor
+            language="json"
             value={config}
             onChange={(value) => {
               setConfig(value);

pnpm-lock.yaml

@@ -24,6 +24,7 @@ importers:
       '@logto/schemas': ^0.1.0
       '@parcel/core': ^2.3.2
       '@parcel/transformer-sass': ^2.3.2
+      '@monaco-editor/react': ^4.3.1
       '@silverhand/eslint-config': ^0.9.4
       '@silverhand/eslint-config-react': ^0.9.5
       '@silverhand/essentials': ^1.1.6
@@ -41,6 +42,7 @@ importers:
       ky: ^0.30.0
       lint-staged: ^11.1.1
       lodash.kebabcase: ^4.1.1
+      monaco-editor: ^0.32.1
       parcel: ^2.3.2
       postcss: ^8.4.6
       postcss-modules: ^4.3.0
@@ -58,6 +60,7 @@ importers:
     dependencies:
       '@logto/phrases': link:../phrases
       '@logto/schemas': link:../schemas
+      '@monaco-editor/react': 4.3.1_e62f1489d5efe674a41c3f8d6971effe
       '@silverhand/essentials': 1.1.6
       classnames: 2.3.1
       csstype: 3.0.11
@@ -65,6 +68,7 @@ importers:
       i18next-browser-languagedetector: 6.1.3
       ky: 0.30.0
       lodash.kebabcase: 4.1.1
+      monaco-editor: 0.32.1
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-hook-form: 7.27.1_react@17.0.2
@@ -2204,6 +2208,29 @@ packages:
       write-file-atomic: 3.0.3
     dev: true
 
+  /@monaco-editor/loader/1.2.0_monaco-editor@0.32.1:
+    resolution: {integrity: sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+    dependencies:
+      monaco-editor: 0.32.1
+      state-local: 1.0.7
+    dev: false
+
+  /@monaco-editor/react/4.3.1_e62f1489d5efe674a41c3f8d6971effe:
+    resolution: {integrity: sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0
+      react-dom: ^16.8.0 || ^17.0.0
+    dependencies:
+      '@monaco-editor/loader': 1.2.0_monaco-editor@0.32.1
+      monaco-editor: 0.32.1
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -9469,6 +9496,10 @@ packages:
     resolution: {integrity: sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==}
     dev: false
 
+  /monaco-editor/0.32.1:
+    resolution: {integrity: sha512-LUt2wsUvQmEi2tfTOK+tjAPvt7eQ+K5C4rZPr6SeuyzjAuAHrIvlUloTcOiGjZW3fn3a/jFQCONrEJbNOaCqbA==}
+    dev: false
+
   /ms/2.0.0:
     resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
     dev: true
@@ -12270,6 +12301,10 @@ packages:
       escape-string-regexp: 2.0.0
     dev: true
 
+  /state-local/1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+    dev: false
+
   /statuses/1.5.0:
     resolution: {integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=}
     engines: {node: '>= 0.6'}