refactor CustomizeHeaderSetting

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

@@ -19,6 +19,7 @@ export default class CustomHeaderEditor extends React.Component {
       <CodeMirror
         value={this.props.value}
         autoFocus
+        detach
         options={{
           mode: 'htmlmixed',
           lineNumbers: true,

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

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import loggerFactory from '@alias/logger';
-
 import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -13,8 +11,6 @@ import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import CustomHeaderEditor from '../CustomHeaderEditor';
 
-const logger = loggerFactory('growi:Customize');
-
 class CustomizeHeaderSetting extends React.Component {
 
   constructor(props) {
@@ -32,7 +28,6 @@ class CustomizeHeaderSetting extends React.Component {
     }
     catch (err) {
       toastError(err);
-      logger.error(err);
     }
   }
 
@@ -59,8 +54,7 @@ class CustomizeHeaderSetting extends React.Component {
 
         <div className="col-xs-12">
           <CustomHeaderEditor
-            // The value passed must be immutable
-            defaultValue={adminCustomizeContainer.state.currentCustomizeHeader}
+            value={adminCustomizeContainer.state.currentCustomizeHeader}
             onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeHeader(inputValue) }}
           />
         </div>

src/client/js/services/AdminCustomizeContainer.js

@@ -349,14 +349,21 @@ export default class AdminCustomizeContainer extends Container {
   /**
    * Update customHeader
    * @memberOf AdminCustomizeContainer
-   * @return {string} Customize html header
    */
   async updateCustomizeHeader() {
-    const response = await this.appContainer.apiv3.put('/customize-setting/customize-header', {
-      customizeHeader: this.state.currentCustomizeHeader,
-    });
-    const { customizedParams } = response.data;
-    return customizedParams;
+    try {
+      const response = await this.appContainer.apiv3.put('/customize-setting/customize-header', {
+        customizeHeader: this.state.currentCustomizeHeader,
+      });
+      const { customizedParams } = response.data;
+      this.setState({
+        customizeHeader: customizedParams.customizeHeader,
+      });
+    }
+    catch (err) {
+      logger.error(err);
+      throw new Error('Failed to update data');
+    }
   }
 
   /**