pantsdown 1.4.5 → 1.5.0

package/README.md

@@ -5,12 +5,11 @@
 <img src="https://raw.githubusercontent.com/wallpants/pantsdown/main/docs/github.svg" height="60px" align="right" />
 <img src="https://raw.githubusercontent.com/wallpants/pantsdown/main/docs/markdown.svg" height="60px" align="right" />
 
-Pantsdown is a **Markdown** to **"GitHub HTML"** converter based on [Marked](https://github.com/markedjs/marked).
-Basically this is a non customizable version of Marked, optimized to render markdown similar to how GitHub does it plus
+Pantsdown is a **Markdown** to **HTML** converter. It attempts to render markdown similar to how GitHub does it plus
 some features developed specifically for [github-preview.nvim](https://github.com/wallpants/github-preview.nvim).
 
 If you need a feature that's supported by GitHub and is not already listed in the [Roadmap](#roadmap),
-feel free to open an issue. If you need anything else, use Marked or another library.
+feel free to open an issue.
 
 ### [Demo](https://wallpants.github.io/pantsdown/)
 
@@ -133,5 +132,5 @@ console.log(html);
 ## Roadmap
 
 -   [ ] Add button to copy code in fences
--   [ ] [Mermaid](https://mermaid.js.org/) support
+-   [ ] [Mermaid](https://mermaid.js.org/) usage docs
 -   [ ] [Footnote](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#footnotes) support [Base](https://github.com/bent10/marked-extensions/tree/main/packages/footnote)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pantsdown",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "author": "wallpants",
   "description": "Markdown to 'GitHub HTML' parser",
   "license": "MIT",

package/src/css/styles.css

@@ -64,6 +64,13 @@
     word-wrap: break-word;
 }
 
+.pantsdown .mermaid-container {
+    margin-bottom: 16px;
+}
+
+/* .pantsdown .mermaid { */
+/* } */
+
 .pantsdown .octicon {
     display: inline-block;
     fill: currentColor;

package/src/renderer.ts

@@ -1,7 +1,7 @@
 import GithubSlugger from "github-slugger";
 import hljs from "highlight.js";
 import { inline } from "./rules/inline.ts";
-import { type PantsdownConfig, type SourceMap } from "./types.ts";
+import { type HTMLAttrs, type PantsdownConfig, type SourceMap } from "./types.ts";
 import {
     cleanUrl,
     escape,
@@ -9,7 +9,6 @@ import {
     fixLocalImageHref,
     getHtmlElementText,
     injectHtmlAttributes,
-    renderHtmlClasses,
 } from "./utils.ts";
 
 const defaultConfig: NonNullable<PantsdownConfig["renderer"]> = {
@@ -31,9 +30,16 @@ export class Renderer {
 
     code(code: string, infostring: string | undefined, sourceMap: SourceMap): string {
         const lang = (infostring ?? "").match(/^\S*/)?.[0];
-
         code = code.replace(/\n$/, "") + "\n";
 
+        if (lang === "mermaid") {
+            return injectHtmlAttributes(
+                `<section><div class="mermaid">${code}</div></section>`,
+                [["class", "mermaid-container"]],
+                sourceMap,
+            );
+        }
+
         const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
         const highlightedCode = hljs.highlight(code, { language }).value;
 
@@ -54,7 +60,7 @@ export class Renderer {
     html(html: string, _block: boolean, sourceMap?: SourceMap | undefined): string {
         const result = fixHtmlLocalImageHref(html, this.rendererConfig.relativeImageUrlPrefix);
 
-        const attrs: [name: string, value: string | number][] = [];
+        const attrs: HTMLAttrs = [];
 
         if (this.rendererConfig.detailsTagDefaultOpen) {
             const tag = inline.tag.exec(html);
@@ -69,12 +75,12 @@ export class Renderer {
     heading(text: string, level: number, sourceMap: SourceMap): string {
         const elementText = getHtmlElementText(text);
         const slug = this.slugger.slug(elementText);
-        let result = `<h${level} style="position: relative;">`;
+        let result = `<h${level}>`;
         // span with negative top to add some offset when scrolling to #slug
         result += `<span style="position: absolute; top: -50px;" id="${slug}"></span>`;
         result += `${text}<a class="anchor octicon-link" href="#${slug}"></a>`;
         result += `</h${level}>\n`;
-        return injectHtmlAttributes(result, [], sourceMap);
+        return injectHtmlAttributes(result, [["style", "position: relative;"]], sourceMap);
     }
 
     hr(sourceMap: SourceMap): string {
@@ -83,28 +89,35 @@ export class Renderer {
 
     list(body: string, ordered: boolean, start: number | "", classes: string[] = []): string {
         const type = ordered ? "ol" : "ul";
-        const startatt = ordered && start !== 1 ? ' start="' + start + '"' : "";
-        return (
-            "<" + type + startatt + `${renderHtmlClasses(classes)}>\n` + body + "</" + type + ">\n"
-        );
+        const attrs: HTMLAttrs = [["class", classes.join(" ")]];
+        if (ordered && start && start !== 1) {
+            attrs.push(["start", String(start)]);
+        }
+        const result = `<${type}>\n${body}</${type}>\n`;
+        return injectHtmlAttributes(result, attrs);
     }
 
     listitem(text: string, task: boolean, _checked: boolean, sourceMap: SourceMap): string {
         const attrs: [string, string][] = [];
         if (task) attrs.push(["class", "task-list-item"]);
-        return injectHtmlAttributes(`<li>${text}</li>\n`, attrs, sourceMap);
+        const result = `<li>${text}</li>\n`;
+        return injectHtmlAttributes(result, attrs, sourceMap);
     }
 
     checkbox(checked: boolean, classes: string[] = []): string {
-        return (
-            "<input " +
-            (checked ? 'checked="" ' : "") +
-            `disabled="" type="checkbox"${renderHtmlClasses(classes)}>`
-        );
+        const result = "<input>";
+        const attrs: HTMLAttrs = [
+            ["disabled", ""],
+            ["type", "checkbox"],
+            ["class", classes.join(" ")],
+        ];
+        if (checked) attrs.push(["checked", ""]);
+        return injectHtmlAttributes(result, attrs);
     }
 
     paragraph(text: string, sourceMap: SourceMap): string {
-        return injectHtmlAttributes(`<p>${text}</p>\n`, [], sourceMap);
+        const result = `<p>${text}</p>\n`;
+        return injectHtmlAttributes(result, [], sourceMap);
     }
 
     table(header: string, body: string): string {
@@ -113,11 +126,8 @@ export class Renderer {
     }
 
     tablerow(content: string, sourceMapStart: number | undefined): string {
-        return injectHtmlAttributes(
-            `<tr>\n${content}</tr>\n`,
-            [],
-            sourceMapStart ? [sourceMapStart, sourceMapStart] : undefined,
-        );
+        const sourceMap: SourceMap = sourceMapStart ? [sourceMapStart, sourceMapStart] : undefined;
+        return injectHtmlAttributes(`<tr>\n${content}</tr>\n`, [], sourceMap);
     }
 
     tablecell(
@@ -128,8 +138,10 @@ export class Renderer {
         },
     ): string {
         const type = flags.header ? "th" : "td";
-        const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
-        return tag + content + `</${type}>\n`;
+        const attrs: HTMLAttrs = [];
+        if (flags.align) attrs.push(["align", flags.align]);
+        const result = `<${type}>` + content + `</${type}>\n`;
+        return injectHtmlAttributes(result, attrs);
     }
 
     /**
@@ -160,13 +172,9 @@ export class Renderer {
         if (cleanHref === null) {
             return text;
         }
-        href = cleanHref;
-        let out = '<a href="' + href + '"';
-        if (title) {
-            out += ' title="' + title + '"';
-        }
-        out += ">" + text + "</a>";
-        return out;
+        const attrs: HTMLAttrs = [["href", cleanHref]];
+        if (title) attrs.push(["title", title]);
+        return injectHtmlAttributes(`<a>${text}</a>`, attrs);
     }
 
     image(href: string, title: string | null, text: string): string {
@@ -174,15 +182,12 @@ export class Renderer {
         if (cleanHref === null) {
             return text;
         }
-        href = fixLocalImageHref(cleanHref, this.rendererConfig.relativeImageUrlPrefix);
-
-        let out = `<img src="${href}" alt="${text}"`;
-
-        if (title) {
-            out += ` title="${title}"`;
-        }
-        out += ">";
-        return out;
+        const attrs: HTMLAttrs = [
+            ["src", fixLocalImageHref(cleanHref, this.rendererConfig.relativeImageUrlPrefix)],
+            ["alt", text],
+        ];
+        if (title) attrs.push(["title", title]);
+        return injectHtmlAttributes("<img>", attrs);
     }
 
     text(text: string): string {

package/src/types.ts

@@ -1,3 +1,5 @@
+export type HTMLAttrs = [name: string, value: string][];
+
 type BaseToken = {
     type: string;
     raw: string;

package/src/utils.ts

@@ -1,5 +1,5 @@
 import { type Lexer } from "./lexer.ts";
-import { type SourceMap, type Tokens } from "./types.ts";
+import { type HTMLAttrs, type SourceMap, type Tokens } from "./types.ts";
 
 /**
  * Helpers
@@ -33,14 +33,6 @@ export function escape(html: string, encode?: boolean) {
     return html;
 }
 
-export function renderHtmlClasses(classes: string[]) {
-    if (!classes.length) return "";
-    let result = ' class="';
-    result += classes.join(" ");
-    result += '"';
-    return result;
-}
-
 export function getHtmlElementText(html: string) {
     try {
         const parser = new DOMParser();
@@ -56,20 +48,10 @@ export function getHtmlElementText(html: string) {
     }
 }
 
-/**
- * Only works when html element has no other attributes already defined.
- * For the regex to work the element must be clean of attributes:
- *
- * <div>{whatever}</div>
- */
-export function injectHtmlAttributes(
-    html: string,
-    attrs: [name: string, value: string | number][],
-    sourceMap: SourceMap,
-) {
+export function injectHtmlAttributes(html: string, attrs: HTMLAttrs, sourceMap?: SourceMap) {
     if (sourceMap) {
-        attrs.push(["line-start", sourceMap[0]]);
-        attrs.push(["line-end", sourceMap[1]]);
+        attrs.push(["line-start", String(sourceMap[0])]);
+        attrs.push(["line-end", String(sourceMap[1])]);
     }
 
     if (!attrs.length) return html;