feat: custom markdown editor toolbar icon

README.md

@@ -7,4 +7,10 @@
 File sizes after gzip:
 
   186.26 KB (+149.06 KB)  build/static/js/main.2563472b.js
-  21.28 KB (+20.99 KB)    build/static/css/main.e0d26ea8.css
+  21.28 KB (+20.99 KB)    build/static/css/main.e0d26ea8.css
+
+
+  File sizes after gzip:
+
+  195.79 KB (+9.53 KB)  build/static/js/main.d730d269.js
+  21.28 KB              build/static/css/main.4c86779f.css

src/App.css

@@ -0,0 +1,4 @@
+.main {
+  width: 100%;
+  padding: 20px;
+}

src/App.js

@@ -1,11 +1,39 @@
 import React, { Component } from 'react';
+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';
+import './App.css'
+
+
+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)
 
 class App extends Component {
   render() {
     return (
-      <div classNAme="main">
+      <div className="main">
         <RichEditor />
         <hr></hr>
         <MarkdownEditor />

src/MarkdownEditor/index.js

@@ -2,6 +2,27 @@ 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 {
 
@@ -21,6 +42,8 @@ export default class MarkdownEditor extends React.Component {
         return (
             <div className="container">
                 <ReactMde
+                    layout="horizontal"
+                    buttonContentOptions={{ iconProvider }}
                     onChange={this.handleValueChange}
                     editorState={this.state.mdeState}
                     generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}

src/RichEditor/index.js

@@ -37,7 +37,7 @@ export default class RichEditor extends React.Component {
 
         const { editorState } = this.state
         return (
-            <div className="my-component">
+            <div>
                 <BraftEditor
                     value={editorState}
                     onChange={this.handleEditorChange}