[UI Framework] Add isReadOnly prop to KuiCodeEditor.

ui_framework/dist/ui_framework.css

@@ -688,6 +688,10 @@ input[type="button"] {
 
 .kuiCodeEditorWrapper {
   position: relative; }
+  .kuiCodeEditorWrapper .ace_hidden-cursors {
+    opacity: 0; }
+  .kuiCodeEditorWrapper.kuiCodeEditorWrapper-isEditing .ace_hidden-cursors {
+    opacity: 1; }
 
 .kuiCodeEditorKeyboardHint {
   position: absolute;

ui_framework/doc_site/src/views/code_editor/code_editor_example.js

@@ -11,6 +11,9 @@ import {
 import CodeEditor from './code_editor';
 const codeEditorSource = require('!!raw-loader!./code_editor');
 
+import ReadOnly from './read_only';
+const readOnlySource = require('!!raw-loader!./read_only');
+
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
@@ -36,5 +39,17 @@ export default props => (
         <CodeEditor />
       </GuideDemo>
     </GuideSection>
+
+    <GuideSection
+      title="Read-only"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: readOnlySource,
+      }]}
+    >
+      <GuideDemo>
+        <ReadOnly />
+      </GuideDemo>
+    </GuideSection>
   </GuidePage>
 );

ui_framework/doc_site/src/views/code_editor/read_only.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+import 'brace/mode/less';
+import 'brace/theme/github';
+
+import {
+  KuiCodeEditor
+} from '../../../../components';
+
+export default class extends Component {
+  state = {
+    value: '<p>This code is read only</p>'
+  };
+
+  render() {
+    return (
+      <KuiCodeEditor
+        mode="less"
+        theme="github"
+        width="100%"
+        value={this.state.value}
+        setOptions={{ fontSize: '14px' }}
+        isReadOnly
+      />
+    );
+  }
+}

ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KuiCodeEditor hint element should be disabled when the ui ace box gains focus 1`] = `
+exports[`KuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
 <div
   className="kuiCodeEditorKeyboardHint kuiCodeEditorKeyboardHint-isInactive"
   data-test-subj="codeEditorHint"
@@ -23,7 +23,7 @@ exports[`KuiCodeEditor hint element should be disabled when the ui ace box gains
 </div>
 `;
 
-exports[`KuiCodeEditor hint element should be enabled when the ui ace box loses focus 1`] = `
+exports[`KuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
 <div
   className="kuiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
@@ -158,3 +158,99 @@ exports[`KuiCodeEditor is rendered 1`] = `
   </div>
 </div>
 `;
+
+exports[`KuiCodeEditor props isReadOnly doesn't render hint 1`] = `
+<div
+  class="kuiCodeEditorWrapper"
+>
+  <div
+    class=" ace_editor ace-tm"
+    id="brace-editor"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+        style="display: none;"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;

ui_framework/src/components/code_editor/_code_editor.scss

@@ -1,5 +1,15 @@
 .kuiCodeEditorWrapper {
   position: relative;
+
+  .ace_hidden-cursors {
+    opacity: 0;
+  }
+
+  &.kuiCodeEditorWrapper-isEditing {
+    .ace_hidden-cursors {
+      opacity: 1;
+    }
+  }
 }
 
 .kuiCodeEditorKeyboardHint {

ui_framework/src/components/code_editor/code_editor.js

@@ -6,9 +6,9 @@ import AceEditor from 'react-ace';
 import { htmlIdGenerator, keyCodes } from '../../../services';
 
 export class KuiCodeEditor extends Component {
-
   state = {
-    isHintActive: true
+    isHintActive: true,
+    isEditing: false,
   };
 
   idGenerator = htmlIdGenerator();
@@ -30,6 +30,15 @@ export class KuiCodeEditor extends Component {
     }
   }
 
+  onFocusAce = (...args) => {
+    this.setState({
+      isEditing: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus(...args);
+    }
+  }
+
   onBlurAce = (...args) => {
     this.stopEditing();
     if (this.props.onBlur) {
@@ -45,55 +54,97 @@ export class KuiCodeEditor extends Component {
   };
 
   startEditing = () => {
-    this.setState({ isHintActive: false });
+    this.setState({
+      isHintActive: false,
+    });
     this.aceEditor.editor.textInput.focus();
   }
 
   stopEditing() {
-    this.setState({ isHintActive: true });
+    this.setState({
+      isHintActive: true,
+      isEditing: false,
+    });
   }
 
   render() {
     const {
       width,
       height,
       onBlur, // eslint-disable-line no-unused-vars
+      isReadOnly,
+      setOptions,
+      cursorStart,
       ...rest,
     } = this.props;
 
-    const classes = classNames('kuiCodeEditorKeyboardHint', {
+    const classes = classNames('kuiCodeEditorWrapper', {
+      'kuiCodeEditorWrapper-isEditing': this.state.isEditing,
+    });
+
+    const promptClasses = classNames('kuiCodeEditorKeyboardHint', {
       'kuiCodeEditorKeyboardHint-isInactive': !this.state.isHintActive
     });
 
+    let filteredCursorStart;
+
+    const options = { ...setOptions };
+
+    if (isReadOnly) {
+      // Put the cursor at the beginning of the editor, so that it doesn't look like
+      // a prompt to begin typing.
+      filteredCursorStart = -1;
+
+      Object.assign(options, {
+        readOnly: true,
+        highlightActiveLine: false,
+        highlightGutterLine: false,
+      });
+    } else {
+      filteredCursorStart = cursorStart;
+    }
+
+    const activity =
+      isReadOnly
+      ? 'interacting with the code'
+      : 'editing';
+
+    const prompt = (
+      <div
+        className={promptClasses}
+        id={this.idGenerator('codeEditor')}
+        ref={(hint) => { this.editorHint = hint; }}
+        tabIndex="0"
+        role="button"
+        onClick={this.startEditing}
+        onKeyDown={this.onKeyDownHint}
+        data-test-subj="codeEditorHint"
+      >
+        <p className="kuiText kuiVerticalRhythmSmall">
+          Press Enter to start {activity}.
+        </p>
+
+        <p className="kuiText kuiVerticalRhythmSmall">
+          When you&rsquo;re done, press Escape to stop {activity}.
+        </p>
+      </div>
+    );
+
     return (
       <div
-        className="kuiCodeEditorWrapper"
+        className={classes}
         style={{ width, height }}
       >
-        <div
-          className={classes}
-          id={this.idGenerator('codeEditor')}
-          ref={(hint) => { this.editorHint = hint; }}
-          tabIndex="0"
-          role="button"
-          onClick={this.startEditing}
-          onKeyDown={this.onKeyDownHint}
-          data-test-subj="codeEditorHint"
-        >
-          <p className="kuiText kuiVerticalRhythmSmall">
-            Press Enter to start editing.
-          </p>
-
-          <p className="kuiText kuiVerticalRhythmSmall">
-            When you&rsquo;re done, press Escape to stop editing.
-          </p>
-        </div>
+        {prompt}
 
         <AceEditor
           ref={this.aceEditorRef}
           width={width}
           height={height}
+          onFocus={this.onFocusAce}
           onBlur={this.onBlurAce}
+          setOptions={options}
+          cursorStart={filteredCursorStart}
           {...rest}
         />
       </div>
@@ -105,4 +156,11 @@ KuiCodeEditor.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   onBlur: PropTypes.func,
+  isReadOnly: PropTypes.bool,
+  setOptions: PropTypes.object,
+  cursorStart: PropTypes.number,
+};
+
+KuiCodeEditor.defaultProps = {
+  setOptions: {},
 };