src/plugins/editor/components/editor-container.jsx
import React from "react"
import PropTypes from "prop-types"
export default class EditorContainer extends React.Component {
// This is already debounced by editor.jsx
onChange = (value) => {
this.props.onChange(value)
}
render() {
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()}
origin={specSelectors.specOrigin()}
editorOptions={editorOptions}
specObject={specSelectors.specJson().toJS()}
errors={errSelectors.allErrors()}
onChange={this.onChange}
goToLine={editorSelectors.gotoLine()}
AST={fn.AST}
/>
</div>
)
}
}
EditorContainer.defaultProps = {
onChange: Function.prototype
}
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,
}