pantsdown 1.6.0 → 1.7.1

package/README.md

@@ -131,5 +131,4 @@ console.log(html);
 
 ## Roadmap
 
--   [ ] Add button to copy code in fences
--   [ ] [Mermaid](https://mermaid.js.org/) usage docs
+-   [ ] [Mermaid](https://mermaid.js.org/) usage docs.

package/package.json

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

package/src/code-copy.ts

@@ -0,0 +1,28 @@
+export const codeCopyScript = `
+<script id="code-copy-script" type="module">
+    document.querySelectorAll("pre").forEach((pre) => {
+        const copyButton = document.createElement("button");
+
+        const innerHTML =
+            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="copy-base"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>' +
+            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="copy-success"><polyline points="20 6 9 17 4 12"/></svg>';
+
+        copyButton.innerHTML = innerHTML;
+        copyButton.className = "copy-button";
+
+        pre.appendChild(copyButton);
+        copyButton.addEventListener("click", () => {
+            navigator.clipboard.writeText(pre.firstChild.textContent)
+                .then(
+                    () => {
+                        copyButton.classList.add("success");
+                        setTimeout(() => {
+                            copyButton.classList.remove("success");
+                        }, 1000);
+                    }
+                );
+
+        });
+    });
+</script>
+`;

package/src/css/styles.css

@@ -64,10 +64,42 @@
     word-wrap: break-word;
 }
 
+.pantsdown .copy-button {
+    position: absolute;
+    left: calc(100% - 36px);
+    top: 5px;
+    cursor: pointer;
+    height: 30px;
+    width: 30px;
+    padding: 0;
+    background: var(--color-btn-bg);
+    border: 1px solid var(--color-btn-border);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.pantsdown .copy-button.success {
+    border-color: green;
+}
+.pantsdown .copy-button:hover {
+    background: var(--color-btn-hover-bg);
+}
+.pantsdown .copy-button .copy-success {
+    display: none;
+}
+.pantsdown .copy-button.success .copy-success {
+    display: block;
+}
+.pantsdown .copy-button.success .copy-base {
+    display: none;
+}
+
 .pantsdown .mermaid-container {
     margin-bottom: 16px;
 }
 
+/* TODO: clean-up */
 /* .pantsdown .mermaid { */
 /* } */
 

package/src/lexer.ts

@@ -57,7 +57,7 @@ export class Lexer {
         const tokenLines = rawToken.split("\n");
         const sourceMap: SourceMap = [this.line, (this.line += tokenLines.length - 1)];
 
-        while (tokenLines.slice(-1)[0] === "") {
+        while (tokenLines[tokenLines.length - 1] === "") {
             // token.raw sometimes includes newline chars at the end of the string
             // which we don't want to include in the sourceMap
             tokenLines.pop();

package/src/pantsdown.ts

@@ -1,4 +1,5 @@
 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";
@@ -18,6 +19,7 @@ export class Pantsdown {
         this.parser.renderer.slugger = new GithubSlugger();
 
         const tokens = this.lexer.lex(src);
-        return this.parser.parse(tokens);
+        const html = this.parser.parse(tokens);
+        return codeCopyScript + html;
     }
 }

package/src/renderer.ts

@@ -32,6 +32,7 @@ export class Renderer {
         const lang = (infostring ?? "").match(/^\S*/)?.[0];
         code = code.replace(/\n$/, "") + "\n";
 
+        // TODO: render pre and code instead of this section
         if (lang === "mermaid") {
             return injectHtmlAttributes(
                 `<section><div class="mermaid">${code}</div></section>`,
@@ -44,11 +45,9 @@ export class Renderer {
         const highlightedCode = hljs.highlight(code, { language }).value;
 
         const result =
-            `<pre><code class="hljs language-` +
-            escape(language) +
-            '">' +
-            highlightedCode +
-            "</code></pre>\n";
+            `<pre style="position: relative;">` +
+            `<code class="hljs language-${escape(language)}">${highlightedCode}</code>` +
+            `</pre>`;
 
         return injectHtmlAttributes(result, [], sourceMap);
     }

package/src/tokenizer.ts

@@ -283,19 +283,25 @@ export class Tokenizer {
                 loose: false,
                 text: itemContents,
                 tokens: [],
+                sourceMap: this.lexer.getSourceMap(raw),
             });
 
             list.raw += raw;
         }
 
         // Do not consume newlines at end of final item. Alternatively, make itemRegex *start* with any newlines to simplify/speed up endsWithBlankLine logic
-        list.items[list.items.length - 1]!.raw = raw.trimEnd();
+        const lastTrimmed = raw.trimEnd();
+
+        if (list.items[list.items.length - 1]!.sourceMap) {
+            this.lexer.line -= raw.length - lastTrimmed.length;
+        }
+
+        list.items[list.items.length - 1]!.raw = lastTrimmed;
         list.items[list.items.length - 1]!.text = itemContents.trimEnd();
         list.raw = list.raw.trimEnd();
 
         // 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

@@ -72,7 +72,7 @@ export interface Tokens extends Record<string, BaseToken> {
         checked?: boolean | undefined;
         loose: boolean;
         tokens: Token[];
-        sourceMap?: SourceMap;
+        sourceMap: SourceMap;
     };
     Paragraph: {
         type: "paragraph";

package/bunfig.toml

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