Added beta article editor

src/components/App.js

@@ -4,6 +4,7 @@ import "./css/App.css";
 import Navigation from './Navigation';
 import Github from './Github';
 import Articles from './Articles';
+import ArticleEditor from './ArticleEditor';
 import About from './About';
 import Intro from './Intro';
 
@@ -18,6 +19,7 @@ const App = (props) => {
             <Route path="/github" render={(props) => <Github {...props} />} />
             <Route path="/about" component={About} />
             <Route path="/articles" component={Articles} />
+            <Route path="/articleEditor" component={ArticleEditor} />
           </Switch>
         </div>
       </div>

src/components/Article.js

@@ -44,7 +44,6 @@ const Article = ({article}) => {
         /**
          * Given some text, processes and returns jsx with any link represented as an anchor
          */
-
         let output = [""]; // Stores all text in a list
         let loc = 0; // Stores the current location in output that we're working with
 
@@ -80,7 +79,6 @@ const Article = ({article}) => {
         let tmp;
         let output = [""]; // Stores all text in a list
         let loc = 0; // Stores the current location in output that we're working with
-
         for (let i = 0; i < text.length; i++) { // Iterate through the entire text string
             if (!React.isValidElement(text[i])) {
                 tmp = [""];
@@ -116,6 +114,7 @@ const Article = ({article}) => {
         let tick=false; // used to check if we're currently in formatted text.
         let delimiters = ['', '`', '*', '~']; // Denotes characters used to format
 
+        
         for (let i = 0; i < text.length; i++) { // Iterate through input
             if (delimiters.indexOf(text[i]) !== -1) { // Detect Code Delimiter
                 

src/components/ArticleEditor.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import Article from './Article';
+import "./css/ArticleEditor.css";
+
+const ArticleEditor = (props) => {
+    const [content, setContent] = useState("Hello World");
+
+    let article = {
+        "id":"0",
+        "title": "Article Editor",
+        "desc":"This is a place to edit articles",
+        "contents": content
+    };
+
+    return (
+    <div className="ArticleEditor">
+        <Article article={article}/>
+        <input type="text" onInput={e=>{setContent(e.target.value)}}/>
+    </div>
+    );
+};
+
+export default ArticleEditor;

src/components/css/ArticleEditor.css

@@ -0,0 +1,22 @@
+.ArticleEditor input {
+    width:100%;
+    height: 35vh;
+    border-style: solid;
+    border-color: lightgray;
+    border-radius: 2px;
+    border-width: 2px;
+    padding: 0.4em 0.4em 0.4em 0;
+    text-align: left;
+}
+
+.article .open {
+    max-height:100vh;
+}
+
+.article .Close {
+    max-height:100vh;
+}
+
+.article {
+    max-height:100vh;
+}