/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { marked } from "https://esm.sh/marked"; import DOMPurify from "https://esm.sh/dompurify"; function App() { const [markdown, setMarkdown] = useState(""); const [html, setHtml] = useState(""); const [theme, setTheme] = useState("system"); const previewRef = useRef(null); useEffect(() => { const savedTheme = localStorage.getItem("theme") || "system"; setTheme(savedTheme); applyTheme(savedTheme); }, []); useEffect(() => { localStorage.setItem("theme", theme); applyTheme(theme); }, [theme]); const applyTheme = (currentTheme) => { if (currentTheme === "system") { if (window.matchMedia("(prefers-color-scheme: dark)").matches) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } } else { document.documentElement.classList.toggle("dark", currentTheme === "dark"); } }; const generatePreview = () => { const rawHtml = marked(markdown); const sanitizedHtml = DOMPurify.sanitize(rawHtml); setHtml(sanitizedHtml); }; const handleInputChange = (e) => { setMarkdown(e.target.value); }; const handleKeyDown = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); generatePreview(); } }; const handlePaste = () => { setTimeout(generatePreview, 0); }; const copyToClipboard = (text, type) => { navigator.clipboard.writeText(text).then(() => { alert(`${type} copied to clipboard!`); }); }; const copyRichText = () => { const range = document.createRange(); range.selectNodeContents(previewRef.current); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); selection.removeAllRanges(); alert('Rich text copied to clipboard!'); }; return (

Markdown to Rich Text Converter

Welcome to the Markdown Converter!

This tool helps you convert Markdown to rich text. Here's how to use it:

Enter your Markdown in the left textarea
Click "Generate Preview" or press Enter to see the rich text version
Copy the Markdown or rich text using the buttons provided

<div className="mt-2 flex justify-between">
              <button
                onClick={generatePreview}
                className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 transition-colors duration-200"
              >
                Generate Preview
              </button>
              <button
                onClick={() => copyToClipboard(markdown, "Markdown")}
                className="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors duration-200"
              >
                Copy Markdown
              </button>
            </div>
          </div>
          <div>
            <div
              ref={previewRef}
              className="markdown-body w-full h-64 p-2 border rounded overflow-auto bg-white dark:bg-gray-700"
              dangerouslySetInnerHTML={{ __html: html }}
            />
            <div className="mt-2 flex justify-end">
              <button
                onClick={copyRichText}
                className="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors duration-200"
              >
                Copy Rich Text
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Markdown to Rich Text Converter</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
          tailwind.config = {
            darkMode: 'class',
            theme: {
              extend: {
                colors: {
                  purple: {
                    500: '#8B5CF6',
                    600: '#7C3AED',
                  },
                  orange: {
                    500: '#F97316',
                    600: '#EA580C',
                  },
                },
              },
            },
          }
        </script>
        <style>
          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
          body {
            font-family: 'Inter', sans-serif;
          }
          .markdown-body {
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
            font-size: 16px;
            line-height: 1.5;
            word-wrap: break-word;
            color: #24292e;
          }
          .markdown-body h1 { font-size: 2em; border-bottom: 1px solid #eaecef; padding-bottom: .3em; }
          .markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: .3em; }
          .markdown-body h3 { font-size: 1.25em; }
          .markdown-body h4 { font-size: 1em; }
          .markdown-body h5 { font-size: .875em; }
          .markdown-body h6 { font-size: .85em; color: #6a737d; }
          .markdown-body code { padding: .2em .4em; background-color: rgba(27,31,35,.05); border-radius: 3px; }
          .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; }
          .markdown-body blockquote { padding: 0 1em; color: #6a737d; border-left: .25em solid #dfe2e5; }
          .markdown-body ul, .markdown-body ol { padding-left: 2em; }
          .markdown-body img { max-width: 100%; box-sizing: content-box; }
          .dark .markdown-body { color: #c9d1d9; background-color: #0d1117; }
          .dark .markdown-body h1, .dark .markdown-body h2 { border-bottom-color: #30363d; }
          .dark .markdown-body h6 { color: #8b949e; }
          .dark .markdown-body code { background-color: rgba(240,246,252,.15); color: #c9d1d9; }
          .dark .markdown-body pre { background-color: #161b22; }
          .dark .markdown-body pre code { color: #c9d1d9; }
          .dark .markdown-body blockquote { color: #8b949e; border-left-color: #30363d; }
          .dark .markdown-body a { color: #58a6ff; }
          .dark .markdown-body hr { background-color: #30363d; }
          .dark .markdown-body table th, .dark .markdown-body table td { border-color: #30363d; }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
    `,
    {
      headers: {
        "content-type": "text/html",
      },
    }
  );
}</article></body></html>

mdtort