@vvedantb/ui 0.17.1 → 0.18.1

package/src/markdown/MarkdownLink.tsx

@@ -0,0 +1,92 @@
+import type { ComponentProps, ReactNode, SyntheticEvent } from "react";
+import { Children } from "react";
+import { IconBrandGithub, IconWorld } from "@tabler/icons-react";
+import type { ExtraProps } from "streamdown";
+
+/** Streamdown's placeholder href for a link whose `(url)` has not streamed yet. */
+const INCOMPLETE_LINK = "streamdown:incomplete-link";
+/** Break opportunities in a bare URL: after separators, never mid-word. */
+const URL_BREAK_AFTER = /([/.?&=#_-]+)/;
+
+/** Hosts whose favicon is a black glyph that vanishes in dark mode. */
+const MONOCHROME_HOSTS = new Set(["github.com", "gist.github.com"]);
+/** Hosts whose favicon failed this session; they get the globe from now on. */
+const failedFavicons = new Set<string>();
+
+function externalHost(href: string): string | null {
+  if (!URL.canParse(href)) return null;
+  const url = new URL(href);
+  return url.protocol === "https:" || url.protocol === "http:" ? url.host : null;
+}
+
+function forgetFavicon(event: SyntheticEvent<HTMLImageElement>, host: string) {
+  failedFavicons.add(host);
+  event.currentTarget.dataset.failed = "true";
+}
+
+/**
+ * A pasted URL is one unbreakable word, so it either overflows or, with
+ * `overflow-wrap: anywhere`, splits at an arbitrary letter. `<wbr>` after
+ * each separator lets it wrap where a reader expects.
+ */
+export function breakableUrl(text: string): ReactNode[] {
+  return text
+    .split(URL_BREAK_AFTER)
+    .flatMap((part, index) =>
+      index % 2 === 1 ? [part, <wbr key={index} />] : part === "" ? [] : [part],
+    );
+}
+
+function LinkLabel({ children, href }: { children: ReactNode; href: string }) {
+  const parts = Children.toArray(children);
+  const only = parts.length === 1 ? parts[0] : undefined;
+  if (typeof only === "string" && (only === href || /^https?:\/\//.test(only))) {
+    return <>{breakableUrl(only)}</>;
+  }
+  return <>{children}</>;
+}
+
+/**
+ * `a` renderer. External links open in a new tab behind the site's own
+ * favicon (fetched from that host, never a third-party favicon service), with
+ * a globe when it has none and a brand glyph for GitHub. In-page anchors and other schemes stay plain.
+ */
+export function MarkdownLink({ href, children }: ComponentProps<"a"> & ExtraProps) {
+  if (href === undefined || href === INCOMPLETE_LINK) {
+    return <span className="markdown-link">{children}</span>;
+  }
+  const host = externalHost(href);
+  if (host === null) {
+    return (
+      <a className="markdown-link" href={href}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <a
+      className="markdown-link"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={href}
+    >
+      {MONOCHROME_HOSTS.has(host) ? (
+        <IconBrandGithub className="markdown-link-icon" aria-hidden />
+      ) : failedFavicons.has(host) ? (
+        <IconWorld className="markdown-link-icon" aria-hidden />
+      ) : (
+        <img
+          className="markdown-link-icon"
+          src={`https://${host}/favicon.ico`}
+          alt=""
+          aria-hidden
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          onError={(event) => forgetFavicon(event, host)}
+        />
+      )}
+      <LinkLabel href={href}>{children}</LinkLabel>
+    </a>
+  );
+}

package/src/markdown/codeFence.ts

@@ -0,0 +1,57 @@
+import type { ExtraProps } from "streamdown";
+
+type HastElement = NonNullable<ExtraProps["node"]>;
+type HastChild = HastElement["children"][number];
+
+export interface FencedCode {
+  code: string;
+  /** Fence language as written (`ts`, `bash`), or "" for a bare fence. */
+  language: string;
+  /** File name from the fence meta (`title="a.ts"`, `file=a.ts`, `a.ts`). */
+  title: string | null;
+}
+
+const LANGUAGE_CLASS = /^language-(.+)$/;
+const TITLE_ATTRIBUTE = /(?:^|\s)(?:title|file|filename)=(?:"([^"]+)"|'([^']+)'|(\S+))/;
+/** A bare meta token that names a file: has a dot or slash, no `=` or braces. */
+const BARE_FILE = /^[\w@~./\\-]*[./\\][\w@~./\\-]+$/;
+
+function textOf(node: HastChild): string {
+  if (node.type === "text") return node.value;
+  if (node.type !== "element") return "";
+  return node.children.map(textOf).join("");
+}
+
+/** The file name a fence meta string points at, if any. */
+export function parseFenceTitle(meta: string): string | null {
+  const attribute = TITLE_ATTRIBUTE.exec(meta);
+  if (attribute) return attribute[1] ?? attribute[2] ?? attribute[3] ?? null;
+  const bare = meta.trim().split(/\s+/)[0] ?? "";
+  return BARE_FILE.test(bare) && !/^\d/.test(bare) ? bare : null;
+}
+
+/**
+ * Reads a fenced code block off the hast `pre` react-markdown hands its
+ * renderer. Parsing the tree rather than the rendered `code` child keeps this
+ * typed: the child is an opaque element whose props TypeScript cannot see.
+ */
+export function readFencedCode(pre: HastElement): FencedCode | null {
+  for (const child of pre.children) {
+    if (child.type !== "element" || child.tagName !== "code") continue;
+    const classes = child.properties.className;
+    let language = "";
+    if (Array.isArray(classes)) {
+      for (const name of classes) {
+        const match = LANGUAGE_CLASS.exec(String(name));
+        if (match?.[1]) language = match[1];
+      }
+    }
+    const meta = child.properties.metastring;
+    return {
+      code: textOf(child),
+      language,
+      title: typeof meta === "string" ? parseFenceTitle(meta) : null,
+    };
+  }
+  return null;
+}

package/src/markdown/codeHighlight.ts

@@ -0,0 +1,138 @@
+import { code as shiki } from "@streamdown/code";
+import { useState, useSyncExternalStore } from "react";
+import type { CodeHighlighterPlugin } from "streamdown";
+
+/** A Shiki language id, as the plugin names it. */
+type BundledLanguage = ReturnType<typeof shiki.getSupportedLanguages>[number];
+/** Streamdown declares these without exporting them. */
+type HighlightResult = NonNullable<ReturnType<CodeHighlighterPlugin["highlight"]>>;
+export type HighlightToken = HighlightResult["tokens"][number][number];
+
+/**
+ * Syntax highlighting for markdown code blocks, on the same Shiki plugin
+ * Streamdown ships (JS regex engine, one lazily-created highlighter per
+ * language, `github-light` / `github-dark` tokens in a single pass).
+ *
+ * The plugin's own cache is keyed by a hash of the code's length and edges and
+ * starts a fresh job on every uncached call, so this module keeps a small
+ * cache of its own that dedupes in-flight work and notifies subscribers — the
+ * shape `useSyncExternalStore` needs, with no effect.
+ */
+
+const THEMES = shiki.getThemes();
+/** Fence language (lowercased) → Shiki id. Aliases (`ts`, `sh`, `py`) are
+ *  keys too; the plugin resolves them to their grammar. */
+const LANGUAGES = new Map<string, BundledLanguage>(
+  shiki.getSupportedLanguages().map((id) => [id, id]),
+);
+/** Enough for every code block on screen plus scroll-back; oldest dropped. */
+const CACHE_LIMIT = 200;
+
+type Entry = { status: "pending" } | { status: "done"; result: HighlightResult };
+
+const cache = new Map<string, Entry>();
+const listeners = new Map<string, Set<() => void>>();
+
+function cacheKey(language: BundledLanguage, source: string): string {
+  return `${language}\u0000${source}`;
+}
+
+function store(key: string, entry: Entry): void {
+  cache.delete(key);
+  cache.set(key, entry);
+  if (cache.size <= CACHE_LIMIT) return;
+  const oldest = cache.keys().next().value;
+  if (oldest !== undefined && !listeners.has(oldest)) cache.delete(oldest);
+}
+
+function request(language: BundledLanguage, source: string): HighlightResult | null {
+  const key = cacheKey(language, source);
+  const hit = cache.get(key);
+  if (hit !== undefined) return hit.status === "done" ? hit.result : null;
+
+  store(key, { status: "pending" });
+  const sync = shiki.highlight(
+    { code: source, language, themes: THEMES },
+    (result) => {
+      store(key, { status: "done", result });
+      for (const notify of listeners.get(key) ?? []) notify();
+    },
+  );
+  if (sync === null) return null;
+  store(key, { status: "done", result: sync });
+  return sync;
+}
+
+function subscribe(key: string, notify: () => void): () => void {
+  const set = listeners.get(key) ?? new Set();
+  set.add(notify);
+  listeners.set(key, set);
+  return () => {
+    set.delete(notify);
+    if (set.size === 0) listeners.delete(key);
+  };
+}
+
+/**
+ * What to highlight. A finished block is highlighted whole. A block still
+ * streaming is highlighted up to its last complete line only: the tokens for
+ * finished lines never change, so each new line costs one job instead of one
+ * per token, and the partial line renders plain until its newline lands.
+ */
+export function highlightSource(code: string, isIncomplete: boolean): string {
+  const trimmed = code.replace(/\n+$/, "");
+  if (!isIncomplete) return trimmed;
+  const lastBreak = code.lastIndexOf("\n");
+  return lastBreak <= 0 ? "" : code.slice(0, lastBreak);
+}
+
+export type CodeLine = { text: string; tokens: HighlightToken[] | null };
+
+/**
+ * Pairs each line of `code` with its highlighted tokens when a highlight of a
+ * prefix of `code` is available; lines past that prefix stay plain.
+ */
+export function buildCodeLines(
+  code: string,
+  highlighted: { source: string; result: HighlightResult } | null,
+): CodeLine[] {
+  const lines = code.replace(/\n+$/, "").split("\n");
+  const usable =
+    highlighted !== null &&
+    highlighted.source.length > 0 &&
+    (code === highlighted.source || code.startsWith(`${highlighted.source}\n`));
+  return lines.map((text, index) => ({
+    text,
+    tokens: usable ? (highlighted.result.tokens[index] ?? null) : null,
+  }));
+}
+
+/**
+ * Highlighted lines for a code block. While a new highlight is in flight the
+ * previous one is kept on screen (it still covers every line it was made
+ * for), so streaming never flashes back to plain text.
+ */
+export function useHighlightedLines(
+  code: string,
+  language: string,
+  isIncomplete: boolean,
+): CodeLine[] {
+  const bundled = LANGUAGES.get(language.toLowerCase()) ?? null;
+  const source = bundled === null ? "" : highlightSource(code, isIncomplete);
+  const key = bundled === null ? "" : cacheKey(bundled, source);
+
+  const result = useSyncExternalStore(
+    (notify) => (key === "" ? () => {} : subscribe(key, notify)),
+    () => (bundled === null || source === "" ? null : request(bundled, source)),
+  );
+
+  const [shown, setShown] = useState<{
+    source: string;
+    result: HighlightResult;
+  } | null>(null);
+  if (result !== null && shown?.result !== result) {
+    setShown({ source, result });
+  }
+
+  return buildCodeLines(code, result !== null ? { source, result } : shown);
+}

package/src/markdown/incrementalBlocks.ts

@@ -0,0 +1,182 @@
+import { parseMarkdownIntoBlocks } from "streamdown";
+
+/**
+ * Streamdown already renders a streamed reply block by block: each block is
+ * memoised on its own text, so appending a token only re-renders the block
+ * still being written. What it does *not* skip is the split itself — the
+ * default `parseMarkdownIntoBlocks` runs marked's block lexer over the whole
+ * reply on every token, so a long answer costs O(length) lexing per token and
+ * O(length^2) over the turn. That is the work behind the mid-stream freezes on
+ * a slow laptop: the DOM update is small, the re-parse before it is not.
+ *
+ * This is the same split, done incrementally. Blocks already produced from a
+ * byte-identical prefix are reused verbatim and only the tail is re-lexed, so
+ * the per-token cost is one prefix comparison plus lexing the paragraph being
+ * written. Identical output, not an approximation — see the invariant test.
+ *
+ * Reuse is only allowed up to a block that ends on a blank line. A blank line
+ * closes every leaf block in CommonMark, so marked's tokeniser starts the next
+ * block from a clean state and cannot reinterpret what came before it (a
+ * setext underline, a lazy list continuation). Without such a boundary we fall
+ * back to a full parse.
+ */
+
+/** How many recent splits to keep. In practice: the streaming reply, plus the
+ *  streamed reasoning prose rendered alongside it, plus headroom. */
+const CACHE_SIZE = 4;
+
+interface BlockSplit {
+  source: string;
+  blocks: string[];
+  /**
+   * `blocks.join("") === source`, so a block index maps to a source offset.
+   * False when marked normalised the input (CRLF, say); such a split can be
+   * returned but never used as a base.
+   */
+  exact: boolean;
+  /** Source offset at which block `i` ends. */
+  offsets: number[];
+  /** Whether block `i` ends on a blank line, i.e. is a safe cut point. */
+  endsClean: boolean[];
+  /** Longest reusable prefix: block count, source length, and the text itself.
+   *  Precomputed so a tick costs one string comparison, not a per-block scan. */
+  cleanCount: number;
+  cleanLength: number;
+  cleanText: string;
+}
+
+const cache: BlockSplit[] = [];
+
+/** A block that ends on a blank line closes cleanly. */
+const ENDS_ON_BLANK_LINE = /\n[ \t]*\n$/;
+
+/**
+ * Footnotes make Streamdown emit the whole document as one block, because a
+ * reference resolves against a definition anywhere in it. Any document that
+ * could take that path is parsed whole — a prefix split from before the
+ * footnote appeared would not match what a full parse produces now.
+ */
+function mayContainFootnotes(markdown: string): boolean {
+  return markdown.includes("[^");
+}
+
+/**
+ * Indexes a split so later ticks can slice it by offset without re-scanning.
+ * The final block is never a cut point: it is the one still being written.
+ */
+function describeSplit(
+  source: string,
+  blocks: string[],
+  exact: boolean,
+): BlockSplit {
+  const offsets: number[] = [];
+  const endsClean: boolean[] = [];
+  let offset = 0;
+  let cleanCount = 0;
+  let cleanLength = 0;
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i] ?? "";
+    offset += block.length;
+    offsets.push(offset);
+    const clean = ENDS_ON_BLANK_LINE.test(block);
+    endsClean.push(clean);
+    if (clean && i < blocks.length - 1) {
+      cleanCount = i + 1;
+      cleanLength = offset;
+    }
+  }
+  return {
+    source,
+    blocks,
+    exact,
+    offsets,
+    endsClean,
+    cleanCount,
+    cleanLength,
+    cleanText: exact && cleanLength > 0 ? source.slice(0, cleanLength) : "",
+  };
+}
+
+function fullSplit(markdown: string): BlockSplit {
+  const blocks = parseMarkdownIntoBlocks(markdown);
+  return describeSplit(markdown, blocks, blocks.join("") === markdown);
+}
+
+/**
+ * How much of `base` is a byte-identical, cleanly-closed prefix of `markdown`.
+ * The common case — the reply only grew — is one string comparison. The slow
+ * walk is for a rewritten tail: Streamdown closes an open code fence before
+ * splitting, so the string it hands us can change at the end between ticks.
+ */
+function reusablePrefix(
+  base: BlockSplit,
+  markdown: string,
+): { count: number; length: number } {
+  if (base.cleanLength === 0) return { count: 0, length: 0 };
+  if (markdown.startsWith(base.cleanText)) {
+    return { count: base.cleanCount, length: base.cleanLength };
+  }
+  let count = 0;
+  let length = 0;
+  for (let i = 0; i < base.blocks.length - 1; i++) {
+    const block = base.blocks[i];
+    const end = base.offsets[i];
+    if (block === undefined || end === undefined) break;
+    if (!markdown.startsWith(block, end - block.length)) break;
+    if (base.endsClean[i] === true) {
+      count = i + 1;
+      length = end;
+    }
+  }
+  return { count, length };
+}
+
+function splitIncrementally(markdown: string): BlockSplit {
+  let best: { base: BlockSplit; count: number; length: number } | null = null;
+  for (const base of cache) {
+    if (!base.exact) continue;
+    const prefix = reusablePrefix(base, markdown);
+    if (prefix.length === 0) continue;
+    if (best === null || prefix.length > best.length) {
+      best = { base, ...prefix };
+    }
+  }
+  if (best === null) return fullSplit(markdown);
+
+  const tail = markdown.slice(best.length);
+  const tailBlocks = parseMarkdownIntoBlocks(tail);
+  return describeSplit(
+    markdown,
+    [...best.base.blocks.slice(0, best.count), ...tailBlocks],
+    tailBlocks.join("") === tail,
+  );
+}
+
+/**
+ * Drop-in replacement for Streamdown's `parseMarkdownIntoBlocksFn`. Stable
+ * module-level identity, so passing it does not invalidate Streamdown's own
+ * memo on the split.
+ */
+export function parseMarkdownIntoBlocksIncremental(markdown: string): string[] {
+  for (let i = 0; i < cache.length; i++) {
+    const entry = cache[i];
+    if (entry === undefined || entry.source !== markdown) continue;
+    if (i > 0) {
+      cache.splice(i, 1);
+      cache.unshift(entry);
+    }
+    return entry.blocks;
+  }
+
+  const split = mayContainFootnotes(markdown)
+    ? fullSplit(markdown)
+    : splitIncrementally(markdown);
+  cache.unshift(split);
+  if (cache.length > CACHE_SIZE) cache.length = CACHE_SIZE;
+  return split.blocks;
+}
+
+/** Test seam: the cache is module state shared by every Streamdown instance. */
+export function resetIncrementalMarkdownBlocks(): void {
+  cache.length = 0;
+}

package/src/markdown/index.ts

@@ -0,0 +1,3 @@
+export { Markdown } from "./Markdown";
+export type { MarkdownProps } from "./Markdown";
+export { MarkdownLink } from "./MarkdownLink";

package/src/markdown/markdownClipboard.ts

@@ -0,0 +1,178 @@
+import type { ClipboardEvent } from "react";
+
+/**
+ * Copying rendered markdown puts markdown on the clipboard, not the flattened
+ * text the browser produces (lists lose their bullets, code loses its fence,
+ * links lose their URL). The selection's DOM is walked back into markdown;
+ * `text/html` still carries the rich fragment for editors that want it.
+ *
+ * Elements can speak for themselves with `data-markdown-copy`: `"skip"` drops
+ * them (code block headers), any other value replaces their content (alert
+ * titles emit their `[!NOTE]` marker).
+ */
+
+const SKIPPED_TAGS = new Set(["BUTTON", "SVG", "STYLE", "SCRIPT", "TEMPLATE", "WBR"]);
+
+function isElement(node: Node): node is HTMLElement {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+function skipped(element: HTMLElement): boolean {
+  return (
+    SKIPPED_TAGS.has(element.tagName.toUpperCase()) ||
+    element.dataset.markdownCopy === "skip" ||
+    element.getAttribute("aria-hidden") === "true" ||
+    element.classList.contains("sr-only")
+  );
+}
+
+/** A fence longer than any backtick run inside the code. */
+function fence(code: string): string {
+  const longest = Math.max(0, ...(code.match(/`+/g) ?? []).map((run) => run.length));
+  return "`".repeat(Math.max(3, longest + 1));
+}
+
+function children(node: Node): string {
+  return Array.from(node.childNodes, serialize).join("");
+}
+
+function prefixLines(text: string, first: string, rest: string): string {
+  return text
+    .split("\n")
+    .map((line, index) => (line === "" && index > 0 ? rest.trimEnd() : (index === 0 ? first : rest) + line))
+    .join("\n");
+}
+
+function list(element: HTMLElement): string {
+  const ordered = element.tagName === "OL";
+  let number = Number(element.getAttribute("start") ?? "1") || 1;
+  const items: string[] = [];
+  for (const child of Array.from(element.children)) {
+    if (!isElement(child) || child.tagName !== "LI") continue;
+    const marker = ordered ? `${number++}. ` : "- ";
+    const checkbox = child.querySelector(":scope > input[type=checkbox], :scope > p > input[type=checkbox]");
+    const task = checkbox instanceof HTMLInputElement ? (checkbox.checked ? "[x] " : "[ ] ") : "";
+    const body = children(child).trim();
+    items.push(prefixLines(task + body, marker, " ".repeat(marker.length)));
+  }
+  return `${items.join("\n")}\n\n`;
+}
+
+function table(element: HTMLElement): string {
+  const rows = Array.from(element.querySelectorAll("tr"), (row) =>
+    Array.from(row.children, (cell) => children(cell).trim().replace(/\|/g, "\\|")),
+  );
+  const [head, ...body] = rows;
+  if (!head) return "";
+  const line = (cells: string[]) => `| ${cells.join(" | ")} |`;
+  return `${[line(head), line(head.map(() => "---")), ...body.map(line)].join("\n")}\n\n`;
+}
+
+function codeBlock(element: HTMLElement): string {
+  const code = (element.querySelector("pre")?.textContent ?? element.textContent ?? "").replace(/\n$/, "");
+  const language = element.closest("[data-language]")?.getAttribute("data-language") ?? "";
+  const marker = fence(code);
+  return `${marker}${language}\n${code}\n${marker}\n\n`;
+}
+
+function math(element: HTMLElement, display: boolean): string {
+  const tex = element.querySelector('annotation[encoding="application/x-tex"]')?.textContent ?? element.textContent ?? "";
+  return display ? `$$\n${tex}\n$$\n\n` : `$${tex}$`;
+}
+
+function serialize(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
+  if (!isElement(node) || skipped(node)) return "";
+
+  const override = node.dataset.markdownCopy;
+  if (override !== undefined) return override;
+
+  if (node.classList.contains("katex-display")) return math(node, true);
+  if (node.classList.contains("katex")) return math(node, false);
+  if (node.classList.contains("markdown-code") || node.tagName === "PRE") return codeBlock(node);
+
+  const content = () => children(node);
+  switch (node.tagName) {
+    case "BR":
+      return "\n";
+    case "STRONG":
+    case "B":
+      return `**${content()}**`;
+    case "EM":
+    case "I":
+      return `*${content()}*`;
+    case "DEL":
+    case "S":
+      return `~~${content()}~~`;
+    case "CODE": {
+      const text = node.textContent ?? "";
+      return text.includes("`") ? `\`\` ${text} \`\`` : `\`${text}\``;
+    }
+    case "A": {
+      const href = node.getAttribute("href");
+      const label = content();
+      if (!href || href.startsWith("streamdown:")) return label;
+      return label === href ? href : `[${label}](${href})`;
+    }
+    case "IMG": {
+      const src = node.getAttribute("src");
+      return src ? `![${node.getAttribute("alt") ?? ""}](${src})` : "";
+    }
+    case "INPUT":
+      return "";
+    case "H1":
+    case "H2":
+    case "H3":
+    case "H4":
+    case "H5":
+    case "H6":
+      return `${"#".repeat(Number(node.tagName[1]))} ${content().trim()}\n\n`;
+    case "P":
+      return `${content().trim()}\n\n`;
+    case "HR":
+      return "---\n\n";
+    case "UL":
+    case "OL":
+      return list(node);
+    case "TABLE":
+      return table(node);
+    case "BLOCKQUOTE":
+      return `${prefixLines(children(node).trim(), "> ", "> ")}\n\n`;
+    default:
+      if (node.getAttribute("role") === "note" && node.dataset.alert) {
+        return `${prefixLines(children(node).trim().replace(/^(\[![A-Z]+\])\s*/, "$1\n"), "> ", "> ")}\n\n`;
+      }
+      return content();
+  }
+}
+
+/** Markdown for a DOM fragment, with blank-line runs collapsed. */
+export function fragmentToMarkdown(fragment: DocumentFragment | HTMLElement): string {
+  return children(fragment)
+    .replace(/[ \t]+\n/g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+/**
+ * `onCopy` for a rendered markdown root. A selection inside one code block is
+ * left to the browser, which already copies it verbatim.
+ */
+export function copyMarkdownSelection(event: ClipboardEvent<HTMLElement>): void {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  const ancestor = range.commonAncestorContainer;
+  const container = isElement(ancestor) ? ancestor : ancestor.parentElement;
+  if (container?.closest("pre")) return;
+
+  const fragment = range.cloneContents();
+  const markdown = fragmentToMarkdown(fragment);
+  if (markdown === "") return;
+
+  const html = document.createElement("div");
+  html.append(fragment);
+  event.clipboardData.setData("text/plain", markdown);
+  event.clipboardData.setData("text/html", html.innerHTML);
+  event.preventDefault();
+}