markdown-preview.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Preview</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            max-width: 960px;
            margin: 0 auto;
            padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.75rem) clamp(3rem, 4vw, 4rem);
        }

        header {
            margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
        }

        main {
            display: grid;
            gap: 1.5rem;
        }

        .tool-card {
            padding: clamp(1.25rem, 3vw, 2rem);
        }

        textarea {
            width: 100%;
            min-height: 320px;
        }

        .preview {
            border: 1px solid var(--ui-2);
            border-radius: 12px;
            padding: clamp(1rem, 2vw, 1.25rem);
            background: var(--bg);
        }

        .hidden {
            display: none;
        }

        .editor-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 0.5rem;
        }

        .editor-header label {
            margin: 0;
        }

        .button-row {
            display: flex;
            flex-wrap: nowrap;
            gap: 0.65rem;
            align-items: center;
        }

        .button-row button,
        .button-row .btn,
        .button-row .secondary {
            font-size: clamp(0.9rem, 1.5vw, 1rem);
            padding: clamp(0.55rem, 1.6vw, 0.7rem) clamp(0.85rem, 2vw, 1rem);
            white-space: nowrap;
        }

        .secondary {
            background: var(--bg);
            color: var(--tx);
            border: 1px solid var(--ui-2);
        }

        .secondary:hover,
        .secondary:focus-visible {
            color: var(--accent);
            border-color: var(--accent);
        }

        .status {
            color: var(--tx-3);
            min-height: 1.25rem;
        }

        @media (max-width: 640px) {
            body {
                padding: 1.25rem 1rem 2.5rem;
            }

            .button-row {
                gap: 0.5rem;
            }

            .button-row button,
            .button-row .btn,
            .button-row .secondary {
                font-size: 0.85rem;
                padding: 0.5rem 0.75rem;
            }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js" defer></script>
</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>Markdown Preview</h1>
        <p class="lead">Write and preview Markdown with shareable permalinks, autosave, and quick copying.</p>
    </header>

    <main>
        <section class="surface tool-card">
            <div class="editor-header">
                <label for="markdown-input">Markdown content</label>
                <div class="button-row">
                    <button id="toggle-preview" type="button" class="btn">Preview</button>
                    <button id="copy-permalink" type="button" class="btn secondary">Copy permalink</button>
                    <button id="copy-markdown" type="button" class="btn secondary">Copy markdown</button>
                </div>
            </div>

            <div class="form-group">
                <textarea id="markdown-input" name="markdown-input" placeholder="Write your Markdown here" spellcheck="false"></textarea>
            </div>

            <div id="preview" class="preview hidden" aria-live="polite"></div>

            <p class="status" id="status" aria-live="polite"></p>
        </section>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const textarea = document.getElementById('markdown-input');
            const preview = document.getElementById('preview');
            const togglePreviewButton = document.getElementById('toggle-preview');
            const copyPermalinkButton = document.getElementById('copy-permalink');
            const copyMarkdownButton = document.getElementById('copy-markdown');
            const saveButton = document.createElement('button');
            const status = document.getElementById('status');

            saveButton.id = 'save-markdown';
            saveButton.type = 'button';
            saveButton.textContent = 'Save';
            saveButton.className = 'btn secondary';
            copyMarkdownButton.insertAdjacentElement('afterend', saveButton);

            const STORAGE_KEY = 'markdown-preview-content';

            const base64Encode = (text) => {
                const bytes = new TextEncoder().encode(text);
                const binary = Array.from(bytes, (char) => String.fromCharCode(char)).join('');
                return btoa(binary);
            };

            const base64Decode = (text) => {
                const binary = atob(text);
                const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
                return new TextDecoder().decode(bytes);
            };

            const updateStatus = (message) => {
                status.textContent = message;
                if (message) {
                    setTimeout(() => {
                        status.textContent = '';
                    }, 3500);
                }
            };

            const renderPreview = () => {
                const raw = textarea.value;
                const html = DOMPurify.sanitize(marked.parse(raw));
                preview.innerHTML = html || '<p><em>No content to preview yet.</em></p>';
            };

            const saveToLocalStorage = (content, silent = false) => {
                try {
                    localStorage.setItem(STORAGE_KEY, content);
                    if (!silent) {
                        updateStatus('Saved to local storage.');
                    }
                } catch (error) {
                    if (!silent) {
                        updateStatus('Unable to save to local storage.');
                    }
                }
            };

            const setMode = (mode) => {
                const isPreview = mode === 'preview';
                preview.classList.toggle('hidden', !isPreview);
                textarea.classList.toggle('hidden', isPreview);
                togglePreviewButton.textContent = isPreview ? 'Edit' : 'Preview';
                togglePreviewButton.setAttribute('aria-pressed', isPreview);
                if (isPreview) {
                    renderPreview();
                }
            };

            const applyAnchorContent = () => {
                const encoded = window.location.hash.slice(1);
                if (!encoded) return false;

                try {
                    const decoded = base64Decode(encoded);
                    textarea.value = decoded;
                    setMode('preview');
                    updateStatus('Loaded markdown from permalink.');
                    return true;
                } catch (error) {
                    updateStatus('Could not parse permalink content.');
                    setMode('edit');
                    return false;
                }
            };

            togglePreviewButton.addEventListener('click', () => {
                const isCurrentlyPreview = togglePreviewButton.textContent === 'Edit';
                setMode(isCurrentlyPreview ? 'edit' : 'preview');
            });

            copyMarkdownButton.addEventListener('click', async () => {
                try {
                    await navigator.clipboard.writeText(textarea.value);
                    updateStatus('Markdown copied to clipboard.');
                } catch (error) {
                    updateStatus('Clipboard is unavailable.');
                }
            });

            saveButton.addEventListener('click', () => {
                saveToLocalStorage(textarea.value);
            });

            copyPermalinkButton.addEventListener('click', async () => {
                try {
                    const encoded = base64Encode(textarea.value);
                    const url = new URL(window.location.href);
                    url.search = '';
                    url.hash = encoded;
                    const permalink = url.toString();
                    await navigator.clipboard.writeText(permalink);
                    updateStatus('Permalink copied to clipboard.');
                } catch (error) {
                    updateStatus('Unable to copy permalink.');
                }
            });

            textarea.addEventListener('input', () => {
                if (togglePreviewButton.textContent === 'Edit') {
                    renderPreview();
                }
            });

            const hadAnchorContent = applyAnchorContent();

            if (!hadAnchorContent) {
                const stored = localStorage.getItem(STORAGE_KEY);
                if (stored) {
                    textarea.value = stored;
                    setMode('preview');
                    updateStatus('Loaded markdown from local storage.');
                }
            }

            if (!hadAnchorContent && !textarea.value) {
                setMode('edit');
            }

            setInterval(() => {
                saveToLocalStorage(textarea.value, true);
            }, 5000);
        });
    </script>
</body>

</html>