create Appearance

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

@@ -35,12 +35,60 @@ class CustomizeCustomScriptSetting extends React.Component {
     }
   }
 
+  getExampleCode() {
+    return `console.log($('.main-container'));
+    window.addEventListener('load', (event) => {
+      console.log('config: ', appContainer.config);
+    });
+    `;
+  }
+
   render() {
     const { t } = this.props;
 
     return (
       <React.Fragment>
         <h2>{t('customize_page.Custom script')}</h2>
+        <p className="well">
+          { t('customize_page.write_java') }<br />
+          { t('customize_page.reflect_change') }
+        </p>
+
+        <p className="help-block">
+          Placeholders:<br />
+          (Available after <code>load</code> event)
+          <dl className="dl-horizontal">
+            <dt><code>$</code></dt>
+            <dd>jQuery instance</dd>
+            <dt><code>appContainer</code></dt>
+            <dd>GROWI App <a href="https://github.com/jamiebuilds/unstated">Unstated Container</a></dd>
+            <dt><code>growiRenderer</code></dt>
+            <dd>GROWI Renderer origin instance</dd>
+            <dt><code>growiPlugin</code></dt>
+            <dd>GROWI Plugin Manager instance</dd>
+            <dt><code>Crowi</code></dt>
+            <dd>Crowi legacy instance (jQuery based)</dd>
+          </dl>
+        </p>
+
+        <p className="help-block">
+          Examples:
+          <pre className="hljs"><code>{this.getExampleCode()}</code></pre>
+        </p>
+
+        <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('') }}" />
+          </div>
+          <div className="col-xs-12">
+            <p className="help-block text-right">
+              <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
+              { t('customize_page.ctrl_space') }
+            </p>
+          </div>
+        </div>
 
         <AdminUpdateButtonRow onClick={this.onClickSubmit} />
       </React.Fragment>