disable interactive elements of CodeEditor in readOnly mode

ansible · Feb 19, 2021 · 9922fca · 9922fca
1 parent a253fd0
commit 9922fca
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
@@ -44,6 +44,14 @@ const AceEditor = styled(ReactAce)`
       background: var(--pf-c-form-control--invalid--Background);
       border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);
     }`}
+
+  ${props =>
+    props.setOptions.readOnly &&
+    `
+    && .ace_cursor {
+      opacity: 0;
+    }
+    `}
 `;
 AceEditor.displayName = 'AceEditor';
 
@@ -132,6 +140,8 @@ function CodeEditor({
           hasErrors={hasErrors}
           setOptions={{
             readOnly,
+            highlightActiveLine: !readOnly,
+            highlightGutterLine: !readOnly,
             useWorker: false,
           }}
           commands={[