Fixed script editor

TIER · Jun 23, 2021 · 93f6527 · 93f6527
1 parent 3ca04e0
commit 93f6527
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 37 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git 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
@@ -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
@@ -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;
     }
 }
+