0.5.11

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 0.5.11
+- [x] 增加链接解析功能
+
 ## 0.5.10
 - [x] 扩展表情包
 

README.md

@@ -2,7 +2,7 @@
 
 通用评论系统及编辑器
 
-**`version 0.5.10`**
+**`version 0.5.11`**
 
 ```js
 import Comment, { Editor, RenderText } from 'comment';

lib/Comment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\r\n\r\nconst CommentContext = React.createContext();\r\n\r\n// This function takes a component...\r\nexport function Comment(Component) {\r\n  // ...and returns another component...\r\n  return function(props) {\r\n    // ... and renders the wrapped component with the context theme!\r\n    // Notice that we pass through any additional props as well\r\n    return (\r\n      <CommentContext.Consumer>\r\n        {app => <Component {...props} app={app} />}\r\n      </CommentContext.Consumer>\r\n    );\r\n  };\r\n}\r\n\r\nexport { CommentContext };\r\n\r\nexport default Comment;\r\n"]}
+{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\n\nconst CommentContext = React.createContext();\n\n// This function takes a component...\nexport function Comment(Component) {\n  // ...and returns another component...\n  return function(props) {\n    // ... and renders the wrapped component with the context theme!\n    // Notice that we pass through any additional props as well\n    return (\n      <CommentContext.Consumer>\n        {app => <Component {...props} app={app} />}\n      </CommentContext.Consumer>\n    );\n  };\n}\n\nexport { CommentContext };\n\nexport default Comment;\n"]}

lib/constant.js

@@ -15,6 +15,8 @@ var OSS_LINK = exports.OSS_LINK = "//links-comment.oss-cn-beijing.aliyuncs.com";
 
 var MAX_UPLOAD_NUMBER = exports.MAX_UPLOAD_NUMBER = 4;
 
+var URL_REGEXP = exports.URL_REGEXP = /((http(s)?:)?\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
+
 var REGEXP = exports.REGEXP = /\[[^[\]]+?\]/g;
 
 var AVATAR = exports.AVATAR = "";

lib/constant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","REGEXP","AVATAR","IMAGE_SPLIT"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\r\n\r\nexport const LIMIT = 10; // 默认 limit\r\n\r\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\r\nexport const OSS_BUCKET = \"links-comment\";\r\nexport const DRIVER_LICENSE_PATH = \"/comment\";\r\n\r\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\r\n\r\nexport const MAX_UPLOAD_NUMBER = 4;\r\n\r\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\r\n\r\nexport const AVATAR = \"\";\r\n\r\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\r\n"]}
+{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","URL_REGEXP","REGEXP","AVATAR","IMAGE_SPLIT"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,kCAAa,oGAAnB;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\r\n\r\nexport const LIMIT = 10; // 默认 limit\r\n\r\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\r\nexport const OSS_BUCKET = \"links-comment\";\r\nexport const DRIVER_LICENSE_PATH = \"/comment\";\r\n\r\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\r\n\r\nexport const MAX_UPLOAD_NUMBER = 4;\r\n\r\nexport const URL_REGEXP = /((http(s)?:)?\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\r\n\r\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\r\n\r\nexport const AVATAR = \"\";\r\n\r\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\r\n"]}

lib/helper.js

@@ -24,7 +24,8 @@ function isFunction(functionToCheck) {
 }
 
 function isUrl(userInput) {
-  var regexp = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
+  // 需完整匹配
+  var regexp = /^((http(s)?:)?\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
   var res = userInput.match(regexp);
   if (res === null) return false;else return true;
 }
@@ -65,8 +66,9 @@ function renderContent(content, onClick) {
     newContent.pop();
     newContent = newContent.join("");
   }
-
-  return htmlEncode(newContent).replace(_constant.REGEXP, function (a, b) {
+  // 不包含在标签内的链接
+  var innerUrl = /((http(s)?:)?\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)(?![^<>]*>|[^"]*?<\/a)/g;
+  var data = htmlEncode(newContent).replace(_constant.REGEXP, function (a, b) {
     var src = a.slice(1, -1);
 
     // 兼容旧的评
@@ -80,6 +82,14 @@ function renderContent(content, onClick) {
       return "<img src=\"" + _emoji.prefixUrl + emoji.value + "." + emoji.ext + "\" alt=\"" + emoji.title + "\" />";
     }
     return "[" + src + "]";
+  }).replace(innerUrl, function (a, b) {
+    var protocol = /^(https?:)?\/\//;
+    var hasProtocol = protocol.test(a);
+    var url = hasProtocol ? a : "//" + a;
+    // target="_blank" 存在安全性问题
+    // return `<a href="${url}" target="_blank" rel="noopener noreferrer" >${a}</a>`;
+    return "<a href=\"" + url + "\">" + a + "</a>";
   }).replace(/\n/g, "<br />");
+  return data;
 }
 //# sourceMappingURL=helper.js.map

package.json

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

src/constant.js

@@ -10,6 +10,8 @@ export const OSS_LINK = "//links-comment.oss-cn-beijing.aliyuncs.com";
 
 export const MAX_UPLOAD_NUMBER = 4;
 
+export const URL_REGEXP = /((http(s)?:)?\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
+
 export const REGEXP = /\[[^[\]]+?\]/g;
 
 export const AVATAR = "";

src/helper.js

@@ -10,7 +10,8 @@ export function isFunction(functionToCheck) {
 }
 
 export function isUrl(userInput) {
-  const regexp = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
+  // 需完整匹配
+  const regexp = /^((http(s)?:)?\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
   var res = userInput.match(regexp);
   if (res === null) return false;
   else return true;
@@ -52,8 +53,9 @@ export function renderContent(content, onClick) {
     newContent.pop();
     newContent = newContent.join("");
   }
-
-  return htmlEncode(newContent)
+  // 不包含在标签内的链接
+  const innerUrl = /((http(s)?:)?\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)(?![^<>]*>|[^"]*?<\/a)/g;
+  const data = htmlEncode(newContent)
     .replace(REGEXP, function(a, b) {
       const src = a.slice(1, -1);
 
@@ -71,5 +73,14 @@ export function renderContent(content, onClick) {
       }
       return `[${src}]`;
     })
+    .replace(innerUrl, function(a, b) {
+      const protocol = /^(https?:)?\/\//;
+      const hasProtocol = protocol.test(a);
+      const url = hasProtocol ? a : `//${a}`;
+      // target="_blank" 存在安全性问题
+      // return `<a href="${url}" target="_blank" rel="noopener noreferrer" >${a}</a>`;
+      return `<a href="${url}">${a}</a>`;
+    })
     .replace(/\n/g, "<br />");
+  return data;
 }