pantsdown 1.4.4 → 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/)
 
@@ -132,8 +131,6 @@ console.log(html);
 
 ## Roadmap
 
--   [x] Add id & anchors to headings
--   [ ] Add sourcemap to list items
 -   [ ] 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.4",
+  "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/parser.ts

@@ -126,13 +126,13 @@ export class Parser {
                             itemBody,
                             task,
                             Boolean(checked),
-                            token.sourceMap ? token.sourceMap[0] + j : undefined,
+                            item.sourceMap,
                         );
                     }
 
                     const listClasses: string[] = [];
                     if (containsTaskList) listClasses.push("contains-task-list");
-                    out += this.renderer.list(body, ordered, start, token.sourceMap, listClasses);
+                    out += this.renderer.list(body, ordered, start, listClasses);
                     continue;
                 }
                 case "html": {

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,8 +9,6 @@ import {
     fixLocalImageHref,
     getHtmlElementText,
     injectHtmlAttributes,
-    renderHtmlClasses,
-    renderSourceMap,
 } from "./utils.ts";
 
 const defaultConfig: NonNullable<PantsdownConfig["renderer"]> = {
@@ -32,19 +30,27 @@ 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;
 
-        return (
-            `<pre${renderSourceMap(sourceMap)}><code class="hljs language-` +
+        const result =
+            `<pre><code class="hljs language-` +
             escape(language) +
             '">' +
             highlightedCode +
-            "</code></pre>\n"
-        );
+            "</code></pre>\n";
+
+        return injectHtmlAttributes(result, [], sourceMap);
     }
 
     blockquote(quote: string): string {
@@ -54,81 +60,64 @@ export class Renderer {
     html(html: string, _block: boolean, sourceMap?: SourceMap | undefined): string {
         const result = fixHtmlLocalImageHref(html, this.rendererConfig.relativeImageUrlPrefix);
 
-        const htmlAttributes: [name: string, value: string | number][] = [];
-
-        if (sourceMap) {
-            htmlAttributes.push(["line-start", sourceMap[0]], ["line-end", sourceMap[1]]);
-        }
+        const attrs: HTMLAttrs = [];
 
         if (this.rendererConfig.detailsTagDefaultOpen) {
             const tag = inline.tag.exec(html);
             if (tag?.[0] === "<details>") {
-                htmlAttributes.push(["open", ""]);
+                attrs.push(["open", ""]);
             }
         }
 
-        return injectHtmlAttributes(result, htmlAttributes);
+        return injectHtmlAttributes(result, attrs, sourceMap);
     }
 
     heading(text: string, level: number, sourceMap: SourceMap): string {
         const elementText = getHtmlElementText(text);
         const slug = this.slugger.slug(elementText);
-        let result = `<h${level}${renderSourceMap(sourceMap)} 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 result;
+        return injectHtmlAttributes(result, [["style", "position: relative;"]], sourceMap);
     }
 
     hr(sourceMap: SourceMap): string {
-        return `<hr${renderSourceMap(sourceMap)}>\n`;
+        return injectHtmlAttributes(`<hr>\n`, [], sourceMap);
     }
 
-    list(
-        body: string,
-        ordered: boolean,
-        start: number | "",
-        sourceMap: SourceMap,
-        classes: string[] = [],
-    ): string {
+    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 +
-            `${renderSourceMap(sourceMap)}${renderHtmlClasses(classes)}>\n` +
-            body +
-            "</" +
-            type +
-            ">\n"
-        );
-    }
-
-    listitem(
-        text: string,
-        task: boolean,
-        _checked: boolean,
-        lineStart: number | undefined,
-    ): string {
-        const classes: string[] = [];
-        if (task) classes.push("task-list-item");
-        return `<li${renderHtmlClasses(classes)}${renderSourceMap(
-            lineStart ? [lineStart, lineStart] : undefined,
-        )}>${text}</li>\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"]);
+        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 `<p${renderSourceMap(sourceMap)}>${text}</p>\n`;
+        const result = `<p>${text}</p>\n`;
+        return injectHtmlAttributes(result, [], sourceMap);
     }
 
     table(header: string, body: string): string {
@@ -137,9 +126,8 @@ export class Renderer {
     }
 
     tablerow(content: string, sourceMapStart: number | undefined): string {
-        return `<tr${renderSourceMap(
-            sourceMapStart ? [sourceMapStart, sourceMapStart] : undefined,
-        )}>\n${content}</tr>\n`;
+        const sourceMap: SourceMap = sourceMapStart ? [sourceMapStart, sourceMapStart] : undefined;
+        return injectHtmlAttributes(`<tr>\n${content}</tr>\n`, [], sourceMap);
     }
 
     tablecell(
@@ -150,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);
     }
 
     /**
@@ -182,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 {
@@ -196,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/tokenizer.ts

@@ -132,7 +132,6 @@ export class Tokenizer {
             start: isordered ? +bull.slice(0, -1) : "",
             loose: false,
             items: [] as Tokens["ListItem"][],
-            sourceMap: [0, 0], // updated below once token.raw is built
         };
 
         bull = isordered ? `\\d{1,9}\\${bull.slice(-1)}` : `\\${bull}`;
@@ -294,10 +293,9 @@ export class Tokenizer {
         list.items[list.items.length - 1]!.text = itemContents.trimEnd();
         list.raw = list.raw.trimEnd();
 
-        list.sourceMap = this.lexer.getSourceMap(list.raw);
-
         // Item child tokens handled here at end because we needed to have the final item to trim it first
         for (let i = 0, listItemsLen = list.items.length; i < listItemsLen; i++) {
+            list.items[i]!.sourceMap = this.lexer.getSourceMap(list.items[i]!.raw);
             this.lexer.state.top = false;
             list.items[i]!.tokens = this.lexer.blockTokens(list.items[i]!.text, []);
 

package/src/types.ts

@@ -1,3 +1,5 @@
+export type HTMLAttrs = [name: string, value: string][];
+
 type BaseToken = {
     type: string;
     raw: string;
@@ -61,7 +63,6 @@ export interface Tokens extends Record<string, BaseToken> {
         start: number | "";
         loose: boolean;
         items: Tokens["ListItem"][];
-        sourceMap: SourceMap;
     };
     ListItem: {
         type: "list_item";
@@ -71,6 +72,7 @@ export interface Tokens extends Record<string, BaseToken> {
         checked?: boolean | undefined;
         loose: boolean;
         tokens: Token[];
+        sourceMap?: SourceMap;
     };
     Paragraph: {
         type: "paragraph";

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,51 +33,34 @@ 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;
-}
-
-function parseHtmlElement(html: string) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, "text/html");
-    // eslint-disable-next-line
-    if (!doc.body) throw Error("Invalid HTML");
-    const element = doc.body.firstChild as HTMLElement;
-    // eslint-disable-next-line
-    if (!element) throw Error("No valid element found");
-    return element;
-}
-
 export function getHtmlElementText(html: string) {
     try {
-        const element = parseHtmlElement(html);
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, "text/html");
+        // eslint-disable-next-line
+        if (!doc.body) throw Error("Invalid HTML");
+        const element = doc.body.firstChild as HTMLElement;
+        // eslint-disable-next-line
+        if (!element) throw Error("No valid element found");
         return element.textContent ?? html;
     } catch (_) {
         return html;
     }
 }
 
-/**
- * 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][],
-) {
+export function injectHtmlAttributes(html: string, attrs: HTMLAttrs, sourceMap?: SourceMap) {
+    if (sourceMap) {
+        attrs.push(["line-start", String(sourceMap[0])]);
+        attrs.push(["line-end", String(sourceMap[1])]);
+    }
+
     if (!attrs.length) return html;
 
-    const closingBracket = /[a-zA-Z0-9]>|\/>/;
+    const closingBracket = /[a-zA-Z0-9\/"]>/;
     const match = html.match(closingBracket);
     if (match) {
         let htmlAttrs = "";
-        attrs.forEach((atrr) => (htmlAttrs += ` ${atrr[0]}=${atrr[1]}`));
+        attrs.forEach((atrr) => (htmlAttrs += ` ${atrr[0]}="${atrr[1]}"`));
         const sliceIdx = match.index! + (match[0] === "/>" ? -1 : 1);
         return html.slice(0, sliceIdx) + htmlAttrs + html.slice(sliceIdx);
     }
@@ -128,11 +111,6 @@ export function fixLocalImageHref(
     }
 }
 
-export function renderSourceMap(sourceMap: SourceMap) {
-    if (!sourceMap) return "";
-    return ` line-start=${sourceMap[0]} line-end=${sourceMap[1]}`;
-}
-
 export function cleanUrl(href: string) {
     try {
         href = encodeURI(href).replace(/%25/g, "%");