From 84b9b156a99fbc1ca36a6aaa94207b2d4e95c27f Mon Sep 17 00:00:00 2001
From: Brandon Dohman <540905+productengineered@users.noreply.github.com>
Date: Wed, 9 Sep 2026 22:05:01 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Copy=20as=20Rich=20Text=20=E2=80=94=20t?=
 =?UTF-8?q?he=20rendered=20document,=20ready=20to=20paste?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Export writes a file that carries its own stylesheet. A paste carries
nothing: every destination throws away <style> blocks and class names, so
the formatting has to ride on the elements. ⌥⌘C (File menu, ⌘K) puts the
document on the clipboard as HTML with the styles inlined, and the
markdown itself as the plain-text flavor.

What travels is deliberately narrow — the things a paste target cannot
infer. It already knows what a heading, a list, a link, and bold text
are, and it will style them like the rest of its own document, which is
what anyone pasting wants. It does not know that a table has hairline
borders and columns proportioned the way a drag left them, that a fence
is a tinted block of mono, that a quote is filled, or what color a
keyword is. Those are inlined, from the same tokens the app styles with,
resolved through Shiki's indirection to literal colors. Always the light
palette, for the reason print gives: paper is paper even from a
dark-mode machine, and a paste lands on someone else's white page.

Three things a destination would otherwise lose: a disabled checkbox is
inert markup most of them drop, so it becomes ☐/☑, which is text and
survives anything; a relative image src means nothing once pasted, so
local images travel as data URIs under a budget and fall back to file
URLs past it; and class names are stripped, because `shiki` landing in a
CMS that styles that name would mean something wrong.

It works on the rendered HTML rather than the tree, because the
highlighter's markup exists only in the output string — a plugin added
after it still sees a bare <pre><code>. THE pipeline is untouched, and
the golden fixtures with it.
---
 src/main/export/rich-text.test.ts | 237 +++++++++++++++++++++
 src/main/export/rich-text.ts      | 331 ++++++++++++++++++++++++++++++
 src/main/ipc.ts                   |   4 +
 src/main/menu.ts                  |   8 +
 src/main/session.ts               |  16 ++
 src/preload/index.ts              |   1 +
 src/renderer/help.md              |   4 +
 src/renderer/main.ts              |  15 ++
 src/shared/types.ts               |   5 +
 9 files changed, 621 insertions(+)
 create mode 100644 src/main/export/rich-text.test.ts
 create mode 100644 src/main/export/rich-text.ts

diff --git a/src/main/export/rich-text.test.ts b/src/main/export/rich-text.test.ts
new file mode 100644
index 0000000..b871a92
--- /dev/null
+++ b/src/main/export/rich-text.test.ts
@@ -0,0 +1,237 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+import {
+  buildRichText,
+  checkboxesToGlyphs,
+  cleanDeclarations,
+  embedImages,
+  inlineStyles,
+  insertColgroups,
+  parseTokens,
+  resolveVars,
+  stripPositions
+} from './rich-text'
+
+/* The sheets themselves: a ?raw import is stubbed away under vitest, and
+ * only the real palette proves the copy carries the app's own values. */
+const sheet = (path: string): string =>
+  readFileSync(new URL(`../../renderer/styles/${path}`, import.meta.url), 'utf8')
+const PALETTE = parseTokens(sheet('tokens.css'), sheet('themes/ledger.css'))
+
+describe('parseTokens — the app’s own values, not a second palette', () => {
+  it('reads declarations and ignores comments', () => {
+    const tokens = parseTokens(`/* --ink: #ffffff; */\n:root { --ink: #1a1d1b; --rule: #d6dad5; }`)
+    expect(tokens.get('ink')).toBe('#1a1d1b')
+    expect(tokens.get('rule')).toBe('#d6dad5')
+  })
+
+  it('a later sheet wins — the theme palette lands over the defaults', () => {
+    const tokens = parseTokens(`:root { --paper: #000; }`, `:root { --paper: #eff1ee; }`)
+    expect(tokens.get('paper')).toBe('#eff1ee')
+  })
+})
+
+describe('resolveVars — every var() becomes a literal', () => {
+  const tokens = parseTokens(
+    `:root { --ink: #1a1d1b; --shiki-token-comment: var(--ink-ghost); --ink-ghost: #9ba39c; }`
+  )
+
+  it('resolves a plain reference', () => {
+    expect(resolveVars('color: var(--ink)', tokens)).toBe('color: #1a1d1b')
+  })
+
+  it('follows a reference through another token', () => {
+    expect(resolveVars('color: var(--shiki-token-comment)', tokens)).toBe('color: #9ba39c')
+  })
+
+  it('uses the fallback when the token is unknown, and empties it when there is none', () => {
+    expect(resolveVars('color: var(--nope, #123456)', tokens)).toBe('color: #123456')
+    expect(resolveVars('background: var(--nope)', tokens)).toBe('background: ')
+  })
+
+  it('leaves var-free css alone', () => {
+    expect(resolveVars('padding: 0 0.15em', tokens)).toBe('padding: 0 0.15em')
+  })
+})
+
+describe('cleanDeclarations — no litter in the clipboard', () => {
+  it('drops a declaration whose value resolved to nothing', () => {
+    expect(cleanDeclarations('background: ; color: #1a1d1b')).toBe('color: #1a1d1b')
+  })
+
+  it('keeps order and normalizes spacing', () => {
+    expect(cleanDeclarations(' color: red ; padding: 0 ')).toBe('color: red; padding: 0')
+  })
+})
+
+describe('the finished HTML', () => {
+  const DOC = [
+    '# Title',
+    '',
+    'A paragraph with **bold**, `code`, and a [link](https://example.com).',
+    '',
+    '| ID | Note |',
+    '| ---- | -------------- |',
+    '| R01 | first |',
+    '',
+    '| L | C | R |',
+    '| :-- | :-: | --: |',
+    '| a | b | c |',
+    '',
+    '> quoted',
+    '',
+    '- [ ] todo',
+    '- [x] done',
+    '',
+    '```js',
+    'const x = 1 // note',
+    '```',
+    '',
+    '---',
+    ''
+  ].join('\n')
+
+  const built = buildRichText(DOC, null, PALETTE)
+
+  it('is one wrapped fragment — the platform states the encoding itself', async () => {
+    const { html } = await built
+    expect(html.startsWith('<div style="font-family:')).toBe(true)
+    expect(html.trimEnd().endsWith('</div>')).toBe(true)
+    expect(html).not.toContain('<!doctype')
+  })
+
+  it('carries no var(), no stylesheet, no class names, and no position machinery', async () => {
+    const { html } = await built
+    expect(html).not.toContain('var(')
+    expect(html).not.toContain('<style')
+    expect(html).not.toContain('data-pos')
+    // A stray `shiki` or `task-list-item` would mean something wrong in a
+    // CMS that styles those names.
+    expect(html).not.toContain('class=')
+  })
+
+  it('styles the things a paste target cannot infer', async () => {
+    const { html } = await built
+    // Table: collapsed hairlines from the rule token, header fill.
+    expect(html).toContain('border-collapse: collapse')
+    expect(html).toContain('border: 1px solid #d6dad5')
+    expect(html).toMatch(/<th[^>]+background: #e5e8e4/)
+    // Fence and inline code: tinted, mono.
+    expect(html).toMatch(/<pre[^>]+background: #e5e8e4/)
+    expect(html).toMatch(/<code[^>]+font-family: 'Ioskeley Mono'/)
+    // Quote fill, rule hairline, image sizing rule for later.
+    expect(html).toMatch(/<blockquote[^>]+background: #e5e8e4/)
+    expect(html).toMatch(/<hr[^>]+border-top: 1px solid #d6dad5/)
+  })
+
+  it('leaves what a destination already knows alone', async () => {
+    const { html } = await built
+    // Headings keep the serif signature but never a size — the
+    // destination's own heading scale should win.
+    expect(html).toMatch(/<h1[^>]+font-family: 'Fraunces Variable'/)
+    expect(html).not.toMatch(/<h1[^>]+font-size/)
+    // Paragraphs, links, and emphasis carry nothing at all.
+    expect(html).toContain('<p>A paragraph with <strong>bold</strong>')
+    expect(html).toContain('<a href="https://example.com">link</a>')
+  })
+
+  it('keeps GFM column alignment, which a style would otherwise override', async () => {
+    const { html } = await built
+    expect(html).toMatch(/<td[^>]+text-align: center[^>]*>b<\/td>/)
+    expect(html).toMatch(/<td[^>]+text-align: right[^>]*>c<\/td>/)
+    expect(html).toMatch(/<td[^>]+text-align: left[^>]*>a<\/td>/)
+  })
+
+  it('proportions columns the way the source does, so a resized column travels', async () => {
+    const { html } = await built
+    // 4-wide ID against a 14-wide Note: the delimiter row's dash runs.
+    expect(html).toContain('<colgroup><col style="width: 22.222%"><col style="width: 77.778%">')
+  })
+
+  it('turns task checkboxes into glyphs that survive any destination', async () => {
+    const { html } = await built
+    expect(html).not.toContain('<input')
+    expect(html).toContain('☐ todo')
+    expect(html).toContain('☑ done')
+    expect(html).toMatch(/<li[^>]+list-style: none/)
+  })
+
+  it('resolves Shiki token colors to literals', async () => {
+    const { html } = await built
+    // The comment token points at --ink-ghost through the theme.
+    expect(html).toMatch(/<span style="color:\s*#9ba39c">\s*\/\/ note<\/span>/)
+  })
+
+  it('hands plain-text destinations the markdown itself', async () => {
+    const { text } = await built
+    expect(text).toBe(DOC)
+  })
+})
+
+describe('the passes over finished HTML, on their own', () => {
+  it('insertColgroups: no source table, no colgroup', () => {
+    const html = '<table data-pos="9999"><tr><td>x</td></tr></table>'
+    expect(insertColgroups(html, 'no table here')).toBe(html)
+  })
+
+  it('stripPositions leaves other data attributes alone', () => {
+    expect(stripPositions('<p data-pos="3" data-footnotes>x</p>')).toBe('<p data-footnotes>x</p>')
+  })
+
+  it('checkboxesToGlyphs handles both states and nothing else', () => {
+    expect(checkboxesToGlyphs('<input type="checkbox" disabled> a')).toBe('☐ a')
+    expect(checkboxesToGlyphs('<input type="checkbox" checked disabled> b')).toBe('☑ b')
+    expect(checkboxesToGlyphs('<input type="text">')).toBe('<input type="text">')
+  })
+})
+
+describe('inlineStyles — the rewrite of our own markup', () => {
+  it('a > inside an attribute value does not end the tag early', () => {
+    const out = inlineStyles('<img src="a.png" alt="a > b"><hr>', PALETTE)
+    expect(out).toContain('alt="a > b"')
+    expect(out).toMatch(/<hr[^>]+border-top/)
+  })
+
+  it('code is fence code only inside a fence, and inline code after it', () => {
+    const out = inlineStyles('<pre><code>x</code></pre><p><code>y</code></p>', PALETTE)
+    expect(out).toMatch(/<pre[^>]+padding: 0\.8em 1em/)
+    expect(out).toMatch(/<code style="background: none[^"]*">x/)
+    expect(out).toMatch(/<code style="font-family[^"]*background: #e5e8e4[^"]*">y/)
+  })
+
+  it('keeps ids, which footnote links are built on', () => {
+    expect(inlineStyles('<h2 id="notes" class="sr-only">Footnotes</h2>', PALETTE)).toContain(
+      'id="notes"'
+    )
+  })
+
+  it('leaves closing tags alone', () => {
+    expect(inlineStyles('</table>', PALETTE)).toBe('</table>')
+  })
+})
+
+describe('embedImages', () => {
+  it('leaves remote and data sources alone', async () => {
+    const html = '<img src="https://example.com/a.png"><img src="data:image/png;base64,AA">'
+    expect(await embedImages(html, '/tmp')).toBe(html)
+  })
+
+  it('an unreadable local image still gets an absolute file url', async () => {
+    const out = await embedImages('<img src="missing.png">', '/tmp/nowhere')
+    expect(out).toContain('src="file:///tmp/nowhere/missing.png"')
+  })
+
+  it('without a document folder a relative source is left as it is', async () => {
+    expect(await embedImages('<img src="pic.png">', null)).toBe('<img src="pic.png">')
+  })
+})
+
+describe('the palette the copy is built from', () => {
+  it('resolves the app’s own tokens, so a copy is never a second theme', () => {
+    expect(PALETTE.get('rule')).toBe('#d6dad5')
+    expect(PALETTE.get('paper-sunk')).toBe('#e5e8e4')
+    // Shiki's tokens point through the palette — that indirection is what
+    // makes a theme restyle code for free, and it has to survive the copy.
+    expect(resolveVars('var(--shiki-token-comment)', PALETTE)).toBe('#9ba39c')
+  })
+})
diff --git a/src/main/export/rich-text.ts b/src/main/export/rich-text.ts
new file mode 100644
index 0000000..c5d2598
--- /dev/null
+++ b/src/main/export/rich-text.ts
@@ -0,0 +1,331 @@
+import { readFile } from 'node:fs/promises'
+import { extname, isAbsolute, resolve } from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { columnDisplayWidth, parseTable, tableSourceAt } from '../../renderer/editor/table-model'
+import ledgerCss from '../../renderer/styles/themes/ledger.css?raw'
+import tokensCss from '../../renderer/styles/tokens.css?raw'
+import { renderMarkdown } from '../../shared/markdown'
+
+/* Copy as Rich Text: the document as the preview renders it, on the
+ * clipboard, ready to paste into Google Docs, Word, or a CMS with its
+ * formatting intact. An export writes a file that carries its own
+ * stylesheet; a paste carries nothing — every destination throws away
+ * <style> blocks and class names — so each declaration has to ride on the
+ * element itself.
+ *
+ * What gets inlined is deliberately narrow: the things a paste target
+ * cannot infer. It already knows what a heading, a list, a link, and bold
+ * text are, and it will style them like the rest of its own document,
+ * which is what anyone pasting wants. It does not know that a table has
+ * hairline borders and proportioned columns, that a fence is a tinted
+ * block of mono, that a quote is filled, or what color a keyword is.
+ * Those travel.
+ *
+ * Always the light palette, for the reason print gives in export.css:
+ * paper is paper even from a dark-mode machine, and a paste lands on
+ * someone else's white page.
+ *
+ * This works on the rendered HTML rather than the tree THE pipeline
+ * builds, because the highlighter's markup — the spans this has to
+ * recolor — exists only in the output string: a plugin added after it
+ * still sees a bare <pre><code>. The markup being rewritten is our own,
+ * from one generator, so its shape is known. */
+
+/* ---- Tokens: the app's own values, not a second palette (CLAUDE.md — no
+ * hardcoded colors here or anywhere). Later sheets win, so the Ledger
+ * palette lands over the defaults. ---- */
+
+export function parseTokens(...sheets: string[]): Map<string, string> {
+  const tokens = new Map<string, string>()
+  for (const sheet of sheets) {
+    const bare = sheet.replace(/\/\*[\s\S]*?\*\//g, '')
+    for (const match of bare.matchAll(/--([\w-]+)\s*:\s*([^;]+);/g)) {
+      const [, name, value] = match
+      if (name !== undefined && value !== undefined) tokens.set(name, value.trim())
+    }
+  }
+  return tokens
+}
+
+/* The default palette, straight from the sheets the app styles with.
+ * Injectable because a test can't see a ?raw import — vitest stubs CSS —
+ * and a palette resolved from the real files is the only thing worth
+ * asserting against. */
+export const TOKENS = parseTokens(tokensCss, ledgerCss)
+
+/* Resolve every var() to a literal, including nested ones — a Shiki token
+ * color points at a palette color, which is the whole reason a theme
+ * restyles code for free. A balanced-paren scan, not a regex: fallbacks
+ * carry commas and parens of their own. */
+export function resolveVars(css: string, tokens: Map<string, string>, depth = 0): string {
+  if (depth > 8 || !css.includes('var(')) return css
+  let out = ''
+  let i = 0
+  while (i < css.length) {
+    const at = css.indexOf('var(', i)
+    if (at === -1) {
+      out += css.slice(i)
+      break
+    }
+    out += css.slice(i, at)
+    let open = 0
+    let j = at + 3
+    for (; j < css.length; j++) {
+      if (css[j] === '(') open++
+      else if (css[j] === ')' && --open === 0) break
+    }
+    const inner = css.slice(at + 4, j)
+    const comma = inner.indexOf(',')
+    const name = (comma === -1 ? inner : inner.slice(0, comma)).trim().replace(/^--/, '')
+    const fallback = comma === -1 ? '' : inner.slice(comma + 1).trim()
+    out += resolveVars(tokens.get(name) ?? fallback, tokens, depth + 1)
+    i = j + 1
+  }
+  return out
+}
+
+/* Drop declarations left without a value — a var() that resolved to
+ * nothing, as Shiki's background does against a palette that names no such
+ * token. Invalid CSS is ignored by every renderer anyway; carrying it in
+ * the clipboard is just litter. */
+export function cleanDeclarations(css: string): string {
+  return css
+    .split(';')
+    .map((part) => part.trim())
+    .filter((part) => {
+      const colon = part.indexOf(':')
+      return colon > 0 && part.slice(colon + 1).trim() !== ''
+    })
+    .join('; ')
+}
+
+/* ---- What each element carries. Written in tokens, resolved once. ---- */
+
+const DECLARATIONS: Record<string, string> = {
+  /* Headings: the typographic signature is worth carrying, the size is
+   * not — a destination's own heading scale should win over ours. */
+  heading: 'font-family: var(--font-heading); font-weight: var(--weight-heading)',
+
+  code: [
+    'font-family: var(--font-code)',
+    'font-size: var(--font-size-code)',
+    'background: var(--paper-sunk)',
+    'border-radius: var(--radius-inline)',
+    'padding: 0 0.15em'
+  ].join('; '),
+  pre: [
+    'font-family: var(--font-code)',
+    'font-size: var(--font-size-code)',
+    'background: var(--paper-sunk)',
+    'border-radius: var(--radius-ui)',
+    'padding: 0.8em 1em',
+    // Implied by <pre>, spelled out for a destination that unwraps it.
+    'white-space: pre',
+    'overflow-x: auto'
+  ].join('; '),
+  'pre code': 'background: none; padding: 0; font-size: 1em',
+
+  blockquote: [
+    'margin: var(--space-paragraph) 0',
+    'padding: 0.4em 1em',
+    'background: var(--paper-sunk)',
+    'color: var(--ink-soft)',
+    'border-radius: var(--radius-inline)'
+  ].join('; '),
+
+  table: 'border-collapse: collapse; width: 100%; margin: var(--space-paragraph) 0',
+  cell: 'border: 1px solid var(--rule); padding: var(--pad-table-cell)',
+  th: 'background: var(--paper-sunk); font-weight: var(--weight-ui)',
+
+  hr: 'border: none; border-top: 1px solid var(--rule); margin: 2em 0',
+  img: 'max-width: 100%',
+  /* The checkbox becomes a glyph below; without this the item would carry
+   * a bullet as well. */
+  task: 'list-style: none',
+  footnotes: 'margin-top: 3em; color: var(--ink-soft); font-size: var(--font-size-ui)'
+}
+
+type Styles = Map<string, string>
+
+function stylesFor(tokens: Map<string, string>): Styles {
+  return new Map(
+    Object.entries(DECLARATIONS).map(([key, value]) => [
+      key,
+      cleanDeclarations(resolveVars(value, tokens))
+    ])
+  )
+}
+
+const HEADINGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+
+const attribute = (attrs: string, name: string): string | null => {
+  const match = new RegExp(`\\s${name}="([^"]*)"`, 'i').exec(attrs)
+  return match?.[1] ?? null
+}
+
+/* The declarations for one opening tag, given its attributes and whether
+ * it sits inside a fence. */
+function declarationsFor(
+  tag: string,
+  attrs: string,
+  insidePre: boolean,
+  styles: Styles
+): string | undefined {
+  if (HEADINGS.has(tag)) return styles.get('heading')
+  if (tag === 'code') return styles.get(insidePre ? 'pre code' : 'code')
+  if (tag === 'th' || tag === 'td') {
+    /* GFM alignment arrives as the align attribute, which any text-align
+     * we set would override — so it becomes part of the style instead. */
+    const align = attribute(attrs, 'align') ?? 'left'
+    const own = tag === 'th' ? `${styles.get('cell')}; ${styles.get('th')}` : styles.get('cell')
+    return `${own}; text-align: ${align}`
+  }
+  const classes = (attribute(attrs, 'class') ?? '').split(/\s+/)
+  if (tag === 'li' && classes.includes('task-list-item')) return styles.get('task')
+  if (tag === 'section' && classes.includes('footnotes')) return styles.get('footnotes')
+  return styles.get(tag)
+}
+
+/* Attributes are matched quote-aware: a > inside alt text or a style value
+ * must not end the tag early. */
+const TAG = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)((?:"[^"]*"|'[^']*'|[^>"'])*)>/g
+
+/* Style every element, and strip the class names on the way out: they mean
+ * nothing without our stylesheet, and a name like `shiki` landing in a CMS
+ * that happens to style it would mean something wrong. Ids stay — footnote
+ * links are built on them. */
+export function inlineStyles(html: string, tokens: Map<string, string> = TOKENS): string {
+  const styles = stylesFor(tokens)
+  let insidePre = false
+  return html.replace(TAG, (whole, closing: string, rawTag: string, attrs: string) => {
+    const tag = rawTag.toLowerCase()
+    if (closing !== '') {
+      if (tag === 'pre') insidePre = false
+      return whole
+    }
+    const own = declarationsFor(tag, attrs, insidePre, styles)
+    if (tag === 'pre') insidePre = true
+    const existing = /\sstyle="([^"]*)"/i.exec(attrs)
+    /* Ours first: what the document itself produced — a Shiki token
+     * color — has to win over the tag's defaults. */
+    const merged = cleanDeclarations(
+      [own ?? '', resolveVars(existing?.[1] ?? '', tokens)].filter(Boolean).join('; ')
+    )
+    let rest = attrs
+    if (existing) rest = rest.replace(existing[0], '')
+    rest = rest.replace(/\sclass="[^"]*"/gi, '')
+    return `<${tag}${rest}${merged === '' ? '' : ` style="${merged}"`}>`
+  })
+}
+
+/* ---- Passes that need the document's source or a whole element ---- */
+
+/* A table's column proportions live in its source, not its markup — the
+ * delimiter row's dash runs, where a drag-to-resize leaves them. The same
+ * three functions the preview sizes tables with, so a pasted table is
+ * proportioned like the page it came from. */
+export function insertColgroups(html: string, markdown: string): string {
+  return html.replace(/<table\b[^>]*\bdata-pos="(\d+)"[^>]*>/g, (tag, pos: string) => {
+    const source = tableSourceAt(markdown, Number(pos))
+    if (!source) return tag
+    const model = parseTable(source.text)
+    const weights = model.header.map((_, i) => columnDisplayWidth(model, i))
+    const total = weights.reduce((a, b) => a + b, 0)
+    if (weights.length === 0 || total <= 0) return tag
+    const cols = weights
+      .map((weight) => `<col style="width: ${((weight / total) * 100).toFixed(3)}%">`)
+      .join('')
+    return `${tag}<colgroup>${cols}</colgroup>`
+  })
+}
+
+/* Position stamps exist for the colgroups above; nothing downstream wants
+ * them, and a paste should carry no machinery. */
+export function stripPositions(html: string): string {
+  return html.replace(/ data-pos="\d+"/g, '')
+}
+
+/* A disabled checkbox is inert markup that most destinations drop
+ * entirely, taking the done/not-done with it. A glyph is text, and text
+ * survives anything. */
+export function checkboxesToGlyphs(html: string): string {
+  return html
+    .replace(/<input type="checkbox" checked disabled>/g, '☑')
+    .replace(/<input type="checkbox" disabled>/g, '☐')
+}
+
+const IMAGE_TYPES: Record<string, string> = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+  '.avif': 'image/avif',
+  '.bmp': 'image/bmp',
+  '.svg': 'image/svg+xml'
+}
+
+/* Total encoded image bytes one copy will carry. A document of screenshots
+ * would otherwise put tens of megabytes on the clipboard; past the budget
+ * the rest fall back to file URLs, which the apps that can read local
+ * files still resolve. */
+const IMAGE_BUDGET = 8 * 1024 * 1024
+
+/* A relative src means nothing once pasted — the destination has no idea
+ * which folder the document lived in. Local images travel as data URIs,
+ * which Docs and most CMSes accept and upload; anything too big for the
+ * budget becomes an absolute file URL. Remote images are portable already. */
+export async function embedImages(html: string, docDir: string | null): Promise<string> {
+  const sources = new Set(
+    [...html.matchAll(/<img\b[^>]*?\ssrc="([^"]*)"/g)].map((match) => match[1] ?? '')
+  )
+  let budget = IMAGE_BUDGET
+  let out = html
+  for (const src of sources) {
+    if (src === '' || /^(?:data|https?|file):/i.test(src)) continue
+    const decoded = src.replace(/&amp;/g, '&')
+    const path = isAbsolute(decoded) ? decoded : docDir ? resolve(docDir, decoded) : null
+    if (path === null) continue
+    let replacement = pathToFileURL(path).toString()
+    const mime = IMAGE_TYPES[extname(path).toLowerCase()]
+    if (mime) {
+      try {
+        const encoded = (await readFile(path)).toString('base64')
+        if (encoded.length <= budget) {
+          budget -= encoded.length
+          replacement = `data:${mime};base64,${encoded}`
+        }
+      } catch {
+        // Unreadable or gone: the file URL is still the better guess.
+      }
+    }
+    out = out.split(`src="${src}"`).join(`src="${replacement}"`)
+  }
+  return out
+}
+
+export interface RichText {
+  /* text/html — what a rich destination pastes. */
+  html: string
+  /* text/plain — the markdown itself, the honest source for anywhere that
+   * takes only text. */
+  text: string
+}
+
+export async function buildRichText(
+  markdown: string,
+  docDir: string | null,
+  tokens: Map<string, string> = TOKENS
+): Promise<RichText> {
+  const rendered = await renderMarkdown(markdown, { sourcePositions: true })
+  const withColumns = stripPositions(insertColgroups(rendered, markdown))
+  const styled = checkboxesToGlyphs(inlineStyles(withColumns, tokens))
+  const withImages = await embedImages(styled, docDir)
+  /* A fragment under one wrapper, which is what every other app puts on
+   * the pasteboard: the platform prepends its own <meta charset> when the
+   * HTML flavor is written, and a doctype arriving after that meta would
+   * be malformed. The wrapper carries the text font — the one inherited
+   * thing worth having — and nothing that fixes a size. */
+  const font = cleanDeclarations(resolveVars('font-family: var(--font-body)', tokens))
+  return { html: `<div style="${font}">\n${withImages}\n</div>`, text: markdown }
+}
diff --git a/src/main/ipc.ts b/src/main/ipc.ts
index c79ab20..406faed 100644
--- a/src/main/ipc.ts
+++ b/src/main/ipc.ts
@@ -119,6 +119,10 @@ export function registerIpc(
       void sessionFor(e.sender.id)?.openPath(path)
     }
   })
+  ipcMain.handle(
+    IPC.copyRichText,
+    (e, docId: number) => sessionFor(e.sender.id)?.tab(docId)?.copyRichText() ?? false
+  )
   ipcMain.handle(IPC.updateCheck, () => updates.checkNow())
   ipcMain.handle(IPC.loadCustomTheme, async () => {
     const result = await dialog.showOpenDialog({
diff --git a/src/main/menu.ts b/src/main/menu.ts
index 128581a..553b030 100644
--- a/src/main/menu.ts
+++ b/src/main/menu.ts
@@ -88,6 +88,14 @@ export function installMenu(actions: MenuActions): void {
         { label: 'As PDF…', click: () => void actions.focused()?.activeTab?.exportPdf() }
       ]
     },
+    {
+      /* Beside Export, not in Edit: it is the same act — the rendered
+       * document, somewhere else — and Edit's copy belongs to the
+       * selection. ⌥⌘C because ⇧⌘C is inline code. */
+      label: 'Copy as Rich Text',
+      accelerator: 'Alt+CmdOrCtrl+C',
+      click: () => sendCommand('copy-rich-text')
+    },
     {
       label: 'Print…',
       accelerator: 'CmdOrCtrl+P',
diff --git a/src/main/session.ts b/src/main/session.ts
index 8f0caf5..ffd4c77 100644
--- a/src/main/session.ts
+++ b/src/main/session.ts
@@ -14,6 +14,7 @@ import {
 } from '../shared/types'
 import { renderExportHtml } from './export/html'
 import { printDocument, renderPdf } from './export/pdf'
+import { buildRichText } from './export/rich-text'
 import { closedTabs } from './closed-tabs'
 import { assetName, atomicWriteFile, readTextFile, watchFile } from './files'
 import { docKey, listSnapshots, pruneSnapshots, readSnapshot, writeSnapshot } from './history-store'
@@ -449,6 +450,21 @@ export class TabSession {
     if (this.path) clipboard.writeText(this.path)
   }
 
+  /* The document as the preview renders it, on the clipboard: HTML with
+   * every style inlined for a paste into Docs, Word, or a CMS, and the
+   * markdown itself as the plain-text flavor. Boolean rather than a
+   * dialog — a copy that failed is worth one toast, not a modal. */
+  async copyRichText(): Promise<boolean> {
+    try {
+      const content = await this.getRendererContent()
+      const rich = await buildRichText(content, this.path ? dirname(this.path) : null)
+      clipboard.write({ text: rich.text, html: rich.html })
+      return true
+    } catch {
+      return false
+    }
+  }
+
   private async pickExportPath(label: string, ext: string): Promise<string | null> {
     const result = await dialog.showSaveDialog(this.win, {
       defaultPath: join(
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 608a6a4..d3c9b06 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -36,6 +36,7 @@ const api: FoolscapApi = {
   recentFiles: () => ipcRenderer.invoke(IPC.recentFiles),
   openRecent: (path: string) => ipcRenderer.send(IPC.openRecent, path),
   loadCustomTheme: (): Promise<string | null> => ipcRenderer.invoke(IPC.loadCustomTheme),
+  copyRichText: (docId) => ipcRenderer.invoke(IPC.copyRichText, docId),
   tabActivate: (docId) => ipcRenderer.send(IPC.tabActivate, docId),
   tabClose: (docId) => ipcRenderer.send(IPC.tabClose, docId),
   tabReorder: (docId, toIndex) => ipcRenderer.send(IPC.tabReorder, docId, toIndex),
diff --git a/src/renderer/help.md b/src/renderer/help.md
index 8637ec2..fa7ff5d 100644
--- a/src/renderer/help.md
+++ b/src/renderer/help.md
@@ -88,6 +88,10 @@ Double-click anywhere to drop into the editor exactly there. `⌘E` or
   and `⌘Z` still walks yesterday's edits.
 - **So does your place.** A file opens where you left it — the same
   passage on the page, the same line in the editor — however long ago.
+- **Copy as Rich Text** (`⌥⌘C`, File menu, `⌘K`) puts the document on the
+  clipboard the way preview renders it — paste into Google Docs, Word, or
+  a CMS and the tables, code, and quotes arrive formatted. Plain-text
+  destinations get the markdown itself.
 - **Reveal in Finder** and **Copy Path** live in the File menu and `⌘K`;
   the window has no proxy icon to drag, so these are the way out.
 
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 140f3e6..282f06b 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -408,6 +408,7 @@ window.foolscap.onCommand((command) => {
   else if (command === 'text-reset') applyTextSize(null)
   else if (command === 'open-settings') settings.toggle()
   else if (command === 'check-updates') checkUpdatesNow()
+  else if (command === 'copy-rich-text') void copyRichText()
   else if (command === 'format-bold') formatInEditor(toggleBold)
   else if (command === 'format-italic') formatInEditor(toggleItalic)
   else if (command === 'format-strike') formatInEditor(toggleStrikethrough)
@@ -427,6 +428,14 @@ function withPath(run: (path: string) => void): void {
   else showToast('Save the document first — an untitled draft has no file yet.')
 }
 
+/* Main builds and writes the clipboard; the toast belongs here, where
+ * every other piece of feedback lives. */
+async function copyRichText(): Promise<void> {
+  if (displayedId === null) return
+  const copied = await window.foolscap.copyRichText(displayedId)
+  showToast(copied ? 'Copied with formatting.' : 'That copy could not be built.')
+}
+
 const paletteCommands = (): PaletteCommand[] => [
   { id: 'new-tab', title: 'New Tab', hint: `${mod}T`, run: () => window.foolscap.exec('tab-new') },
   { id: 'close-tab', title: 'Close Tab', hint: `${mod}W`, run: () => window.foolscap.exec('tab-close') },
@@ -452,6 +461,12 @@ const paletteCommands = (): PaletteCommand[] => [
         showToast('Path copied.')
       })
   },
+  {
+    id: 'copy-rich-text',
+    title: 'Copy as Rich Text',
+    hint: `⌥${mod}C`,
+    run: () => void copyRichText()
+  },
   {
     id: 'find',
     title: 'Find & Replace',
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 682d88a..59e0774 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -115,6 +115,7 @@ export type MenuCommand =
   | 'format-code'
   | 'format-link'
   | 'browse-versions'
+  | 'copy-rich-text'
 
 /* A new version, downloaded and verified by src/main/updater.ts — ready to
  * install the moment the app restarts. */
@@ -173,6 +174,7 @@ export const IPC = {
   recentFiles: 'files:recent',
   openRecent: 'file:open-recent',
   loadCustomTheme: 'theme:load-custom',
+  copyRichText: 'doc:copy-rich-text',
   tabActivate: 'tabs:activate',
   tabClose: 'tabs:close',
   tabReorder: 'tabs:reorder',
@@ -235,6 +237,9 @@ export interface FoolscapApi {
   openRecent(path: string): void
   /* Pick and read a custom theme css file; null if cancelled. */
   loadCustomTheme(): Promise<string | null>
+  /* Put the rendered document on the clipboard as rich text; false when
+   * the copy could not be built. */
+  copyRichText(docId: number): Promise<boolean>
   /* Tab intents — the renderer's bar clicks and drags. */
   tabActivate(docId: number): void
   tabClose(docId: number): void