@k2b/cloud 0.6.0-rc.0

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

@@ -0,0 +1,109 @@
+/**
+ * Markdown table renderer for `marked`.
+ *
+ * Emits the three-layer markup that `utilities-markdown-table.css` styles:
+ *   <div class="md-table-wrap">      — horizontal scroll
+ *     <table class="md-table">       — layout reset
+ *       <th|td>
+ *         <span class="md-table-cell"> — content + alignment owner
+ *
+ * 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 { type EvalContext, evaluateFormula, formatValue, isFormula, isTotalRow, type ProgressValue, parseProgressValue } from "../formula";
+import { escapeHtml } from "../shared";
+
+type Align = "left" | "right" | "center" | null;
+
+const alignClass = (align: Align): string => {
+  if (align === "right") return " md-align-right";
+  if (align === "center") return " md-align-center";
+  return "";
+};
+
+/** 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 "";
+};
+
+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>`;
+};
+
+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>`;
+  }
+  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-markdown-table.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, 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, rowIdx) => {
+            const rowTexts = rawRows[rowIdx] ?? [];
+            const totalRow = isTotalRow(rowTexts);
+            const cells = row
+              .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 totalRow ? `<tr class="md-table-total-row">${cells}</tr>` : `<tr>${cells}</tr>`;
+          })
+          .join("");
+
+        return `<div class="md-table-wrap"><table class="md-table"><thead><tr>${headerCells}</tr></thead><tbody>${rows}</tbody></table></div>`;
+      },
+    },
+  };
+}

package/src/shared/markdown/extensions/task-list.ts

@@ -0,0 +1,53 @@
+/**
+ * Task List Extension for Marked
+ *
+ * Renders task lists with checkboxes:
+ * - [ ] Unchecked item
+ * - [x] Checked item
+ *
+ * Also styles regular bullet lists consistently.
+ */
+
+import type { MarkedExtension, RendererObject, RendererThis, Tokens } from "marked";
+
+export function taskListExtension(): MarkedExtension {
+  const renderer: RendererObject = {
+    listitem(this: RendererThis, token: Tokens.ListItem): string {
+      // Use parse() for block-level content in list items
+      let text = this.parser.parse(token.tokens);
+      const isTask = token.task;
+      const isChecked = token.checked;
+
+      if (isTask) {
+        // Remove any default checkbox that marked might have inserted
+        text = text.replace(/<input[^>]*type="checkbox"[^>]*>/gi, "");
+
+        const checkboxHtml = `<input type="checkbox" class="custom-list-task-marker mr-2" ${isChecked ? "checked" : ""} disabled />`;
+        const checkedClass = isChecked ? "custom-list-task-checked line-through opacity-70" : "custom-list-task-unchecked";
+
+        return `<li class="custom-list custom-list-task ${checkedClass} flex items-start gap-1">${checkboxHtml}<span>${text}</span></li>\n`;
+      }
+
+      return `<li class="custom-list custom-list-bullet">${text}</li>\n`;
+    },
+
+    list(this: RendererThis & { listitem: (item: Tokens.ListItem) => string }, token: Tokens.List): string {
+      const ordered = token.ordered;
+      const start = token.start;
+      const body = token.items.map((item: Tokens.ListItem) => this.listitem(item)).join("");
+
+      const tag = ordered ? "ol" : "ul";
+      const startAttr = ordered && start !== 1 ? ` start="${start}"` : "";
+      const hasTaskItems = token.items.some((item: Tokens.ListItem) => item.task);
+      const listClass = ordered
+        ? "list-decimal pl-6 my-2 space-y-1"
+        : hasTaskItems
+          ? "pl-0 my-2 space-y-1 list-none"
+          : "pl-4 my-2 space-y-1";
+
+      return `<${tag}${startAttr} class="${listClass}">\n${body}</${tag}>\n`;
+    },
+  };
+
+  return { renderer };
+}