pantsdown 1.4.4 → 1.4.5

package/README.md

@@ -132,8 +132,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
 -   [ ] [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.4.5",
   "author": "wallpants",
   "description": "Markdown to 'GitHub HTML' parser",
   "license": "MIT",

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

@@ -10,7 +10,6 @@ import {
     getHtmlElementText,
     injectHtmlAttributes,
     renderHtmlClasses,
-    renderSourceMap,
 } from "./utils.ts";
 
 const defaultConfig: NonNullable<PantsdownConfig["renderer"]> = {
@@ -38,13 +37,14 @@ export class Renderer {
         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,69 +54,45 @@ 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: [name: string, value: string | number][] = [];
 
         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} style="position: relative;">`;
         // 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, [], 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"
+            "<" + type + startatt + `${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`;
+    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);
     }
 
     checkbox(checked: boolean, classes: string[] = []): string {
@@ -128,7 +104,7 @@ export class Renderer {
     }
 
     paragraph(text: string, sourceMap: SourceMap): string {
-        return `<p${renderSourceMap(sourceMap)}>${text}</p>\n`;
+        return injectHtmlAttributes(`<p>${text}</p>\n`, [], sourceMap);
     }
 
     table(header: string, body: string): string {
@@ -137,9 +113,11 @@ export class Renderer {
     }
 
     tablerow(content: string, sourceMapStart: number | undefined): string {
-        return `<tr${renderSourceMap(
+        return injectHtmlAttributes(
+            `<tr>\n${content}</tr>\n`,
+            [],
             sourceMapStart ? [sourceMapStart, sourceMapStart] : undefined,
-        )}>\n${content}</tr>\n`;
+        );
     }
 
     tablecell(

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

@@ -61,7 +61,6 @@ export interface Tokens extends Record<string, BaseToken> {
         start: number | "";
         loose: boolean;
         items: Tokens["ListItem"][];
-        sourceMap: SourceMap;
     };
     ListItem: {
         type: "list_item";
@@ -71,6 +70,7 @@ export interface Tokens extends Record<string, BaseToken> {
         checked?: boolean | undefined;
         loose: boolean;
         tokens: Token[];
+        sourceMap?: SourceMap;
     };
     Paragraph: {
         type: "paragraph";

package/src/utils.ts

@@ -41,20 +41,15 @@ export function renderHtmlClasses(classes: string[]) {
     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;
@@ -70,14 +65,20 @@ export function getHtmlElementText(html: string) {
 export function injectHtmlAttributes(
     html: string,
     attrs: [name: string, value: string | number][],
+    sourceMap: SourceMap,
 ) {
+    if (sourceMap) {
+        attrs.push(["line-start", sourceMap[0]]);
+        attrs.push(["line-end", 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 +129,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, "%");