From e5b4e7e19f89be8dbd6a32f0caccf38eee198596 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Thu, 17 Feb 2022 19:49:28 +0100
Subject: [PATCH] Added RichText/HTML to Markdown convertor

---
 package-lock.json            | 29 +++++++++++++++++++++-
 package.json                 |  3 ++-
 src/components/AppLayout.tsx |  5 ++--
 src/pages/editor.tsx         | 48 +++++++++++++++++++++++++-----------
 tailwind.config.js           |  1 +
 5 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index be4e0b5..303f1f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "next": "^12.0.7",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-swipeable": "^6.2.0"
+        "react-swipeable": "^6.2.0",
+        "turndown": "^7.1.1"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.0",
@@ -1208,6 +1209,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/domino": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
+      "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.31",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz",
@@ -3975,6 +3981,14 @@
         "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
       }
     },
+    "node_modules/turndown": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.1.tgz",
+      "integrity": "sha512-BEkXaWH7Wh7e9bd2QumhfAXk5g34+6QUmmWx+0q6ThaVOLuLUqsnkq35HQ5SBHSaxjSfSM7US5o4lhJNH7B9MA==",
+      "dependencies": {
+        "domino": "^2.1.6"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4947,6 +4961,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "domino": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
+      "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
+    },
     "electron-to-chromium": {
       "version": "1.4.31",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz",
@@ -6954,6 +6973,14 @@
         "tslib": "^1.8.1"
       }
     },
+    "turndown": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.1.tgz",
+      "integrity": "sha512-BEkXaWH7Wh7e9bd2QumhfAXk5g34+6QUmmWx+0q6ThaVOLuLUqsnkq35HQ5SBHSaxjSfSM7US5o4lhJNH7B9MA==",
+      "requires": {
+        "domino": "^2.1.6"
+      }
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 9316d71..dfda65e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "next": "^12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-swipeable": "^6.2.0"
+    "react-swipeable": "^6.2.0",
+    "turndown": "^7.1.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.0",
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index a810ac5..3d15ca0 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -126,9 +126,10 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           ${
             turnSubIntoContent
               ? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
+              : !subPanelOpen
+              ? "mobile:translate-x-full"
               : ""
-          }
-          ${subPanelOpen ? "" : "mobile:translate-x-full"}`}
+          }`}
         >
           {props.subPanel}
         </div>
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
index d60d43d..919e214 100644
--- a/src/pages/editor.tsx
+++ b/src/pages/editor.tsx
@@ -37,26 +37,40 @@ export default function Editor(props: EditorProps): JSX.Element {
         }}
       />
 
-      <div className="grid grid-cols-2 gap-4 h-96">
+      <div className="grid grid-cols-2 gap-8">
         <div>
           <h2>Editor</h2>
           <textarea
             id="editorTextArea"
             onInput={handleInput}
-            onPaste={(event) => {
-              event.preventDefault();
-              let paste = event.clipboardData.getData("text/html");
-              paste = paste.replaceAll("<html>", "");
-              paste = paste.replaceAll("<body>", "");
-              paste = paste.replaceAll("</body>", "");
-              paste = paste.replaceAll("</html>", "");
-              paste = paste.replaceAll("<!--StartFragment-->", "");
-              paste = paste.replaceAll("<!--EndFragment-->", "");
-              event.target.value = paste;
-            }}
-            className="bg-mid rounded-xl p-8 w-full "
+            className="bg-mid rounded-xl p-8 w-full font-monospace"
             value={markdown}
           />
+
+          <h2 className="mt-4">Convert text to markdown</h2>
+          <textarea
+            readOnly
+            id="htmlMdTextArea"
+            onPaste={(event) => {
+              const TurndownService = require("turndown").default;
+              const turndownService = new TurndownService({
+                headingStyle: "atx",
+                codeBlockStyle: "fenced",
+                bulletListMarker: "-",
+                emDelimiter: "*",
+                strongDelimiter: "**"
+              });
+
+              let paste = event.clipboardData.getData("text/html");
+              paste = paste.replace(/<\!--.*?-->/g, "");
+              paste = turndownService.turndown(paste);
+              paste = paste.replace(/<\!--.*?-->/g, "");
+              event.target.value = paste;
+              event.target.select();
+              event.preventDefault();
+            }}
+            className="bg-mid rounded-xl p-8 w-full font-monospace"
+          />
         </div>
         <div>
           <h2>Preview</h2>
@@ -67,7 +81,13 @@ export default function Editor(props: EditorProps): JSX.Element {
       </div>
     </ContentPanel>
   );
-  return <AppLayout title="404" langui={langui} contentPanel={contentPanel} />;
+  return (
+    <AppLayout
+      title="Markdawn Editor"
+      langui={langui}
+      contentPanel={contentPanel}
+    />
+  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
diff --git a/tailwind.config.js b/tailwind.config.js
index 028ce33..41be017 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,7 @@ module.exports = {
     fontFamily: {
       body: ["Zen Maru Gothic"],
       headers: ["Vollkorn"],
+      monospace: ["monospace"],
     },
     screens: {
       desktop: { min: "70rem" },