Previewer working. Implemented Marked library

Antonio-Riccelli · Jan 11, 2022 · 87ccec2 · 87ccec2
1 parent 35c2f7d
commit 87ccec2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,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`.
     -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,30 @@
+import React, { useEffect, useState } from 'react'
 import './App.css';
 import Editor from './Components/Editor/index';
 import Previewer from './Components/Previewer/index';
 
-const initialRendering = {
-  "h1": '<h1>Hello There</h1>'
-}
+const initialRendering =  '# Hello There'
+
 
 function App() {
-// const []
+const [editorText, setEditorText] = useState(initialRendering)
+const [previewerText, setPreviewerText] = useState(editorText);
+
+function handleChange(e){
+  console.log(e.target.value);
+  setEditorText(e.target.value)
+}
 
+useEffect(() => {
+setPreviewerText(editorText);
+},
+[editorText]);
 
 
   return (
     <div className="App">
-    <Editor value={initialRendering} />
-    <Previewer />
+    <Editor value={initialRendering} onChange={handleChange} />
+    <Previewer text={previewerText} />
     </div>
   );
 }

diff --git a/src/Components/Editor/index.js b/src/Components/Editor/index.js
@@ -2,11 +2,9 @@ import React from 'react';
 
 export default function Editor(props) {
 
-    console.log(props)
     return (
         <div>
-        <textarea id="editor" value={props.value.h1} name="editor" placeholder={props.initialRendering}>
-
+        <textarea id="editor" defaultValue={props.value} name="editor" onChange={props.onChange}>
         </textarea>
         </div>
     )

diff --git a/src/Components/Previewer/index.js b/src/Components/Previewer/index.js
@@ -1,14 +1,17 @@
 import React from 'react';
 import { marked } from 'marked';
 
-export default function Previewer(props) {
+marked.setOptions({
+    breaks: true,
+})
 
+export default function Previewer(props) {
 
+let finalString =  marked.parse(props.text)
 
     return (
         <section id="preview-wrapper">
-            <div id="preview">
-
+            <div id="preview" dangerouslySetInnerHTML={{__html: finalString}}>
             </div>
         </section>
     )