Integrate with codemirror

package.json

@@ -8,11 +8,13 @@
   ],
   "main": "src/index.js",
   "dependencies": {
+    "codemirror": "^5.45.0",
     "github-markdown-css": "3.0.1",
     "highlight.js": "9.15.6",
     "nonaction": "0.0.4",
     "normalize.css": "8.0.1",
     "react": "16.8.3",
+    "react-codemirror2": "^5.1.0",
     "react-dom": "16.8.3",
     "react-remarkable": "1.1.3",
     "react-scripts": "^2.1.8",

src/App/Components/Header/index.js

@@ -25,7 +25,7 @@ const Header = ({ className }) => {
           <span>Transform</span>
         </p>
       </div>
-      <span className="author">Powered by @realdennis</span>
+      {/* <span className="author">Powered by @realdennis</span> */}
     </header>
   );
 };
@@ -70,14 +70,15 @@ export default styled(Header)`
     }
   }
 
-  span.author {
+  /* span.author {
     position: fixed;
     bottom: 2px;
     left: 2px;
     opacity: 0.5;
     color: white;
     height: 20px;
-  }
+    z-index:99;
+  } */
   @keyframes dance {
     0% {
       transform: rotate(3deg);

src/App/Components/Markdown/Editor/MirrorEditor.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
+import styled from 'styled-components';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/darcula.css';
+import 'codemirror/mode/gfm/gfm.js';
+// import 'codemirror/addon/edit/closebrackets.js';
+// import 'codemirror/addon/edit/matchbrackets';
+// import 'codemirror/addon/search/search.js';
+// import 'codemirror/addon/search/searchcursor.js'
+// import 'codemirror/addon/dialog/dialog.js';
+const Editor = ({ className, text,setText }) => {
+  return (
+    <CodeMirror
+      className={className}
+      value={text}
+      options={{
+        mode: 'gfm',
+        theme: 'darcula',
+        lineNumbers: true,
+        lineWrapping: true
+      }}
+      onChange={(editor, data, value) => {
+        setText(value)
+      }}
+    />
+  );
+};
+export default styled(Editor)`
+  height: 100%;
+  .CodeMirror {
+    height: 100%;
+    line-height: 1.5;
+  }
+`;

src/App/Components/Markdown/Editor/index.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
-import EditArea from './EditArea.js';
-
+// import EditArea from './EditArea.js';
+import Mirror from './MirrorEditor.js';
 const Editor = ({ className, text, setText, width }) => {
   return (
     <div style={{ width }} className={className}>
-      <EditArea text={text} setText={setText}>
-        {text}
-      </EditArea>
+      <Mirror text={text} setText={setText}/>
     </div>
   );
 };
 export default styled(Editor)`
   flex-shrink: 0;
-  padding-left: 15px;
-  padding-bottom: 20px;
+  height: 100%;
   width: 50%;
-  background-color: #282c35;
   color: rgb(204, 204, 204);
 `;

src/App/Container/Hooks/InitialText.js

@@ -1,5 +1,4 @@
-export const initialText = `
-# Markdown2PDF 
+export const initialText = `# Markdown2PDF 
 https://md2pdf.netlify.com/
 > Awesome Markdown to PDF!
 \`\`\`diff

yarn.lock

@@ -2409,6 +2409,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^5.45.0:
+  version "5.45.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.45.0.tgz#db5ebbb3bf44028c684053f3954d011efcec27ad"
+  integrity sha512-c19j644usCE8gQaXa0jqn2B/HN9MnB2u6qPIrrhrMkB+QAP42y8G4QnTwuwbVSoUS1jEl7JU9HZMGhCDL0nsAw==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -8047,6 +8052,11 @@ react-app-polyfill@^0.2.2:
     raf "3.4.1"
     whatwg-fetch "3.0.0"
 
+react-codemirror2@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-5.1.0.tgz#62de4460178adea40eb52eabf7491669bf3794b8"
+  integrity sha512-Cksbgbviuf2mJfMyrKmcu7ycK6zX/ukuQO8dvRZdFWqATf5joalhjFc6etnBdGCcPA2LbhIwz+OPnQxLN/j1Fw==
+
 react-dev-utils@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-8.0.0.tgz#7c5b227a45a32ea8ff7fbc318f336cf9e2c6e34c"