Skip to content

Commit 85a085e

Browse files
aromalanilaromalanil
committedApr 19, 2020
🚩 Initial Commit
·
v1.9.2v1.0.0
1 parent 23cae7e commit 85a085e

14 files changed

+1169
-136
lines changed
 

‎package-lock.json

+987-48
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
{
22
"name": "markdown-editor",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
4+
"description": "A react app to preview and edit Markdown",
45
"private": true,
6+
"author": {
7+
"name": "Aromal Anil",
8+
"email": "contact@aromalanil.me",
9+
"url": "https://aromalanil.me"
10+
},
511
"dependencies": {
612
"@testing-library/jest-dom": "^4.2.4",
713
"@testing-library/react": "^9.5.0",
814
"@testing-library/user-event": "^7.2.1",
15+
"node-sass": "^4.13.1",
916
"react": "^16.13.1",
1017
"react-dom": "^16.13.1",
11-
"react-scripts": "3.4.1"
18+
"react-scripts": "3.4.1",
19+
"react-split": "^2.0.7",
20+
"showdown": "^1.9.1"
1221
},
1322
"scripts": {
1423
"start": "react-scripts start",

‎public/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="A react app to preview and edit Markdown"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1313
<!--
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Markdown Editor</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Markdown Editor",
3+
"name": "Markdown Editor",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎src/App.css

-38
This file was deleted.

‎src/App.js

+7-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,14 @@
11
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
2+
import NavBar from './components/NavBar'
3+
import WorkArea from './components/WorkArea'
4+
import './App.scss';
45

56
function App() {
67
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
8+
<>
9+
<NavBar/>
10+
<WorkArea/>
11+
</>
2312
);
2413
}
2514

‎src/App.scss

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
//Custom Fonts
2+
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
4+
5+
//Variable Decelerations
6+
$primary-color:#339989;
7+
$primary-accent:#7DE2D1;
8+
$primary-text:#131515;
9+
$text-accent:#2B2C28;
10+
$white:#FFFAFB;
11+
$source-code-font:'Open Sans', sans-serif;
12+
$open-sans-font:'Source Code Pro', monospace;
13+
14+
// General Styling
15+
*{
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
body{
22+
color:$primary-text;
23+
font-family: $source-code-font;
24+
}
25+
26+
.navbar{
27+
background-color: $primary-color;
28+
color:$white;
29+
padding: 1rem 5vw;
30+
}
31+
32+
.work-area{
33+
width: 100vw;
34+
height: calc(100vh - 60px);
35+
margin: auto;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
40+
}
41+
42+
.wrapper-card{
43+
width: 95%;
44+
height: 90%;
45+
display: flex;
46+
box-shadow: 0 4px 12px rgba(0,0,0,.24);
47+
}
48+
.markdown-edit,.markdown-preview{
49+
padding: 1rem;
50+
display: flex;
51+
flex-direction: column;
52+
flex: 2rem 1fr;
53+
}
54+
55+
.section-title{
56+
text-transform: uppercase;
57+
}
58+
59+
.markdown-edit{
60+
width: 100%;
61+
textarea{
62+
font-family: $source-code-font;
63+
width: 100%;
64+
resize: none;
65+
height: 100%;
66+
}
67+
}
68+
69+
.markdown-preview{
70+
width: 100%;
71+
.html-div{
72+
overflow-y: scroll;
73+
}
74+
}

‎src/components/MarkdownEdit.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
3+
function MarkdownEdit({ content, changeContent }) {
4+
const handleEditorChange = (event) => {
5+
event.preventDefault();
6+
changeContent(event.target.value);
7+
};
8+
9+
return (
10+
<div className="markdown-edit">
11+
<h3 className="section-title">Markdown</h3>
12+
<textarea value={content} onChange={handleEditorChange} id="editor"></textarea>
13+
</div>
14+
);
15+
}
16+
17+
export default MarkdownEdit;

‎src/components/MarkdownPreview.jsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useState, useEffect } from "react";
2+
import showdown from "showdown";
3+
4+
function MarkdownPreview({ content }) {
5+
const [html, setHtml] = useState(getHtml(content));
6+
7+
useEffect(() => {
8+
setHtml(getHtml(content));
9+
}, [content]);
10+
11+
return (
12+
<div className="markdown-preview">
13+
<h3 className="section-title">Preview</h3>
14+
<div className="html-div" dangerouslySetInnerHTML={{ __html: html}}></div>
15+
</div>
16+
);
17+
}
18+
19+
const getHtml = (markdown) => {
20+
let converter = new showdown.Converter();
21+
return converter.makeHtml(markdown);
22+
};
23+
24+
export default MarkdownPreview;

‎src/components/NavBar.jsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
3+
4+
function NavBar() {
5+
return (
6+
<nav className="navbar">
7+
<h3>Markdown Editor</h3>
8+
</nav>
9+
);
10+
}
11+
12+
export default NavBar;

‎src/components/WorkArea.jsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useState } from "react";
2+
import Split from "react-split";
3+
import MarkdownEdit from "./MarkdownEdit";
4+
import MarkdownPreview from "./MarkdownPreview";
5+
6+
7+
function WorkArea() {
8+
const [markDown, setMarkDown] = useState("# Hello World");
9+
10+
return (
11+
<div className="work-area">
12+
<Split
13+
className="wrapper-card"
14+
sizes={[50, 50]}
15+
minSize={100}
16+
expandToMin={false}
17+
gutterSize={10}
18+
gutterAlign="center"
19+
snapOffset={30}
20+
dragInterval={1}
21+
direction="horizontal"
22+
cursor="col-resize"
23+
>
24+
<MarkdownEdit content={markDown} changeContent={setMarkDown} />
25+
<MarkdownPreview content={markDown} />
26+
</Split>
27+
</div>
28+
);
29+
}
30+
31+
export default WorkArea;

‎src/index.css

-13
This file was deleted.

‎src/index.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
43
import App from './App';
54
import * as serviceWorker from './serviceWorker';
65

@@ -11,7 +10,4 @@ ReactDOM.render(
1110
document.getElementById('root')
1211
);
1312

14-
// If you want your app to work offline and load faster, you can change
15-
// unregister() to register() below. Note this comes with some pitfalls.
16-
// Learn more about service workers: https://bit.ly/CRA-PWA
17-
serviceWorker.unregister();
13+
serviceWorker.register();

‎src/logo.svg

-7
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.