Merge pull request #1515 from swagger-api/feature/configs-selector-for-editor-options

Add editorOptions from state ( relies on configsPlugin )

Author: shockey

src/plugins/editor/components/editor-container.jsx

@@ -20,24 +20,33 @@ export default class EditorContainer extends React.Component {
   }
 
   render() {
-    let { specSelectors, getComponent, errSelectors, fn, readOnly, editorSelectors } = this.props
+    let { specSelectors, getComponent, errSelectors, fn, editorSelectors, configsSelectors } = this.props
 
     let Editor = getComponent("Editor")
 
     let wrapperClasses = ["editor-wrapper"]
+    const readOnly = !!configsSelectors.get("readOnly")
 
     if(readOnly) {
       wrapperClasses.push("read-only")
     }
 
     let propsForEditor = this.props
 
+    const editorOptions = {
+      enableLiveAutocompletion: configsSelectors.get("editorLiveAutocomplete"),
+      readOnly: readOnly,
+      highlightActiveLine: !readOnly,
+      highlightGutterLine: !readOnly,
+    }
+
     return (
       <div id='editor-wrapper' className={wrapperClasses.join(" ")}>
         { readOnly ? <h2 className="editor-readonly-watermark">Read Only</h2> : null }
         <Editor
           {...propsForEditor}
           value={specSelectors.specStr()}
+          editorOptions={editorOptions}
           specObject={specSelectors.specJson().toJS()}
           errors={errSelectors.allErrors()}
           onChange={this.onChange}
@@ -56,11 +65,11 @@ EditorContainer.defaultProps = {
 
 EditorContainer.propTypes = {
   specActions: PropTypes.object.isRequired,
+  configsSelectors: PropTypes.object.isRequired,
   onChange: PropTypes.func,
   fn: PropTypes.object,
   specSelectors: PropTypes.object.isRequired,
   errSelectors: PropTypes.object.isRequired,
   editorSelectors: PropTypes.object.isRequired,
   getComponent: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool
 }

src/plugins/editor/components/editor.jsx

@@ -6,6 +6,8 @@ import { placeMarkerDecorations } from "../editor-helpers/marker-placer"
 import Im, { fromJS } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"
 
+import isUndefined from "lodash/isUndefined"
+import omit from "lodash/omit"
 import isEqual from "lodash/isEqual"
 import isEmpty from "lodash/isEmpty"
 
@@ -69,10 +71,11 @@ export default function makeEditor({ editorPluginsToRun }) {
         langTools, AST, specObject
       })
 
-
       editor.setHighlightActiveLine(false)
       editor.setHighlightActiveLine(true)
 
+      this.syncOptionsFromState(this.props.editorOptions)
+
       props.editorActions.onLoad({...props, langTools, editor})
     }
 
@@ -118,24 +121,6 @@ export default function makeEditor({ editorPluginsToRun }) {
       }
     }
 
-    setReadOnlyOptions = (nextProps) => {
-      let { state } = this
-
-      if(nextProps.readOnly === true && state.editor) {
-        state.editor.setOptions({
-          readOnly: true,
-          highlightActiveLine: false,
-          highlightGutterLine: false
-        })
-      } else if(state.editor) {
-        state.editor.setOptions({
-          readOnly: false,
-          highlightActiveLine: true,
-          highlightGutterLine: true
-        })
-      }
-    }
-
     updateMarkerAnnotations = (nextProps, { force } = {}) => {
       let { state } = this
       let { onMarkerLineUpdate } = nextProps
@@ -157,6 +142,7 @@ export default function makeEditor({ editorPluginsToRun }) {
       // allows our custom Editor styling for IE10 to take effect
       var doc = document.documentElement
       doc.setAttribute("data-useragent", navigator.userAgent)
+      this.syncOptionsFromState(this.props.editorOptions)
     }
 
     componentDidMount() {
@@ -175,9 +161,12 @@ export default function makeEditor({ editorPluginsToRun }) {
       let wasEmptyBefore = (k) => nextProps[k] && (!this.props[k] || isEmpty(this.props[k]))
 
       this.updateErrorAnnotations(nextProps)
-      this.setReadOnlyOptions(nextProps)
       this.updateMarkerAnnotations(nextProps)
 
+      if(hasChanged("editorOptions")) {
+        this.syncOptionsFromState(nextProps.editorOptions)
+      }
+
       if(state.editor && nextProps.goToLine && nextProps.goToLine.line && hasChanged("goToLine")) {
         state.editor.gotoLine(nextProps.goToLine.line)
         nextProps.editorActions.jumpToLine(null)
@@ -189,6 +178,21 @@ export default function makeEditor({ editorPluginsToRun }) {
 
     }
 
+    syncOptionsFromState(editorOptions) {
+      const { editor } = this.state
+      if(!editor) {
+        return
+      }
+
+      const setOptions = omit(editorOptions, ["readOnly"])
+      editor.setOptions(setOptions)
+
+      const readOnly = isUndefined(editorOptions.readOnly)
+            ? false
+            : editorOptions.readOnly // If its undefined, default to false.
+      editor.setReadOnly(readOnly)
+    }
+
     yaml = this.yaml || "";
 
     shouldComponentUpdate(nextProps) {
@@ -199,7 +203,6 @@ export default function makeEditor({ editorPluginsToRun }) {
     }
 
     render() {
-      let { readOnly } = this.props
       const value = this.yaml
 
       return (
@@ -214,7 +217,6 @@ export default function makeEditor({ editorPluginsToRun }) {
               height="100%"
               tabSize={2}
               fontSize={14}
-              readOnly={readOnly}
               useSoftTabs="true"
               wrapEnabled={true}
               editorProps={{
@@ -250,12 +252,11 @@ export default function makeEditor({ editorPluginsToRun }) {
   Editor.propTypes = {
     specId: PropTypes.string,
     value: PropTypes.string,
+    editorOptions: PropTypes.object,
 
     onChange: PropTypes.func,
     onMarkerLineUpdate: PropTypes.func,
 
-    readOnly: PropTypes.bool,
-
     markers: PropTypes.object,
     goToLine: PropTypes.object,
     specObject: PropTypes.object.isRequired,
@@ -271,9 +272,9 @@ export default function makeEditor({ editorPluginsToRun }) {
     onChange: NOOP,
     onMarkerLineUpdate: NOOP,
     markers: {},
-    readOnly: false,
     goToLine: {},
     errors: fromJS([]),
+    editorOptions: {},
   }
 
   return Editor