feat(editor): copy selected SQL as rich text with highlighting

apps/desktop/src/lib/common/__tests__/clipboard.spec.ts

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { clipboardLineEndings, copyToClipboard, type ClipboardEnvironment } from "@/lib/common/clipboard";
+import { clipboardLineEndings, copyRichTextToClipboard, copyToClipboard, type ClipboardEnvironment } from "@/lib/common/clipboard";
 
 afterEach(() => {
   vi.restoreAllMocks();
@@ -87,3 +87,72 @@ describe("clipboardLineEndings", () => {
     expect(clipboardLineEndings("a\nb", "linux")).toBe("a\nb");
   });
 });
+
+class FakeBlob {
+  constructor(
+    readonly parts: readonly string[],
+    readonly options?: { type?: string },
+  ) {}
+}
+
+class FakeClipboardItem {
+  constructor(readonly items: Record<string, unknown>) {}
+}
+
+function richClipboardEnvironment(write = vi.fn().mockResolvedValue(undefined)) {
+  const env: ClipboardEnvironment = {
+    navigator: { clipboard: { write } },
+    ClipboardItem: FakeClipboardItem,
+    Blob: FakeBlob,
+  };
+  return { env, write };
+}
+
+describe("copyRichTextToClipboard", () => {
+  it("writes an html flavor and a plain-text flavor in one item", async () => {
+    const { env, write } = richClipboardEnvironment();
+
+    await copyRichTextToClipboard('<pre style="color:#000">SELECT</pre>', "SELECT", env);
+
+    expect(write).toHaveBeenCalledTimes(1);
+    const [items] = write.mock.calls[0]!;
+    const [item] = items as FakeClipboardItem[];
+    const flavors = item!.items;
+    expect(flavors["text/html"]).toMatchObject({ parts: ['<pre style="color:#000">SELECT</pre>'], options: { type: "text/html" } });
+    expect(flavors["text/plain"]).toMatchObject({ parts: ["SELECT"], options: { type: "text/plain" } });
+  });
+
+  it("normalizes the plain-text flavor to CRLF on Windows", async () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Mozilla/5.0 (Windows NT 10.0; Win64; x64)");
+    const { env, write } = richClipboardEnvironment();
+
+    await copyRichTextToClipboard("<pre>SELECT 1\nFROM t</pre>", "SELECT 1\nFROM t", env);
+
+    const [items] = write.mock.calls[0]!;
+    const [item] = items as FakeClipboardItem[];
+    expect(item!.items["text/html"]).toMatchObject({ parts: ["<pre>SELECT 1\nFROM t</pre>"] });
+    expect(item!.items["text/plain"]).toMatchObject({ parts: ["SELECT 1\r\nFROM t"] });
+  });
+
+  it("falls back to plain text when the async clipboard rejects the rich write", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    const env: ClipboardEnvironment = {
+      navigator: { clipboard: { write: vi.fn().mockRejectedValue(new Error("denied")), writeText } },
+      ClipboardItem: FakeClipboardItem,
+      Blob: FakeBlob,
+    };
+
+    await copyRichTextToClipboard("<pre>SELECT</pre>", "SELECT", env);
+
+    expect(writeText).toHaveBeenCalledWith("SELECT");
+  });
+
+  it("falls back to the legacy copy path when no rich clipboard api exists", async () => {
+    const { env, textarea } = legacyClipboardEnvironment();
+
+    await copyRichTextToClipboard("<pre>SELECT 1;</pre>", "SELECT 1;", env);
+
+    expect(textarea.value).toBe("SELECT 1;");
+    expect(env.document?.execCommand).toHaveBeenCalledWith("copy");
+  });
+});

apps/desktop/src/lib/common/clipboard.ts

@@ -4,6 +4,7 @@ import { getPlatform, type Platform } from "@/lib/backend/platform";
 interface ClipboardApi {
   readText?: () => Promise<string> | string;
   writeText?: (text: string) => Promise<void> | void;
+  write?: (items: readonly unknown[]) => Promise<void> | void;
 }
 
 interface ClipboardNavigator {
@@ -38,9 +39,17 @@ interface ClipboardDocument {
   execCommand?(command: string): boolean;
 }
 
+/** Structural stand-ins for the DOM constructors used by the rich-text path. */
+type ClipboardItemConstructor = new (items: Record<string, unknown>) => unknown;
+type ClipboardBlobConstructor = new (parts: readonly string[], options?: { type?: string }) => unknown;
+
 export interface ClipboardEnvironment {
   navigator?: ClipboardNavigator;
   document?: ClipboardDocument;
+  /** Injected for tests; resolves from `globalThis` in the app. */
+  ClipboardItem?: ClipboardItemConstructor;
+  /** Injected for tests; resolves from `globalThis` in the app. */
+  Blob?: ClipboardBlobConstructor;
 }
 
 /**
@@ -202,3 +211,51 @@ export async function copyToClipboard(text: string, env: ClipboardEnvironment =
     container.removeChild(textarea);
   }
 }
+
+/**
+ * Write both an HTML flavor and a plain-text flavor to the system clipboard.
+ *
+ * Rich-text targets (email clients, Word, chat apps) pick up `text/html` and
+ * keep the formatting, while plain-text targets fall back to `text` — so the
+ * same copy works everywhere.
+ *
+ * Order of attempts:
+ * 1. Tauri `clipboard-manager` `writeHtml`, whose `altText` argument is the
+ *    plain-text flavor.
+ * 2. Web `navigator.clipboard.write` with a two-flavor `ClipboardItem`.
+ * 3. Plain text via {@link copyToClipboard}. Rich writes need a secure
+ *    context, and a non-secure web deployment should still copy something
+ *    rather than fail.
+ */
+export async function copyRichTextToClipboard(html: string, text: string, env: ClipboardEnvironment = globalThis as unknown as ClipboardEnvironment): Promise<void> {
+  text = clipboardLineEndings(text);
+  if (isTauriRuntime(env as unknown as Record<string, unknown>)) {
+    try {
+      const { writeHtml } = await import("@tauri-apps/plugin-clipboard-manager");
+      await writeHtml(html, text);
+      recordClipboardWrite();
+      return;
+    } catch {
+      // Fall through to the Web Clipboard rich-text path.
+    }
+  }
+
+  try {
+    const ClipboardItem = env.ClipboardItem;
+    const Blob = env.Blob;
+    if (env.navigator?.clipboard?.write && typeof ClipboardItem === "function" && typeof Blob === "function") {
+      await env.navigator.clipboard.write([
+        new ClipboardItem({
+          "text/html": new Blob([html], { type: "text/html" }),
+          "text/plain": new Blob([text], { type: "text/plain" }),
+        }),
+      ]);
+      recordClipboardWrite();
+      return;
+    }
+  } catch {
+    // Fall through to the plain-text path so the copy still succeeds.
+  }
+
+  await copyToClipboard(text, env);
+}

apps/desktop/src/lib/sql/__tests__/sqlRichText.spec.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/common/clipboard", () => ({
+  copyRichTextToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+import { copyRichTextToClipboard } from "@/lib/common/clipboard";
+import { copySqlAsRichText, renderSqlRichTextHtml } from "@/lib/sql/sqlRichText";
+
+describe("renderSqlRichTextHtml", () => {
+  it("emits token colors as inline styles inside a single pre", async () => {
+    const html = await renderSqlRichTextHtml("SELECT id FROM users;");
+
+    expect(html.startsWith('<pre style="')).toBe(true);
+    expect(html.endsWith("</pre>")).toBe(true);
+    expect(html).toContain('<span style="color:');
+    expect(html).toContain("SELECT");
+    expect(html).toContain("users");
+  });
+
+  it("carries no class attributes or style blocks that mail clients would strip", async () => {
+    const html = await renderSqlRichTextHtml("SELECT id FROM users WHERE name = 'ada';");
+
+    expect(html).not.toContain("class=");
+    expect(html).not.toContain("<style");
+    expect(html).not.toContain("<code");
+  });
+
+  it("declares a monospace font and light colors on the pre itself", async () => {
+    const html = await renderSqlRichTextHtml("SELECT 1;");
+    const preStyle = html.slice(0, html.indexOf(">"));
+
+    expect(preStyle).toContain("font-family:");
+    expect(preStyle).toContain("monospace");
+    expect(preStyle).toContain("white-space:pre");
+    expect(preStyle).toContain("background-color:#ffffff");
+  });
+
+  it("escapes html-sensitive characters from the source", async () => {
+    const html = await renderSqlRichTextHtml("SELECT '<b>&</b>';");
+
+    expect(html).not.toContain("<b>");
+    expect(html).toContain("&lt;b&gt;");
+    expect(html).toContain("&amp;");
+  });
+
+  it("keeps one newline per source line break so indentation survives the paste", async () => {
+    const html = await renderSqlRichTextHtml("SELECT a,\n       b\nFROM t;");
+
+    expect(html.match(/\n/g)).toHaveLength(2);
+    expect(html).toContain("       b");
+  });
+
+  it("falls back to uncolored markup for sources too large to tokenize", async () => {
+    const html = await renderSqlRichTextHtml("SELECT 1;\n".repeat(25_000));
+
+    expect(html.startsWith('<pre style="')).toBe(true);
+    expect(html).not.toContain('<span style="color:');
+  });
+});
+
+describe("copySqlAsRichText", () => {
+  it("writes the highlighted html alongside the untouched plain text", async () => {
+    const sql = "SELECT id FROM users;";
+
+    await copySqlAsRichText(sql);
+
+    expect(copyRichTextToClipboard).toHaveBeenCalledTimes(1);
+    const [html, text] = vi.mocked(copyRichTextToClipboard).mock.calls[0]!;
+    expect(text).toBe(sql);
+    expect(html).toContain('<span style="color:');
+    expect(html).toContain("SELECT");
+  });
+});

apps/desktop/src/lib/sql/sqlHighlighter.ts

@@ -20,7 +20,7 @@ const SHIKI_THEMES = {
   },
 } as const;
 
-type ShikiHighlighter = Awaited<ReturnType<typeof import("shiki/core").createHighlighterCore>>;
+export type ShikiHighlighter = Awaited<ReturnType<typeof import("shiki/core").createHighlighterCore>>;
 type ShikiCodeHighlighter = Pick<ShikiHighlighter, "codeToHtml">;
 
 let highlighterPromise: Promise<ShikiHighlighter> | undefined;
@@ -68,7 +68,12 @@ export function escapeHtml(content: string): string {
   });
 }
 
-function getShikiSqlHighlighter(): Promise<ShikiHighlighter> {
+/**
+ * Lazily-initialized shared highlighter. Exported so other SQL renderers
+ * (e.g. rich-text copy) reuse one Shiki instance instead of loading the SQL
+ * grammar and themes a second time.
+ */
+export function getShikiSqlHighlighter(): Promise<ShikiHighlighter> {
   highlighterPromise ??= loadShikiSqlHighlighter();
   return highlighterPromise;
 }

apps/desktop/src/lib/sql/sqlRichText.ts

@@ -0,0 +1,100 @@
+/**
+ * Rich-text (HTML) rendering for SQL, used when copying code out of the editor
+ * into rich-text targets such as email clients, Word, or chat apps.
+ *
+ * Email clients strip `<style>` blocks and `class` attributes, so every token
+ * color is emitted as an inline `style` attribute and the whole snippet lives
+ * in a single `<pre>` that carries its own inline layout. Nothing here depends
+ * on a stylesheet surviving the paste.
+ *
+ * The light theme is forced regardless of the app appearance: some clients
+ * (Outlook's Word-based renderer in particular) drop `background-color`, and
+ * dark text on a white mail body stays readable where light-on-dark would not.
+ */
+import { copyRichTextToClipboard } from "@/lib/common/clipboard";
+import { escapeHtml, getShikiSqlHighlighter, type ShikiHighlighter } from "@/lib/sql/sqlHighlighter";
+
+const SQL_LANG = "sql";
+const RICH_TEXT_THEME = "github-light";
+
+const FOREGROUND = "#24292e";
+const BACKGROUND = "#ffffff";
+const BORDER = "#d0d7de";
+const FONT_STACK = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+
+/** Shiki `FontStyle` bitmask values. */
+const FONT_STYLE_ITALIC = 1;
+const FONT_STYLE_BOLD = 2;
+const FONT_STYLE_UNDERLINE = 4;
+
+/**
+ * Above this size we skip tokenizing and emit uncolored markup. Copying a
+ * multi-hundred-kilobyte query should still work, just without highlighting.
+ */
+const MAX_HIGHLIGHTED_LENGTH = 200_000;
+
+interface RichTextToken {
+  content: string;
+  color?: string;
+  fontStyle?: number;
+}
+
+type ShikiTokenHighlighter = Pick<ShikiHighlighter, "codeToTokensBase">;
+
+/**
+ * Render SQL as a self-contained, paste-friendly HTML fragment.
+ *
+ * Never throws: if Shiki cannot load or cannot parse the input, the result is
+ * the escaped source in the same `<pre>` shell, so the copy degrades to
+ * uncolored monospace instead of failing.
+ */
+export async function renderSqlRichTextHtml(code: string): Promise<string> {
+  if (code.length > MAX_HIGHLIGHTED_LENGTH) {
+    return wrapInPre(escapeHtml(code));
+  }
+
+  try {
+    const highlighter: ShikiTokenHighlighter = await getShikiSqlHighlighter();
+    const lines = highlighter.codeToTokensBase(code, { lang: SQL_LANG, theme: RICH_TEXT_THEME });
+    const body = lines.map((line) => line.map(tokenToHtml).join("")).join("\n");
+    return wrapInPre(body);
+  } catch (error) {
+    console.warn("[DBX][sqlRichText] Failed to highlight SQL, falling back to plain markup:", error);
+    return wrapInPre(escapeHtml(code));
+  }
+}
+
+/**
+ * Copy SQL to the clipboard as both HTML and plain text.
+ *
+ * Rich-text targets get the highlighted snippet; plain-text targets (a terminal,
+ * another SQL editor) get the original `code` unchanged.
+ */
+export async function copySqlAsRichText(code: string): Promise<void> {
+  const html = await renderSqlRichTextHtml(code);
+  await copyRichTextToClipboard(html, code);
+}
+
+function tokenToHtml(token: RichTextToken): string {
+  const style = tokenStyle(token);
+  const escaped = escapeHtml(token.content);
+  return style ? `<span style="${style}">${escaped}</span>` : escaped;
+}
+
+function tokenStyle(token: RichTextToken): string {
+  const parts: string[] = [];
+  if (token.color) parts.push(`color:${token.color}`);
+
+  const fontStyle = token.fontStyle ?? 0;
+  if (fontStyle & FONT_STYLE_ITALIC) parts.push("font-style:italic");
+  if (fontStyle & FONT_STYLE_BOLD) parts.push("font-weight:bold");
+  if (fontStyle & FONT_STYLE_UNDERLINE) parts.push("text-decoration:underline");
+
+  return parts.join(";");
+}
+
+function wrapInPre(innerHtml: string): string {
+  const style = [`font-family:${FONT_STACK}`, "font-size:13px", "line-height:1.55", `color:${FOREGROUND}`, `background-color:${BACKGROUND}`, `border:1px solid ${BORDER}`, "border-radius:6px", "padding:12px 14px", "margin:0", "white-space:pre", "overflow-x:auto"].join(";");
+
+  return `<pre style="${style}">${innerHtml}</pre>`;
+}