feat: build

package.json

@@ -2,10 +2,17 @@
   "name": "editor",
   "version": "0.1.0",
   "private": true,
+  "main": "dist/index.js",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.4",
+    "@fortawesome/free-solid-svg-icons": "^5.3.1",
+    "@fortawesome/react-fontawesome": "^0.1.3",
+    "braft-editor": "^2.0.5",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
-    "react-scripts": "1.1.5"
+    "react-mde": "^5.8.0",
+    "react-scripts": "1.1.5",
+    "showdown": "^1.8.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -13,4 +20,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/MarkdownEditor/index.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import ReactMde from 'react-mde';
+import * as Showdown from "showdown";
+import 'react-mde/lib/styles/css/react-mde-all.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+
+const icons = {
+    "bold": <FontAwesomeIcon icon="bold" />,
+    "heading": <FontAwesomeIcon icon="heading" />,
+    "italic": <FontAwesomeIcon icon="italic" />,
+    "strikethrough": <FontAwesomeIcon icon="strikethrough" />,
+    "link": <FontAwesomeIcon icon="link" />,
+    "quote-right": <FontAwesomeIcon icon="quote-right" />,
+    "code": <FontAwesomeIcon icon="code" />,
+    "image": <FontAwesomeIcon icon="image" />,
+    "list-ul": <FontAwesomeIcon icon="list-ul" />,
+    "list-ol": <FontAwesomeIcon icon="list-ol" />,
+    "tasks": <FontAwesomeIcon icon="tasks" />,
+  };
+
+  const iconProvider = (name) => {
+    return icons[name] || "❓";
+  };
+  
+
+export default class MarkdownEditor extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});
+    }
+
+    handleValueChange = (mdeState) => {
+        this.setState({mdeState});
+    }
+
+    render() {
+      const defaultProps = {
+        layout: 'horizontal',
+        buttonContentOptions: { iconProvider },
+        generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),
+      }
+      const props=  {
+        ...this.props,
+        ...defaultProps,
+      }
+        return (
+          <ReactMde {...props} />
+        );
+    }
+}

src/RichEditor/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+// 引入编辑器以及EditorState子模块
+import BraftEditor from 'braft-editor'
+// 引入编辑器样式
+import 'braft-editor/dist/index.css'
+
+export default class RichEditor extends React.Component {
+    render () {
+        return (
+          <BraftEditor {...this.props} />
+        )
+    }
+}

src/index.js

@@ -1,8 +1,34 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { 
+    faBold, 
+    faHeading,
+    faItalic,
+    faStrikethrough,
+    faLink,
+    faQuoteRight,
+    faCode,
+    faImage,
+    faListUl,
+    faListOl,
+    faTasks,
+ } from '@fortawesome/free-solid-svg-icons'
+ import RichEditor from './RichEditor';
+ import MarkdownEditor from './MarkdownEditor';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+
+library.add(faBold)
+library.add(faHeading)
+library.add(faItalic)
+library.add(faStrikethrough)
+library.add(faLink)
+library.add(faQuoteRight)
+library.add(faCode)
+library.add(faImage)
+library.add(faListUl)
+library.add(faListOl)
+library.add(faTasks)
+
+export default { 
+  RichEditor,
+  MarkdownEditor,
+ }