narro 5 years ago
parent
commit
2cbb01b259

+ 3
- 0
CHANGELOG.md View File

@@ -1,5 +1,8 @@
1 1
 # CHANGELOG
2 2
 
3
+## 0.5.7
4
+- [x] fix: 修复评论内容不换行超出区域的问题
5
+
3 6
 ## 0.5.6
4 7
 - [x] Editor增加maxLength属性
5 8
 - [x] RenderText增加换行支持 

+ 1
- 1
README.md View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 通用评论系统及编辑器
4 4
 
5
-**`version 0.5.6`**
5
+**`version 0.5.7`**
6 6
 
7 7
 ```js
8 8
 import Comment, { Editor, RenderText } from 'comment';

+ 1
- 0
lib/components/ContentItem/index.css View File

@@ -16,6 +16,7 @@
16 16
 }
17 17
 .comment-item-content {
18 18
   margin: 10px 0;
19
+  word-break: break-all;
19 20
 }
20 21
 .comment-item-bottom {
21 22
   margin: 20px auto;

+ 45
- 45
lib/components/Editor/index.css View File

@@ -8,91 +8,91 @@
8 8
 }
9 9
 
10 10
 .comment-editor {
11
-    box-sizing: border-box;
12
-    margin: 0;
13
-    padding: 0;
14
-    width: 100%;
15
-    max-width: 100%;
16
-    list-style: none;
17
-    position: relative;
18
-    display: block;
19
-    font-size: 14px;
20
-    line-height: 1.5;
21
-    color: rgba(0, 0, 0, 0.65);
22
-    background-color: #fff;
23
-    background-image: none;
24
-    border: 1px solid #d9d9d9;
25
-    border-radius: 4px;
26
-    transition: all 0.3s, height 0s;
11
+  box-sizing: border-box;
12
+  margin: 0;
13
+  padding: 0;
14
+  width: 100%;
15
+  max-width: 100%;
16
+  list-style: none;
17
+  position: relative;
18
+  display: block;
19
+  font-size: 14px;
20
+  line-height: 1.5;
21
+  color: rgba(0, 0, 0, 0.65);
22
+  background-color: #fff;
23
+  background-image: none;
24
+  border: 1px solid #d9d9d9;
25
+  border-radius: 4px;
26
+  transition: all 0.3s, height 0s;
27 27
 }
28 28
 
29 29
 .comment-editor textarea.ant-input {
30
-    border: none;
31
-    border-bottom: 1px solid #eee;
32
-    border-bottom-right-radius: 0;
33
-    border-bottom-left-radius: 0;
30
+  border: none;
31
+  border-bottom: 1px solid #eee;
32
+  border-bottom-right-radius: 0;
33
+  border-bottom-left-radius: 0;
34 34
 }
35 35
 
36 36
 .comment-editor textarea.ant-input:hover {
37
-    border: none;
38
-    border-bottom: 1px solid #eee;
37
+  border: none;
38
+  border-bottom: 1px solid #eee;
39 39
 }
40 40
 
41 41
 .comment-editor textarea.ant-input:focus {
42
-    box-shadow: none;
43
-    border-bottom: 1px solid #eee;
42
+  box-shadow: none;
43
+  border-bottom: 1px solid #eee;
44 44
 }
45 45
 
46 46
 .comment-editor [contentEditable="true"]:empty:not(:focus):before {
47
-    content: attr(data-text);
48
-    color: #bfbfbf;
47
+  content: attr(data-text);
48
+  color: #bfbfbf;
49 49
 }
50 50
 
51 51
 .comment-editor:focus,
52 52
 .comment-editor:hover {
53
-    border-color: #40a9ff;
54
-    outline: 0;
55
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
53
+  border-color: #40a9ff;
54
+  outline: 0;
55
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
56 56
 }
57 57
 
58 58
 .comment-toolbar {
59
-    display: inline-block;
60
-    width: 100%;
61
-    margin: 5px 0 0 0;
59
+  display: inline-block;
60
+  width: 100%;
61
+  margin: 5px 0 0 0;
62 62
 }
63 63
 
64 64
 .comment-toolbar .comment-toolbar-icon {
65
-    font-size: 23px;
66
-    cursor: pointer;
67
-    transition: color 0.3s;
65
+  font-size: 23px;
66
+  cursor: pointer;
67
+  transition: color 0.3s;
68 68
 }
69 69
 
70 70
 .comment-toolbar .comment-toolbar-icon:hover {
71
-    color: #40a9ff;
71
+  color: #40a9ff;
72 72
 }
73 73
 
74 74
 .comment-toolbar-left {
75
-    float: left;
76
-    margin: 8px 11px;
75
+  float: left;
76
+  margin: 8px 11px;
77 77
 }
78 78
 
79 79
 .comment-toolbar-right {
80
-    float: right;
81
-    margin: 5px 11px;
80
+  float: right;
81
+  margin: 5px 11px;
82 82
 }
83 83
 
84 84
 .comment-emoji-popover .ant-popover-inner-content {
85
-    padding: 12px 16px 20px 16px;
85
+  padding: 12px 16px 20px 16px;
86 86
 }
87 87
 
88 88
 .comment-emoji-popover .ant-carousel .slick-dots {
89
-    bottom: -10px;
89
+  bottom: -10px;
90 90
 }
91 91
 
92 92
 .comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
93
-    background-color: #7b868a;
93
+  background-color: #7b868a;
94 94
 }
95 95
 
96 96
 .comment-emoji-popover .ant-carousel .slick-dots li button {
97
-    background-color: #a2aeb5;
98
-}
97
+  background-color: #a2aeb5;
98
+}

+ 4
- 2
lib/components/Editor/index.js View File

@@ -275,10 +275,12 @@ var Editor = function (_React$Component) {
275 275
         null,
276 276
         _react2.default.createElement(
277 277
           "div",
278
-          { className: (0, _classnames2.default)({
278
+          {
279
+            className: (0, _classnames2.default)({
279 280
               "comment-editor-toolbar": true,
280 281
               "comment-editor-toolbar-error": inputValue.length > maxLength
281
-            }) },
282
+            })
283
+          },
282 284
           "\u5DF2\u8F93\u5165 ",
283 285
           inputValue.length,
284 286
           " / ",

+ 1
- 1
lib/components/Editor/index.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
lib/helper.js View File

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

+ 1
- 1
lib/helper.js.map View File

@@ -1 +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,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"]}
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,EACJL,OADI,CACIW,gBADJ,EACY,UAASC,CAAT,EAAYC,CAAZ,EAAe;AAC9B,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,GAXI,EAYJhB,OAZI,CAYI,KAZJ,EAYW,QAZX,CAAP;AAaD","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)\r\n    .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    .replace(/\\n/g, \"<br />\");\r\n}\r\n"]}

+ 1
- 1
package.json View File

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

+ 1
- 0
src/components/ContentItem/index.css View File

@@ -16,6 +16,7 @@
16 16
 }
17 17
 .comment-item-content {
18 18
   margin: 10px 0;
19
+  word-break: break-all;
19 20
 }
20 21
 .comment-item-bottom {
21 22
   margin: 20px auto;