@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/shared/markdown/extensions/code.ts

@@ -9,13 +9,26 @@
 import type { MarkedExtension, Tokens } from "marked";
 import { escapeHtml } from "../shared";
 
+/** Base64-encode a UTF-8 string for embedding in a `data-` attribute.
+ *  Server-safe: works in Bun runtime. The matching client-side decoder
+ *  uses `atob` + `decodeURIComponent` (see `frontend/lib/script/read-mode.ts`). */
+const encodeScriptSource = (source: string): string => {
+  // `Buffer` exists in Bun's server-side runtime. The fallback path
+  // (`unescape(encodeURIComponent(...))` + `btoa`) is for any
+  // browser/edge environment that imports this module without Buffer.
+  if (typeof Buffer !== "undefined") return Buffer.from(source, "utf8").toString("base64");
+  return btoa(unescape(encodeURIComponent(source)));
+};
+
 export function codeExtension(): MarkedExtension {
   return {
     renderer: {
       code(token: Tokens.Code): string {
         const { text, lang } = token;
         const escapedCode = escapeHtml(text);
-        const isMermaid = lang?.toLowerCase() === "mermaid";
+        const langLower = lang?.toLowerCase();
+        const isMermaid = langLower === "mermaid";
+        const isScript = langLower === "script";
 
         // Language class for syntax highlighting / mermaid detection
         const langClass = lang ? ` language-${escapeHtml(lang)}` : "";
@@ -34,6 +47,30 @@ export function codeExtension(): MarkedExtension {
           );
         }
 
+        // ```script blocks: emit a wrapper carrying the source as a
+        // base64 `data-` attribute + an empty output container. The
+        // client-side `enhanceReadModeScripts` (see frontend/lib/script
+        // /read-mode.ts) finds these wrappers, decodes the source, and
+        // either runs it (when notebook.scriptsEnabled is true) or
+        // shows the source as a regular code block (when false).
+        // Decision is made client-side because the markdown layer is
+        // notebook-agnostic — `scriptsEnabled` is a per-notebook flag.
+        // The fallback (source) stays in the DOM (just `display: none`
+        // when scripts are active) so view-source / accessibility
+        // tooling sees the original code. Skip the carrier when
+        // there's no source — empty fences shouldn't activate.
+        if (isScript) {
+          const sourceB64 = encodeScriptSource(text);
+          return (
+            `<div class="md-script-block my-3" data-script-source="${sourceB64}">` +
+            `<pre class="md-script-source bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md p-4 overflow-x-auto">` +
+            `<code class="text-sm font-mono text-gray-800 dark:text-gray-200 whitespace-pre language-script">${escapedCode}</code>` +
+            `</pre>` +
+            `<div class="md-script-output"></div>` +
+            `</div>`
+          );
+        }
+
         // Language badge if specified
         const langBadge = lang
           ? `<span class="absolute top-2 right-2 text-xs text-gray-400 dark:text-gray-500 font-mono select-none">${escapeHtml(lang)}</span>`

package/src/shared/markdown/extensions/images.ts

@@ -5,22 +5,58 @@
  * - Centered figure with max-height constraint
  * - Rounded border
  * - Optional caption from alt text
+ *
+ * Supports an optional Pandoc/HFM-style size suffix on the URL:
+ *
+ *     ![alt](https://example.com/photo.png =400x300)   // both
+ *     ![alt](https://example.com/photo.png =400x)      // width only
+ *     ![alt](https://example.com/photo.png =x300)      // height only
+ *
+ * Marked's default tokenizer treats the trailing ` =WxH` as part of the
+ * URL — we parse and strip it here before emitting the `<img>` tag.
  */
 
 import type { MarkedExtension, Tokens } from "marked";
 import { escapeHtml, IMAGE_STYLES } from "../shared";
 
+const SIZE_SUFFIX_REGEX = /\s+=(\d+)?x(\d+)?$/;
+
+type ParsedImage = {
+  href: string;
+  width: string | null;
+  height: string | null;
+};
+
+const parseImageUrl = (href: string): ParsedImage => {
+  const match = SIZE_SUFFIX_REGEX.exec(href);
+  if (!match) return { href, width: null, height: null };
+  return {
+    href: href.slice(0, match.index),
+    width: match[1] ?? null,
+    height: match[2] ?? null,
+  };
+};
+
 export function imagesExtension(): MarkedExtension {
   return {
     renderer: {
       image(token: Tokens.Image): string {
-        const { href, title, text: alt } = token;
+        const { href: rawHref, title, text: alt } = token;
+        const { href, width, height } = parseImageUrl(rawHref);
 
         // Build the image element
         const imgAttrs = [`src="${escapeHtml(href)}"`, `alt="${escapeHtml(alt || "")}"`, `loading="lazy"`, `class="${IMAGE_STYLES.img}"`];
 
-        if (title) {
-          imgAttrs.push(`title="${escapeHtml(title)}"`);
+        if (title) imgAttrs.push(`title="${escapeHtml(title)}"`);
+        if (width) imgAttrs.push(`width="${width}"`);
+        if (height) imgAttrs.push(`height="${height}"`);
+
+        // Inline style overrides the global `max-height: 400px` from
+        // IMAGE_STYLES.img only when the user opted into a custom size.
+        if (width || height) {
+          const styles: string[] = ["max-height: none"];
+          if (width) styles.push(`max-width: ${width}px`);
+          imgAttrs.push(`style="${styles.join("; ")}"`);
         }
 
         const imgHtml = `<img ${imgAttrs.join(" ")} />`;

package/src/shared/markdown/extensions/info-blocks.ts

@@ -18,27 +18,27 @@ const blockConfig: Record<BlockType, { icon: string; label: string; classes: str
   note: {
     icon: "ti-chevron-right",
     label: "Note",
-    classes: "border-l-4 border-zinc-400 bg-zinc-50 dark:bg-zinc-800/50 text-zinc-800 dark:text-zinc-200",
+    classes: "info-block-note",
   },
   info: {
     icon: "ti-info-circle",
     label: "Info",
-    classes: "border-l-4 border-blue-400 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200",
+    classes: "info-block-info",
   },
   success: {
     icon: "ti-check",
     label: "Success",
-    classes: "border-l-4 border-green-400 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200",
+    classes: "info-block-success",
   },
   warning: {
     icon: "ti-alert-circle",
     label: "Warning",
-    classes: "border-l-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200",
+    classes: "info-block-warning",
   },
   danger: {
     icon: "ti-alert-hexagon",
     label: "Danger",
-    classes: "border-l-4 border-red-400 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200",
+    classes: "info-block-danger",
   },
 };
 

package/src/shared/markdown/extensions/mark.ts

@@ -0,0 +1,48 @@
+/**
+ * Mark / Highlight extension for marked.
+ *
+ * Pandoc + HFM-style highlighting:
+ *
+ *     ==marked text==
+ *
+ * Renders to a `<mark>` element with a yellow textmarker-style background.
+ * Inner content is parsed as inline markdown so users can mix bold / italic
+ * inside highlights.
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+
+const MARK_CLASSES = "bg-yellow-300 dark:bg-yellow-400/40 text-zinc-900 dark:text-yellow-50 px-0.5 rounded";
+
+export function markExtension(): MarkedExtension {
+  return {
+    extensions: [
+      {
+        name: "mark",
+        level: "inline",
+        start(src: string) {
+          // Hint marked at where to start scanning. Two consecutive `=` is
+          // cheap to find and unique enough.
+          return src.match(/==(?!=)/)?.index;
+        },
+        tokenizer(src: string) {
+          // The inner content must:
+          // - not start or end with whitespace (matches Pandoc behaviour)
+          // - not contain `=` itself (avoids overlapping with `===` etc.)
+          const match = /^==(?!=)([^\s=][^=]*?[^\s=]|[^\s=])==(?!=)/.exec(src);
+          if (!match) return undefined;
+          return {
+            type: "mark",
+            raw: match[0],
+            text: match[1] ?? "",
+            tokens: this.lexer.inlineTokens(match[1] ?? ""),
+          };
+        },
+        renderer(token: Tokens.Generic) {
+          const inner = this.parser.parseInline(token.tokens ?? []);
+          return `<mark class="${MARK_CLASSES}">${inner}</mark>`;
+        },
+      },
+    ],
+  };
+}

package/src/shared/markdown/extensions/sub-sup.ts

@@ -0,0 +1,60 @@
+/**
+ * Subscript and Superscript extensions for marked.
+ *
+ *     H~2~O           → H<sub>2</sub>O
+ *     E=mc^2^         → E=mc<sup>2</sup>
+ *
+ * Conservative tokenisers: the inner content cannot contain whitespace or
+ * the marker character. That avoids accidentally swallowing strikethrough
+ * (`~~text~~`), regular tildes used as separators, or `^` used as the
+ * regex caret in inline code.
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml } from "../shared";
+
+export function subSupExtension(): MarkedExtension {
+  return {
+    extensions: [
+      {
+        name: "subscript",
+        level: "inline",
+        start(src: string) {
+          // Single `~` not preceded or followed by another `~`.
+          return src.match(/(?<!~)~(?!~)/)?.index;
+        },
+        tokenizer(src: string) {
+          const match = /^(?<!~)~(?!~)([^~\s]+)~(?!~)/.exec(src);
+          if (!match) return undefined;
+          return {
+            type: "subscript",
+            raw: match[0],
+            text: match[1] ?? "",
+          };
+        },
+        renderer(token: Tokens.Generic) {
+          return `<sub>${escapeHtml(String(token.text))}</sub>`;
+        },
+      },
+      {
+        name: "superscript",
+        level: "inline",
+        start(src: string) {
+          return src.match(/\^/)?.index;
+        },
+        tokenizer(src: string) {
+          const match = /^\^([^\^\s]+)\^/.exec(src);
+          if (!match) return undefined;
+          return {
+            type: "superscript",
+            raw: match[0],
+            text: match[1] ?? "",
+          };
+        },
+        renderer(token: Tokens.Generic) {
+          return `<sup>${escapeHtml(String(token.text))}</sup>`;
+        },
+      },
+    ],
+  };
+}

package/src/shared/markdown/extensions/tables.ts

@@ -1,87 +1,108 @@
 /**
- * Tables Extension for Marked
+ * Tile-style markdown table renderer for `marked`.
  *
- * Renders markdown tables with styling matching the CodeMirror extension.
- * Supports cell formatting for NULL, booleans, dates, and numbers.
+ * Emits the three-layer markup that `utilities-table-tile.css` styles:
+ *   <div class="md-table-wrap">      — horizontal scroll
+ *     <table class="md-table">       — layout reset
+ *       <th|td>
+ *         <span class="md-table-cell"> — visible tile
+ *
+ * Per-column alignment from `:---:` syntax flows through `token.align`
+ * to a `md-align-{left,center,right}` class on each cell.
+ *
+ * Cells starting with `=` are evaluated as formulas via the shared
+ * `formula.ts` module. The computed value replaces the cell text;
+ * errors render as a red-text cell with a hover-title showing the
+ * full diagnostic. The same evaluator runs in the editor widget so
+ * read-mode HTML and rich-edit preview stay in sync.
+ *
+ * Markdown tables are hand-edited and small — no pagination, no
+ * NULL/datetime cell-formatting, no zebra columns. If you need any of
+ * those, you're rendering data not prose; use the Grids app.
  */
-
 import type { MarkedExtension, Tokens } from "marked";
+import { evaluateFormula, formatValue, isFormula, isTotalRow, parseProgressValue, type EvalContext, type ProgressValue } from "../formula";
 import { escapeHtml } from "../shared";
 
-const formatCell = (cell: string): string => {
-  const trimmed = cell.trim();
+type Align = "left" | "right" | "center" | null;
 
-  // NULL
-  if (trimmed.toLowerCase() === "null") {
-    return '<span class="text-gray-400 italic">NULL</span>';
-  }
+const alignClass = (align: Align): string => {
+  if (align === "right") return " md-align-right";
+  if (align === "center") return " md-align-center";
+  return "";
+};
 
-  // Boolean
-  if (trimmed.toLowerCase() === "true") {
-    return '<span class="text-green-600">true</span>';
-  }
-  if (trimmed.toLowerCase() === "false") {
-    return '<span class="text-red-600">false</span>';
-  }
+/** Best-effort plain-text extraction for formula evaluation. The
+ *  formula evaluator only needs the raw cell value (numbers, strings),
+ *  so we walk the marked-token tree and collect the text — falling
+ *  back to `cell.text` if anything goes wrong. */
+const cellText = (cell: Tokens.TableCell): string => {
+  if (typeof cell.text === "string" && cell.text.length > 0) return cell.text;
+  return "";
+};
 
-  // ISO datetime
-  if (trimmed.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)) {
-    try {
-      const date = new Date(trimmed);
-      return date.toLocaleString();
-    } catch {
-      return escapeHtml(trimmed);
-    }
-  }
+const renderProgressCell = (progress: ProgressValue, alignCls: string, title: string): string => {
+  const pct = Math.round(progress.ratio * 100);
+  return `<td><span class="md-table-cell md-table-progress${alignCls}" title="${escapeHtml(title)}"><span class="md-table-progress-track" aria-hidden="true"><span class="md-table-progress-fill" style="width:${pct}%"></span></span><span>${escapeHtml(progress.label)}</span></span></td>`;
+};
 
-  // Number with decimals
-  const num = parseFloat(trimmed);
-  if (!isNaN(num) && trimmed.includes(".") && !Number.isInteger(num)) {
-    return num.toFixed(4).replace(/\.?0+$/, "");
+const renderCell = (alignCls: string, originalText: string, ctx: EvalContext, htmlContent: string): string => {
+  if (!isFormula(originalText)) {
+    return `<td><span class="md-table-cell${alignCls}">${htmlContent}</span></td>`;
   }
-
-  return escapeHtml(trimmed);
+  const result = evaluateFormula(originalText, ctx);
+  if (result.kind === "ok") {
+    const progress = parseProgressValue(result.value);
+    if (progress) return renderProgressCell(progress, alignCls, originalText);
+    // Computed cells get a `ti-math-function` icon prefix + blue text
+    // so the user can tell at a glance which values are derived vs
+    // hand-typed. Hover-title shows the original formula source.
+    return `<td><span class="md-table-cell md-formula-ok${alignCls}" title="${escapeHtml(originalText)}"><i class="ti ti-math-function"></i>${escapeHtml(formatValue(result.value))}</span></td>`;
+  }
+  // Error: show the original formula in red + ⚠ icon, hover title
+  // carries the full diagnostic. Pattern matches `md-formula-error`
+  // styling in `utilities-table-tile.css`.
+  const tooltip = result.suggestion ? `${result.message}\n→ Suggestion: ${result.suggestion}` : result.message;
+  return `<td><span class="md-table-cell md-formula-error${alignCls}" title="${escapeHtml(tooltip)}">⚠ ${escapeHtml(originalText)}</span></td>`;
 };
 
 export function tablesExtension(): MarkedExtension {
   return {
     renderer: {
       table(token: Tokens.Table): string {
+        const align = token.align ?? [];
+
+        // Build the EvalContext once per table — formulas reference
+        // raw cell text, not other formulas' results, so a single pass
+        // through the source rows is enough.
+        const headers = token.header.map((h) => cellText(h));
+        const rawRows = token.rows.map((row) => row.map((c) => cellText(c)));
+
         const headerCells = token.header
-          .map(
-            (cell) =>
-              `<th class="px-3 py-2 text-left font-medium bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 whitespace-nowrap min-w-30">${this.parser.parseInline(
-                cell.tokens,
-              )}</th>`,
-          )
+          .map((cell, i) => {
+            const cls = `md-table-cell${alignClass(align[i] ?? null)}`;
+            return `<th><span class="${cls}">${this.parser.parseInline(cell.tokens)}</span></th>`;
+          })
           .join("");
 
         const rows = token.rows
-          .map((row) => {
+          .map((row, rowIdx) => {
+            const rowTexts = rawRows[rowIdx] ?? [];
+            const totalRow = isTotalRow(rowTexts);
             const cells = row
-              .map((cell, i) => {
-                const content = this.parser.parseInline(cell.tokens);
-                const bgClass = i % 2 === 0 ? "bg-gray-50 dark:bg-gray-800/20" : "";
-                return `<td class="px-3 py-2 whitespace-nowrap min-w-30 ${bgClass}">${formatCell(content)}</td>`;
+              .map((cell, colIdx) => {
+                const alignCls = alignClass(align[colIdx] ?? null);
+                const original = cellText(cell);
+                const htmlContent = this.parser.parseInline(cell.tokens);
+                const ctx: EvalContext = { headers, rows: rawRows, currentRow: rowIdx, currentCol: colIdx };
+                return renderCell(alignCls, original, ctx, htmlContent);
               })
               .join("");
-            return `<tr class="hover:font-semibold">${cells}</tr>`;
+            return totalRow ? `<tr class="md-table-total-row">${cells}</tr>` : `<tr>${cells}</tr>`;
           })
-          .join("\n");
-
-        const rowCount = token.rows.length;
+          .join("");
 
-        return `<div class="cm-table-widget my-2">
-  <div class="flex flex-col">
-    <div class="overflow-x-auto rounded">
-      <table class="min-w-full text-sm tabular-nums">
-        <thead><tr>${headerCells}</tr></thead>
-        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">${rows}</tbody>
-      </table>
-    </div>
-    <div class="text-center text-xs mt-2">${rowCount} row${rowCount === 1 ? "" : "s"}</div>
-  </div>
-</div>`;
+        return `<div class="md-table-wrap"><table class="md-table"><thead><tr>${headerCells}</tr></thead><tbody>${rows}</tbody></table></div>`;
       },
     },
   };