fix: xss

README.md

 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
 | showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
+| showAlertComment | boolean | false                               | false    | 评论成功之后，是否通过 Antd 的 Message 组件进行提示  |
+| showAlertReply | boolean | false                               | false    | 回复成功之后，是否通过 Antd 的 Message 组件进行提示  |
+| showAlertFavor | boolean | false                               | false    | 点赞/取消点赞成功之后，是否通过 Antd 的 Message 组件进行提示  |
 | token      | string  |                                    | false    |  [deprecate] token，用于身份认证，非必须。默认使用 cookie |
 
 
 | placeholder   | string          | 说点什么吧... | false    | 评论的中的提示文字                                                                                |
 | showEmoji     | boolean         | true          | false    | 是否显示 Toolbar 中表情工具                                                                       |
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
+| maxUpload    | number         |  1          | false    | 最大能够上传的图片数量                                                                  |
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性，则编辑器变为受控组件，需要父组件来维护 value                        |
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
 | onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数，text 为编辑器的文本，files 为上传的文件列表                           |

src/App.js

       withCredentials: true
     })
       .then(response => {
-        message.success("评论成功！");
+        if (this.props.showAlertComment) {
+          message.success("评论成功！");
+        }
         if (isFunction(cb)) cb();
         // 将数据写入到 list 中
         // 临时插入
       withCredentials: true
     })
       .then(response => {
-        message.success("回复成功！");
+        if (this.props.showAlertReply) {
+          message.success("回复成功！");
+        }
         if (isFunction(cb)) cb();
         // 将数据写入到 list 中
         // 临时插入
       withCredentials: true
     })
       .then(response => {
-        message.success(favored ? "取消点赞成功！" : "点赞成功！");
+        if (this.props.showAlertFavor) {
+          message.success(favored ? "取消点赞成功！" : "点赞成功！");
+        }
         // 更新 list 中的该项数据的 favored
         const list = this.state.list.map(item => {
           if (item.id === commentId) {
   API: PropTypes.string, // 评论的 API 前缀
   showList: PropTypes.bool, // 是否显示评论列表
   showEditor: PropTypes.bool, // 是否显示评论输入框
-  showHeader: PropTypes.bool // 是否显示评论顶部的提示
+  showHeader: PropTypes.bool, // 是否显示评论顶部的提示
+  showAlertComment: PropTypes.bool, // 评论成功之后，是否通过 Antd 的 Message 组件进行提示
+  showAlertReply: PropTypes.bool, // 回复成功之后，是否通过 Antd 的 Message 组件进行提示
+  showAlertFavor: PropTypes.bool // 点赞/取消点赞成功之后，是否通过 Antd 的 Message 组件进行提示
 };
 
 App.defaultProps = {
   API: "http://api.links123.net/comment/v1",
   showList: true,
   showEditor: true,
-  showHeader: true
+  showHeader: true,
+  showAlertComment: false,
+  showAlertReply: false,
+  showAlertFavor: false
 };
 
 export { Editor, RenderText };

src/components/CommentInput/index.js

 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { IMAGE_SPLIT } from "../../constant";
 import Comment from "../../Comment";
 
 class CommentInput extends Component {
   handleSubmit({ text, files }, cb) {
     let value = text;
     if (files && files.length) {
-      value += "<br /><br />";
+      value += IMAGE_SPLIT;
       files.forEach(file => {
-        value += `[${file}]`;
+        value += `${file},`;
       });
     }
+    if (value.substr(-1) === ",") {
+      value = value.slice(0, -1);
+    }
+
     const { action, commentId, replyId, callback } = this.props;
     if (action === "comment") {
       this.props.app.sCreateComment(

src/components/ContentItem/index.js

 import CommentInput from "../CommentInput";
 import avatar from "../../avatar";
 import { renderContent } from "../../helper";
+import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
 
 dayjs.locale("zh-cn");
     let newText = text;
     const { reply } = content;
     if (reply) {
-      newText = `${newText} //@<a href="/${reply.user_id}">${
-        reply.user_name
-      }</a> ${reply.content}`;
+      // newText = `${newText} //@<a href="/${reply.user_id}">${
+      //   reply.user_name
+      // }</a> ${reply.content}`;
+      newText = `${newText} //@${reply.user_name} ${reply.content}`;
+      // newText = (
+      //   <span>
+      //     {newText}
+      //     @<a href={`/${reply.user_id}`}>{reply.user_name}</a>{reply.content}
+      //   </span>
+      // )
       if (reply.reply) {
         return this.renderTextWithReply(newText, reply);
       }
 
     const { showInput } = this.state;
 
+    let newContent = content.content;
+    let images = "";
+    if (newContent.indexOf(IMAGE_SPLIT) !== -1) {
+      newContent = newContent.split(IMAGE_SPLIT);
+      images = newContent.pop();
+      newContent = newContent.join("");
+    }
+
     return (
       <div className="comment-item-box">
         <div className="comment-item-left">
             className="comment-item-content"
             dangerouslySetInnerHTML={{
               __html: renderContent(
-                this.renderTextWithReply(content.content, content)
+                this.renderTextWithReply(newContent, content)
               )
             }}
           />
+          <div className="comment-item-image">
+            {images.split(",").map((item, index) => {
+              return (
+                <img
+                  key={index}
+                  src={item}
+                  alt={item}
+                  style={{ maxWidth: "100%" }}
+                />
+              );
+            })}
+          </div>
           <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>

src/components/Editor/Upload.js

   OSS_ENDPOINT,
   OSS_BUCKET,
   DRIVER_LICENSE_PATH,
-  ERROR_DEFAULT,
-  MAX_UPLOAD_NUMBER
+  ERROR_DEFAULT
 } from "../../constant";
 import Comment from "../../Comment";
 import "./Upload.css";
 
   render() {
     const { previewVisible, previewImage } = this.state;
-    const { fileList } = this.props;
+    const { fileList, maxUpload } = this.props;
     const uploadButton = (
       <div>
         <Icon type="plus" />
           onPreview={this.handlePreview}
           onChange={this.handleChange}
         >
-          {fileList.length >= MAX_UPLOAD_NUMBER ? null : uploadButton}
+          {fileList.length >= maxUpload ? null : uploadButton}
         </Upload>
         <Modal
           visible={previewVisible}

src/components/Editor/index.js

 import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input } from "antd";
 import { OSS_LINK } from "../../constant";
-import { MAX_UPLOAD_NUMBER } from "../../constant";
 import { isFunction } from "../../helper";
 import Upload from "./Upload";
 import Emoji from "./Emoji";
       rows,
       showEmoji,
       showUpload,
+      maxUpload,
       btnSubmitText,
       btnLoading,
       btnDisabled,
                 overlayStyle={{ zIndex: 999 }}
                 content={
                   <div
-                    style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}
+                    style={{
+                      width: 112 * maxUpload,
+                      minHeight: 100,
+                      margin: "0 auto"
+                    }}
                   >
                     <Upload
                       onChangeFileList={this.handleChangeFileList}
                       onUpload={this.handleUpload}
+                      maxUpload={maxUpload}
                       fileList={this.state.fileList}
                     />
                   </div>
                   <div style={{ margin: "5px auto" }}>
                     <span>
                       上传图片
-                      <span style={{ color: "#666", fontWeight: 400 }}>
-                        (您还能上传{MAX_UPLOAD_NUMBER -
-                          this.state.fileList.length}张图片)
-                      </span>
+                      {maxUpload >= 2 ? (
+                        <span style={{ color: "#666", fontWeight: 400 }}>
+                          (您还能上传{maxUpload - this.state.fileList.length}张图片)
+                        </span>
+                      ) : null}
                     </span>
                     <Icon
                       type="close"
   placeholder: PropTypes.string,
   showEmoji: PropTypes.bool,
   showUpload: PropTypes.bool,
+  maxUpload: PropTypes.number,
   value: PropTypes.string,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
   placeholder: "说点什么吧...",
   showEmoji: true,
   showUpload: true,
+  maxUpload: 1,
   btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false

src/constant.js

 export const REGEXP = /\[.+?\]/g;
 
 export const AVATAR = "";
+
+export const IMAGE_SPLIT = "IMAGE_SPLIT";

src/helper.js

-import { REGEXP } from "./constant";
+import { REGEXP, IMAGE_SPLIT } from "./constant";
 import emoji, { prefixUrl, ext } from "./emoji";
 
+const emojiObejct = arrayToObject(emoji, "title");
+
 export function isFunction(functionToCheck) {
   return (
     functionToCheck && {}.toString.call(functionToCheck) === "[object Function]"
  */
 export function htmlEncode(str) {
   if (!str) return "";
-  // /[\u00A0-\u9999<>\&]/gim  // 中文和 HTML 字符
-  return str.replace(/[<>\&]/gim, function(i) {
+  return str.replace(/<\/?(?!a)\w*\b[^>]*>/gim, function(i) {
     return "&#" + i.charCodeAt(0) + ";";
   });
 }
  * @param {strig} content
  */
 export function renderContent(content, onClick) {
-  return htmlEncode(content).replace(REGEXP, function(a, b) {
+  let newContent = content;
+  if (newContent.indexOf(IMAGE_SPLIT) !== -1) {
+    newContent = newContent.split(IMAGE_SPLIT);
+    newContent.pop();
+    newContent = newContent.join("");
+  }
+
+  return htmlEncode(newContent).replace(REGEXP, function(a, b) {
     const src = a.slice(1, -1);
+
+    // 兼容旧的评
+    // 因为旧的评论用 [img url] 方式存储的
     if (isUrl(src)) {
-      return `<img src="${src}" alt="${src}" style="max-width: 300px" />`;
+      return `<br/><img src="${src}" alt="${src}" style="max-width: 100%" />`;
     }
-    const emojiObejct = arrayToObject(emoji, "title");
-    const value = emojiObejct[src].value;
+    const value = emojiObejct[src] ? emojiObejct[src].value : src;
     return `<img src="${prefixUrl}${value}.${ext}" alt="${value}" />`;
   });
 }

src/index.js

     // 最简单的用法
     return (
       <App type={1} businessId="test">
-        <Editor />
+        <Editor maxUpload={4} />
       </App>
     );