Hacking ACE Editor to hide cursor in read-only mode.

Author: Martin Krulis

src/components/forms/Fields/MarkdownTextAreaField.js

@@ -40,10 +40,7 @@ class MarkdownTextAreaField extends Component {
         <SourceCodeField {...this.props} mode="markdown" readOnly={disabled} />
         <Row>
           <Col sm={4}>
-            <OnOffCheckbox
-              name={`${name}.togglePreview`}
-              checked={showPreview}
-              onChange={() => this.toggleShowPreview()}>
+            <OnOffCheckbox name={`${name}.togglePreview`} checked={showPreview} onChange={this.toggleShowPreview}>
               <FormattedMessage id="app.markdownTextArea.showPreview" defaultMessage="Preview" />
             </OnOffCheckbox>
           </Col>

src/components/forms/Fields/SourceCodeField.js

@@ -11,32 +11,35 @@ import { loadAceEditor, getAceModeFromExtension } from '../../helpers/AceEditorL
 let AceEditor = loadAceEditor();
 
 const SourceCodeField = (
-  { input, mode, meta: { error, warning }, label = null, children, tabIndex, onBlur, ...props },
+  { input, mode, meta: { error, warning }, label = null, children, tabIndex, onBlur, readOnly = false, ...props },
   { userSettings: { vimMode = false, darkTheme = false } }
 ) => (
   <FormGroup controlId={input.name} validationState={error ? 'error' : warning ? 'warning' : undefined}>
     {Boolean(label) && <ControlLabel>{label}</ControlLabel>}
     <ClientOnly>
-      <AceEditor
-        {...props}
-        {...input}
-        mode={getAceModeFromExtension(mode)}
-        theme={darkTheme ? 'monokai' : 'github'}
-        name={input.name}
-        tabIndex={tabIndex}
-        keyboardHandler={vimMode ? 'vim' : undefined}
-        width="100%"
-        height="100%"
-        minLines={5}
-        maxLines={20}
-        onBlur={
-          () => input.onBlur() // this is a hack that will ensure blur call witout distorting the contents
-        }
-        editorProps={{
-          $blockScrolling: Infinity,
-          $autoScrollEditorIntoView: true,
-        }}
-      />
+      <div className={readOnly ? 'noselection' : ''}>
+        <AceEditor
+          {...props}
+          {...input}
+          mode={getAceModeFromExtension(mode)}
+          theme={darkTheme ? 'monokai' : 'github'}
+          name={input.name}
+          tabIndex={tabIndex}
+          keyboardHandler={vimMode ? 'vim' : undefined}
+          width="100%"
+          height="100%"
+          minLines={5}
+          maxLines={20}
+          readOnly={readOnly}
+          onBlur={
+            () => input.onBlur() // this is a hack that will ensure blur call witout distorting the contents
+          }
+          editorProps={{
+            $blockScrolling: Infinity,
+            $autoScrollEditorIntoView: true,
+          }}
+        />
+      </div>
     </ClientOnly>
     {error && <HelpBlock> {error} </HelpBlock>}
     {!error && warning && <HelpBlock> {warning} </HelpBlock>}
@@ -61,6 +64,7 @@ SourceCodeField.propTypes = {
     PropTypes.element,
     PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage]) }),
   ]),
+  readOnly: PropTypes.bool,
   onBlur: PropTypes.func,
 };
 

src/containers/App/recodex.css

@@ -184,3 +184,15 @@ th.shrink-col {
 .wider-tooltip>.tooltip-inner {
   max-width: 300px;
 }
+
+
+/*
+ * ACE Editor Overrides
+ */
+.noselection .ace_marker-layer .ace_selection {
+  background: transparent !important;
+}
+
+.noselection .ace_cursor {
+  color: transparent !important;
+}