feat: convert Markdown files to HTML (#1417)

Author: aalemayhu

package-lock.json

@@ -59,7 +59,8 @@
     "multer": "^1.4.4-lts.1",
     "pg": "^8.11.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "showdown": "^2.1.0"
   },
   "devDependencies": {
     "@types/base-64": "^1.0.0",
@@ -79,6 +80,7 @@
     "@types/node-fetch": "^2.6.4",
     "@types/react": "^18.2.43",
     "@types/react-dom": "18.2.18",
+    "@types/showdown": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.15.0",
     "eslint": "^8.53.0",

package.json

@@ -0,0 +1,9 @@
+import showdown from 'showdown';
+
+export const markdownToHTML = (html: string) => {
+  const converter = new showdown.Converter({
+    noHeaderId: true,
+  });
+
+  return converter.makeHtml(html);
+};

src/lib/markdown.ts

@@ -22,6 +22,7 @@ import getYouTubeID from './helpers/getYouTubeID';
 import { isFileNameEqual } from '../storage/types';
 import { isImageFileEmbedable } from '../storage/checks';
 import getDeckFilename from '../anki/getDeckFilename';
+import { getHTMLContents } from './getHTMLContents';
 
 export class DeckParser {
   globalTags: cheerio.Cheerio | null;
@@ -45,8 +46,8 @@ export class DeckParser {
     this.globalTags = null;
 
     const firstFile = this.files.find((file) => isFileNameEqual(file, name));
+    const contents = getHTMLContents(firstFile);
 
-    const contents = firstFile?.contents;
     if (contents) {
       this.payload = this.handleHTML(
         name,

src/lib/parser/DeckParser.ts

@@ -0,0 +1,11 @@
+import { describe } from 'node:test';
+import { getHTMLContents } from './getHTMLContents';
+
+describe("getHTMLContents", () => {
+  test("returns html contents", () => {
+    expect(getHTMLContents({contents: "<h1>html</h1>", name: "index.html"})).toBe("<h1>html</h1>")
+  })
+  test("returns html for markdown", () => {
+    expect(getHTMLContents({contents: "# md", name: "README.md"})).toBe("<h1>md</h1>")
+  })
+})

src/lib/parser/getHTMLContents.test.ts

@@ -0,0 +1,18 @@
+import { isHTMLFile, isMarkdownFile } from '../storage/checks';
+import { markdownToHTML } from '../markdown';
+import { File } from '../anki/zip';
+
+export function getHTMLContents(file: File | undefined) {
+  const contents = file?.contents;
+  if (!file || !contents) {
+    return undefined;
+  }
+
+  if (isHTMLFile(file.name)) {
+    return file.contents;
+  }
+
+  if (isMarkdownFile(file.name)) {
+    return markdownToHTML(contents.toString());
+  }
+}