Przeglądaj źródła

feat: add default props of richeditor

node 6 lat temu
rodzic
commit
dac0abe18e

+ 1
- 1
lib/MarkdownEditor/index.js Wyświetl plik

@@ -80,7 +80,7 @@ var MarkdownEditor = function (_React$Component) {
80 80
           return Promise.resolve(_this2.converter.makeHtml(markdown));
81 81
         }
82 82
       };
83
-      var props = _extends({}, this.props, defaultProps);
83
+      var props = _extends({}, defaultProps, this.props);
84 84
       return React.createElement(_reactMde2.default, props);
85 85
     }
86 86
   }]);

+ 1
- 1
lib/MarkdownEditor/index.js.map Wyświetl plik

@@ -1 +1 @@
1
-{"version":3,"sources":["../../src/MarkdownEditor/index.js"],"names":["React","Showdown","icons","iconProvider","name","MarkdownEditor","props","handleValueChange","mdeState","setState","converter","Converter","tables","simplifiedAutoLink","defaultProps","layout","buttonContentOptions","generateMarkdownPreview","markdown","Promise","resolve","makeHtml","Component"],"mappings":";;;;;;;;;;AAAA;;IAAYA,K;;AACZ;;;;AACA;;IAAYC,Q;;AACZ;;AACA;;;;;;;;;;;;AAGA,IAAMC,QAAQ;AACV,UAAQ,oBAAC,iCAAD,IAAiB,MAAK,MAAtB,GADE;AAEV,aAAW,oBAAC,iCAAD,IAAiB,MAAK,SAAtB,GAFD;AAGV,YAAU,oBAAC,iCAAD,IAAiB,MAAK,QAAtB,GAHA;AAIV,mBAAiB,oBAAC,iCAAD,IAAiB,MAAK,eAAtB,GAJP;AAKV,UAAQ,oBAAC,iCAAD,IAAiB,MAAK,MAAtB,GALE;AAMV,iBAAe,oBAAC,iCAAD,IAAiB,MAAK,aAAtB,GANL;AAOV,UAAQ,oBAAC,iCAAD,IAAiB,MAAK,MAAtB,GAPE;AAQV,WAAS,oBAAC,iCAAD,IAAiB,MAAK,OAAtB,GARC;AASV,aAAW,oBAAC,iCAAD,IAAiB,MAAK,SAAtB,GATD;AAUV,aAAW,oBAAC,iCAAD,IAAiB,MAAK,SAAtB,GAVD;AAWV,WAAS,oBAAC,iCAAD,IAAiB,MAAK,OAAtB;AAXC,CAAd;;AAcE,IAAMC,eAAe,SAAfA,YAAe,CAACC,IAAD,EAAU;AAC7B,SAAOF,MAAME,IAAN,KAAe,GAAtB;AACD,CAFD;;IAKmBC,c;;;AAEjB,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA,gIACTA,KADS;;AAAA,UAKnBC,iBALmB,GAKC,UAACC,QAAD,EAAc;AAC9B,YAAKC,QAAL,CAAc,EAACD,kBAAD,EAAd;AACH,KAPkB;;AAEf,UAAKE,SAAL,GAAiB,IAAIT,SAASU,SAAb,CAAuB,EAACC,QAAQ,IAAT,EAAeC,oBAAoB,IAAnC,EAAvB,CAAjB;AAFe;AAGlB;;;;6BAMQ;AAAA;;AACP,UAAMC,eAAe;AACnBC,gBAAQ,YADW;AAEnBC,8BAAsB,EAAEb,0BAAF,EAFH;AAGnBc,iCAAyB,iCAACC,QAAD;AAAA,iBAAcC,QAAQC,OAAR,CAAgB,OAAKV,SAAL,CAAeW,QAAf,CAAwBH,QAAxB,CAAhB,CAAd;AAAA;AAHN,OAArB;AAKA,UAAMZ,qBACD,KAAKA,KADJ,EAEDQ,YAFC,CAAN;AAIE,aACE,oBAAC,kBAAD,EAAcR,KAAd,CADF;AAGH;;;;EAxBuCN,MAAMsB,S;;kBAA7BjB,c","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport ReactMde from 'react-mde';\nimport * as Showdown from \"showdown\";\nimport 'react-mde/lib/styles/css/react-mde-all.css';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\n\nconst icons = {\n    \"bold\": <FontAwesomeIcon icon=\"bold\" />,\n    \"heading\": <FontAwesomeIcon icon=\"heading\" />,\n    \"italic\": <FontAwesomeIcon icon=\"italic\" />,\n    \"strikethrough\": <FontAwesomeIcon icon=\"strikethrough\" />,\n    \"link\": <FontAwesomeIcon icon=\"link\" />,\n    \"quote-right\": <FontAwesomeIcon icon=\"quote-right\" />,\n    \"code\": <FontAwesomeIcon icon=\"code\" />,\n    \"image\": <FontAwesomeIcon icon=\"image\" />,\n    \"list-ul\": <FontAwesomeIcon icon=\"list-ul\" />,\n    \"list-ol\": <FontAwesomeIcon icon=\"list-ol\" />,\n    \"tasks\": <FontAwesomeIcon icon=\"tasks\" />,\n  };\n\n  const iconProvider = (name) => {\n    return icons[name] || \"❓\";\n  };\n  \n\nexport default class MarkdownEditor extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});\n    }\n\n    handleValueChange = (mdeState) => {\n        this.setState({mdeState});\n    }\n\n    render() {\n      const defaultProps = {\n        layout: 'horizontal',\n        buttonContentOptions: { iconProvider },\n        generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),\n      }\n      const props=  {\n        ...this.props,\n        ...defaultProps,\n      }\n        return (\n          <ReactMde {...props} />\n        );\n    }\n}"]}
1
+{"version":3,"sources":["../../src/MarkdownEditor/index.js"],"names":["React","Showdown","icons","iconProvider","name","MarkdownEditor","props","handleValueChange","mdeState","setState","converter","Converter","tables","simplifiedAutoLink","defaultProps","layout","buttonContentOptions","generateMarkdownPreview","markdown","Promise","resolve","makeHtml","Component"],"mappings":";;;;;;;;;;AAAA;;IAAYA,K;;AACZ;;;;AACA;;IAAYC,Q;;AACZ;;AACA;;;;;;;;;;;;AAGA,IAAMC,QAAQ;AACV,UAAQ,oBAAC,iCAAD,IAAiB,MAAK,MAAtB,GADE;AAEV,aAAW,oBAAC,iCAAD,IAAiB,MAAK,SAAtB,GAFD;AAGV,YAAU,oBAAC,iCAAD,IAAiB,MAAK,QAAtB,GAHA;AAIV,mBAAiB,oBAAC,iCAAD,IAAiB,MAAK,eAAtB,GAJP;AAKV,UAAQ,oBAAC,iCAAD,IAAiB,MAAK,MAAtB,GALE;AAMV,iBAAe,oBAAC,iCAAD,IAAiB,MAAK,aAAtB,GANL;AAOV,UAAQ,oBAAC,iCAAD,IAAiB,MAAK,MAAtB,GAPE;AAQV,WAAS,oBAAC,iCAAD,IAAiB,MAAK,OAAtB,GARC;AASV,aAAW,oBAAC,iCAAD,IAAiB,MAAK,SAAtB,GATD;AAUV,aAAW,oBAAC,iCAAD,IAAiB,MAAK,SAAtB,GAVD;AAWV,WAAS,oBAAC,iCAAD,IAAiB,MAAK,OAAtB;AAXC,CAAd;;AAcE,IAAMC,eAAe,SAAfA,YAAe,CAACC,IAAD,EAAU;AAC7B,SAAOF,MAAME,IAAN,KAAe,GAAtB;AACD,CAFD;;IAKmBC,c;;;AAEjB,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA,gIACTA,KADS;;AAAA,UAKnBC,iBALmB,GAKC,UAACC,QAAD,EAAc;AAC9B,YAAKC,QAAL,CAAc,EAACD,kBAAD,EAAd;AACH,KAPkB;;AAEf,UAAKE,SAAL,GAAiB,IAAIT,SAASU,SAAb,CAAuB,EAACC,QAAQ,IAAT,EAAeC,oBAAoB,IAAnC,EAAvB,CAAjB;AAFe;AAGlB;;;;6BAMQ;AAAA;;AACP,UAAMC,eAAe;AACnBC,gBAAQ,YADW;AAEnBC,8BAAsB,EAAEb,0BAAF,EAFH;AAGnBc,iCAAyB,iCAACC,QAAD;AAAA,iBAAcC,QAAQC,OAAR,CAAgB,OAAKV,SAAL,CAAeW,QAAf,CAAwBH,QAAxB,CAAhB,CAAd;AAAA;AAHN,OAArB;AAKA,UAAMZ,qBACDQ,YADC,EAED,KAAKR,KAFJ,CAAN;AAIE,aACE,oBAAC,kBAAD,EAAcA,KAAd,CADF;AAGH;;;;EAxBuCN,MAAMsB,S;;kBAA7BjB,c","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport ReactMde from 'react-mde';\nimport * as Showdown from \"showdown\";\nimport 'react-mde/lib/styles/css/react-mde-all.css';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\n\nconst icons = {\n    \"bold\": <FontAwesomeIcon icon=\"bold\" />,\n    \"heading\": <FontAwesomeIcon icon=\"heading\" />,\n    \"italic\": <FontAwesomeIcon icon=\"italic\" />,\n    \"strikethrough\": <FontAwesomeIcon icon=\"strikethrough\" />,\n    \"link\": <FontAwesomeIcon icon=\"link\" />,\n    \"quote-right\": <FontAwesomeIcon icon=\"quote-right\" />,\n    \"code\": <FontAwesomeIcon icon=\"code\" />,\n    \"image\": <FontAwesomeIcon icon=\"image\" />,\n    \"list-ul\": <FontAwesomeIcon icon=\"list-ul\" />,\n    \"list-ol\": <FontAwesomeIcon icon=\"list-ol\" />,\n    \"tasks\": <FontAwesomeIcon icon=\"tasks\" />,\n  };\n\n  const iconProvider = (name) => {\n    return icons[name] || \"❓\";\n  };\n  \n\nexport default class MarkdownEditor extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});\n    }\n\n    handleValueChange = (mdeState) => {\n        this.setState({mdeState});\n    }\n\n    render() {\n      const defaultProps = {\n        layout: 'horizontal',\n        buttonContentOptions: { iconProvider },\n        generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),\n      }\n      const props=  {\n        ...defaultProps,\n        ...this.props,\n      }\n        return (\n          <ReactMde {...props} />\n        );\n    }\n}"]}

+ 8
- 1
lib/RichEditor/index.js Wyświetl plik

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4 4
     value: true
5 5
 });
6 6
 
7
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
8
+
7 9
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8 10
 
9 11
 var _react = require('react');
@@ -40,7 +42,12 @@ var RichEditor = function (_React$Component) {
40 42
     _createClass(RichEditor, [{
41 43
         key: 'render',
42 44
         value: function render() {
43
-            return _react2.default.createElement(_braftEditor2.default, this.props);
45
+            var defaultProps = {
46
+                controls: ['headings', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator', 'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'separator', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator', 'link', 'separator', 'hr', 'separator', 'media', 'separator', 'undo', 'redo']
47
+            };
48
+
49
+            var props = _extends({}, defaultProps, this.props);
50
+            return _react2.default.createElement(_braftEditor2.default, props);
44 51
         }
45 52
     }]);
46 53
 

+ 1
- 1
lib/RichEditor/index.js.map Wyświetl plik

@@ -1 +1 @@
1
-{"version":3,"sources":["../../src/RichEditor/index.js"],"names":["RichEditor","props","React","Component"],"mappings":";;;;;;;;AAAA;;;;AAEA;;;;AAEA;;;;;;;;;AAHA;;AAEA;;;IAGqBA,U;;;;;;;;;;;iCACP;AACN,mBACE,8BAAC,qBAAD,EAAiB,KAAKC,KAAtB,CADF;AAGH;;;;EALmCC,gBAAMC,S;;kBAAzBH,U","file":"index.js","sourcesContent":["import React from 'react'\n// 引入编辑器以及EditorState子模块\nimport BraftEditor from 'braft-editor'\n// 引入编辑器样式\nimport 'braft-editor/dist/index.css'\n\nexport default class RichEditor extends React.Component {\n    render () {\n        return (\n          <BraftEditor {...this.props} />\n        )\n    }\n}"]}
1
+{"version":3,"sources":["../../src/RichEditor/index.js"],"names":["RichEditor","defaultProps","controls","props","React","Component"],"mappings":";;;;;;;;;;AAAA;;;;AAEA;;;;AAEA;;;;;;;;;AAHA;;AAEA;;;IAGqBA,U;;;;;;;;;;;iCACP;AACN,gBAAMC,eAAe;AACjBC,0BAAU,CACN,UADM,EACM,YADN,EACoB,MADpB,EAC4B,QAD5B,EACsC,WADtC,EACmD,gBADnD,EACqE,WADrE,EAEN,aAFM,EAES,WAFT,EAEsB,eAFtB,EAEuC,OAFvC,EAEgD,YAFhD,EAE8D,WAF9D,EAGN,SAHM,EAGK,SAHL,EAGgB,YAHhB,EAG8B,MAH9B,EAGsC,WAHtC,EAIN,MAJM,EAIE,WAJF,EAIe,IAJf,EAIqB,WAJrB,EAKN,OALM,EAKG,WALH,EAKiB,MALjB,EAKyB,MALzB;AADO,aAArB;;AAUA,gBAAMC,qBACCF,YADD,EAEC,KAAKE,KAFN,CAAN;AAIA,mBACE,8BAAC,qBAAD,EAAiBA,KAAjB,CADF;AAGH;;;;EAnBmCC,gBAAMC,S;;kBAAzBL,U","file":"index.js","sourcesContent":["import React from 'react'\n// 引入编辑器以及EditorState子模块\nimport BraftEditor from 'braft-editor'\n// 引入编辑器样式\nimport 'braft-editor/dist/index.css'\n\nexport default class RichEditor extends React.Component {\n    render () {\n        const defaultProps = {\n            controls: [\n                'headings', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',\n                'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'separator',\n                'list-ul', 'list-ol', 'blockquote', 'code', 'separator',\n                'link', 'separator', 'hr', 'separator',\n                'media', 'separator',  'undo', 'redo',\n            ]\n        }\n\n        const props = {\n            ...defaultProps,\n            ...this.props,\n        }\n        return (\n          <BraftEditor {...props} />\n        )\n    }\n}"]}

+ 1
- 1
src/MarkdownEditor/index.js Wyświetl plik

@@ -42,8 +42,8 @@ export default class MarkdownEditor extends React.Component {
42 42
         generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),
43 43
       }
44 44
       const props=  {
45
-        ...this.props,
46 45
         ...defaultProps,
46
+        ...this.props,
47 47
       }
48 48
         return (
49 49
           <ReactMde {...props} />

+ 15
- 1
src/RichEditor/index.js Wyświetl plik

@@ -6,8 +6,22 @@ import 'braft-editor/dist/index.css'
6 6
 
7 7
 export default class RichEditor extends React.Component {
8 8
     render () {
9
+        const defaultProps = {
10
+            controls: [
11
+                'headings', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
12
+                'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'separator',
13
+                'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
14
+                'link', 'separator', 'hr', 'separator',
15
+                'media', 'separator',  'undo', 'redo',
16
+            ]
17
+        }
18
+
19
+        const props = {
20
+            ...defaultProps,
21
+            ...this.props,
22
+        }
9 23
         return (
10
-          <BraftEditor {...this.props} />
24
+          <BraftEditor {...props} />
11 25
         )
12 26
     }
13 27
 }