pantsdown 1.6.1 → 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.1",
+  "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/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);
     }