FB

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

@@ -20,9 +20,18 @@ class CustomizeCssSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      editorInputValue: '',
+    };
+
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { customizeCss } = this.props.appContainer.getConfig();
+    this.setState({ editorInputValue: customizeCss || '' });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -37,7 +46,7 @@ class CustomizeCssSetting extends React.Component {
   }
 
   render() {
-    const { t, appContainer, adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -50,7 +59,7 @@ class CustomizeCssSetting extends React.Component {
           <div className="col-xs-12">
             <CustomCssEditor
               // The value passed must be immutable
-              value={appContainer.config.customizeCss || ''}
+              value={this.state.editorInputValue}
               onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeCss(inputValue) }}
             />
           </div>

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

@@ -20,9 +20,18 @@ class CustomizeHeaderSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      editorInputValue: '',
+    };
+
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { customizeHeader } = this.props.appContainer.getConfig();
+    this.setState({ editorInputValue: customizeHeader || '' });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -37,7 +46,7 @@ class CustomizeHeaderSetting extends React.Component {
   }
 
   render() {
-    const { t, appContainer, adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -60,7 +69,7 @@ class CustomizeHeaderSetting extends React.Component {
         <div className="col-xs-12">
           <CustomHeaderEditor
             // The value passed must be immutable
-            value={appContainer.config.customizeHeader || ''}
+            value={this.state.editorInputValue}
             onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeHeader(inputValue) }}
           />
         </div>

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

@@ -20,9 +20,18 @@ class CustomizeScriptSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      editorInputValue: '',
+    };
+
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { customizeScript } = this.props.appContainer.getConfig();
+    this.setState({ editorInputValue: customizeScript || '' });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -45,7 +54,7 @@ class CustomizeScriptSetting extends React.Component {
   }
 
   render() {
-    const { t, appContainer, adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -81,7 +90,7 @@ class CustomizeScriptSetting extends React.Component {
           <div className="col-xs-12">
             <CustomScriptEditor
               // The value passed must be immutable
-              value={appContainer.config.customizeScript || ''}
+              value={this.state.editorInputValue}
               onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeScript(inputValue) }}
             />
           </div>