onChange

src/client/js/components/Admin/MarkdownSetting/WhiteListInput.jsx

@@ -21,7 +21,7 @@ class WhiteListInput extends React.Component {
 
   render() {
     const { t, customizable } = this.props;
-
+    const { onChangeTagWhiteList, onChangeAttrWhiteList } = this.props;
 
     return (
       <>
@@ -31,7 +31,7 @@ class WhiteListInput extends React.Component {
             {customizable && this.renderRecommendBtn()}
           </div>
           {/* TODO GW-304 fetch correct defaultValue */}
-          <textarea className="form-control xss-list" name="recommendedTags" rows="6" cols="40" readOnly={!customizable} defaultValue="recommendedWhitelist.tags" />
+          <textarea className="form-control xss-list" name="recommendedTags" rows="6" cols="40" readOnly={!customizable} defaultValue="recommendedWhitelist.tags" onChange={(e) => { onChangeTagWhiteList(e.target.value) }} />
         </div>
         <div className="m-t-15">
           <div className="d-flex justify-content-between">
@@ -39,7 +39,7 @@ class WhiteListInput extends React.Component {
             {customizable && this.renderRecommendBtn()}
           </div>
           {/* TODO GW-304 fetch correct defaultValue */}
-          <textarea className="form-control xss-list" name="recommendedAttrs" rows="6" cols="40" readOnly={!customizable} defaultValue="recommendedWhitelist.attrs" />
+          <textarea className="form-control xss-list" name="recommendedAttrs" rows="6" cols="40" readOnly={!customizable} defaultValue="recommendedWhitelist.attrs" onChange={(e) => { onChangeAttrWhiteList(e.target.value) }} />
         </div>
       </>
     );
@@ -56,6 +56,8 @@ WhiteListInput.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   customizable: PropTypes.bool.isRequired,
+  onChangeTagWhiteList: PropTypes.func,
+  onChangeAttrWhiteList: PropTypes.func,
 };
 
 export default withTranslation()(WhiteListWrapper);

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-state */
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -18,7 +19,6 @@ class XssForm extends React.Component {
     this.state = {
       // TODO GW-304 fetch correct value
       isEnabledXss: false,
-      // eslint-disable-next-line react/no-unused-state
       XssOption: 1,
       tagWhiteList: appContainer.config.tagWhiteList,
       attrWhiteList: '',
@@ -26,6 +26,8 @@ class XssForm extends React.Component {
 
     this.onChangeEnableXss = this.onChangeEnableXss.bind(this);
     this.onChangeXssOption = this.onChangeXssOption.bind(this);
+    this.onChangeTagWhiteList = this.onChangeTagWhiteList.bind(this);
+    this.onChangeAttrWhiteList = this.onChangeAttrWhiteList.bind(this);
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
@@ -34,10 +36,17 @@ class XssForm extends React.Component {
   }
 
   onChangeXssOption(value) {
-    // eslint-disable-next-line react/no-unused-state
     this.setState({ XssOption: value });
   }
 
+  onChangeTagWhiteList(value) {
+    this.setState({ tagWhiteList: value });
+  }
+
+  onChangeAttrWhiteList(value) {
+    this.setState({ attrWhiteList: value });
+  }
+
   async componentDidMount() {
     await this.syncXssSettings();
   }
@@ -77,7 +86,7 @@ class XssForm extends React.Component {
           <input type="radio" id="xssOption3" name="XssOption" onChange={() => { this.onChangeXssOption(3) }} />
           <label htmlFor="xssOption3">
             <p className="font-weight-bold">{ t('markdown_setting.Custom Whitelist') }</p>
-            <WhiteListInput customizable />
+            <WhiteListInput customizable onChangeTagWhiteList={this.onChangeTagWhiteList} onChangeAttrWhiteList={this.onChangeAttrWhiteList} />
           </label>
         </div>
       </fieldset>