Djot integration (#87)

package.json

@@ -6,11 +6,10 @@
   "author": "teomrd <mironidis.gr@gmail.com>",
   "license": "GPL-3.0-only",
   "dependencies": {
-    "@types/showdown": "^2.0.6",
+    "@djot/djot": "^0.3.1",
     "github-markdown-css": "^5.7.0",
     "multiformats": "^13.3.1",
     "nanoid": "^5.0.8",
-    "showdown": "^2.1.0",
     "textarea-caret": "^3.1.0"
   }
 }

src/js/components/organisms/markdown/markDownViewer.js

@@ -47,6 +47,7 @@ const markDownViewer = (() => {
 
       this.autoLink();
 
+      // add a copy button to the code blocks
       const { elements } = select("pre");
       Array.prototype.slice.call(elements).forEach((el) => {
         const copyBtn = button("📋 Copy", async (e) => {

src/js/components/organisms/markdown/mdToHtml.ts

@@ -1,15 +1,9 @@
-import type _Showdown from "npm:@types/showdown";
-import showdown from "showdown";
+import { parse, renderHTML } from "@djot/djot";
 
-const converter = new showdown.Converter({
-  tasklists: true,
-  underline: true,
-  emoji: true,
-  simplifiedAutoLink: true,
-  tables: true,
-  openLinksInNewWindow: true,
-});
-
-converter.setFlavor("github");
-
-export const convertMarkDownToHtml = (md: string) => converter.makeHtml(md);
+export const convertMarkDownToHtml = (md: string) => {
+  return renderHTML(
+    parse(md, {
+      warn: (warning) => console.log(warning.render()),
+    }),
+  );
+};

src/js/listeners/urlChange.ts

@@ -1,4 +1,3 @@
-import "github-markdown-css";
 import "../../css/print.css";
 import "../../css/styles.css";
 import notify from "../components/molecules/notify.ts";

src/js/ui/markdown/preview/autoMagicallyCheckBoxes.js

@@ -6,9 +6,6 @@ import select from "../../../utils/dom.js";
 // but lives temporarily on the browser's state
 // Useful feature when you are going to the Super market 😄
 
-// Technically I cloud re-enable the checkboxes that ShowdownJS generates,
-// which are by default disabled, but couldn't figure that out. ¯\_(ツ)_/¯
-
 export const autoMagicallyCheckBoxes = () => {
   select(".task-list-item").listenAll("click", (el) => {
     el.firstChild.checked = !el.firstChild.checked;