add part II

package.json

@@ -6,6 +6,7 @@
     "immutable": "^3.8.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-icons-kit": "^1.1.6",
     "react-scripts": "1.1.4",
     "slate": "^0.34.5",
     "slate-react": "^0.13.2"

src/App.css

@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

src/App.js

@@ -1,15 +1,16 @@
-import React, { Component } from 'react';
-import { TextEditor } from './components';
-import './App.css';
+import React, { Component } from "react";
+
+import { TextEditor } from "./components";
+import "./App.css";
 
 class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <TextEditor />
-      </div>
-    );
-  }
+	render() {
+		return (
+			<div className="App">
+				<TextEditor />
+			</div>
+		);
+	}
 }
 
 export default App;

src/components/FormatToolbar.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const FormatToolbar = (props) => (
+	<div className="format-toolbar">{props.children}</div>
+);
+
+export default FormatToolbar;

src/components/TextEditor.js

@@ -1,7 +1,15 @@
-import React, { Component } from 'react'
-import { Editor } from 'slate-react'
-import { Value } from 'slate'
-import { BoldMark, ItalicMark } from './index';
+import React, { Component, Fragment } from 'react';
+import { Editor } from 'slate-react';
+import { Value } from 'slate';
+
+import Icon from 'react-icons-kit';
+import { bold } from 'react-icons-kit/feather/bold';
+import { italic } from 'react-icons-kit/feather/italic';
+import { code } from 'react-icons-kit/feather/code';
+import { list } from 'react-icons-kit/feather/list';
+import { underline } from 'react-icons-kit/feather/underline';
+
+import { BoldMark, ItalicMark, FormatToolbar } from './index';
 
 // Create our initial value...
 const initialValue = Value.fromJSON({
@@ -23,73 +31,148 @@ const initialValue = Value.fromJSON({
 			},
 		],
 	},
-})
-
+});
 
 export default class TextEditor extends Component {
-
-
 	state = {
 		value: initialValue,
-	}
+	};
 
 	// On change, update the app's React state with the new editor value.
 	onChange = ({ value }) => {
-		this.setState({ value })
-	}
+		this.setState({ value });
+	};
 
 	onKeyDown = (e, change) => {
-
 		/*
 			we want all our commands to start with the user pressing ctrl,
 			if they don't--we cancel the action.
 		*/
 
-		if (!e.ctrlKey) { return }
-		e.preventDefault()
+		if (!e.ctrlKey) {
+			return;
+		}
+
+		e.preventDefault();
 
 		/* Decide what to do based on the key code... */
 		switch (e.key) {
 			/* When "b" is pressed, add a "bold" mark to the text. */
 			case 'b': {
-				change.toggleMark('bold')
-				return true
+				change.toggleMark('bold');
+				return true;
 			}
 			case 'i': {
-				change.toggleMark('italic')
-				return true
+				change.toggleMark('italic');
+				return true;
+			}
+
+			case 'c': {
+				change.toggleMark('code');
+				return true;
+			}
+
+			case 'l': {
+				change.toggleMark('list');
+				return true;
 			}
 
+			case 'u': {
+				change.toggleMark('underline');
+				return true;
+			}
 			default: {
 				return;
 			}
-
 		}
-	}
+	};
 
-	renderMark = props => {
+	renderMark = (props) => {
 		switch (props.mark.type) {
 			case 'bold':
-				return <BoldMark {...props} />
+				return <BoldMark {...props} />;
 
 			case 'italic':
-				return <ItalicMark {...props} />
+				return <ItalicMark {...props} />;
+
+			case 'code':
+				return <code {...props.attributes}>{props.children}</code>;
+
+			case 'list':
+				return (
+					<ul {...props.attributes}>
+						<li>{props.children}</li>
+					</ul>
+				);
+
+			case 'underline':
+				return <u {...props.attributes}>{props.children}</u>;
 
 			default: {
 				return;
 			}
 		}
-	}
+	};
+
+	onMarkClick = (e, type) => {
+		/* disabling browser default behavior like page refresh, etc */
+		e.preventDefault();
+
+		/* grabbing the this.state.value */
+		const { value } = this.state;
+
+		/*
+			applying the formatting on the selected text
+			which the desired formatting
+		*/
+		const change = value.change().toggleMark(type);
+
+		/* calling the  onChange method we declared */
+		this.onChange(change);
+	};
 
 	render() {
 		return (
-			<Editor
-				value={this.state.value}
-				onChange={this.onChange}
-				onKeyDown={this.onKeyDown}
-				renderMark={this.renderMark}
-
-			/>
-		)
+			<Fragment>
+				<FormatToolbar>
+					<button
+						onPointerDown={(e) => this.onMarkClick(e, 'bold')}
+						className="tooltip-icon-button"
+					>
+						<Icon icon={bold} />
+					</button>
+					<button
+						onPointerDown={(e) => this.onMarkClick(e, 'italic')}
+						className="tooltip-icon-button"
+					>
+						<Icon icon={italic} />
+					</button>
+					<button
+						onPointerDown={(e) => this.onMarkClick(e, 'code')}
+						className="tooltip-icon-button"
+					>
+						<Icon icon={code} />
+					</button>
+					<button
+						onPointerDown={(e) => this.onMarkClick(e, 'list')}
+						className="tooltip-icon-button"
+					>
+						<Icon icon={list} />
+					</button>
+					<button
+						onPointerDown={(e) => this.onMarkClick(e, 'underline')}
+						className="tooltip-icon-button"
+					>
+						<Icon icon={underline} />
+					</button>
+				</FormatToolbar>
+				<Editor
+					value={this.state.value}
+					onChange={this.onChange}
+					onKeyDown={this.onKeyDown}
+					renderMark={this.renderMark}
+				/>
+			</Fragment>
+		);
 	}
 }

src/components/index.js

@@ -1,5 +1,6 @@
-import TextEditor from './TextEditor';
-import BoldMark from './BoldMark';
-import ItalicMark from './ItalicMark';
+import TextEditor from "./TextEditor";
+import BoldMark from "./BoldMark";
+import ItalicMark from "./ItalicMark";
+import FormatToolbar from "./FormatToolbar";
 
-export { TextEditor, BoldMark, ItalicMark };
+export { TextEditor, BoldMark, ItalicMark, FormatToolbar };

src/index.css

@@ -1,5 +1,34 @@
+html {
+	height: 100%;
+}
+
 body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
+	min-height: 100vh;
+	margin: 0;
+	padding: 0;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+	background-color: rgb(240, 240, 240);
+}
+
+.App {
+	color: rgb(17, 17, 17);
+	max-width: 740px;
+	background-color: rgb(255, 255, 255);
+	box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
+	padding: 40px;
+	margin: 65px auto 45px;
+	border-radius: 4.5px;
+}
+
+.format-toolbar {
+	display: flex;
+	border-bottom: solid 1.7px rgba(199, 198, 255, 0.15);
+	padding: 10px 0;
+	margin: 0 0 10px 0;
+}
+
+.tooltip-icon-button {
+	cursor: pointer;
+	border: 0;
 }