CodeEditor bugfixes

* fix typing space character
* hide cursor when editor doesn't have user focus
* show help text any time editor is in focus
* fix content shifting when help text appears/disappears
* remove 80 character "print limit" line

awx/ui_next/src/components/CodeEditor/CodeEditor.jsx

@@ -15,11 +15,16 @@ const PADDING = 12;
 
 const FocusWrapper = styled.div`
   && + .keyboard-help-text {
-    display: none;
+    opacity: 0;
+    transition: opacity 0.1s linear;
   }
 
   &:focus-within + .keyboard-help-text {
-    display: block;
+    opacity: 1;
+  }
+
+  & .ace_hidden-cursors .ace_cursor {
+    opacity: 0;
   }
 `;
 
@@ -71,7 +76,6 @@ function CodeEditor({
   className,
   i18n,
 }) {
-  const [isKeyboardFocused, setIsKeyboardFocused] = useState(false);
   const wrapper = useRef(null);
   const editor = useRef(null);
 
@@ -86,10 +90,7 @@ function CodeEditor({
   );
 
   const listen = useCallback(event => {
-    if (
+    if (wrapper.current === document.activeElement && event.key === 'Enter') {
-      (wrapper.current === document.activeElement && event.key === 'Enter') ||
-      event.key === ' '
-    ) {
       const editorInput = editor.current.refEditor?.querySelector('textarea');
       if (!editorInput) {
         return;
@@ -119,18 +120,7 @@ function CodeEditor({
 
   return (
     <>
-      <FocusWrapper
+      <FocusWrapper ref={wrapper} tabIndex={readOnly ? -1 : 0}>
-        ref={wrapper}
-        tabIndex={readOnly ? -1 : 0}
-        onFocus={e => {
-          if (e.target === e.currentTarget) {
-            setIsKeyboardFocused(true);
-          }
-          if (e.target.className.includes('ace_scrollbar')) {
-            setIsKeyboardFocused(false);
-          }
-        }}
-      >
         <AceEditor
           mode={aceModes[mode] || 'text'}
           className={`pf-c-form-control ${className}`}
@@ -148,6 +138,7 @@ function CodeEditor({
             highlightActiveLine: !readOnly,
             highlightGutterLine: !readOnly,
             useWorker: false,
+            showPrintMargin: false,
           }}
           commands={[
             {
@@ -168,7 +159,7 @@ function CodeEditor({
           ref={editor}
         />
       </FocusWrapper>
-      {isKeyboardFocused && !readOnly && (
+      {!readOnly && (
         <div
           className="pf-c-form__helper-text keyboard-help-text"
           aria-live="polite"