v0.5.6

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 0.5.6
+- [x] Editor增加maxLength属性
+- [x] RenderText增加换行支持 
+
 ## 0.5.5
 
 - [x] 增加删除评论、回复功能

README.md

@@ -2,7 +2,7 @@
 
 通用评论系统及编辑器
 
-**`version 0.5.5`**
+**`version 0.5.6`**
 
 ```js
 import Comment, { Editor, RenderText } from 'comment';
@@ -53,7 +53,7 @@ import Comment, { Editor, RenderText } from 'comment';
 | closeUploadWhenBlur | boolean                         |               | false    | 当 upload 失去焦点（鼠标点击非 Upload 的区域）的时候，是否自动关闭 Popover                        |
 | showError           | boolean                         | true          | false    | 是否使用Antd的Message组件提示错误信息, 主要是上传图片出错的情况                                   |
 | onError             | function(msg,{response})        |               | false    | 错误回调, 出错了会被调用, 主要是上传图片出错的情况                                                |
-
+| maxLength           | number                          | 140           | false    | 限制最大输入字数                                                                                  |
 
 
 

lib/App.js

@@ -126,10 +126,14 @@ var App = function (_Component) {
     key: "errorHandler",
     value: function errorHandler(error) {
       if (error.response && error.response.data && error.response.data.msg) {
-        this.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT, { response: error.response });
+        this.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT, {
+          response: error.response
+        });
         return;
       }
-      this.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT, { response: error.response });
+      this.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT, {
+        response: error.response
+      });
     }
 
     /**
@@ -373,8 +377,8 @@ var App = function (_Component) {
 
     /**
      * 删除回复
-     * @param {*} replyId 
-     * @param {*} commentId 
+     * @param {*} replyId
+     * @param {*} commentId
      */
 
   }, {

lib/components/ContentItem/index.js

@@ -209,18 +209,21 @@ var CommentItem = function (_Component) {
             ) : null,
             app.userId === content.user_id && _react2.default.createElement(
               _popconfirm2.default,
-              { title: "\u786E\u5B9A\u8981\u5220\u9664\u5417?", onConfirm: function onConfirm() {
+              {
+                title: "\u786E\u5B9A\u8981\u5220\u9664\u5417?",
+                onConfirm: function onConfirm() {
                   if (replyId) {
                     app.sDeleteReply(content.id, commentId);
                     return;
                   }
                   app.sDeleteComment(content.id);
-                }, okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88" },
+                },
+                okText: "\u786E\u5B9A",
+                cancelText: "\u53D6\u6D88"
+              },
               _react2.default.createElement(
                 "a",
-                {
-                  className: "comment-item-bottom-right"
-                },
+                { className: "comment-item-bottom-right" },
                 "\xA0 \u5220\u9664"
               )
             ),

lib/components/Editor/index.css

@@ -1,76 +1,98 @@
+.comment-editor-toolbar {
+  text-align: right;
+  padding: 0 20px 10px 0;
+}
+
+.comment-editor-toolbar-error {
+  color: red;
+}
+
 .comment-editor {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  max-width: 100%;
-  list-style: none;
-  position: relative;
-  display: block;
-  font-size: 14px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  transition: all 0.3s, height 0s;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    max-width: 100%;
+    list-style: none;
+    position: relative;
+    display: block;
+    font-size: 14px;
+    line-height: 1.5;
+    color: rgba(0, 0, 0, 0.65);
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s, height 0s;
 }
+
 .comment-editor textarea.ant-input {
-  border: none;
-  border-bottom: 1px solid #eee;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+    border: none;
+    border-bottom: 1px solid #eee;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
 }
+
 .comment-editor textarea.ant-input:hover {
-  border: none;
-  border-bottom: 1px solid #eee;
+    border: none;
+    border-bottom: 1px solid #eee;
 }
+
 .comment-editor textarea.ant-input:focus {
-  box-shadow: none;
-  border-bottom: 1px solid #eee;
+    box-shadow: none;
+    border-bottom: 1px solid #eee;
 }
+
 .comment-editor [contentEditable="true"]:empty:not(:focus):before {
-  content: attr(data-text);
-  color: #bfbfbf;
+    content: attr(data-text);
+    color: #bfbfbf;
 }
+
 .comment-editor:focus,
 .comment-editor:hover {
-  border-color: #40a9ff;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    border-color: #40a9ff;
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
+
 .comment-toolbar {
-  display: inline-block;
-  width: 100%;
-  margin: 5px 0 0 0;
+    display: inline-block;
+    width: 100%;
+    margin: 5px 0 0 0;
 }
+
 .comment-toolbar .comment-toolbar-icon {
-  font-size: 23px;
-  cursor: pointer;
-  transition: color 0.3s;
+    font-size: 23px;
+    cursor: pointer;
+    transition: color 0.3s;
 }
+
 .comment-toolbar .comment-toolbar-icon:hover {
-  color: #40a9ff;
+    color: #40a9ff;
 }
+
 .comment-toolbar-left {
-  float: left;
-  margin: 8px 11px;
+    float: left;
+    margin: 8px 11px;
 }
+
 .comment-toolbar-right {
-  float: right;
-  margin: 5px 11px;
+    float: right;
+    margin: 5px 11px;
 }
 
 .comment-emoji-popover .ant-popover-inner-content {
-  padding: 12px 16px 20px 16px;
+    padding: 12px 16px 20px 16px;
 }
+
 .comment-emoji-popover .ant-carousel .slick-dots {
-  bottom: -10px;
+    bottom: -10px;
 }
+
 .comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
-  background-color: #7b868a;
+    background-color: #7b868a;
 }
+
 .comment-emoji-popover .ant-carousel .slick-dots li button {
-  background-color: #a2aeb5;
-}
+    background-color: #a2aeb5;
+}

lib/components/Editor/index.js

@@ -16,6 +16,10 @@ var _icon = require("antd/es/icon");
 
 var _icon2 = _interopRequireDefault(_icon);
 
+var _message2 = require("antd/es/message");
+
+var _message3 = _interopRequireDefault(_message2);
+
 var _input = require("antd/es/input");
 
 var _input2 = _interopRequireDefault(_input);
@@ -28,6 +32,8 @@ require("antd/es/popover/style/css");
 
 require("antd/es/icon/style/css");
 
+require("antd/es/message/style/css");
+
 require("antd/es/input/style/css");
 
 var _react = require("react");
@@ -38,6 +44,10 @@ var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _classnames = require("classnames");
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _constant = require("../../constant");
 
 var _helper = require("../../helper");
@@ -187,11 +197,16 @@ var Editor = function (_React$Component) {
     value: function handleSubmit() {
       var _this2 = this;
 
+      var maxLength = this.props.maxLength;
       var _state = this.state,
           value = _state.value,
           fileMap = _state.fileMap,
           fileList = _state.fileList;
 
+      if (value.length > maxLength) {
+        _message3.default.error("\u5B57\u6570\u4E0D\u5F97\u8D85\u8FC7" + maxLength + "\u5B57");
+        return;
+      }
       var files = [];
       if (fileList.length) {
         fileList.forEach(function (item) {
@@ -249,128 +264,146 @@ var Editor = function (_React$Component) {
           btnDisabled = _props.btnDisabled,
           button = _props.button,
           emojiToolIcon = _props.emojiToolIcon,
-          imageToolIcon = _props.imageToolIcon;
+          imageToolIcon = _props.imageToolIcon,
+          maxLength = _props.maxLength;
 
       var handleSubmit = this.handleSubmit;
       var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.state.fileList.length;
+      var inputValue = value || this.state.value;
       return _react2.default.createElement(
         "div",
-        { className: "comment-editor" },
-        _react2.default.createElement(TextArea, {
-          value: value || this.state.value,
-          onChange: function onChange(e) {
-            return _this3.handleChange(e.target.value);
-          },
-          rows: rows,
-          placeholder: placeholder
-        }),
+        null,
+        _react2.default.createElement(
+          "div",
+          { className: (0, _classnames2.default)({
+              "comment-editor-toolbar": true,
+              "comment-editor-toolbar-error": inputValue.length > maxLength
+            }) },
+          "\u5DF2\u8F93\u5165 ",
+          inputValue.length,
+          " / ",
+          maxLength,
+          " \u5B57"
+        ),
         _react2.default.createElement(
           "div",
-          { className: "comment-toolbar" },
+          { className: "comment-editor" },
+          _react2.default.createElement(TextArea, {
+            value: inputValue,
+            onChange: function onChange(e) {
+              return _this3.handleChange(e.target.value);
+            },
+            rows: rows,
+            placeholder: placeholder
+          }),
           _react2.default.createElement(
             "div",
-            { className: "comment-toolbar-left" },
-            showEmoji && _react2.default.createElement(
-              _popover2.default,
-              {
-                trigger: "click",
-                placement: "bottomLeft",
-                autoAdjustOverflow: false,
-                content: _react2.default.createElement(
-                  "div",
-                  { style: { width: 200 } },
-                  _react2.default.createElement(_Emoji2.default, { onClick: this.handleClickEmoji })
-                ),
-                overlayClassName: "comment-emoji-popover"
-              },
-              emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
-            ),
-            showUpload ? _react2.default.createElement(
-              _popover2.default,
-              {
-                trigger: "click",
-                visible: this.state.showUpload,
-                overlayStyle: { zIndex: 999 },
-                onVisibleChange: closeUploadWhenBlur ? function (visible) {
-                  _this3.handleShowUpload(visible);
-                } : null,
-                content: _react2.default.createElement(
-                  "div",
-                  {
-                    style: {
-                      width: 112 * maxUpload,
-                      minHeight: 100,
-                      margin: "0 auto"
-                    }
-                  },
-                  _react2.default.createElement(_Upload2.default, {
-                    onChangeFileList: this.handleChangeFileList,
-                    onUpload: this.handleUpload,
-                    maxUpload: maxUpload,
-                    fileList: this.state.fileList,
-                    showError: this.props.showError,
-                    onError: this.props.onError
-                  })
-                ),
-                placement: "bottomLeft",
-                title: _react2.default.createElement(
-                  "div",
-                  { style: { margin: "5px auto" } },
-                  _react2.default.createElement(
-                    "span",
-                    null,
-                    "\u4E0A\u4F20\u56FE\u7247",
-                    maxUpload >= 2 ? _react2.default.createElement(
-                      "span",
-                      { style: { color: "#666", fontWeight: 400 } },
-                      "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
-                      maxUpload - this.state.fileList.length,
-                      "\u5F20\u56FE\u7247)"
-                    ) : null
+            { className: "comment-toolbar" },
+            _react2.default.createElement(
+              "div",
+              { className: "comment-toolbar-left" },
+              showEmoji && _react2.default.createElement(
+                _popover2.default,
+                {
+                  trigger: "click",
+                  placement: "bottomLeft",
+                  autoAdjustOverflow: false,
+                  content: _react2.default.createElement(
+                    "div",
+                    { style: { width: 200 } },
+                    _react2.default.createElement(_Emoji2.default, { onClick: this.handleClickEmoji })
                   ),
-                  _react2.default.createElement(_icon2.default, {
-                    type: "close",
-                    onClick: function onClick() {
-                      return _this3.handleShowUpload(false);
+                  overlayClassName: "comment-emoji-popover"
+                },
+                emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
+              ),
+              showUpload ? _react2.default.createElement(
+                _popover2.default,
+                {
+                  trigger: "click",
+                  visible: this.state.showUpload,
+                  overlayStyle: { zIndex: 999 },
+                  onVisibleChange: closeUploadWhenBlur ? function (visible) {
+                    _this3.handleShowUpload(visible);
+                  } : null,
+                  content: _react2.default.createElement(
+                    "div",
+                    {
+                      style: {
+                        width: 112 * maxUpload,
+                        minHeight: 100,
+                        margin: "0 auto"
+                      }
                     },
-                    style: {
-                      float: "right",
-                      cursor: "pointer",
-                      marginTop: 4
-                    }
-                  })
-                )
-              },
-              imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
-                onClick: function onClick() {
-                  return _this3.handleShowUpload(true);
-                }
-              }) : _react2.default.createElement(_icon2.default, {
-                type: "picture",
-                className: "comment-toolbar-icon",
-                style: { marginLeft: 10 },
-                onClick: function onClick() {
-                  return _this3.handleShowUpload(true);
-                }
-              })
-            ) : null
-          ),
-          _react2.default.createElement(
-            "div",
-            { className: "comment-toolbar-right" },
-            button ? _react2.default.cloneElement(button, {
-              onClick: button.props.onClick || handleSubmit
-            }) : _react2.default.createElement(
-              _button2.default,
-              {
-                onClick: function onClick() {
-                  return _this3.handleSubmit();
+                    _react2.default.createElement(_Upload2.default, {
+                      onChangeFileList: this.handleChangeFileList,
+                      onUpload: this.handleUpload,
+                      maxUpload: maxUpload,
+                      fileList: this.state.fileList,
+                      showError: this.props.showError,
+                      onError: this.props.onError
+                    })
+                  ),
+                  placement: "bottomLeft",
+                  title: _react2.default.createElement(
+                    "div",
+                    { style: { margin: "5px auto" } },
+                    _react2.default.createElement(
+                      "span",
+                      null,
+                      "\u4E0A\u4F20\u56FE\u7247",
+                      maxUpload >= 2 ? _react2.default.createElement(
+                        "span",
+                        { style: { color: "#666", fontWeight: 400 } },
+                        "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
+                        maxUpload - this.state.fileList.length,
+                        "\u5F20\u56FE\u7247)"
+                      ) : null
+                    ),
+                    _react2.default.createElement(_icon2.default, {
+                      type: "close",
+                      onClick: function onClick() {
+                        return _this3.handleShowUpload(false);
+                      },
+                      style: {
+                        float: "right",
+                        cursor: "pointer",
+                        marginTop: 4
+                      }
+                    })
+                  )
+                },
+                imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
+                  onClick: function onClick() {
+                    return _this3.handleShowUpload(true);
+                  }
+                }) : _react2.default.createElement(_icon2.default, {
+                  type: "picture",
+                  className: "comment-toolbar-icon",
+                  style: { marginLeft: 10 },
+                  onClick: function onClick() {
+                    return _this3.handleShowUpload(true);
+                  }
+                })
+              ) : null
+            ),
+            _react2.default.createElement(
+              "div",
+              { className: "comment-toolbar-right" },
+              button ? _react2.default.cloneElement(button, {
+                onClick: button.props.onClick || handleSubmit
+              }) : _react2.default.createElement(
+                _button2.default,
+                {
+                  onClick: function onClick() {
+                    return _this3.handleSubmit();
+                  },
+                  type: "primary",
+                  loading: btnLoading,
+                  disabled: disabledSubmit
                 },
-                type: "primary",
-                loading: btnLoading,
-                disabled: disabledSubmit
-              },
-              btnSubmitText
+                btnSubmitText
+              )
             )
           )
         )
@@ -399,7 +432,8 @@ Editor.propTypes = {
   emojiToolIcon: _propTypes2.default.node,
   imageToolIcon: _propTypes2.default.node,
   showError: _propTypes2.default.bool,
-  onError: _propTypes2.default.func
+  onError: _propTypes2.default.func,
+  maxLength: _propTypes2.default.number
 };
 
 Editor.defaultProps = {
@@ -412,7 +446,8 @@ Editor.defaultProps = {
   btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false,
-  showError: true
+  showError: true,
+  maxLength: 140
 };
 
 exports.default = Editor;

lib/helper.js

@@ -76,6 +76,6 @@ function renderContent(content, onClick) {
     }
     var value = emojiObejct[src] ? emojiObejct[src].value : src;
     return "<img src=\"" + _emoji.prefixUrl + value + "." + _emoji.ext + "\" alt=\"" + value + "\" />";
-  });
+  }).replace(/\n/g, '<br />');
 }
 //# sourceMappingURL=helper.js.map

lib/helper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/helper.js"],"names":["isFunction","isUrl","arrayToObject","htmlEncode","renderContent","emojiObejct","emoji","functionToCheck","toString","call","userInput","regexp","res","match","array","keyField","reduce","obj","item","str","replace","i","charCodeAt","content","onClick","newContent","indexOf","IMAGE_SPLIT","split","pop","join","REGEXP","a","b","src","slice","value","prefixUrl","ext"],"mappings":";;;;;QAKgBA,U,GAAAA,U;QAMAC,K,GAAAA,K;QAYAC,a,GAAAA,a;QAYAC,U,GAAAA,U;QAYAC,a,GAAAA,a;;AA/ChB;;AACA;;;;;;AAEA,IAAMC,cAAcH,cAAcI,eAAd,EAAqB,OAArB,CAApB;;AAEO,SAASN,UAAT,CAAoBO,eAApB,EAAqC;AAC1C,SACEA,mBAAmB,GAAGC,QAAH,CAAYC,IAAZ,CAAiBF,eAAjB,MAAsC,mBAD3D;AAGD;;AAEM,SAASN,KAAT,CAAeS,SAAf,EAA0B;AAC/B,MAAMC,SAAS,kGAAf;AACA,MAAIC,MAAMF,UAAUG,KAAV,CAAgBF,MAAhB,CAAV;AACA,MAAIC,QAAQ,IAAZ,EAAkB,OAAO,KAAP,CAAlB,KACK,OAAO,IAAP;AACN;;AAED;;;;;AAKO,SAASV,aAAT,CAAuBY,KAAvB,EAA8BC,QAA9B,EAAwC;AAC7C,SAAOD,MAAME,MAAN,CAAa,UAACC,GAAD,EAAMC,IAAN,EAAe;AACjCD,QAAIC,KAAKH,QAAL,CAAJ,IAAsBG,IAAtB;AACA,WAAOD,GAAP;AACD,GAHM,EAGJ,EAHI,CAAP;AAID;;AAED;;;;;AAKO,SAASd,UAAT,CAAoBgB,GAApB,EAAyB;AAC9B,MAAI,CAACA,GAAL,EAAU,OAAO,EAAP;AACV,SAAOA,IAAIC,OAAJ,CAAY,SAAZ,EAAuB,UAASC,CAAT,EAAY;AACxC,WAAO,OAAOA,EAAEC,UAAF,CAAa,CAAb,CAAP,GAAyB,GAAhC;AACD,GAFM,CAAP;AAGD;;AAED;;;;;AAKO,SAASlB,aAAT,CAAuBmB,OAAvB,EAAgCC,OAAhC,EAAyC;AAC9C,MAAIC,aAAaF,OAAjB;AACA,MAAIE,WAAWC,OAAX,CAAmBC,qBAAnB,MAAoC,CAAC,CAAzC,EAA4C;AAC1CF,iBAAaA,WAAWG,KAAX,CAAiBD,qBAAjB,CAAb;AACAF,eAAWI,GAAX;AACAJ,iBAAaA,WAAWK,IAAX,CAAgB,EAAhB,CAAb;AACD;;AAED,SAAO3B,WAAWsB,UAAX,EAAuBL,OAAvB,CAA+BW,gBAA/B,EAAuC,UAASC,CAAT,EAAYC,CAAZ,EAAe;AAC3D,QAAMC,MAAMF,EAAEG,KAAF,CAAQ,CAAR,EAAW,CAAC,CAAZ,CAAZ;;AAEA;AACA;AACA,QAAIlC,MAAMiC,GAAN,CAAJ,EAAgB;AACd,kCAAyBA,GAAzB,iBAAsCA,GAAtC;AACD;AACD,QAAME,QAAQ/B,YAAY6B,GAAZ,IAAmB7B,YAAY6B,GAAZ,EAAiBE,KAApC,GAA4CF,GAA1D;AACA,2BAAoBG,gBAApB,GAAgCD,KAAhC,SAAyCE,UAAzC,iBAAsDF,KAAtD;AACD,GAVM,CAAP;AAWD","file":"helper.js","sourcesContent":["import { REGEXP, IMAGE_SPLIT } from \"./constant\";\r\nimport emoji, { prefixUrl, ext } from \"./emoji\";\r\n\r\nconst emojiObejct = arrayToObject(emoji, \"title\");\r\n\r\nexport function isFunction(functionToCheck) {\r\n  return (\r\n    functionToCheck && {}.toString.call(functionToCheck) === \"[object Function]\"\r\n  );\r\n}\r\n\r\nexport function isUrl(userInput) {\r\n  const regexp = /(http(s)?:\\/\\/.)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\r\n  var res = userInput.match(regexp);\r\n  if (res === null) return false;\r\n  else return true;\r\n}\r\n\r\n/**\r\n * 将对象数组转换为对象\r\n * @param {array} array Array of Objects\r\n * @param {string} keyField string\r\n */\r\nexport function arrayToObject(array, keyField) {\r\n  return array.reduce((obj, item) => {\r\n    obj[item[keyField]] = item;\r\n    return obj;\r\n  }, {});\r\n}\r\n\r\n/**\r\n * HTML 编码\r\n * 将 < > 等字符串进行编码\r\n * @param {string} str 文本\r\n */\r\nexport function htmlEncode(str) {\r\n  if (!str) return \"\";\r\n  return str.replace(/[<>]/gim, function(i) {\r\n    return \"&#\" + i.charCodeAt(0) + \";\";\r\n  });\r\n}\r\n\r\n/**\r\n * 渲染编辑器\r\n * [x] => <img src=\"x\" />\r\n * @param {strig} content\r\n */\r\nexport function renderContent(content, onClick) {\r\n  let newContent = content;\r\n  if (newContent.indexOf(IMAGE_SPLIT) !== -1) {\r\n    newContent = newContent.split(IMAGE_SPLIT);\r\n    newContent.pop();\r\n    newContent = newContent.join(\"\");\r\n  }\r\n\r\n  return htmlEncode(newContent).replace(REGEXP, function(a, b) {\r\n    const src = a.slice(1, -1);\r\n\r\n    // 兼容旧的评\r\n    // 因为旧的评论用 [img url] 方式存储的\r\n    if (isUrl(src)) {\r\n      return `<br/><img src=\"${src}\" alt=\"${src}\" style=\"max-width: 100%\" />`;\r\n    }\r\n    const value = emojiObejct[src] ? emojiObejct[src].value : src;\r\n    return `<img src=\"${prefixUrl}${value}.${ext}\" alt=\"${value}\" />`;\r\n  });\r\n}\r\n"]}
+{"version":3,"sources":["../src/helper.js"],"names":["isFunction","isUrl","arrayToObject","htmlEncode","renderContent","emojiObejct","emoji","functionToCheck","toString","call","userInput","regexp","res","match","array","keyField","reduce","obj","item","str","replace","i","charCodeAt","content","onClick","newContent","indexOf","IMAGE_SPLIT","split","pop","join","REGEXP","a","b","src","slice","value","prefixUrl","ext"],"mappings":";;;;;QAKgBA,U,GAAAA,U;QAMAC,K,GAAAA,K;QAYAC,a,GAAAA,a;QAYAC,U,GAAAA,U;QAYAC,a,GAAAA,a;;AA/ChB;;AACA;;;;;;AAEA,IAAMC,cAAcH,cAAcI,eAAd,EAAqB,OAArB,CAApB;;AAEO,SAASN,UAAT,CAAoBO,eAApB,EAAqC;AAC1C,SACEA,mBAAmB,GAAGC,QAAH,CAAYC,IAAZ,CAAiBF,eAAjB,MAAsC,mBAD3D;AAGD;;AAEM,SAASN,KAAT,CAAeS,SAAf,EAA0B;AAC/B,MAAMC,SAAS,kGAAf;AACA,MAAIC,MAAMF,UAAUG,KAAV,CAAgBF,MAAhB,CAAV;AACA,MAAIC,QAAQ,IAAZ,EAAkB,OAAO,KAAP,CAAlB,KACK,OAAO,IAAP;AACN;;AAED;;;;;AAKO,SAASV,aAAT,CAAuBY,KAAvB,EAA8BC,QAA9B,EAAwC;AAC7C,SAAOD,MAAME,MAAN,CAAa,UAACC,GAAD,EAAMC,IAAN,EAAe;AACjCD,QAAIC,KAAKH,QAAL,CAAJ,IAAsBG,IAAtB;AACA,WAAOD,GAAP;AACD,GAHM,EAGJ,EAHI,CAAP;AAID;;AAED;;;;;AAKO,SAASd,UAAT,CAAoBgB,GAApB,EAAyB;AAC9B,MAAI,CAACA,GAAL,EAAU,OAAO,EAAP;AACV,SAAOA,IAAIC,OAAJ,CAAY,SAAZ,EAAuB,UAAUC,CAAV,EAAa;AACzC,WAAO,OAAOA,EAAEC,UAAF,CAAa,CAAb,CAAP,GAAyB,GAAhC;AACD,GAFM,CAAP;AAGD;;AAED;;;;;AAKO,SAASlB,aAAT,CAAuBmB,OAAvB,EAAgCC,OAAhC,EAAyC;AAC9C,MAAIC,aAAaF,OAAjB;AACA,MAAIE,WAAWC,OAAX,CAAmBC,qBAAnB,MAAoC,CAAC,CAAzC,EAA4C;AAC1CF,iBAAaA,WAAWG,KAAX,CAAiBD,qBAAjB,CAAb;AACAF,eAAWI,GAAX;AACAJ,iBAAaA,WAAWK,IAAX,CAAgB,EAAhB,CAAb;AACD;;AAED,SAAO3B,WAAWsB,UAAX,EAAuBL,OAAvB,CAA+BW,gBAA/B,EAAuC,UAAUC,CAAV,EAAaC,CAAb,EAAgB;AAC5D,QAAMC,MAAMF,EAAEG,KAAF,CAAQ,CAAR,EAAW,CAAC,CAAZ,CAAZ;;AAEA;AACA;AACA,QAAIlC,MAAMiC,GAAN,CAAJ,EAAgB;AACd,kCAAyBA,GAAzB,iBAAsCA,GAAtC;AACD;AACD,QAAME,QAAQ/B,YAAY6B,GAAZ,IAAmB7B,YAAY6B,GAAZ,EAAiBE,KAApC,GAA4CF,GAA1D;AACA,2BAAoBG,gBAApB,GAAgCD,KAAhC,SAAyCE,UAAzC,iBAAsDF,KAAtD;AACD,GAVM,EAUJhB,OAVI,CAUI,KAVJ,EAUW,QAVX,CAAP;AAWD","file":"helper.js","sourcesContent":["import { REGEXP, IMAGE_SPLIT } from \"./constant\";\r\nimport emoji, { prefixUrl, ext } from \"./emoji\";\r\n\r\nconst emojiObejct = arrayToObject(emoji, \"title\");\r\n\r\nexport function isFunction(functionToCheck) {\r\n  return (\r\n    functionToCheck && {}.toString.call(functionToCheck) === \"[object Function]\"\r\n  );\r\n}\r\n\r\nexport function isUrl(userInput) {\r\n  const regexp = /(http(s)?:\\/\\/.)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\r\n  var res = userInput.match(regexp);\r\n  if (res === null) return false;\r\n  else return true;\r\n}\r\n\r\n/**\r\n * 将对象数组转换为对象\r\n * @param {array} array Array of Objects\r\n * @param {string} keyField string\r\n */\r\nexport function arrayToObject(array, keyField) {\r\n  return array.reduce((obj, item) => {\r\n    obj[item[keyField]] = item;\r\n    return obj;\r\n  }, {});\r\n}\r\n\r\n/**\r\n * HTML 编码\r\n * 将 < > 等字符串进行编码\r\n * @param {string} str 文本\r\n */\r\nexport function htmlEncode(str) {\r\n  if (!str) return \"\";\r\n  return str.replace(/[<>]/gim, function (i) {\r\n    return \"&#\" + i.charCodeAt(0) + \";\";\r\n  });\r\n}\r\n\r\n/**\r\n * 渲染编辑器\r\n * [x] => <img src=\"x\" />\r\n * @param {strig} content\r\n */\r\nexport function renderContent(content, onClick) {\r\n  let newContent = content;\r\n  if (newContent.indexOf(IMAGE_SPLIT) !== -1) {\r\n    newContent = newContent.split(IMAGE_SPLIT);\r\n    newContent.pop();\r\n    newContent = newContent.join(\"\");\r\n  }\r\n\r\n  return htmlEncode(newContent).replace(REGEXP, function (a, b) {\r\n    const src = a.slice(1, -1);\r\n\r\n    // 兼容旧的评\r\n    // 因为旧的评论用 [img url] 方式存储的\r\n    if (isUrl(src)) {\r\n      return `<br/><img src=\"${src}\" alt=\"${src}\" style=\"max-width: 100%\" />`;\r\n    }\r\n    const value = emojiObejct[src] ? emojiObejct[src].value : src;\r\n    return `<img src=\"${prefixUrl}${value}.${ext}\" alt=\"${value}\" />`;\r\n  }).replace(/\\n/g, '<br />');\r\n}\r\n"]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [

src/components/Editor/index.css

@@ -1,3 +1,12 @@
+.comment-editor-toolbar {
+  text-align: right;
+  padding: 0 20px 10px 0;
+}
+
+.comment-editor-toolbar-error {
+  color: red;
+}
+
 .comment-editor {
   box-sizing: border-box;
   margin: 0;
@@ -16,47 +25,57 @@
   border-radius: 4px;
   transition: all 0.3s, height 0s;
 }
+
 .comment-editor textarea.ant-input {
   border: none;
   border-bottom: 1px solid #eee;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .comment-editor textarea.ant-input:hover {
   border: none;
   border-bottom: 1px solid #eee;
 }
+
 .comment-editor textarea.ant-input:focus {
   box-shadow: none;
   border-bottom: 1px solid #eee;
 }
+
 .comment-editor [contentEditable="true"]:empty:not(:focus):before {
   content: attr(data-text);
   color: #bfbfbf;
 }
+
 .comment-editor:focus,
 .comment-editor:hover {
   border-color: #40a9ff;
   outline: 0;
   box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
+
 .comment-toolbar {
   display: inline-block;
   width: 100%;
   margin: 5px 0 0 0;
 }
+
 .comment-toolbar .comment-toolbar-icon {
   font-size: 23px;
   cursor: pointer;
   transition: color 0.3s;
 }
+
 .comment-toolbar .comment-toolbar-icon:hover {
   color: #40a9ff;
 }
+
 .comment-toolbar-left {
   float: left;
   margin: 8px 11px;
 }
+
 .comment-toolbar-right {
   float: right;
   margin: 5px 11px;
@@ -65,12 +84,15 @@
 .comment-emoji-popover .ant-popover-inner-content {
   padding: 12px 16px 20px 16px;
 }
+
 .comment-emoji-popover .ant-carousel .slick-dots {
   bottom: -10px;
 }
+
 .comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
   background-color: #7b868a;
 }
+
 .comment-emoji-popover .ant-carousel .slick-dots li button {
   background-color: #a2aeb5;
 }

src/components/Editor/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Icon, Button, Popover, Input } from "antd";
+import { Icon, Button, Popover, Input, message } from "antd";
+import classnames from "classnames";
 import { OSS_LINK } from "../../constant";
 import { isFunction } from "../../helper";
 import Upload from "./Upload";
@@ -102,7 +103,12 @@ class Editor extends React.Component {
    * 需要父组件传入 onSubmit
    */
   handleSubmit() {
+    const { maxLength } = this.props;
     let { value, fileMap, fileList } = this.state;
+    if (value.length > maxLength) {
+      message.error(`字数不得超过${maxLength}字`);
+      return;
+    }
     const files = [];
     if (fileList.length) {
       fileList.forEach(item => {
@@ -158,125 +164,137 @@ class Editor extends React.Component {
       btnDisabled,
       button,
       emojiToolIcon,
-      imageToolIcon
+      imageToolIcon,
+      maxLength
     } = this.props;
     const handleSubmit = this.handleSubmit;
     const disabledSubmit =
       btnDisabled ||
       (!this.props.value && !this.state.value && !this.state.fileList.length);
+    const inputValue = value || this.state.value;
     return (
-      <div className="comment-editor">
-        <TextArea
-          value={value || this.state.value}
-          onChange={e => this.handleChange(e.target.value)}
-          rows={rows}
-          placeholder={placeholder}
-        />
+      <div>
+        <div
+          className={classnames({
+            "comment-editor-toolbar": true,
+            "comment-editor-toolbar-error": inputValue.length > maxLength
+          })}
+        >
+          已输入 {inputValue.length} / {maxLength} 字
+        </div>
+        <div className="comment-editor">
+          <TextArea
+            value={inputValue}
+            onChange={e => this.handleChange(e.target.value)}
+            rows={rows}
+            placeholder={placeholder}
+          />
 
-        <div className="comment-toolbar">
-          <div className="comment-toolbar-left">
-            {showEmoji && (
-              <Popover
-                trigger="click"
-                placement="bottomLeft"
-                autoAdjustOverflow={false}
-                content={
-                  <div style={{ width: 200 }}>
-                    <Emoji onClick={this.handleClickEmoji} />
-                  </div>
-                }
-                overlayClassName="comment-emoji-popover"
-              >
-                {emojiToolIcon || (
-                  <Icon type="smile-o" className="comment-toolbar-icon" />
-                )}
-              </Popover>
-            )}
+          <div className="comment-toolbar">
+            <div className="comment-toolbar-left">
+              {showEmoji && (
+                <Popover
+                  trigger="click"
+                  placement="bottomLeft"
+                  autoAdjustOverflow={false}
+                  content={
+                    <div style={{ width: 200 }}>
+                      <Emoji onClick={this.handleClickEmoji} />
+                    </div>
+                  }
+                  overlayClassName="comment-emoji-popover"
+                >
+                  {emojiToolIcon || (
+                    <Icon type="smile-o" className="comment-toolbar-icon" />
+                  )}
+                </Popover>
+              )}
 
-            {showUpload ? (
-              <Popover
-                trigger="click"
-                visible={this.state.showUpload}
-                overlayStyle={{ zIndex: 999 }}
-                onVisibleChange={
-                  closeUploadWhenBlur
-                    ? visible => {
-                        this.handleShowUpload(visible);
-                      }
-                    : null
-                }
-                content={
-                  <div
-                    style={{
-                      width: 112 * maxUpload,
-                      minHeight: 100,
-                      margin: "0 auto"
-                    }}
-                  >
-                    <Upload
-                      onChangeFileList={this.handleChangeFileList}
-                      onUpload={this.handleUpload}
-                      maxUpload={maxUpload}
-                      fileList={this.state.fileList}
-                      showError={this.props.showError}
-                      onError={this.props.onError}
-                    />
-                  </div>
-                }
-                placement="bottomLeft"
-                title={
-                  <div style={{ margin: "5px auto" }}>
-                    <span>
-                      上传图片
-                      {maxUpload >= 2 ? (
-                        <span style={{ color: "#666", fontWeight: 400 }}>
-                          (您还能上传{maxUpload - this.state.fileList.length}张图片)
-                        </span>
-                      ) : null}
-                    </span>
-                    <Icon
-                      type="close"
-                      onClick={() => this.handleShowUpload(false)}
+              {showUpload ? (
+                <Popover
+                  trigger="click"
+                  visible={this.state.showUpload}
+                  overlayStyle={{ zIndex: 999 }}
+                  onVisibleChange={
+                    closeUploadWhenBlur
+                      ? visible => {
+                          this.handleShowUpload(visible);
+                        }
+                      : null
+                  }
+                  content={
+                    <div
                       style={{
-                        float: "right",
-                        cursor: "pointer",
-                        marginTop: 4
+                        width: 112 * maxUpload,
+                        minHeight: 100,
+                        margin: "0 auto"
                       }}
+                    >
+                      <Upload
+                        onChangeFileList={this.handleChangeFileList}
+                        onUpload={this.handleUpload}
+                        maxUpload={maxUpload}
+                        fileList={this.state.fileList}
+                        showError={this.props.showError}
+                        onError={this.props.onError}
+                      />
+                    </div>
+                  }
+                  placement="bottomLeft"
+                  title={
+                    <div style={{ margin: "5px auto" }}>
+                      <span>
+                        上传图片
+                        {maxUpload >= 2 ? (
+                          <span style={{ color: "#666", fontWeight: 400 }}>
+                            (您还能上传{maxUpload - this.state.fileList.length}张图片)
+                          </span>
+                        ) : null}
+                      </span>
+                      <Icon
+                        type="close"
+                        onClick={() => this.handleShowUpload(false)}
+                        style={{
+                          float: "right",
+                          cursor: "pointer",
+                          marginTop: 4
+                        }}
+                      />
+                    </div>
+                  }
+                >
+                  {imageToolIcon ? (
+                    React.cloneElement(imageToolIcon, {
+                      onClick: () => this.handleShowUpload(true)
+                    })
+                  ) : (
+                    <Icon
+                      type="picture"
+                      className="comment-toolbar-icon"
+                      style={{ marginLeft: 10 }}
+                      onClick={() => this.handleShowUpload(true)}
                     />
-                  </div>
-                }
-              >
-                {imageToolIcon ? (
-                  React.cloneElement(imageToolIcon, {
-                    onClick: () => this.handleShowUpload(true)
-                  })
-                ) : (
-                  <Icon
-                    type="picture"
-                    className="comment-toolbar-icon"
-                    style={{ marginLeft: 10 }}
-                    onClick={() => this.handleShowUpload(true)}
-                  />
-                )}
-              </Popover>
-            ) : null}
-          </div>
+                  )}
+                </Popover>
+              ) : null}
+            </div>
 
-          <div className="comment-toolbar-right">
-            {button ? (
-              React.cloneElement(button, {
-                onClick: button.props.onClick || handleSubmit
-              })
-            ) : (
-              <Button
-                onClick={() => this.handleSubmit()}
-                type="primary"
-                loading={btnLoading}
-                disabled={disabledSubmit}
-              >
-                {btnSubmitText}
-              </Button>
-            )}
+            <div className="comment-toolbar-right">
+              {button ? (
+                React.cloneElement(button, {
+                  onClick: button.props.onClick || handleSubmit
+                })
+              ) : (
+                <Button
+                  onClick={() => this.handleSubmit()}
+                  type="primary"
+                  loading={btnLoading}
+                  disabled={disabledSubmit}
+                >
+                  {btnSubmitText}
+                </Button>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -302,7 +320,8 @@ Editor.propTypes = {
   emojiToolIcon: PropTypes.node,
   imageToolIcon: PropTypes.node,
   showError: PropTypes.bool,
-  onError: PropTypes.func
+  onError: PropTypes.func,
+  maxLength: PropTypes.number
 };
 
 Editor.defaultProps = {
@@ -315,7 +334,8 @@ Editor.defaultProps = {
   btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false,
-  showError: true
+  showError: true,
+  maxLength: 140
 };
 
 export default Editor;

src/helper.js

@@ -53,15 +53,17 @@ export function renderContent(content, onClick) {
     newContent = newContent.join("");
   }
 
-  return htmlEncode(newContent).replace(REGEXP, function(a, b) {
-    const src = a.slice(1, -1);
+  return htmlEncode(newContent)
+    .replace(REGEXP, function(a, b) {
+      const src = a.slice(1, -1);
 
-    // 兼容旧的评
-    // 因为旧的评论用 [img url] 方式存储的
-    if (isUrl(src)) {
-      return `<br/><img src="${src}" alt="${src}" style="max-width: 100%" />`;
-    }
-    const value = emojiObejct[src] ? emojiObejct[src].value : src;
-    return `<img src="${prefixUrl}${value}.${ext}" alt="${value}" />`;
-  });
+      // 兼容旧的评
+      // 因为旧的评论用 [img url] 方式存储的
+      if (isUrl(src)) {
+        return `<br/><img src="${src}" alt="${src}" style="max-width: 100%" />`;
+      }
+      const value = emojiObejct[src] ? emojiObejct[src].value : src;
+      return `<img src="${prefixUrl}${value}.${ext}" alt="${value}" />`;
+    })
+    .replace(/\n/g, "<br />");
 }