Fix markdown converter (Promise/await issues)

.github/workflows/build.yml

@@ -32,7 +32,7 @@ jobs:
         with:
           node-version-file: '.node-version'
           cache: 'npm'
-          cache-dependency-key: 'package-lock.json'
+          cache-dependency-path: 'package-lock.json'
       - run: npm ci
       - run: npm run lint --workspace common
       - run: npm run build --workspace common
@@ -55,7 +55,7 @@ jobs:
         with:
           node-version-file: '.node-version'
           cache: 'npm'
-          cache-dependency-key: 'package-lock.json'
+          cache-dependency-path: 'package-lock.json'
       - run: npm ci
       - run: npm run lint --workspace ${{ matrix.workspace }}
       - run: npm run build --workspace ${{ matrix.workspace }}

README.md

@@ -42,10 +42,11 @@ If you don't have a local copy of that branch, try replacing `intellij` with `or
 ```bash
 npm run build
 ```
+At the moment this needs to be repeated every time the `common` module changes.
 
 ## Start the server and vue3 client for development
 ```bash
-docker compose up -d && npm start
+npm start
 ```
 
 ## Starting a task in the subprojects

client/src/components/MarkDown.vue

@@ -19,8 +19,7 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { defineComponent, ref, watch } from "vue";
-import { sanitizeHtml } from "@fumix/fu-blog-common";
-import DOMPurify from "dompurify";
+import { MarkdownConverterClient } from "../markdown-converter-client.js";
 
 export default defineComponent({
   props: {
@@ -32,12 +31,12 @@ export default defineComponent({
   emits: ["loading"],
 
   setup(props, emits) {
-    const sanitizedHtml = ref<String>("");
+    const sanitizedHtml = ref<string>("");
 
     watch(props, async () => {
       try {
         emits.emit("loading", true);
-        sanitizedHtml.value = sanitizeHtml(props.markdown as string, DOMPurify);
+        sanitizedHtml.value = await MarkdownConverterClient.Instance.convert(props.markdown ?? "");
       } catch (e) {
         // TODO erro handling
       } finally {

client/src/markdown-converter-client.ts

@@ -1,10 +1,16 @@
-import { marked } from "marked";
-import {
-  createWalkTokensExtension,
-  rendererExtension,
-} from "@fumix/fu-blog-common";
-
-marked.use(
-  createWalkTokensExtension((url) => fetch(url).then((it) => it.text())),
-);
-marked.use(rendererExtension);
+import { MarkdownConverter } from "@fumix/fu-blog-common";
+import DOMPurify from "dompurify";
+
+export class MarkdownConverterClient extends MarkdownConverter {
+  private static instance: MarkdownConverterClient;
+
+  protected override dompurify: DOMPurify.DOMPurifyI = DOMPurify;
+
+  private constructor() {
+    super((url: string) => fetch(url).then((it) => it.text()));
+  }
+
+  public static get Instance() {
+    return this.instance ?? (this.instance = new this());
+  }
+}

common/src/markdown-converter-common.ts

@@ -3,46 +3,110 @@ import { Buffer } from "buffer";
 import pako from "pako";
 import { DOMPurifyI } from "dompurify";
 
-const KROKI_SERVICE_URL = "https://kroki.io";
-const KROKI_DIAGRAM_INFOSTRING = "diagram-plantuml";
-
-export function createWalkTokensExtension(fetchTextFromUrl: FetchTextFromUrlFunction): marked.MarkedExtension {
-  return {
-    async: true,
-    walkTokens: async (token: marked.Token) => {
-      if (token.type === "code" && token.lang === KROKI_DIAGRAM_INFOSTRING) {
-        const inputText = token.text;
-        const data = Buffer.from(inputText, "utf8");
-        const compressed = pako.deflate(data, { level: 9 });
-        const res = Buffer.from(compressed).toString("base64").replace(/\+/g, "-").replace(/\//g, "_");
-        token.text = await fetchTextFromUrl(`${KROKI_SERVICE_URL}/plantuml/svg/${res}`);
-      }
-    },
-  };
-}
-
-export const rendererExtension: marked.MarkedExtension = {
-  renderer: {
-    code(code: string, infostring: string) {
-      if (infostring === KROKI_DIAGRAM_INFOSTRING) {
-        return code;
-      }
-      return false;
-    },
-  },
-};
-
-export const sanitizeHtml: (input: string, purify: DOMPurifyI) => string = (input, purify) => {
-  return purify.sanitize(marked.parse(input), {
-    // Allowed tags and attributes inside markdown
-    ADD_TAGS: ["iframe"],
-    ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"],
-  });
-};
-
 /**
  * Takes a URL as argument, fetches text content from there and returns a promise resolving to that content.
  * This is `(url) => fetch(url).then((it) => it.text())` on client and server, but using a different fetch() function
  * (on the server from `node-fetch`, on the client the browser Fetch API is used).
  */
 type FetchTextFromUrlFunction = (a: string) => Promise<string>;
+
+type KrokiDiagramType = {
+  /** The ID of the diagram type, as used in the URL */
+  id: string;
+  /** Human readable label for the diagram type */
+  label: string;
+  /** The ID of the diagram type, as used at the beginning of the Markdown code block */
+  markdownId: string;
+};
+
+export abstract class MarkdownConverter {
+  private static readonly KROKI_SERVICE_URL = "https://kroki.io";
+  private static readonly KROKI_DIAGRAM_INFOSTRING = "diagram-plantuml";
+  private static readonly KROKI_DIAGRAM_PREFIX = "diagram-";
+
+  private static readonly KROKI_SVG_DIAGRAM_TYPES: KrokiDiagramType[] = [
+    ["actdiag", "ActDiag"],
+    ["blockdiag", "BlockDiag"],
+    ["bpmn", "BPMN"],
+    ["bytefield", "Bytefield"],
+    ["c4plantuml", "C4 with PlantUML"],
+    ["ditaa", "Ditaa"],
+    ["erd", "Erd"],
+    ["excalidraw", "Excalidraw"],
+    ["graphviz", "GraphViz"],
+    ["mermaid", "Mermaid"],
+    ["nomnoml", "Nomnoml"],
+    ["nwdiag", "NwDiag"],
+    ["packetdiag", "PacketDiag"],
+    ["pikchr", "Pikchr"],
+    ["plantuml", "PlantUML"],
+    ["rackdiag", "RackDiag"],
+    ["seqdiag", "SeqDiag"],
+    ["structurizr", "Structurizr"],
+    ["svgbob", "Svgbob"],
+    ["vega", "Vega"],
+    ["vegalite", "Vega-Lite"],
+    ["wavedrom", "WaveDrom"],
+  ].map(([id, label]) => {
+    return { id, markdownId: MarkdownConverter.KROKI_DIAGRAM_PREFIX + id, label };
+  });
+
+  private static getKrokiDiagramTypeFromMarkdownId(markdownId: string | undefined): KrokiDiagramType | undefined {
+    return markdownId === undefined //
+      ? undefined
+      : this.KROKI_SVG_DIAGRAM_TYPES.find((it) => it.markdownId === markdownId) ?? undefined;
+  }
+
+  private static rendererExtension: marked.MarkedExtension = {
+    renderer: {
+      code(code: string, infostring: string) {
+        if (MarkdownConverter.getKrokiDiagramTypeFromMarkdownId(infostring)) {
+          return code;
+        }
+        return false;
+      },
+    },
+  };
+  private static walkTokensExtension: (fetchTextFromUrl: FetchTextFromUrlFunction) => marked.MarkedExtension = //
+    (fetchTextFromUrl) => {
+      return {
+        async: true,
+        walkTokens: async (token: marked.Token) => {
+          if (token.type === "code") {
+            const diagramType = MarkdownConverter.getKrokiDiagramTypeFromMarkdownId(token.lang);
+            if (diagramType) {
+              const inputText = token.text;
+              const data = Buffer.from(inputText, "utf8");
+              const compressed = pako.deflate(data, { level: 9 });
+              const res = Buffer.from(compressed).toString("base64").replace(/\+/g, "-").replace(/\//g, "_");
+              token.text = await fetchTextFromUrl(`${MarkdownConverter.KROKI_SERVICE_URL}/${diagramType.id}/svg/${res}`);
+            }
+          }
+        },
+      };
+    };
+
+  protected abstract dompurify: DOMPurifyI;
+
+  /**
+   *
+   * @param fetch the fetch function used by client/server
+   */
+  protected constructor(fetch: FetchTextFromUrlFunction) {
+    // Initialize marked with our custom extensions
+    marked.use(MarkdownConverter.walkTokensExtension(fetch));
+    marked.use(MarkdownConverter.rendererExtension);
+  }
+
+  convert(input: string): Promise<string> {
+    return marked
+      .parse(input, { async: true }) //
+      .then((parsedInput) =>
+        this.dompurify.sanitize(parsedInput, {
+          // Allowed tags and attributes inside markdown
+          ADD_TAGS: ["iframe"],
+          ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"],
+        }),
+      );
+  }
+}

package.json

@@ -11,12 +11,12 @@
     "server"
   ],
   "scripts": {
-    "build": "npm run -w common build && npm run -ws build",
+    "build": "npm run clean && npm run -w common build && npm run -ws build",
     "clean": "ts-node scripts/clean-all.ts",
     "check-packages": "ts-node scripts/check-packages.ts",
     "lint": "prettier --check --config .prettierrc '*/src/**/*.(ts|vue)' && npm run --workspaces lint",
     "lintfix": "prettier --config .prettierrc '*/src/**/*.(ts|vue)' --write && npm run --workspaces lint --fix",
-    "start": "concurrently \"npm run --workspace client dev\" \"npm run --workspace server dev\"",
+    "start": "docker compose -d up && concurrently \"npm run --workspace client dev\" \"npm run --workspace server dev\"",
     "test": "npm run --workspaces test"
   },
   "devDependencies": {

server/src/markdown-converter-server.ts

@@ -1,15 +1,22 @@
-import { marked } from "marked";
-import { createWalkTokensExtension, rendererExtension } from "@fumix/fu-blog-common";
+import { MarkdownConverter } from "@fumix/fu-blog-common";
 import fetch from "node-fetch";
 import DOMPurify from "dompurify";
 import { JSDOM } from "jsdom";
 
-marked.use(createWalkTokensExtension((url) => fetch(url).then((it) => it.text())));
-marked.use(rendererExtension);
+export class MarkdownConverterServer extends MarkdownConverter {
+  private static instance: MarkdownConverterServer;
 
-/**
- * On the server side, we need to pass a new window object to DOMPurify.
- * It doesn't work to just call `DOMPurify.sanitize()` directly like on the client side.
- */
-export const createDomPurify: () => DOMPurify.DOMPurifyI = //
-  () => DOMPurify(new JSDOM("").window as unknown as Window);
+  /**
+   * On the server side, we need to pass a new window object to DOMPurify.
+   * It doesn't work to just call `DOMPurify.sanitize()` directly like on the client side.
+   */
+  protected override dompurify: DOMPurify.DOMPurifyI = DOMPurify(new JSDOM("").window as unknown as Window);
+
+  private constructor() {
+    super((url: string) => fetch(url).then((it) => it.text()));
+  }
+
+  public static get Instance() {
+    return this.instance ?? (this.instance = new this());
+  }
+}

server/src/routes/posts.ts

@@ -1,9 +1,8 @@
-import { sanitizeHtml } from "@fumix/fu-blog-common";
 import express, { Request, Response, Router } from "express";
 import { AppDataSource } from "../data-source.js";
 import { PostEntity } from "../entity/Post.entity.js";
 import { UserEntity } from "../entity/User.entity.js";
-import { createDomPurify } from "../markdown-converter-server.js";
+import { MarkdownConverterServer } from "../markdown-converter-server.js";
 
 const router: Router = express.Router();
 
@@ -92,7 +91,7 @@ router.post("/new", async (req: Request, res: Response) => {
       createdBy: await getUser(),
       createdAt: new Date(),
       updatedAt: new Date(),
-      sanitizedHtml: sanitizeHtml(req.body.markdown, createDomPurify()),
+      sanitizedHtml: await MarkdownConverterServer.Instance.convert(req.body.markdown),
       updatedBy: undefined,
       draft: req.body.draft || true,
       attachments: [],
@@ -118,7 +117,7 @@ router.post("/:id", async (req: Request, res: Response) => {
     post.description = req.body.description;
     post.markdown = req.body.markdown;
     post.updatedAt = new Date();
-    post.sanitizedHtml = sanitizeHtml(req.body.markdown, createDomPurify());
+    post.sanitizedHtml = await MarkdownConverterServer.Instance.convert(req.body.markdown);
     post.updatedBy = await getUser();
     // TODO
     post.draft = req.body.draft || true;

server/src/service/testdata-generator.ts

@@ -1,11 +1,10 @@
 import { faker } from "@faker-js/faker/locale/de";
-import { sanitizeHtml } from "@fumix/fu-blog-common";
 import fs from "fs";
 import { AppDataSource } from "../data-source.js";
 import { AttachmentEntity } from "../entity/Attachment.entity.js";
 import { PostEntity } from "../entity/Post.entity.js";
 import { UserEntity } from "../entity/User.entity.js";
-import { createDomPurify } from "../markdown-converter-server.js";
+import { MarkdownConverterServer } from "../markdown-converter-server.js";
 
 const usersCount = 10;
 const postsPerUser = 25;
@@ -64,7 +63,7 @@ export async function createRandomUser(): Promise<UserEntity> {
 export async function createRandomPost(createdBy: UserEntity): Promise<PostEntity> {
   try {
     const dirty = faker.lorem.sentences(29);
-    const sanitized = sanitizeHtml(dirty, createDomPurify());
+    const sanitized = await MarkdownConverterServer.Instance.convert(dirty);
     const post: PostEntity = {
       title: faker.lorem.sentence(4),
       description: faker.lorem.sentences(8),