pantsdown 1.8.2 → 1.9.0

package/README.md

@@ -89,12 +89,15 @@ export default App;
 
 ## ⚙️ Configuration
 
-The Pantsdown constructor accepts an optional configuration object:
+The Pantsdown constructor accepts an optional configuration object.
+If you
 
 ```typescript
-import { Pantsdown, PantsdownConfig } from "pantsdown";
+import { Pantsdown, type PartialPantsdownConfig } from "pantsdown";
 
-const config: PantsdownConfig = {
+// This is the default config object. If you provide
+// a config object, it will be deeply merged into this.
+const config: PartialPantsdownConfig = {
     renderer: {
         /**
          * Prefix to be added to relative image sources.
@@ -111,7 +114,7 @@ const config: PantsdownConfig = {
          * absolute src remains unchanged:
          * <img src="https://avatars.githubusercontent.com/wallpants" />
          */
-        relativeImageUrlPrefix: "/__localimage__/",
+        relativeImageUrlPrefix: "",
 
         /**
          * Whether to render <details> html tags with attribute open=""
@@ -119,7 +122,7 @@ const config: PantsdownConfig = {
          * @default
          * false
          */
-        detailsTagDefaultOpen: true,
+        detailsTagDefaultOpen: false,
     },
 };
 

package/package.json

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

package/src/code-copy.ts

@@ -1,6 +1,9 @@
 export const codeCopyScript = `
 <script id="code-copy-script" type="module">
     document.querySelectorAll("pre").forEach((pre) => {
+        const firstElement = pre.firstElementChild;
+        if (!firstElement || firstElement.tagName !== "CODE") return;
+
         const copyButton = document.createElement("button");
 
         const innerHTML =

package/src/pantsdown.ts

@@ -2,17 +2,42 @@ import GithubSlugger from "github-slugger";
 import { codeCopyScript } from "./code-copy.ts";
 import { Lexer } from "./lexer.ts";
 import { Parser } from "./parser.ts";
-import { type PantsdownConfig } from "./types.ts";
+import { type PantsdownConfig, type PartialPantsdownConfig } from "./types.ts";
+
+const defaultConfig: PantsdownConfig = {
+    renderer: {
+        relativeImageUrlPrefix: "",
+        detailsTagDefaultOpen: false,
+    },
+};
 
 export class Pantsdown {
     private lexer: Lexer;
     private parser: Parser;
+    config: PantsdownConfig = defaultConfig;
 
-    constructor(config?: PantsdownConfig) {
+    constructor(config?: PartialPantsdownConfig) {
+        if (config) this.setConfig(config);
         this.lexer = new Lexer();
-        this.parser = new Parser(config);
+        this.parser = new Parser(this);
+    }
+
+    /**
+     * Update config
+     * The object you provide will be deeply merged into current config.
+     */
+    setConfig(config: PartialPantsdownConfig) {
+        this.config = {
+            renderer: {
+                ...this.config.renderer,
+                ...config.renderer,
+            },
+        };
     }
 
+    /**
+     * Parse markdown string
+     */
     parse(src: string): string {
         // re-init slugger to avoid slug count from incorrectly incrementing
         // from previosly slugged headings

package/src/parser.ts

@@ -1,5 +1,6 @@
+import { type Pantsdown } from "./pantsdown.ts";
 import { Renderer } from "./renderer.ts";
-import { type PantsdownConfig, type Token, type Tokens } from "./types.ts";
+import { type Token, type Tokens } from "./types.ts";
 import { injectHtmlAttributes } from "./utils.ts";
 
 /**
@@ -8,8 +9,8 @@ import { injectHtmlAttributes } from "./utils.ts";
 export class Parser {
     renderer: Renderer;
 
-    constructor(config: PantsdownConfig | undefined) {
-        this.renderer = new Renderer(config);
+    constructor(pantsdown: Pantsdown) {
+        this.renderer = new Renderer(pantsdown);
     }
 
     /**

package/src/renderer.ts

@@ -1,7 +1,8 @@
 import GithubSlugger from "github-slugger";
 import hljs from "highlight.js";
+import { type Pantsdown } from "./pantsdown.ts";
 import { inline } from "./rules/inline.ts";
-import { type HTMLAttrs, type PantsdownConfig, type SourceMap, type Tokens } from "./types.ts";
+import { type HTMLAttrs, type SourceMap, type Tokens } from "./types.ts";
 import {
     cleanUrl,
     escape,
@@ -11,45 +12,33 @@ import {
     injectHtmlAttributes,
 } from "./utils.ts";
 
-const defaultConfig: NonNullable<PantsdownConfig["renderer"]> = {
-    relativeImageUrlPrefix: "",
-    detailsTagDefaultOpen: false,
-};
-
 /**
  * An object containing functions to render tokens to HTML.
  */
 export class Renderer {
-    private rendererConfig: NonNullable<PantsdownConfig["renderer"]>;
+    private pantsdown: Pantsdown;
     slugger = new GithubSlugger();
 
-    constructor(config: PantsdownConfig | undefined) {
-        const rendererConfig = Object.assign(defaultConfig, config?.renderer ?? {});
-        this.rendererConfig = rendererConfig;
+    constructor(pantsdown: Pantsdown) {
+        this.pantsdown = pantsdown;
     }
 
     code(code: string, infostring: string | undefined, sourceMap: SourceMap): string {
         const lang = (infostring ?? "").match(/^\S*/)?.[0];
         code = code.replace(/\n$/, "") + "\n";
 
-        // TODO: render pre and code instead of this section
+        const attrs: HTMLAttrs = [];
+
         if (lang === "mermaid") {
-            return injectHtmlAttributes(
-                `<section><div class="mermaid">${code}</div></section>`,
-                [["class", "mermaid-container"]],
-                sourceMap,
-            );
+            attrs.push(["class", "mermaid-container mermaid"]);
+        } else {
+            const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
+            code = hljs.highlight(code, { language }).value;
+            code = `<code class="hljs language-${escape(language)}">${code}</code>`;
         }
 
-        const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
-        const highlightedCode = hljs.highlight(code, { language }).value;
-
-        const result =
-            `<pre style="position: relative;">` +
-            `<code class="hljs language-${escape(language)}">${highlightedCode}</code>` +
-            `</pre>`;
-
-        return injectHtmlAttributes(result, [], sourceMap);
+        const result = `<pre style="position: relative;">` + code + `</pre>`;
+        return injectHtmlAttributes(result, attrs, sourceMap);
     }
 
     alert(body: string, token: Tokens["Alert"]): string {
@@ -64,11 +53,14 @@ export class Renderer {
     }
 
     html(html: string, _block: boolean, sourceMap?: SourceMap | undefined): string {
-        const result = fixHtmlLocalImageHref(html, this.rendererConfig.relativeImageUrlPrefix);
+        const result = fixHtmlLocalImageHref(
+            html,
+            this.pantsdown.config.renderer.relativeImageUrlPrefix,
+        );
 
         const attrs: HTMLAttrs = [];
 
-        if (this.rendererConfig.detailsTagDefaultOpen) {
+        if (this.pantsdown.config.renderer.detailsTagDefaultOpen) {
             const tag = inline.tag.exec(html);
             if (tag?.[0] === "<details>") {
                 attrs.push(["open", ""]);
@@ -189,7 +181,10 @@ export class Renderer {
             return text;
         }
         const attrs: HTMLAttrs = [
-            ["src", fixLocalImageHref(cleanHref, this.rendererConfig.relativeImageUrlPrefix)],
+            [
+                "src",
+                fixLocalImageHref(cleanHref, this.pantsdown.config.renderer.relativeImageUrlPrefix),
+            ],
             ["alt", text],
         ];
         if (title) attrs.push(["title", title]);

package/src/types.ts

@@ -219,7 +219,7 @@ export type Token =
 export type Links = Record<string, { href: string; title: string }>;
 
 export type PantsdownConfig = {
-    renderer?: {
+    renderer: {
         /**
          * Prefix to be added to relative image sources.
          * Must start and end with "/"
@@ -235,7 +235,7 @@ export type PantsdownConfig = {
          * absolute src remains unchanged:
          * <img src="https://avatars.githubusercontent.com/wallpants" />
          */
-        relativeImageUrlPrefix?: string;
+        relativeImageUrlPrefix: string;
 
         /**
          * Whether to render <details> html tags with attribute `open=""`
@@ -243,6 +243,12 @@ export type PantsdownConfig = {
          * @default
          * false
          */
-        detailsTagDefaultOpen?: boolean;
+        detailsTagDefaultOpen: boolean;
     };
 };
+
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+export type PartialPantsdownConfig = DeepPartial<PantsdownConfig>;