From 93f6527a99f2aaba5f48d639089b53535bde8336 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Wed, 23 Jun 2021 12:16:38 -0700
Subject: [PATCH] Fixed script editor

---
 ui/package-lock.json                          | 21 +++----------
 ui/package.json                               |  2 +-
 .../component/fields/FilterTargetField.js     | 31 ++++++++++---------
 ui/src/theme/project/forms.scss               | 18 +++++++----
 4 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index ab86d547d..8cbf388c2 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13213,22 +13213,6 @@
         }
       }
     },
-    "react-contenteditable": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.5.tgz",
-      "integrity": "sha512-38A7hlRQfb2KQAQT0kIJC2YlQUU7jcyYM4eh1fj6kAYb3Hmk6hHlr0snelyxVSpPXjPdFllrnSsPkzUS5AtrEA==",
-      "requires": {
-        "fast-deep-equal": "^2.0.1",
-        "prop-types": "^15.7.1"
-      },
-      "dependencies": {
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-        }
-      }
-    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -13607,6 +13591,11 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-simple-code-editor": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz",
+      "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw=="
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index 1046146a3..80e8551f8 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -20,12 +20,12 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-bootstrap-typeahead": "^5.1.4",
-    "react-contenteditable": "^3.3.5",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.5.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scroll": "^1.8.2",
+    "react-simple-code-editor": "^0.11.0",
     "use-http": "^1.0.20",
     "use-query-params": "^1.2.2",
     "web-vitals": "^1.0.1"
diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
index c273f3462..959306b71 100644
--- a/ui/src/app/form/component/fields/FilterTargetField.js
+++ b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -6,12 +6,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAsterisk, faCaretDown, faCaretUp, faEye, faEyeSlash, faPlus, faSpinner, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { useTranslator } from '../../../i18n/hooks';
 import { InfoIcon } from '../InfoIcon';
-import ContentEditable from 'react-contenteditable';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 import useFetch from 'use-http';
 import queryString from 'query-string';
 import API_BASE_PATH from '../../../App.constant';
 import isNil from 'lodash/isNil';
+import Editor from 'react-simple-code-editor';
+// import { highlight, languages } from 'prismjs/components/prism-core';
+// import 'prismjs/components/prism-clike';
+// import 'prismjs/components/prism-javascript';
 
 import { FilterTargetPreview } from '../../../metadata/hoc/FilterTargetPreview';
 
@@ -89,8 +92,6 @@ const FilterTargetField = ({
     const displayType = selectedType?.label || '';
     const targetType = selectedType?.value || null;
 
-    const ref = React.useRef(selectedTarget[0]);
-
     var handleTextChange = function (value) {
         setSelectedTarget([value]);
     };
@@ -187,20 +188,22 @@ const FilterTargetField = ({
                                     </>
                                 }
                                 { targetType === 'CONDITION_SCRIPT' &&
-                                    <>
-                                    <ContentEditable
-                                        role="textbox"
-                                        className="codearea form-control"
-                                        rows="8"
-                                        onChange={({ target: { value } }) => handleTextChange(value)}
-                                        html={ selectedTarget[0] ? selectedTarget[0] : '' }
-                                        innerRef={ref}
-                                        dangerouslySetInnerHTML={true}>
-                                    </ContentEditable>
+                                    <div className="editor">
+                                    <Editor
+                                        value={selectedTarget[0]}
+                                        highlight={(code) => code}
+                                        onValueChange={(code) => handleTextChange(code)}
+                                        padding={10}
+                                        className={`codearea border rounded ${!selectedTarget[0] && 'is-invalid border-danger'}`}
+                                        style={{
+                                            fontFamily: 'monospace',
+                                            fontSize: 15,
+                                        }}>
+                                    </Editor>
                                     {!selectedTarget[0] && <small id="script-help" className="text-danger">
                                         <Translate value="message.required-for-scripts">Required for Scripts</Translate>
                                     </small>}
-                                </> }
+                                </div> }
                                 {targetType === 'REGEX' &&
                                     <>
                                         <input id="targetInput"
diff --git a/ui/src/theme/project/forms.scss b/ui/src/theme/project/forms.scss
index b200b8191..8532aab7d 100644
--- a/ui/src/theme/project/forms.scss
+++ b/ui/src/theme/project/forms.scss
@@ -74,16 +74,21 @@ select.form-control:disabled {
     @include component-validation-state("invalid", $form-feedback-invalid-color);
 }
 
+.editor {
+    tab-size: 4ch;
+    max-height: 400px;
+    overflow: auto;
+}
+
 .codearea {
-    white-space: pre-wrap;
-    resize: vertical;
-    font-family: monospace;
+    // white-space: pre-wrap;
+    // resize: vertical;
     min-height: 166px;
     margin-bottom: 0px;
     word-break: break-word;
-    &[contenteditable] {
-        overflow-x: hidden;
-        overflow-y: scroll;
+
+    &.is-invalid > pre, &.is-invalid > textarea {
+        outline-color: transparent;
     }
 }
 
@@ -123,3 +128,4 @@ mark {
         border-left: 0px;
     }
 }
+