Merge branch 'feature/render' of node/npmcomment into master

README.md

@@ -5,13 +5,12 @@
 `version 0.2.0`
 
 ```js
-import Comment, { Editor } from 'comment';
+import Comment, { Editor, RenderText } from 'comment';
 ```
 
+- [deprecate] 表示不推荐使用
 
-## Props
-
-#### Comment
+## Comment
 
 
 | props      | type    | default                            | required | description                                  |
@@ -22,11 +21,11 @@ import Comment, { Editor } from 'comment';
 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
 | showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
-| token      | string  |                                    | false    | token，用于身份认证，非必须。默认使用 cookie |
+| token      | string  |                                    | false    |  [deprecate] token，用于身份认证，非必须。默认使用 cookie |
 
 
 
-##### Editor
+## Editor
 
 | props         | type            | default       | required | description                                                                                       |
 | ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
@@ -36,7 +35,7 @@ import Comment, { Editor } from 'comment';
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性，则编辑器变为受控组件，需要父组件来维护 value                        |
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
-| onSubmit      | function(value) |               | false    | 点击提交按钮的回调函数                                                                            |
+| onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数，text 为编辑器的文本，files 为上传的文件列表                           |
 | btnSubmitText | string          | 发表          | false    | 提交按钮的文字                                                                                    |
 | btnLoading    | boolean         | false         | false    | 按钮是否正在加载中                                                                                |
 | btnDisable    | boolean         | false         | false    | 按钮是否禁用                                                                                      |
@@ -131,18 +130,30 @@ handleChangeSubmit() {
 }
 
 
-<App type={1} businessId="test">
+<Comment type={1} businessId="test">
   <Editor 
     // 使用 onRef 方法创建一个 Editor 组件的引用，并添加到 this 上面
     onRef={ref => this.editor = ref } 
     onSubmit={() => this.handleChangeSubmit()}
   />
-</App>
+</Comment>
 ```
 
 **注意上面的 `onRef={ref => this.editor = ref }`**，这是实现父组件调用子组件方法的关键。**
 
 
+## RenderText
+
+```jsx
+
+import { RenderText } from 'comment';
+
+render() {
+  return RenderText('test [呲牙]')
+}
+```
+
+
 ## 使用
 
 
@@ -230,7 +241,7 @@ $ yarn start
 
 - `yarn build` 将项目打包成一个单页应用
 - `yarn lib` 将项目打包成一个 es5 组件
-- `yarn prettier` 格式化代码
+- `yarn prettier` 优化代码格式
 
 ## TODO
 

src/App.js

@@ -8,6 +8,7 @@ import { isFunction } from "./helper";
 import CommentInput from "./components/CommentInput";
 import CommentList from "./components/CommentList";
 import Editor from "./components/Editor";
+import RenderText from "./components/RenderText";
 import lang from "./lang";
 import "./App.css";
 
@@ -402,6 +403,6 @@ App.defaultProps = {
   showHeader: true
 };
 
-export { Editor };
+export { Editor, RenderText };
 
 export default App;

src/components/CommentInput/index.js

@@ -11,10 +11,17 @@ class CommentInput extends Component {
 
   /**
    * 提交评论
-   * @param {string} value 需要提交的评论的值
+   * @param {object} { text<string>, files<array> } 需要提交的评论的文本和图片
    * @param {function} cb 提交成功后的回掉
    */
-  handleSubmit(value, cb) {
+  handleSubmit({ text, files }, cb) {
+    let value = text;
+    if (files && files.length) {
+      value += "<br /><br />";
+      files.forEach(file => {
+        value += `[${file}]`;
+      });
+    }
     const { action, commentId, replyId, callback } = this.props;
     if (action === "comment") {
       this.props.app.sCreateComment(

src/components/Editor/index.js

@@ -97,13 +97,13 @@ class Editor extends React.Component {
    */
   handleSubmit() {
     let { value, fileMap, fileList } = this.state;
+    const files = [];
     if (fileList.length) {
-      value += "<br/>";
       fileList.forEach(item => {
-        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
+        files.push(`${OSS_LINK}${fileMap[item.uid]}`);
       });
     }
-    this.props.onSubmit(value, () => {
+    this.props.onSubmit({ text: value, files }, () => {
       this.resetState();
     });
   }

src/components/RenderText/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { renderContent } from "../../helper";
+
+const App = text => (
+  <div
+    className="comment-item-content"
+    dangerouslySetInnerHTML={{
+      __html: renderContent(text)
+    }}
+  />
+);
+
+export default App;

src/index.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 // e.g.
 // import { Button, Icon } from "antd";
-import App, { Editor } from "./App";
+import App, { Editor, RenderText } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
 class Index extends Component {
@@ -20,13 +20,14 @@ class Index extends Component {
     console.log("handleChangeValue value: ", value);
   }
 
-  handleChangeSubmit(value) {
+  handleChangeSubmit({ text, files }) {
     this.setState({ loading: true }, () => {
       setTimeout(() => {
         this.setState({ loading: false });
       }, 2000);
     });
-    console.log("submit value: ", value);
+    console.log("submit text: ", text);
+    console.log("submit files: ", files);
   }
 
   render() {