pantsdown 1.5.1 → 1.6.0

package/README.md

@@ -1,4 +1,4 @@
-<!-- Up to marked@9.1.2 -->
+<!-- Up to marked@9.1.3 -->
 
 # Pantsdown
 
@@ -73,7 +73,7 @@ const pantsdown = new Pantsdown();
 
 function App() {
     useEffect(() => {
-        const markdown = "# Hello world\n- [ ] item 1\n- [ ] item 2";
+        const markdown = "# Hello world\n- [ ] Task 1\n- [x] Task 2";
         const html = pantsdown.parse(markdown);
         const container = document.getElementById("markdown-container");
         if (container) container.innerHTML = html;
@@ -92,7 +92,7 @@ export default App;
 The Pantsdown constructor accepts an optional configuration object:
 
 ```typescript
-import { PantsdownConfig } from "pantsdown";
+import { Pantsdown, PantsdownConfig } from "pantsdown";
 
 const config: PantsdownConfig = {
     renderer: {
@@ -114,7 +114,7 @@ const config: PantsdownConfig = {
         relativeImageUrlPrefix: "/__localimage__/",
 
         /**
-         * Whether to render <details> html tags with attribute `open=""`
+         * Whether to render <details> html tags with attribute open=""
          *
          * @default
          * false
@@ -133,4 +133,3 @@ console.log(html);
 
 -   [ ] Add button to copy code in fences
 -   [ ] [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/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = "./tests/happydom.ts"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pantsdown",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "author": "wallpants",
   "description": "Markdown to 'GitHub HTML' parser",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "highlight.js": "^11.9.0"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^12.10.3",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "bun-types": "latest",

package/src/css/styles.css

@@ -116,7 +116,6 @@
 .pantsdown a {
     background-color: transparent;
     color: var(--color-accent-fg);
-    text-decoration: none;
 }
 
 .pantsdown abbr[title] {
@@ -240,10 +239,6 @@
     font: inherit;
 }
 
-.pantsdown a:hover {
-    text-decoration: underline;
-}
-
 .pantsdown ::placeholder {
     color: var(--color-fg-subtle);
     opacity: 1;

package/src/lexer.ts

@@ -1,6 +1,6 @@
 import { inline } from "./rules/inline.ts";
 import { Tokenizer } from "./tokenizer.ts";
-import { type Links, type SourceMap, type Token } from "./types.ts";
+import { type Links, type SourceMap, type Token, type Tokens } from "./types.ts";
 
 export class Lexer {
     private tokenizer: Tokenizer;
@@ -8,6 +8,7 @@ export class Lexer {
     private links: Links = {};
 
     tokens: Token[] = [];
+    footnoteTokens: Tokens["Footnote"][] = [];
     line = 1;
     state = {
         inLink: false,
@@ -26,6 +27,7 @@ export class Lexer {
     lex(src: string) {
         // reset values from previous parse
         this.tokenizer.pendingHtmlClose = [];
+        this.footnoteTokens = [];
         this.tokens = [];
         this.links = {};
         this.line = 1;
@@ -39,6 +41,14 @@ export class Lexer {
             this.inlineTokens(next.src, next.tokens);
         }
 
+        const footnotesToken: Tokens["Footnotes"] = {
+            type: "footnotes",
+            raw: "",
+            items: this.footnoteTokens,
+        };
+
+        this.tokens.push(footnotesToken);
+
         return this.tokens;
     }
 
@@ -108,6 +118,13 @@ export class Lexer {
                 continue;
             }
 
+            // footnote
+            if ((token = this.tokenizer.footnote(src))) {
+                src = src.substring(token.raw.length);
+                this.footnoteTokens.push(token);
+                continue;
+            }
+
             // heading
             if ((token = this.tokenizer.heading(src))) {
                 src = src.substring(token.raw.length);
@@ -294,6 +311,13 @@ export class Lexer {
                 continue;
             }
 
+            // footnoteRef
+            if ((token = this.tokenizer.footnoteRef(src))) {
+                src = src.substring(token.raw.length);
+                tokens.push(token);
+                continue;
+            }
+
             // link
             if ((token = this.tokenizer.link(src))) {
                 src = src.substring(token.raw.length);

package/src/pantsdown.ts

@@ -18,7 +18,6 @@ export class Pantsdown {
         this.parser.renderer.slugger = new GithubSlugger();
 
         const tokens = this.lexer.lex(src);
-        const html = this.parser.parse(tokens);
-        return html;
+        return this.parser.parse(tokens);
     }
 }

package/src/parser.ts

@@ -1,5 +1,6 @@
 import { Renderer } from "./renderer.ts";
 import { type PantsdownConfig, type Token, type Tokens } from "./types.ts";
+import { injectHtmlAttributes } from "./utils.ts";
 
 /**
  * Parsing & Compiling
@@ -143,6 +144,20 @@ export class Parser {
                     );
                     continue;
                 }
+                case "footnotes": {
+                    const body = token.items.reduce((acc, { label, content, sourceMap }) => {
+                        let footnoteItem = `<li id="footnote-${encodeURIComponent(label)}">\n`;
+                        footnoteItem += this.parse(content);
+                        footnoteItem += "</li>\n";
+
+                        footnoteItem = injectHtmlAttributes(footnoteItem, [], sourceMap);
+
+                        return acc + footnoteItem;
+                    }, "");
+
+                    out += this.renderer.footnotes(token, body);
+                    continue;
+                }
                 case "paragraph": {
                     out += this.renderer.paragraph(this.parseInline(token.tokens), token.sourceMap);
                     continue;
@@ -212,6 +227,10 @@ export class Parser {
                     out += this.renderer.em(this.parseInline(token.tokens));
                     break;
                 }
+                case "footnoteRef": {
+                    out += this.renderer.footnoteRef(token);
+                    break;
+                }
                 case "codespan": {
                     out += this.renderer.codespan(token.text);
                     break;

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 HTMLAttrs, type PantsdownConfig, type SourceMap } from "./types.ts";
+import { type HTMLAttrs, type PantsdownConfig, type SourceMap, type Tokens } from "./types.ts";
 import {
     cleanUrl,
     escape,
@@ -190,6 +190,24 @@ export class Renderer {
         return injectHtmlAttributes("<img>", attrs);
     }
 
+    footnoteRef(token: Tokens["FootnoteRef"]) {
+        const encodedLabel = encodeURIComponent(token.label);
+
+        return `<sup><a id="footnote-ref-${encodedLabel}" href="#${
+            "footnote-" + encodedLabel
+        }" data-footnote-ref aria-describedby="footnote-label">${token.label}</a></sup>`;
+    }
+
+    footnotes(token: Tokens["Footnotes"], body: string) {
+        if (!token.items.length) return "";
+
+        let footnotesHTML = '<section class="footnotes" data-footnotes>\n';
+        footnotesHTML += `<ol>\n${body}\n</ol>\n`;
+        footnotesHTML += "</section>\n";
+
+        return footnotesHTML;
+    }
+
     text(text: string): string {
         return text;
     }

package/src/rules/block.ts

@@ -15,6 +15,7 @@ type BlockRuleNames =
     | "text"
     | "bullet"
     | "listItemStart"
+    | "footnote"
     | "paragraph";
 
 export const label = /(?!\s*\])(?:\\.|[^\[\]\\])+/;
@@ -110,6 +111,10 @@ const block_blockquote = edit(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/)
     .replace("paragraph", block_paragraph)
     .getRegex();
 
+const block_footnote = edit(/^( {0,3}\[\^(\d+)\]:(?:[ \t]+|[\n]*?|$)?(paragraph|[^\n]*))+/)
+    .replace("paragraph", block_paragraph)
+    .getRegex();
+
 export const block: Record<BlockRuleNames, RegExp> = {
     newline: /^(?: *(?:\n|$))+/,
     code: /^( {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+/,
@@ -125,5 +130,6 @@ export const block: Record<BlockRuleNames, RegExp> = {
     table: block_table,
     lheading: block_lheading,
     paragraph: block_paragraph,
+    footnote: block_footnote,
     text: /^[^\n]+/,
 };

package/src/rules/inline.ts

@@ -19,6 +19,7 @@ type InlineRuleNames =
     | "punctuation"
     | "blockSkip"
     | "escapes"
+    | "footnoteRef"
     | "backpedal";
 
 // list of unicode punctuation marks, plus any missing characters from CommonMark spec
@@ -143,4 +144,5 @@ export const inline: Omit<Record<InlineRuleNames, RegExp>, "emStrong"> & {
     blockSkip: inline_blockSkip,
     escapes: inline_escapes,
     backpedal: inline_backpedal,
+    footnoteRef: /^\[\^([^\]\n]+)\]/,
 };

package/src/tokenizer.ts

@@ -320,6 +320,32 @@ export class Tokenizer {
         return list;
     }
 
+    footnote(src: string): Tokens["Footnote"] | undefined {
+        const cap = block.footnote.exec(src);
+        if (!cap) return undefined;
+
+        const label = cap[2] ?? "";
+        let text = cap[3] ? rtrim(cap[3].replace(/^ *[ \t]?/gm, ""), "\n") : "";
+
+        text += `<a href="#footnote-ref-${encodeURIComponent(
+            label,
+        )}" data-footnote-backref aria-label="Back to reference ${label}"> ↩</a>`;
+
+        this.lexer.state.top = false;
+        const tokens = this.lexer.blockTokens(text, []);
+
+        const token: Tokens["Footnote"] = {
+            type: "footnote",
+            raw: cap[0],
+            text: text,
+            label: label,
+            content: tokens,
+            sourceMap: this.lexer.getSourceMap(cap[0]),
+        };
+
+        return token;
+    }
+
     html(src: string): Tokens["HTML"] | undefined {
         const cap = block.html.exec(src);
         if (!cap) return undefined;
@@ -369,16 +395,16 @@ export class Tokenizer {
          * and update their sourceMap once they're closed.
          */
 
-        const capEndsWith = (str: string) => cap[0].trimEnd().endsWith(str);
+        const capEndsWith = (str?: string) => str && cap[0].trimEnd().endsWith(str);
 
         const tag = inline.tag.exec(src);
-        const isHtmlClosed = capEndsWith(tag![0].slice(1));
+        const isHtmlClosed = capEndsWith(tag?.[0].slice(1));
 
-        if (!isHtmlClosed) {
+        if (tag?.[0] && !isHtmlClosed) {
             // index where the token we just created will be inserted
             const tokenIdx = this.lexer.tokens.length;
             // first in last out
-            this.pendingHtmlClose.unshift([tag![0], tokenIdx]);
+            this.pendingHtmlClose.unshift([tag[0], tokenIdx]);
         } else if (this.pendingHtmlClose.length) {
             for (const [pendingTag, index] of this.pendingHtmlClose) {
                 if (capEndsWith(pendingTag.slice(1))) {
@@ -720,6 +746,17 @@ export class Tokenizer {
         return undefined;
     }
 
+    footnoteRef(src: string): Tokens["FootnoteRef"] | undefined {
+        const cap = inline.footnoteRef.exec(src);
+        if (!cap) return undefined;
+
+        return {
+            type: "footnoteRef",
+            raw: cap[0],
+            label: cap[1] ?? "",
+        };
+    }
+
     codespan(src: string): Tokens["Codespan"] | undefined {
         const cap = inline.code.exec(src);
         if (!cap) return undefined;

package/src/types.ts

@@ -160,6 +160,24 @@ export interface Tokens extends Record<string, BaseToken> {
         text: string;
         tokens: Token[];
     };
+    Footnote: {
+        type: "footnote";
+        raw: string;
+        text: string;
+        label: string;
+        content: Token[];
+        sourceMap: SourceMap;
+    };
+    FootnoteRef: {
+        type: "footnoteRef";
+        raw: string;
+        label: string;
+    };
+    Footnotes: {
+        type: "footnotes";
+        raw: string;
+        items: Tokens["Footnote"][];
+    };
 }
 
 export type Token =
@@ -184,7 +202,10 @@ export type Token =
     | Tokens["Em"]
     | Tokens["Codespan"]
     | Tokens["Br"]
-    | Tokens["Del"];
+    | Tokens["Del"]
+    | Tokens["Footnote"]
+    | Tokens["FootnoteRef"]
+    | Tokens["Footnotes"];
 
 export type Links = Record<string, { href: string; title: string }>;
 

package/src/sample.test.ts

@@ -1,5 +0,0 @@
-import { expect, test } from "bun:test";
-
-test("1 + 3", () => {
-    expect(1 + 3).toBe(4);
-});