@vectojs/markdown 0.13.0 → 0.14.0

package/dist/index.mjs

@@ -423,7 +423,259 @@ function createStreamController(host, options = {}) {
 }
 
 // src/Markdown.ts
-import { measureText, RichText, Stack, Table, Text, Image, UIComponent } from "@vectojs/ui";
+import {
+  measureText as measureText2,
+  RichText,
+  Stack,
+  Table,
+  Text,
+  Image,
+  UIComponent as UIComponent2
+} from "@vectojs/ui";
+
+// src/blockAffordances.ts
+import { Button, measureText, UIComponent } from "@vectojs/ui";
+var LANGUAGE_EXTENSIONS = {
+  bash: "sh",
+  c: "c",
+  cpp: "cpp",
+  cs: "cs",
+  css: "css",
+  diff: "diff",
+  dockerfile: "dockerfile",
+  go: "go",
+  graphql: "graphql",
+  haskell: "hs",
+  html: "html",
+  java: "java",
+  javascript: "js",
+  js: "js",
+  json: "json",
+  jsonc: "jsonc",
+  jsx: "jsx",
+  kotlin: "kt",
+  latex: "tex",
+  lua: "lua",
+  make: "mk",
+  markdown: "md",
+  md: "md",
+  nix: "nix",
+  php: "php",
+  python: "py",
+  py: "py",
+  ruby: "rb",
+  rust: "rs",
+  rs: "rs",
+  scss: "scss",
+  sh: "sh",
+  shell: "sh",
+  sql: "sql",
+  svelte: "svelte",
+  swift: "swift",
+  tex: "tex",
+  toml: "toml",
+  ts: "ts",
+  tsx: "tsx",
+  typescript: "ts",
+  vue: "vue",
+  xml: "xml",
+  yaml: "yaml",
+  yml: "yaml",
+  zig: "zig",
+  zsh: "sh"
+};
+function extensionForLanguage(lang) {
+  const first = lang.trim().toLowerCase().split(/[\s:,{]/)[0] ?? "";
+  return LANGUAGE_EXTENSIONS[first] ?? "txt";
+}
+function mimeForLanguage(lang) {
+  const ext = extensionForLanguage(lang);
+  if (ext === "json" || ext === "jsonc") return "application/json";
+  if (ext === "html") return "text/html";
+  if (ext === "css") return "text/css";
+  if (ext === "xml" || ext === "svelte" || ext === "vue") return "text/plain";
+  return "text/plain";
+}
+function escapeCsvField(value) {
+  let needsQuoting = false;
+  let hasQuote = false;
+  for (const char of value) {
+    if (char === '"') {
+      hasQuote = true;
+      needsQuoting = true;
+      break;
+    }
+    if (char === "," || char === "\n" || char === "\r") needsQuoting = true;
+  }
+  if (!needsQuoting) return value;
+  return hasQuote ? `"${value.replace(/"/g, '""')}"` : `"${value}"`;
+}
+function escapeMarkdownTableCell(cell) {
+  let needsEscaping = false;
+  for (const char of cell) {
+    if (char === "\\" || char === "|") {
+      needsEscaping = true;
+      break;
+    }
+  }
+  if (!needsEscaping) return cell;
+  return cell.replace(/\\/g, "\\\\").replace(/\|/g, "\\|");
+}
+function tableToCsv(table) {
+  const lines = [table.headers.map(escapeCsvField).join(",")];
+  for (const row of table.rows) lines.push(row.map(escapeCsvField).join(","));
+  return `\uFEFF${lines.join("\r\n")}`;
+}
+function tableToMarkdown(table) {
+  const header = `| ${table.headers.map(escapeMarkdownTableCell).join(" | ")} |`;
+  const divider = `| ${table.headers.map((_cell, index) => {
+    switch (table.align[index]) {
+      case "left":
+        return ":---";
+      case "center":
+        return ":---:";
+      case "right":
+        return "---:";
+      default:
+        return "---";
+    }
+  }).join(" | ")} |`;
+  const body = table.rows.map(
+    (row) => `| ${table.headers.map((_cell, index) => escapeMarkdownTableCell(row[index] ?? "")).join(" | ")} |`
+  );
+  return [header, divider, ...body].join("\n");
+}
+function defaultWriteClipboard(text) {
+  const clipboard = globalThis.navigator?.clipboard;
+  clipboard?.writeText?.(text);
+}
+function defaultSaveFile(filename, content, mimeType) {
+  const doc = globalThis.document;
+  if (!doc?.body) return;
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const anchor = doc.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  doc.body.appendChild(anchor);
+  anchor.click();
+  doc.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+var BlockAffordanceButton = class _BlockAffordanceButton extends Button {
+  constructor(label, successLabel, act, opts = {}) {
+    super(label, { ...opts, onClick: () => this.run() });
+    this.act = act;
+    this.restingLabel = label;
+    this.successLabel = successLabel;
+    this.width = Math.max(this.width, measureText(successLabel, this.font) + 24);
+  }
+  act;
+  /** How long the confirmation label stays up, in ms. */
+  static FEEDBACK_MS = 1600;
+  restingLabel;
+  successLabel;
+  feedbackTimer;
+  /**
+   * Runs the action, then shows the confirmation.
+   *
+   * The action runs first and a throw propagates: a clipboard write the browser
+   * rejected must not be reported as a success.
+   */
+  run() {
+    this.act();
+    this.setTransientLabel(this.successLabel);
+    if (this.feedbackTimer !== void 0) clearTimeout(this.feedbackTimer);
+    this.feedbackTimer = setTimeout(() => {
+      this.setTransientLabel(this.restingLabel);
+      this.feedbackTimer = void 0;
+    }, _BlockAffordanceButton.FEEDBACK_MS);
+  }
+  setTransientLabel(label) {
+    this.label = label;
+    this.textWidth = measureText(label, this.font);
+    this.scene?.markDirty();
+  }
+  /**
+   * The label a reader hears is the one they see, transient confirmation
+   * included, so an AT user gets the same feedback a sighted user does.
+   */
+  getA11yAttributes() {
+    return { ...super.getA11yAttributes(), label: this.label };
+  }
+  /** Clears the pending revert so a destroyed block leaves no timer behind. */
+  destroy() {
+    if (this.feedbackTimer !== void 0) {
+      clearTimeout(this.feedbackTimer);
+      this.feedbackTimer = void 0;
+    }
+    super.destroy();
+  }
+};
+var BlockWithAffordances = class _BlockWithAffordances extends UIComponent {
+  constructor(block, controls) {
+    super();
+    this.block = block;
+    this.controls = controls;
+    this.add(block);
+    for (const control of controls) this.add(control);
+    this.layoutAffordances();
+  }
+  block;
+  controls;
+  /** Gap between the block's edges and the controls, in px. */
+  static INSET = 8;
+  /** Gap between adjacent controls, in px. */
+  static GAP = 6;
+  /**
+   * Places the controls right-aligned along the block's top edge.
+   *
+   * Laid out right-to-left from the block's right edge so the first control in
+   * the list ends up leftmost, which keeps DOM order (and therefore tab order and
+   * the a11y reading order) matching the visual order.
+   */
+  layoutAffordances() {
+    this.width = this.block.width;
+    this.height = this.block.height;
+    let right = this.block.width - _BlockWithAffordances.INSET;
+    for (let i = this.controls.length - 1; i >= 0; i--) {
+      const control = this.controls[i];
+      control.x = right - control.width;
+      control.y = _BlockWithAffordances.INSET;
+      right = control.x - _BlockWithAffordances.GAP;
+    }
+  }
+  /**
+   * Re-places the controls after the block's own box changed.
+   *
+   * Called by the owner when a block is resized or its content grew; the controls
+   * are anchored to the right edge, so a width change moves them.
+   */
+  refreshAffordances() {
+    this.layoutAffordances();
+    this.scene?.markDirty();
+  }
+  /** The wrapper is a pass-through: its size is the block's size. */
+  getLayoutControlledProperties() {
+    return ["x", "y"];
+  }
+  /**
+   * Projected as a group so assistive technology reports one labelled region
+   * containing the block and its controls, rather than two unrelated siblings.
+   */
+  getA11yAttributes() {
+    return { role: "group", pointerEvents: "none" };
+  }
+  render() {
+  }
+};
+function tableContentOf(token) {
+  return {
+    headers: token.header.map((cell) => cell.text),
+    rows: token.rows.map((row) => row.map((cell) => cell.text)),
+    align: token.align
+  };
+}
 
 // src/frontMatter.ts
 var OPEN_RE = /^---[ \t]*\r?\n/;
@@ -668,7 +920,59 @@ function isFenceClosed(raw) {
   return false;
 }
 function paragraphHasImage(token) {
-  return token.tokens?.some((child) => child.type === "image") === true;
+  return containsImage(token.tokens);
+}
+function containsImage(tokens) {
+  if (!tokens) return false;
+  for (const token of tokens) {
+    if (token.type === "image") return true;
+    if (containsImage(token.tokens)) return true;
+  }
+  return false;
+}
+function imagesOf(tokens) {
+  const images = [];
+  for (const token of tokens ?? []) {
+    if (token.type === "image") {
+      images.push(token);
+      continue;
+    }
+    images.push(...imagesOf(token.tokens));
+  }
+  return images;
+}
+function stripImages(token) {
+  const children = token.tokens;
+  if (!children) return token;
+  const kept = [];
+  for (const child of children) {
+    if (child.type === "image") continue;
+    const grandchildren = child.tokens;
+    if (grandchildren && containsImage(grandchildren)) {
+      const stripped = stripImages(child);
+      const remaining = stripped.tokens;
+      if (remaining && remaining.length > 0) kept.push(stripped);
+      continue;
+    }
+    kept.push(child);
+  }
+  return { ...token, tokens: kept };
+}
+function liftNestedImages(tokens) {
+  const lifted = [];
+  for (const token of tokens) {
+    if (token.type === "image") {
+      lifted.push(token);
+      continue;
+    }
+    const children = token.tokens;
+    if (children && containsImage(children)) {
+      lifted.push(...liftNestedImages(children));
+      continue;
+    }
+    lifted.push(token);
+  }
+  return lifted;
 }
 function lastIndexOfImage(tokens) {
   for (let i = tokens.length - 1; i >= 0; i--) {
@@ -679,7 +983,7 @@ function lastIndexOfImage(tokens) {
 function expectedImageParagraphChildren(tokens) {
   let children = 0;
   let inTextRun = false;
-  for (const token of tokens) {
+  for (const token of liftNestedImages(tokens)) {
     if (token.type === "image") {
       children++;
       inTextRun = false;
@@ -1115,7 +1419,7 @@ function highlightLine(line, lang, theme) {
   flush(theme.codeColor);
   return segments;
 }
-var CodeBlock = class extends UIComponent {
+var CodeBlock = class extends UIComponent2 {
   lines;
   grid = null;
   /** Raw (unhighlighted) lines of the last build, for prefix reuse in buildLines. */
@@ -1248,7 +1552,7 @@ var CodeBlock = class extends UIComponent {
     this.height = this.pad * 2 + rawLines.length * this.lineH;
   }
   ensureGrid() {
-    const cellWidth = this.cellWidth || Math.max(1, measureText("M", this.codeFont));
+    const cellWidth = this.cellWidth || Math.max(1, measureText2("M", this.codeFont));
     if (!this.grid || this.grid.source !== this.source || this.grid.font !== this.codeFont || this.grid.cellWidth !== cellWidth) {
       this.grid = prepareContentGrid(this.source, {
         font: this.codeFont,
@@ -1526,12 +1830,24 @@ function renderInlineToRichText(tokens, fallbackText, font, color, maxWidth, the
     onLinkClick
   });
 }
-var Markdown = class _Markdown extends UIComponent {
+var Markdown = class _Markdown extends UIComponent2 {
   content;
   maxWidth;
   theme;
   onLinkClick;
   selectable;
+  /**
+   * Whether code blocks and tables carry copy / download controls.
+   *
+   * Read when a block entity is built, so it affects blocks rendered from here on
+   * rather than retroactively; a document does not rebuild to gain or lose an
+   * affordance.
+   */
+  blockAffordances;
+  /** Clipboard writer used by the copy controls. */
+  writeClipboard;
+  /** File saver used by the download controls. */
+  saveFile;
   activeBlockMetrics = null;
   /**
    * Called after a streamed append has re-laid-out the document.
@@ -1756,6 +2072,9 @@ var Markdown = class _Markdown extends UIComponent {
     this.onLinkClick = opts.onLinkClick;
     this.selectable = opts.selectable ?? true;
     this._userTiming = opts.userTiming ?? false;
+    this.blockAffordances = opts.blockAffordances ?? false;
+    this.writeClipboard = opts.writeClipboard ?? defaultWriteClipboard;
+    this.saveFile = opts.saveFile ?? defaultSaveFile;
     this.content = new Stack({ direction: "vertical", gap: 16 });
     this.add(this.content);
     this.rawMarkdown = "";
@@ -2544,6 +2863,73 @@ var Markdown = class _Markdown extends UIComponent {
    * policy for a zero-dimension source is a separate decision from notifying
    * the scene, which is the actual defect here.
    */
+  /**
+   * Wraps a block in its copy / download controls, or returns it untouched.
+   *
+   * The controls are built lazily through `make` so a document with
+   * `blockAffordances` off pays nothing — not the closures, not the measurement
+   * `BlockAffordanceButton` does in its constructor.
+   */
+  withBlockAffordances(block, make) {
+    if (!this.blockAffordances) return block;
+    const controls = make();
+    return controls.length > 0 ? new BlockWithAffordances(block, controls) : block;
+  }
+  /** Copy and download controls for one fenced code block. */
+  codeBlockAffordances(source, lang) {
+    const opts = this.affordanceButtonOptions();
+    return [
+      new BlockAffordanceButton("Copy code", "Copied", () => this.writeClipboard(source), opts),
+      new BlockAffordanceButton(
+        "Download code",
+        "Saved",
+        () => this.saveFile(`code.${extensionForLanguage(lang)}`, source, mimeForLanguage(lang)),
+        opts
+      )
+    ];
+  }
+  /** Copy (as Markdown) and download (as CSV) controls for one table. */
+  tableAffordances(tblToken) {
+    const content = tableContentOf(tblToken);
+    const opts = this.affordanceButtonOptions();
+    return [
+      // Markdown rather than CSV for the clipboard: the reader copied it out of a
+      // Markdown document and the overwhelmingly likely destination is another
+      // one. CSV is what the download is for, where a spreadsheet is the target.
+      new BlockAffordanceButton(
+        "Copy table",
+        "Copied",
+        () => this.writeClipboard(tableToMarkdown(content)),
+        opts
+      ),
+      new BlockAffordanceButton(
+        "Download table",
+        "Saved",
+        () => this.saveFile("table.csv", tableToCsv(content), "text/csv;charset=utf-8"),
+        opts
+      )
+    ];
+  }
+  /**
+   * Button styling for the affordances, derived from the document theme.
+   *
+   * Themed rather than hardcoded so a light-theme document does not get the dark
+   * default palette. `focusColor` is set explicitly from the theme's accent
+   * because `Button`'s default cyan is tuned for the dark palette and reads as
+   * off-brand elsewhere — while a focus ring is the one affordance a keyboard
+   * user cannot do without.
+   */
+  affordanceButtonOptions() {
+    return {
+      font: `600 12px ${this.theme.bodyFont}`,
+      padding: 6,
+      radius: 6,
+      bg: this.theme.codeBgColor,
+      hoverBg: this.theme.tableHeaderBgColor,
+      color: this.theme.textColor,
+      focusColor: this.theme.codeColor
+    };
+  }
   paragraphImage(imgToken, availableWidth) {
     const initialWidth = Math.min(800, availableWidth);
     const initialHeight = Math.round(initialWidth * 0.6);
@@ -2624,6 +3010,7 @@ var Markdown = class _Markdown extends UIComponent {
   itemIsInlineOnly(item) {
     const children = item.tokens;
     if (!children || children.length === 0) return true;
+    if (containsImage(children)) return false;
     if (children.length === 1 && children[0].type === "paragraph") return true;
     return children.every((child) => _Markdown.INLINE_ITEM_TOKENS.has(child.type));
   }
@@ -2653,7 +3040,10 @@ var Markdown = class _Markdown extends UIComponent {
     const children = item.tokens ?? [];
     const stack = new Stack({ direction: "vertical", gap: 4 });
     const first = children[0];
-    const leadChildren = first && (first.type === "text" || first.type === "paragraph") ? [first] : [];
+    const firstIsInline = Boolean(first) && (first.type === "text" || first.type === "paragraph");
+    const leadHasImage = firstIsInline && containsImage(first.tokens);
+    const leadChildren = firstIsInline ? [leadHasImage ? stripImages(first) : first] : [];
+    const leadImages = leadHasImage ? imagesOf(first.tokens) : [];
     const leadToken = {
       ...token,
       items: token.items.map((it, i) => i === index ? { ...it, tokens: leadChildren } : it)
@@ -2666,6 +3056,13 @@ var Markdown = class _Markdown extends UIComponent {
       indentStart: indent,
       availableWidth: Math.max(1, availableWidth - indent)
     };
+    for (const image of leadImages) {
+      const el = this.paragraphImage(image, childMetrics.availableWidth);
+      const wrapper = new MarkdownContainer();
+      el.x = indent;
+      wrapper.add(el);
+      stack.add(wrapper);
+    }
     for (let i = leadChildren.length; i < children.length; i++) {
       const el = this.renderTokenWithMetrics(children[i], childMetrics);
       if (!el) continue;
@@ -3483,7 +3880,7 @@ var Markdown = class _Markdown extends UIComponent {
             currentTokens = [];
           }
         };
-        for (const child of pToken.tokens) {
+        for (const child of liftNestedImages(pToken.tokens)) {
           if (child.type === "image") {
             flushText();
             stack.add(this.paragraphImage(child, availableWidth));
@@ -3511,7 +3908,10 @@ var Markdown = class _Markdown extends UIComponent {
           const mathBlock = this.renderDisplayMath(codeToken.text, availableWidth);
           if (mathBlock) return mathBlock;
         }
-        return new CodeBlock(codeToken.text, lang, availableWidth, t, this.selectable);
+        return this.withBlockAffordances(
+          new CodeBlock(codeToken.text, lang, availableWidth, t, this.selectable),
+          () => this.codeBlockAffordances(codeToken.text, lang)
+        );
       }
       // ── Blockquotes ──────────────────────────────────────────────────
       case "blockquote": {
@@ -3567,21 +3967,24 @@ var Markdown = class _Markdown extends UIComponent {
         const rows = tblToken.rows.map(
           (row) => row.map((cell) => this.tableCellRichText(cell, false, t))
         );
-        return new Table({
-          headers,
-          rows,
-          // `| :--- | :---: | ---: |` already resolves to this on the token; it
-          // was previously discarded, so every column rendered left-aligned.
-          align: tblToken.align,
-          width: availableWidth,
-          textColor: t.textColor,
-          headerTextColor: t.headingColor,
-          font: `${t.fontSize - 2}px ${t.bodyFont}`,
-          borderColor: t.hrColor,
-          bg: t.tableBgColor,
-          headerBg: t.tableHeaderBgColor,
-          selectable: this.selectable
-        });
+        return this.withBlockAffordances(
+          new Table({
+            headers,
+            rows,
+            // `| :--- | :---: | ---: |` already resolves to this on the token; it
+            // was previously discarded, so every column rendered left-aligned.
+            align: tblToken.align,
+            width: availableWidth,
+            textColor: t.textColor,
+            headerTextColor: t.headingColor,
+            font: `${t.fontSize - 2}px ${t.bodyFont}`,
+            borderColor: t.hrColor,
+            bg: t.tableBgColor,
+            headerBg: t.tableHeaderBgColor,
+            selectable: this.selectable
+          }),
+          () => this.tableAffordances(tblToken)
+        );
       }
       // ── Horizontal rule ──────────────────────────────────────────────
       case "hr":
@@ -3616,13 +4019,22 @@ var Markdown = class _Markdown extends UIComponent {
   }
 };
 export {
+  BlockAffordanceButton,
+  BlockWithAffordances,
   CodeBlock,
   Markdown,
   MathBlock,
   codeAtlas,
   codeAtlasStats,
+  escapeCsvField,
+  escapeMarkdownTableCell,
+  extensionForLanguage,
   isMathJaxReady,
+  mimeForLanguage,
   parseFrontMatterFields,
   preloadMathJax,
-  scanFrontMatter
+  scanFrontMatter,
+  tableContentOf,
+  tableToCsv,
+  tableToMarkdown
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/markdown",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "publishConfig": {
     "access": "public"
   },
@@ -40,7 +40,7 @@
   "scripts": {
     "build": "(cd ../ui && bun run build) && node scripts/build-worker.js && tsup src/index.ts --format cjs,esm --clean && tsc -p tsconfig.build.json",
     "test": "vitest run",
-    "test:e2e": "bun e2e/blockquote-layout.e2e.ts && bun e2e/stream-controller.e2e.ts && bun e2e/lazy-math.e2e.ts && bun e2e/paragraph-image-repaint.e2e.ts && bun e2e/selection-fidelity.e2e.ts && bun e2e/code-atlas-dpr.e2e.ts && bun e2e/set-max-width.e2e.ts"
+    "test:e2e": "bun e2e/blockquote-layout.e2e.ts && bun e2e/stream-controller.e2e.ts && bun e2e/lazy-math.e2e.ts && bun e2e/paragraph-image-repaint.e2e.ts && bun e2e/selection-fidelity.e2e.ts && bun e2e/code-atlas-dpr.e2e.ts && bun e2e/set-max-width.e2e.ts && bun e2e/block-affordances.e2e.ts"
   },
   "dependencies": {
     "marked": "^18.0.7",