Ace editor POC

awx/ui_next/package-lock.json

@@ -2786,6 +2786,11 @@
         "negotiator": "0.6.2"
       }
     },
+    "ace-builds": {
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.12.tgz",
+      "integrity": "sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg=="
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -6230,6 +6235,11 @@
         }
       }
     },
+    "diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
     "diff-sequences": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
@@ -11295,11 +11305,15 @@
       "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
-      "dev": true
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -14175,6 +14189,18 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-ace": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-9.3.0.tgz",
+      "integrity": "sha512-RWPDwVobLvyD0wDoHHQqEnn9pNQBhMnmo6LmRACkaXxAg3UQZpse6x9JFLC5EXyWby+P3uolIlQPct4NFEBPNg==",
+      "requires": {
+        "ace-builds": "^1.4.6",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-app-polyfill": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz",

awx/ui_next/package.json

@@ -11,6 +11,7 @@
     "@patternfly/react-core": "^4.90.2",
     "@patternfly/react-icons": "4.7.22",
     "@patternfly/react-table": "^4.19.15",
+    "ace-builds": "^1.4.12",
     "ansi-to-html": "^0.6.11",
     "axios": "^0.21.1",
     "codemirror": "^5.47.0",
@@ -22,6 +23,7 @@
     "js-yaml": "^3.13.1",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
+    "react-ace": "^9.3.0",
     "react-codemirror2": "^6.0.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",

awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx

@@ -1,16 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import { oneOf, bool, number, string, func } from 'prop-types';
+import AceEditor from 'react-ace';
+// import * as ace from 'ace-builds';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-yaml';
+import 'ace-builds/src-noconflict/theme-github';
 import { Controlled as ReactCodeMirror } from 'react-codemirror2';
 import styled from 'styled-components';
-import 'codemirror/mode/javascript/javascript';
+// import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/yaml/yaml';
+// import 'codemirror/mode/yaml/yaml';
-import 'codemirror/mode/jinja2/jinja2';
+// import 'codemirror/mode/jinja2/jinja2';
-import 'codemirror/lib/codemirror.css';
+// import 'codemirror/lib/codemirror.css';
-import 'codemirror/addon/display/placeholder';
+// import 'codemirror/addon/display/placeholder';
+// require("ace/edit_session").EditSession.prototype.$useWorker=false
 
 const LINE_HEIGHT = 24;
 const PADDING = 12;
 
+// ace.config.set('basePath', 'path');
+
 const CodeMirror = styled(ReactCodeMirror)`
   && {
     height: initial;
@@ -95,22 +104,37 @@ function CodeMirrorInput({
   }
 
   return (
-    <CodeMirror
+    <>
-      className={`pf-c-form-control ${className}`}
+      {/* <CodeMirror
-      value={value}
+        className={`pf-c-form-control ${className}`}
-      onBeforeChange={(editor, data, val) => onChange(val)}
+        value={value}
-      mode={mode}
+        onBeforeChange={(editor, data, val) => onChange(val)}
-      hasErrors={hasErrors}
+        mode={mode}
-      options={{
+        hasErrors={hasErrors}
-        smartIndent: false,
+        options={{
-        lineNumbers: true,
+          smartIndent: false,
-        lineWrapping: true,
+          lineNumbers: true,
-        placeholder,
+          lineWrapping: true,
-        readOnly,
+          placeholder,
-      }}
+          readOnly,
-      fullHeight={fullHeight}
+        }}
-      rows={rows}
+        fullHeight={fullHeight}
-    />
+        rows={rows}
+      /> */}
+      <AceEditor
+        mode={mode === 'javascript' ? 'json' : mode}
+        theme="github"
+        onChange={onChange}
+        value={value}
+        name="UNIQUE_ID_OF_DIV"
+        editorProps={{ $blockScrolling: true }}
+        width="100%"
+        setOptions={{
+          readOnly,
+          useWorker: false,
+        }}
+      />
+    </>
   );
 }
 CodeMirrorInput.propTypes = {