import { marked } from "https://esm.sh/marked"; export function main() { document.getElementById("copy-markdownOutput").addEventListener("click", () => { copyToClipboard("#markdownOutput", { html: false }); }); document.getElementById("copy-renderedMarkdown").addEventListener("click", () => { copyToClipboard("#renderedMarkdown", { html: true }); }); document.getElementById("paste-htmlInput").addEventListener("click", () => { pasteFromClipboard(); }); document.getElementById("htmlInput").addEventListener("keyup", () => { convertToMarkdown(); }); } export function slackHTMLToMarkdown(html) { removeAbsolutePositioning(); const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); let lastSender = ""; let lastTimestamp = ""; let markdown = ""; function convertMessage(messageElement) { function safeGetAttribute(selector, attribute) { const element = messageElement.querySelector(selector); return element ? element.getAttribute(attribute) : ""; } const senderElement = messageElement.querySelector(`[data-qa="message_sender_name"]`); const sender = senderElement ? senderElement.textContent.trim() : lastSender; const ariaLabel = safeGetAttribute(".c-timestamp", "aria-label") || ""; const contentElements = messageElement.querySelectorAll(`.c-message_kit__blocks, [data-qa="file_name"]`); const date = parseTimestamp(ariaLabel); const isoDate = date.toISOString().split("T")[0]; const formattedTime = date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: true }); const formattedTimestamp = `${isoDate} ${formattedTime} EST`; let messageMarkdown = ""; function processNode(node) { if (node.nodeType === Node.TEXT_NODE) { return node.textContent; } else if (node.nodeName === "CODE") { const codeContent = node.textContent; if (node.parentNode.nodeName === "PRE") { const language = node.className.replace("language-", "").split(" ")[0] || ""; return `\n\`\`\`${language}\n${codeContent}\n\`\`\`\n`; } else { return "`" + codeContent + "`"; } } else if (node.nodeName === "PRE") { const codeElement = node.querySelector("code"); if (codeElement) { return processNode(codeElement); } else { return `\n\`\`\`\n${node.textContent}\n\`\`\`\n`; } } else if (node.nodeName === "OL" || node.nodeName === "UL") { const listType = node.nodeName === "OL" ? "ordered" : "unordered"; const indent = parseInt(node.getAttribute("data-indent") || "0"); const listItems = Array.from(node.querySelectorAll("li")).map((item, index) => { const indentation = " ".repeat(indent); const bullet = listType === "ordered" ? `${index + 1}.` : "-"; return `${indentation}${bullet} ${processNode(item).trim()}`; }).join("\n"); return `\n${listItems}\n`; } else { return Array.from(node.childNodes).map(processNode).join(""); } } if (contentElements.length > 0) { messageMarkdown = Array.from(contentElements).map(processNode).join("\n"); } if (messageMarkdown.trim()) { if (sender !== lastSender || formattedTimestamp !== lastTimestamp) { messageMarkdown = `__${sender}__ [${formattedTimestamp}]:\n${messageMarkdown}`; lastSender = sender; lastTimestamp = formattedTimestamp; } // Split the content by newlines and add blockquotes, except for code blocks const lines = messageMarkdown.replaceAll(/\n\n+/g, "\n\n").split("\n"); let inCodeBlock = false; let inList = false; messageMarkdown = lines.map(line => { if (line.startsWith("```")) { inCodeBlock = !inCodeBlock; return line; } else if (inCodeBlock || line.startsWith("__")) { inList = false; return line; } else if (line.match(/^\s*(\d+\.|-)\s/)) { console.log("inlist"); if (inList) return `> ${line}`; inList = true; return `>\n> ${line}`; } else if (line.trim() === "") { if (inList) return null; // strip extra newlines return line; } else { if (inList) return `>\n> ${line}`; inList = false; return `> ${line}`; } }).filter(x => x != null).join("\n"); messageMarkdown += "\n\n"; } // Remove any remaining HTML entities messageMarkdown = messageMarkdown.replace(/ /g, " ") .replace(/</g, "<") .replace(/>/g, ">") .replace(/&/g, "&") .replace(/"/g, "\"") .replace(/'/g, "'"); return messageMarkdown; } const messages = doc.querySelectorAll(`[data-qa="message_container"]`); messages.forEach((message) => { markdown += convertMessage(message); }); return markdown.trim(); // ----- // UTILS // ----- function postProcessMarkdown(markdown) { // Split the markdown into lines let lines = markdown.split("\n"); // Process lines for (let i = 0; i < lines.length; i++) { // Add blockquote to non-empty lines if (lines[i].trim() !== "") { lines[i] = `> ${lines[i]}`; } // Handle list items if (lines[i].match(/^>\s+(\d+\.|-)\s/)) { // Remove extra blockquote from list items lines[i] = lines[i].replace(/^>\s+/, ""); // Ensure there's a blank line before the first item of a list if (i > 0 && !lines[i - 1].match(/^>\s+(\d+\.|-)\s/) && lines[i - 1].trim() !== "") { lines.splice(i, 0, ">"); i++; } } } // Join lines back together markdown = lines.join("\n"); // Remove extra newlines markdown = markdown.replace(/\n{3,}/g, "\n\n"); return markdown.trim(); } function parseTimestamp(ariaLabel) { const now = new Date(); const months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; if (!ariaLabel) return now; if (ariaLabel.startsWith("Today at")) { const [_, time] = ariaLabel.split("at "); return new Date(`${now.toDateString()} ${time}`); } else if (ariaLabel.startsWith("Yesterday at")) { const [_, time] = ariaLabel.split("at "); const yesterday = new Date(now.setDate(now.getDate() - 1)); return new Date(`${yesterday.toDateString()} ${time}`); } else { const parts = ariaLabel.split(" at "); if (parts.length !== 2) { console.error("Unexpected timestamp format:", ariaLabel); return now; } const [dateStr, timeStr] = parts; const [month, dayStr] = dateStr.split(" "); const day = parseInt(dayStr); const monthIndex = months.indexOf(month); if (monthIndex === -1) { console.error("Invalid month in timestamp:", ariaLabel); return now; } const year = now.getFullYear(); const [hours, minutes] = timeStr.split(":").map(Number); const date = new Date(year, monthIndex, day, hours, minutes); return isNaN(date.getTime()) ? now : date; } } function removeAbsolutePositioning() { // Get all elements on the page var allElements = document.getElementsByTagName("*"); // Iterate through all elements for (var i = 0; i < allElements.length; i++) { var element = allElements[i]; // Check if the element has inline style if (element.style.position === "absolute") { // Remove the position property element.style.position = ""; } } } } export function convertToMarkdown() { const htmlInput = document.getElementById("htmlInput").innerHTML; const markdown = slackHTMLToMarkdown(htmlInput); document.getElementById("markdownOutput").textContent = markdown; document.getElementById("renderedMarkdown").innerHTML = marked.parse(markdown); } export function copyToClipboard(selector, { html }) { const target = document.querySelector(selector); const clipboardItem = new ClipboardItem({ "text/plain": new Blob([target.innerText], { type: "text/plain" }), ...(html ? { "text/html": new Blob([target.innerHTML], { type: "text/html" }) } : {}), }); navigator.clipboard.write([clipboardItem]); } export function copyMarkdownAndHTMLToClipboard() { const mdTarget = document.querySelector("#markdownOutput"); const htmlTarget = document.querySelector("#renderedMarkdown"); const clipboardItem = new ClipboardItem({ "text/plain": new Blob([mdTarget.innerText], { type: "text/plain" }), "text/html": new Blob([htmlTarget.innerHTML], { type: "text/html" }), }); navigator.clipboard.write([clipboardItem]); } export async function pasteFromClipboard() { const clipboardItems = await navigator.clipboard.read(); for (const clipboardItem of clipboardItems) { const htmlBlob = await clipboardItem.getType("text/html"); const htmlText = await htmlBlob.text(); document.getElementById("htmlInput").innerHTML = htmlText; convertToMarkdown(); console.log("converted"); copyMarkdownAndHTMLToClipboard(); return; } alert("Must paste html."); } const html = ` Slack Copy Paste to Markdown and cleaned-up HTML

Paste messages from Slack, get clean markdown

This little webapp is intended to make it easier to copy messages from Slack into other places for sharing or archival, with cleaned-up, readable formatting. I hacked it together on valtown with copious help from an LLM over a weekend; please propose changes or edits, as I'm sure I missed many use-cases and edge-cases. This app runs entirely in your browser and does not send your data anywhere.

Another website attempting similar things is at slack-copy-paste.danielna.com.

Instructions

In Slack, start selecting at the name of the sender of the first message, end after the last message but before the textbox.

In this app, you can just press the ➡️ button and then paste your message in the other app, or you can manually paste in the textbox and then copy either markdown or rendered html elsewhere if you like.

Paste HTML from Slack here

Raw Markdown output

Rendered Markdown output

`; export default async function(req: Request) { return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); }

slack_cleaner