Markdown editor with live preview

'use client';
import { useMemo, useState } from 'react';

const escapeHtml = (s: string) =>
  s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');

function inline(s: string) {
  return s
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
    // only http(s) links, so javascript: URLs can never be injected
    .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" rel="noopener noreferrer" target="_blank">$1</a>');
}

export function render(md: string): string {
  const blocks: string[] = [];
  // Lift fenced code out first so inline rules never touch it.
  const text = escapeHtml(md).replace(/```\n?([\s\S]*?)```/g, (_, code) => {
    blocks.push(`<pre><code>${code}</code></pre>`);
    return `\u0000${blocks.length - 1}\u0000`;
  });

  const out: string[] = [];
  let list = false;
  for (const line of text.split('\n')) {
    const item = /^[-*]\s+(.*)/.exec(line);
    if (item) {
      if (!list) out.push('<ul>');
      list = true;
      out.push(`<li>${inline(item[1]!)}</li>`);
      continue;
    }
    if (list) { out.push('</ul>'); list = false; }
    const h = /^(#{1,3})\s+(.*)/.exec(line);
    if (h) out.push(`<h${h[1]!.length}>${inline(h[2]!)}</h${h[1]!.length}>`);
    else if (line.trim()) out.push(`<p>${inline(line)}</p>`);
  }
  if (list) out.push('</ul>');
  return out.join('\n').replace(/\u0000(\d+)\u0000/g, (_, i) => blocks[Number(i)]!);
}

export function MarkdownEditor({ initial = '' }: { initial?: string }) {
  const [text, setText] = useState(initial);
  const html = useMemo(() => render(text), [text]);
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <textarea
        aria-label="Markdown source"
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="min-h-64 rounded border p-3 font-mono text-sm"
      />
      <div className="prose max-w-none rounded border p-3" dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}