custom ace editor syntax highlighting

dashboard/package.json

@@ -24,6 +24,7 @@
     "@visx/tooltip": "^1.3.0",
     "ace-builds": "^1.4.12",
     "axios": "^0.20.0",
+    "brace": "^0.11.1",
     "d3-array": "^2.11.0",
     "d3-time-format": "^3.0.0",
     "dotenv": "^8.2.0",

dashboard/src/components/YamlEditor.tsx

@@ -2,8 +2,8 @@ import React, { Component } from "react";
 import styled from "styled-components";
 import AceEditor from "react-ace";
 
+import "shared/ace-porter-theme"
 import "ace-builds/src-noconflict/mode-yaml";
-import "ace-builds/src-noconflict/theme-terminal";
 
 type PropsType = {
   value: string;
@@ -45,7 +45,7 @@ class YamlEditor extends Component<PropsType, StateType> {
           <AceEditor
             mode="yaml"
             value={this.props.value}
-            theme="terminal"
+            theme="porter"
             onChange={this.props.onChange}
             name="codeEditor"
             readOnly={this.props.readOnly}

dashboard/src/main/home/modals/EnvEditorModal.tsx

@@ -3,8 +3,7 @@ import styled from "styled-components";
 import close from "assets/close.png";
 import AceEditor from "react-ace";
 
-import "ace-builds/src-noconflict/mode-yaml";
-import "ace-builds/src-noconflict/theme-terminal";
+import "shared/ace-porter-theme"
 
 import { Context } from "shared/Context";
 
@@ -34,7 +33,7 @@ export default class EnvEditorModal extends Component<PropsType, StateType> {
   };
 
   onChange = (e: string) => { 
-      this.setState({envFile: e})
+    this.setState({envFile: e})
   }
 
   componentDidMount() {
@@ -56,20 +55,16 @@ export default class EnvEditorModal extends Component<PropsType, StateType> {
           <AceEditor
             mode="markdown"
             value={this.state.envFile}
-            theme="terminal"
+            theme="porter"
             onChange={(e: string) => this.onChange(e)}
             name="codeEditor"
             editorProps={{ $blockScrolling: true }}
             height="100%"
             width="100%"
-            style={{    
-                borderRadius: "5px", 
-                fontFamily: "monospace !important"
-            }}
-            showPrintMargin={true}
+            showPrintMargin={false}
             showGutter={true}
             highlightActiveLine={true}
-            fontSize={15}
+            fontSize={14}
           />
         </Editor>
 
@@ -153,4 +148,4 @@ const StyledLoadEnvGroupModal = styled.div`
   overflow: hidden;
   border-radius: 6px;
   background: #202227;
-`;
+`;

dashboard/src/shared/ace-porter-theme.js

@@ -0,0 +1,111 @@
+import ace from 'brace';
+
+ace['define']('ace/theme/porter', ['require', 'exports', 'module', 'ace/lib/dom'], (acequire, exports) => {
+    exports.isDark = true;
+    exports.cssClass = "ace-porter";
+    exports.cssText = `.ace-porter, div.ace_content, div.ace_line, div.ace_gutter-cell {\
+    font-family: monospace;
+    font-size: 14px;
+    }
+    .ace-porter {
+    background-color: #191919;
+    }
+    .ace-porter .ace_gutter {
+    background: #232323;
+    color: #929292
+    }
+    .ace-porter .ace_print-margin {
+    width: 1px;
+    background: #232323
+    }
+    .ace-porter .ace_cursor {
+    color: white
+    }
+    .ace-porter .ace_marker-layer .ace_selection {
+    background: #000000
+    }
+    .ace-porter.ace_multiselect .ace_selection.ace_start {
+    box-shadow: 0 0 3px 0px #191919;
+    }
+    .ace-porter .ace_marker-layer .ace_step {
+    background: rgb(102, 82, 0)
+    }
+    .ace-porter .ace_marker-layer .ace_bracket {
+    margin: -1px 0 0 -1px;
+    border: 1px solid #BFBFBF
+    }
+    .ace-porter .ace_marker-layer .ace_active-line {
+    background: rgba(215, 215, 215, 0.031)
+    }
+    .ace-porter .ace_gutter-active-line {
+    background-color: rgba(215, 215, 215, 0.031)
+    }
+    .ace-porter .ace_marker-layer .ace_selected-word {
+    border: 1px solid #424242
+    }
+    .ace-porter .ace_invisible {
+    color: #343434
+    }
+    .ace-porter .ace_keyword,
+    .ace-porter .ace_meta,
+    .ace-porter .ace_storage,
+    .ace-porter .ace_storage.ace_type,
+    .ace-porter .ace_support.ace_type {
+    color: tomato
+    }
+    .ace-porter .ace_keyword.ace_operator {
+    color: deeppink
+    }
+    .ace-porter .ace_constant.ace_character,
+    .ace-porter .ace_constant.ace_language,
+    .ace-porter .ace_constant.ace_numeric,
+    .ace-porter .ace_keyword.ace_other.ace_unit,
+    .ace-porter .ace_support.ace_constant,
+    .ace-porter .ace_variable.ace_parameter {
+    color: #E78C45
+    }
+    .ace-porter .ace_constant.ace_other {
+    color: gold
+    }
+    .ace-porter .ace_invalid {
+    color: yellow;
+    background-color: red
+    }
+    .ace-porter .ace_invalid.ace_deprecated {
+    color: #CED2CF;
+    background-color: #B798BF
+    }
+    .ace-porter .ace_fold {
+    background-color: #7AA6DA;
+    border-color: #DEDEDE
+    }
+    .ace-porter .ace_entity.ace_name.ace_function,
+    .ace-porter .ace_support.ace_function,
+    .ace-porter .ace_variable {
+    color: #7AA6DA
+    }
+    .ace-porter .ace_support.ace_class,
+    .ace-porter .ace_support.ace_type {
+    color: #E7C547
+    }
+    .ace-porter .ace_heading,
+    .ace-porter .ace_string {
+    color: #B9CA4A
+    }
+    .ace-porter .ace_entity.ace_name.ace_tag,
+    .ace-porter .ace_entity.ace_other.ace_attribute-name,
+    .ace-porter .ace_meta.ace_tag,
+    .ace-porter .ace_string.ace_regexp,
+    .ace-porter .ace_variable {
+    color: #D54E53
+    }
+    .ace-porter .ace_comment {
+    color: orangered
+    }
+    .ace-porter .ace_indent-guide {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYLBWV/8PAAK4AYnhiq+xAAAAAElFTkSuQmCC) right repeat-y;
+    }`;
+    
+    var dom = acequire("../lib/dom");
+    dom.importCssString(exports.cssText, exports.cssClass);
+});