From 127144193cc5accefeabc9bc2afd71dd1c1b1a59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Thu, 15 Jan 2026 09:30:28 +0000
Subject: [PATCH 1/2] Add clipboard HTML to Markdown tool

---
 html-to-markdown-clipboard.docs.md |   3 +
 html-to-markdown-clipboard.html    | 221 +++++++++++++++++++++++++++++
 2 files changed, 224 insertions(+)
 create mode 100644 html-to-markdown-clipboard.docs.md
 create mode 100644 html-to-markdown-clipboard.html
diff --git a/html-to-markdown-clipboard.docs.md b/html-to-markdown-clipboard.docs.md
new file mode 100644
index 0000000..923abbf
--- /dev/null
+++ b/html-to-markdown-clipboard.docs.md
@@ -0,0 +1,3 @@
+Turn rich HTML from your clipboard into clean Markdown. Click the paste button to pull HTML or plain text from the clipboard, and the tool immediately converts it to Markdown with a one-click copy button.
+
+<!-- Generated from commit: HEAD -->
diff --git a/html-to-markdown-clipboard.html b/html-to-markdown-clipboard.html
new file mode 100644
index 0000000..ac3cf30
--- /dev/null
+++ b/html-to-markdown-clipboard.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clipboard HTML to Markdown</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        body {
+            max-width: 960px;
+            margin: 0 auto;
+            padding: 24px 20px 48px;
+        }
+
+        .page-header {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .site-link {
+            font-weight: 600;
+            color: var(--foreground-subtle);
+            text-decoration: none;
+        }
+
+        .site-link:hover,
+        .site-link:focus-visible {
+            color: var(--foreground);
+        }
+
+        main {
+            display: grid;
+            gap: 1.5rem;
+        }
+
+        .tool-card {
+            padding: clamp(1.25rem, 3vw, 2rem);
+        }
+
+        .tool-actions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+        }
+
+        .grid {
+            display: grid;
+            gap: 1rem;
+        }
+
+        @media (min-width: 860px) {
+            .grid {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+        }
+
+        textarea {
+            font-family: var(--font-mono);
+            min-height: 220px;
+            resize: vertical;
+        }
+
+        .status {
+            font-size: 0.95rem;
+            color: var(--foreground-subtle);
+        }
+
+        .status.error {
+            color: var(--re);
+        }
+
+        @media (max-width: 720px) {
+            body {
+                padding: 20px 16px 40px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
+        <h1>Clipboard HTML to Markdown</h1>
+        <p class="lead">Paste rich HTML from your clipboard and get clean Markdown that you can copy instantly.</p>
+    </header>
+
+    <main>
+        <section class="surface tool-card">
+            <div class="tool-actions">
+                <button type="button" id="paste-button">Paste from clipboard</button>
+                <button type="button" id="copy-button">Copy Markdown</button>
+            </div>
+            <p class="status" id="status">Waiting for clipboard input.</p>
+        </section>
+
+        <section class="surface tool-card">
+            <div class="grid">
+                <div>
+                    <label for="source-input">Clipboard contents (HTML or text)</label>
+                    <textarea id="source-input" placeholder="Paste rich HTML here or click the button to pull from your clipboard."></textarea>
+                </div>
+                <div>
+                    <label for="markdown-output">Markdown output</label>
+                    <textarea id="markdown-output" readonly placeholder="Markdown will appear here."></textarea>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/turndown@7.1.2/dist/turndown.js"></script>
+    <script>
+        (function () {
+            const pasteButton = document.getElementById('paste-button');
+            const copyButton = document.getElementById('copy-button');
+            const sourceInput = document.getElementById('source-input');
+            const markdownOutput = document.getElementById('markdown-output');
+            const status = document.getElementById('status');
+
+            const turndownService = new TurndownService({
+                codeBlockStyle: 'fenced',
+                headingStyle: 'atx'
+            });
+
+            const isProbablyHtml = (text) => /<\s*\/?[a-z][\s\S]*>/i.test(text);
+
+            const setStatus = (message, isError = false) => {
+                status.textContent = message;
+                status.classList.toggle('error', isError);
+            };
+
+            const updateMarkdown = (source, preferHtml = false) => {
+                if (!source) {
+                    markdownOutput.value = '';
+                    setStatus('Waiting for clipboard input.');
+                    return;
+                }
+
+                const treatAsHtml = preferHtml || isProbablyHtml(source);
+                if (treatAsHtml) {
+                    markdownOutput.value = turndownService.turndown(source);
+                    setStatus('Converted HTML to Markdown.');
+                } else {
+                    markdownOutput.value = source;
+                    setStatus('Using plain text from clipboard.');
+                }
+            };
+
+            pasteButton.addEventListener('click', async () => {
+                try {
+                    if (!navigator.clipboard || !navigator.clipboard.read) {
+                        setStatus('Clipboard read is not supported in this browser.', true);
+                        return;
+                    }
+                    const items = await navigator.clipboard.read();
+                    let html = '';
+                    let text = '';
+
+                    for (const item of items) {
+                        if (item.types.includes('text/html')) {
+                            const blob = await item.getType('text/html');
+                            html = await blob.text();
+                            break;
+                        }
+                        if (item.types.includes('text/plain') && !text) {
+                            const blob = await item.getType('text/plain');
+                            text = await blob.text();
+                        }
+                    }
+
+                    const source = html || text;
+                    sourceInput.value = source;
+                    updateMarkdown(source, Boolean(html));
+                } catch (error) {
+                    setStatus(`Clipboard read failed: ${error.message}`, true);
+                }
+            });
+
+            copyButton.addEventListener('click', async () => {
+                const text = markdownOutput.value;
+                if (!text) {
+                    setStatus('Nothing to copy yet.', true);
+                    return;
+                }
+                try {
+                    await navigator.clipboard.writeText(text);
+                    const original = copyButton.textContent;
+                    copyButton.textContent = 'Copied!';
+                    setStatus('Markdown copied to clipboard.');
+                    setTimeout(() => {
+                        copyButton.textContent = original;
+                    }, 1600);
+                } catch (error) {
+                    setStatus(`Copy failed: ${error.message}`, true);
+                }
+            });
+
+            sourceInput.addEventListener('paste', (event) => {
+                const html = event.clipboardData?.getData('text/html');
+                const text = event.clipboardData?.getData('text/plain');
+                if (html || text) {
+                    event.preventDefault();
+                    const source = html || text;
+                    sourceInput.value = source;
+                    updateMarkdown(source, Boolean(html));
+                }
+            });
+
+            sourceInput.addEventListener('input', () => {
+                updateMarkdown(sourceInput.value, false);
+            });
+        })();
+    </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
+</body>
+
+</html>

From 85d64ac9859b702b1ea15983763ee1ec5f34ce9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Thu, 15 Jan 2026 09:30:47 +0000
Subject: [PATCH 2/2] Update html-to-markdown-clipboard.docs.md

---
 html-to-markdown-clipboard.docs.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/html-to-markdown-clipboard.docs.md b/html-to-markdown-clipboard.docs.md
index 923abbf..dcc9f5a 100644
--- a/html-to-markdown-clipboard.docs.md
+++ b/html-to-markdown-clipboard.docs.md
@@ -1,3 +1 @@
 Turn rich HTML from your clipboard into clean Markdown. Click the paste button to pull HTML or plain text from the clipboard, and the tool immediately converts it to Markdown with a one-click copy button.
-
-<!-- Generated from commit: HEAD -->
