add editor

src/client/js/components/Admin/CustomScriptEditor.jsx

@@ -16,12 +16,10 @@ require('jquery-ui/ui/widgets/resizable');
 export default class CustomScriptEditor extends React.Component {
 
   render() {
-    // get initial value from inputElem
-    const value = this.props.inputElem.value;
 
     return (
       <CodeMirror
-        value={value}
+        value={this.props.value}
         autoFocus
         options={{
           mode: 'javascript',
@@ -43,7 +41,7 @@ export default class CustomScriptEditor extends React.Component {
           });
         }}
         onChange={(editor, data, value) => {
-          this.props.inputElem.value = value;
+          this.props.onChange(value);
         }}
       />
     );
@@ -52,5 +50,6 @@ export default class CustomScriptEditor extends React.Component {
 }
 
 CustomScriptEditor.propTypes = {
-  inputElem: PropTypes.object.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
 };

src/client/js/components/Admin/Customize/CustomizeCustomScriptSetting.jsx

@@ -11,6 +11,7 @@ import AppContainer from '../../../services/AppContainer';
 
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import CustomScriptEditor from '../CustomScriptEditor';
 
 const logger = loggerFactory('growi:customizeScript');
 
@@ -44,7 +45,7 @@ class CustomizeCustomScriptSetting extends React.Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, appContainer, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -78,9 +79,11 @@ class CustomizeCustomScriptSetting extends React.Component {
 
         <div className="form-group">
           <div className="col-xs-12">
-            <div id="custom-script-editor" />
-            {/* TODO set value */}
-            <input type="hidden" id="inputCustomScript" name="settingForm[customize:script]" value="{{ settingForm['customize:script'] | default('') }}" />
+            <CustomScriptEditor
+              // The value passed must be immutable
+              value={appContainer.config.customizeScript}
+              onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeScript(inputValue) }}
+            />
           </div>
           <div className="col-xs-12">
             <p className="help-block text-right">

src/client/js/services/AdminCustomizeContainer.js

@@ -84,6 +84,13 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ currentRecentCreatedLimit: value });
   }
 
+  /**
+   * Change customize script
+   */
+  changeCustomizeScript(inpuValue) {
+    this.setState({ currentCustomizeScript: inpuValue });
+  }
+
   /**
    * Update layout
    * @memberOf AdminCustomizeContainer