🚩 Initial Commit

aromalanil · Apr 19, 2020 · 85a085e · 85a085e
1 parent 23cae7e
commit 85a085e
Show file tree

Hide file tree

Showing 14 changed files with 1,169 additions and 136 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,14 +1,23 @@
 {
   "name": "markdown-editor",
-  "version": "0.1.0",
+  "version": "1.0.0",
+  "description": "A react app to preview and edit Markdown",
   "private": true,
+  "author": {
+    "name": "Aromal Anil",
+    "email": "[email protected]",
+    "url": "https://aromalanil.me"
+  },
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "node-sass": "^4.13.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-split": "^2.0.7",
+    "showdown": "^1.9.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A react app to preview and edit Markdown"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Markdown Editor</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Markdown Editor",
+  "name": "Markdown Editor",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,14 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import NavBar from './components/NavBar'
+import WorkArea from './components/WorkArea'
+import './App.scss';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+     <NavBar/> 
+     <WorkArea/>
+    </>
   );
 }
 

diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,74 @@
+//Custom Fonts
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+
+//Variable Decelerations
+$primary-color:#339989;
+$primary-accent:#7DE2D1;
+$primary-text:#131515;
+$text-accent:#2B2C28;
+$white:#FFFAFB;
+$source-code-font:'Open Sans', sans-serif;
+$open-sans-font:'Source Code Pro', monospace;
+
+// General Styling
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    color:$primary-text;
+    font-family: $source-code-font;
+}
+
+.navbar{
+    background-color: $primary-color;
+    color:$white;
+    padding: 1rem 5vw;
+}
+
+.work-area{
+    width: 100vw;
+    height: calc(100vh - 60px);
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.wrapper-card{
+    width: 95%;
+    height: 90%;
+    display: flex;
+    box-shadow: 0 4px 12px rgba(0,0,0,.24);
+}
+.markdown-edit,.markdown-preview{
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    flex: 2rem 1fr;
+}
+
+.section-title{
+    text-transform: uppercase;
+}
+
+.markdown-edit{
+    width: 100%;
+    textarea{
+        font-family: $source-code-font;
+        width: 100%;
+        resize: none;
+        height: 100%;
+    }
+}
+
+.markdown-preview{
+    width: 100%;
+    .html-div{
+        overflow-y: scroll;
+    }
+}
diff --git a/src/components/MarkdownEdit.jsx b/src/components/MarkdownEdit.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+function MarkdownEdit({ content, changeContent }) {
+  const handleEditorChange = (event) => {
+      event.preventDefault();
+      changeContent(event.target.value);
+  };
+
+  return (
+    <div className="markdown-edit">
+      <h3 className="section-title">Markdown</h3>
+      <textarea value={content} onChange={handleEditorChange} id="editor"></textarea>
+    </div>
+  );
+}
+
+export default MarkdownEdit;
diff --git a/src/components/MarkdownPreview.jsx b/src/components/MarkdownPreview.jsx
@@ -0,0 +1,24 @@
+import React, { useState, useEffect } from "react";
+import showdown from "showdown";
+
+function MarkdownPreview({ content }) {
+  const [html, setHtml] = useState(getHtml(content));
+
+  useEffect(() => {
+    setHtml(getHtml(content));
+  }, [content]);
+
+  return (
+    <div className="markdown-preview">
+      <h3 className="section-title">Preview</h3>
+      <div className="html-div" dangerouslySetInnerHTML={{ __html: html}}></div>
+    </div>
+  );
+}
+
+const getHtml = (markdown) => {
+  let converter = new showdown.Converter();
+  return converter.makeHtml(markdown);
+};
+
+export default MarkdownPreview;
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+
+function NavBar() {
+  return (
+    <nav className="navbar">
+        <h3>Markdown Editor</h3>
+    </nav>
+  );
+}
+
+export default NavBar;
diff --git a/src/components/WorkArea.jsx b/src/components/WorkArea.jsx
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import Split from "react-split";
+import MarkdownEdit from "./MarkdownEdit";
+import MarkdownPreview from "./MarkdownPreview";
+
+
+function WorkArea() {
+  const [markDown, setMarkDown] = useState("# Hello World");
+
+  return (
+    <div className="work-area">
+      <Split
+        className="wrapper-card"
+        sizes={[50, 50]}
+        minSize={100}
+        expandToMin={false}
+        gutterSize={10}
+        gutterAlign="center"
+        snapOffset={30}
+        dragInterval={1}
+        direction="horizontal"
+        cursor="col-resize"
+      >
+        <MarkdownEdit content={markDown} changeContent={setMarkDown} />
+        <MarkdownPreview content={markDown} />
+      </Split>
+    </div>
+  );
+}
+
+export default WorkArea;
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
@@ -11,7 +10,4 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.register();
diff --git a/src/logo.svg b/src/logo.svg