121773 fix WhitelistInput

apps/app/src/components/Admin/MarkdownSetting/WhiteIistInput.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
+import { defaultSchema as sanitizeDefaultSchema } from 'rehype-sanitize';
+
+import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
+class WhitelistInput extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.tagWhitelist = React.createRef();
+    this.attrWhitelist = React.createRef();
+
+    this.tags = sanitizeDefaultSchema.tagNames;
+    this.attrs = JSON.stringify(sanitizeDefaultSchema.attributes);
+
+    this.onClickRecommendTagButton = this.onClickRecommendTagButton.bind(this);
+    this.onClickRecommendAttrButton = this.onClickRecommendAttrButton.bind(this);
+  }
+
+  onClickRecommendTagButton() {
+    this.tagWhitelist.current.value = this.tags;
+    this.props.adminMarkDownContainer.setState({ tagWhitelist: this.tags });
+  }
+
+  onClickRecommendAttrButton() {
+    this.attrWhitelist.current.value = this.attrs;
+    this.props.adminMarkDownContainer.setState({ attrWhitelist: this.attrs });
+  }
+
+  render() {
+    const { t, adminMarkDownContainer } = this.props;
+
+    return (
+      <>
+        <div className="mt-4">
+          <div className="d-flex justify-content-between">
+            {t('markdown_settings.xss_options.tag_names')}
+            <p id="btn-import-tags" className="btn btn-sm btn-primary mb-0" onClick={this.onClickRecommendTagButton}>
+              {t('markdown_settings.xss_options.import_recommended', { target: 'Tags' })}
+            </p>
+          </div>
+          <textarea
+            className="form-control xss-list"
+            name="recommendedTags"
+            rows="6"
+            cols="40"
+            ref={this.tagWhitelist}
+            defaultValue={adminMarkDownContainer.state.tagWhitelist}
+            onChange={(e) => { adminMarkDownContainer.setState({ tagWhitelist: e.target.value }) }}
+          />
+        </div>
+        <div className="mt-4">
+          <div className="d-flex justify-content-between">
+            {t('markdown_settings.xss_options.tag_attributes')}
+            <p id="btn-import-tags" className="btn btn-sm btn-primary mb-0" onClick={this.onClickRecommendAttrButton}>
+              {t('markdown_settings.xss_options.import_recommended', { target: 'Attrs' })}
+            </p>
+          </div>
+          <textarea
+            className="form-control xss-list"
+            name="recommendedAttrs"
+            rows="6"
+            cols="40"
+            ref={this.attrWhitelist}
+            defaultValue={adminMarkDownContainer.state.attrWhitelist}
+            onChange={(e) => { adminMarkDownContainer.setState({ attrWhitelist: e.target.value }) }}
+          />
+        </div>
+      </>
+    );
+  }
+
+}
+
+
+WhitelistInput.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
+
+};
+
+const PresentationFormWrapperFC = (props) => {
+  const { t } = useTranslation('admin');
+
+  return <WhitelistInput t={t} {...props} />;
+};
+
+const WhitelistWrapper = withUnstatedContainers(PresentationFormWrapperFC, [AdminMarkDownContainer]);
+
+export default WhitelistWrapper;