Merge pull request reactplay#433 from EOEboh/main

Added Markdown Editor

package.json

@@ -20,7 +20,9 @@
  "git-repo-api": "^0.0.17",
  "graphql": "^16.5.0",
  "html-to-image": "^1.9.0",
- "json-graphql-parser": "^0.1.7",
+ "html2canvas": "^1.4.1",
+ "json-graphql-parser": "^0.0.20",
+ "jspdf": "^2.5.1",
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "react": "^18.0.0",
@@ -39,6 +41,7 @@
  "react-twitter-widgets": "^1.11.0",
  "redux": "^4.2.0",
  "redux-persist": "^6.0.0",
+ "remarkable": "^2.0.1",
  "reselect": "^4.1.5",
  "web-vitals": "^2.1.0",
  "workbox-cacheable-response": "^6.5.4",

src/plays/markdown-editor/Downloader.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+// html2canvas for converting the md to png image
+import html2canvas from 'html2canvas';
+
+// jsPDF for converting the image to pdf
+import { jsPDF } from 'jspdf';
+
+import './styles.css';
+
+const Downloader = ({ mdPreviewBox, fileName, text}) => {
+
+ // Function to download the markdown as PDF
+ const downloadMdAsPDF = () => {
+ const input = document.getElementById(mdPreviewBox);
+ html2canvas(input).then((canvas) => {
+ const imgData = canvas.toDataURL('image/png');
+ const pdf = new jsPDF({
+ orientation: "landscape",
+ unit: "in",
+ format: [4, 2]
+ });
+ pdf.addImage(imgData, 'JPEG', 0, 0);
+ pdf.save(`${fileName}.pdf`);
+ })
+ }
+ return (
+ <div>
+ {/* a 'disabled' prop to prevent download when textbox is empty */}
+ <button onClick={downloadMdAsPDF} className='md-editor btn' disabled={!text}>
+ <h3 className='md-editor heading-4'><b> Download Text</b></h3>
+ </button>
+ </div>
+ )
+}
+
+export default Downloader;

src/plays/markdown-editor/MarkdownEditor.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import PlayHeader from 'common/playlists/PlayHeader';
+import { Remarkable } from 'remarkable';
+import Output from './Output';
+import './styles.css';
+import Downloader from './Downloader';
+
+// defining the default rules
+const md = new Remarkable('full', {
+ html: true,
+ typographer: true
+});
+
+// enabling some html tag rules
+md.core.ruler.enable([
+ 'abbr'
+]);
+md.block.ruler.enable([
+ 'footnote',
+ 'deflist'
+]);
+md.inline.ruler.enable([
+ 'footnote_inline',
+ 'ins',
+ 'mark',
+ 'sub',
+ 'sup'
+]);
+
+// WARNING: Do not change the entry component name
+function MarkdownEditor(props) {
+
+ // Your Code Start below.
+
+ // state for textarea input value
+ const [ text, setText ] = useState("");
+
+ return (
+ <>
+ <div className="md-editor play-details">
+ <PlayHeader play={props} />
+
+ <div>
+ <main className='md-editor main'>
+ <h1 className='md-editor heading-1'>Markdown Editor </h1>
+ <h4 className='md-editor heading-4'>You can type in html tags as well</h4>
+ <article>
+
+ <div className='md-editor flex-container'> 
+ <textarea cols='40' rows='10' id='markdown' name='markdown' placeholder='Type Markdown...' required
+ value={text}
+ onChange={(e) => setText(e.target.value)}
+ >
+
+ </textarea>
+
+ <Output 
+ md={md}
+ text={text}
+ mdPreviewBox='mdPreviewBox'
+ />
+ </div>
+ <Downloader
+ fileName='your-markdown'
+ mdPreviewBox='mdPreviewBox'
+ text={text}
+ />
+
+ </article>
+ </main>
+ </div>
+
+ </div>
+ </>
+ );
+}
+
+export default MarkdownEditor;
+
+
+
+

src/plays/markdown-editor/Output.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+
+const Output = ({md, text, mdPreviewBox}) => {
+ return (
+ <div className='md-editor output-div' id={mdPreviewBox} dangerouslySetInnerHTML={{__html: md.render(text)}} >
+ </div>
+ )
+}
+
+export default Output;

src/plays/markdown-editor/Readme.md

@@ -0,0 +1,29 @@
+# Markdown Editor
+
+An app where you can write or test markdown-formatted texts.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: EOEboh
+- Gihub Link: https://github.com/EOEboh
+
+
+## Implementation Details
+
+This simple project covers how 
+- to use the `useState` hook for mutable data
+- to use the `onChange` event handler to display input value 
+- passing the state as `props` to another element
+
+## Consideration
+
+I may update this project with a **download** feature, to download any text written, and some other features.
+
+## Dependencies
+
+[Remarkable Library](https://www.npmjs.com/package/remarkable) was used in this project.

src/plays/markdown-editor/styles.css

@@ -0,0 +1,74 @@
+/* enter stlyes here */
+
+/* MarkdownEditor.js */
+ .md-editor.play-details{
+ background-color: #323031;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ box-sizing: border-box;
+ }
+
+ .md-editor.main{
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ padding: 2rem; 
+ }
+
+ .md-editor.heading-1{
+ margin: 2rem 0rem;
+ font-size: larger;
+ font-weight: 900;
+ color: #ffffff;
+ }
+ .md-editor.heading-4{
+ color: #ffffff;
+ margin-bottom: 0.5rem;
+ }
+ .md-editor.heading-3{
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+ }
+
+ .md-editor textarea{
+ padding: 1rem;
+ outline: none;
+ border-radius: 1rem;
+ background-color: #95A3B3;
+ }
+ textarea::placeholder{
+ color: #000;
+ }
+ .md-editor.output-div{ 
+ background-color: #ffffff;
+ height: 18rem;
+ width: 20rem;
+ padding: 1rem;
+ margin-left: 2rem;
+ border-radius: 1rem;
+ }
+.md-editor.flex-container{
+ display: flex;
+ justify-content: center;
+ /* align-items: center; */
+}
+@media (max-width: 800px){
+ .md-editor.flex-container{
+ display: flex;
+ flex-direction: column; 
+ } 
+ .md-editor.md-editor.output-div{
+ margin: auto;
+ margin-top: 2rem;
+ }
+}
+
+ /* Downloader.js */
+ .md-editor.btn{
+ background-color: #084C61;
+ padding: 1rem;
+ margin: 2rem 0;
+ border-radius: 1rem;
+ }
+ .md-editor.heading-4{
+ color: #95A3B3;
+ }