@plannotator/ui 0.22.0

package/components/blocks/HtmlBlock.tsx

@@ -0,0 +1,122 @@
+import React, { useRef, useEffect } from "react";
+import { isCodeFilePath } from "@plannotator/core/code-file";
+import { Block } from "../../types";
+import { sanitizeBlockHtml } from "../../utils/sanitizeHtml";
+import { getImageSrc } from "../ImageThumbnail";
+
+interface HtmlBlockProps {
+  block: Block;
+  imageBaseDir?: string;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  onNavigateAnchor?: (hash: string) => void;
+}
+
+// Walks the sanitized DOM and rewrites relative <img src> / <a href> so they
+// behave the same as their markdown counterparts:
+// - Relative image paths route through /api/image?path=... so they load from
+//   the plan's directory, not the plannotator server root.
+// - Relative .md / .mdx / .txt / .html links open in the linked-doc overlay when
+//   onOpenLinkedDoc is provided (same as [[wiki-links]] and [label](./x.md)).
+// Absolute http(s) URLs and mailto: are left untouched.
+function rewriteRelativeRefs(
+  root: HTMLElement,
+  imageBaseDir?: string,
+  onOpenLinkedDoc?: (path: string) => void,
+  onOpenCodeFile?: (path: string) => void,
+  onNavigateAnchor?: (hash: string) => void,
+): (() => void) {
+  const cleanups: (() => void)[] = [];
+
+  root.querySelectorAll('img').forEach((img) => {
+    const src = img.getAttribute('src');
+    if (!src) return;
+    if (/^(https?:|data:|blob:)/i.test(src)) return;
+    img.setAttribute('src', getImageSrc(src, imageBaseDir));
+  });
+
+  root.querySelectorAll('a').forEach((a) => {
+    const href = a.getAttribute('href');
+    if (!href) return;
+    // External http(s) links: open in a new tab and close the tab-nabbing
+    // vector (opener reference back to the plannotator tab). Matches the
+    // markdown renderer's behavior for [label](https://...).
+    if (/^(https?:|\/\/)/i.test(href)) {
+      a.setAttribute('target', '_blank');
+      a.setAttribute('rel', 'noopener noreferrer');
+      return;
+    }
+    if (/^(mailto:|tel:)/i.test(href)) return;
+    // In-page anchor: native browser jump doesn't target the scroll viewport,
+    // so route through onNavigateAnchor to match InlineMarkdown's behavior.
+    if (href.startsWith('#')) {
+      if (!onNavigateAnchor) return;
+      const handler = (e: Event) => {
+        e.preventDefault();
+        onNavigateAnchor(href);
+      };
+      a.addEventListener('click', handler);
+      cleanups.push(() => a.removeEventListener('click', handler));
+      return;
+    }
+    if (onOpenCodeFile && isCodeFilePath(href)) {
+      const handler = (e: Event) => {
+        e.preventDefault();
+        onOpenCodeFile(href.replace(/#.*$/, ''));
+      };
+      a.addEventListener('click', handler);
+      cleanups.push(() => a.removeEventListener('click', handler));
+      return;
+    }
+    if (onOpenLinkedDoc && /\.(mdx?|txt|html?)(#.*)?$/i.test(href)) {
+      const handler = (e: Event) => {
+        e.preventDefault();
+        onOpenLinkedDoc(href.replace(/#.*$/, ''));
+      };
+      a.addEventListener('click', handler);
+      cleanups.push(() => a.removeEventListener('click', handler));
+    }
+  });
+
+  return () => cleanups.forEach((fn) => fn());
+}
+
+// The inner HTML is set imperatively (not via dangerouslySetInnerHTML) so that
+// React's reconciliation never replaces the rendered subtree on re-render.
+// That matters because <details open> is DOM-owned state — a stray innerHTML
+// re-set on every parent re-render would collapse any open <details> the
+// user just opened. Paired with React.memo below so the component itself
+// stops re-rendering unless the block content actually changes.
+const HtmlBlockImpl: React.FC<HtmlBlockProps> = ({ block, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const sanitized = React.useMemo(
+    () => sanitizeBlockHtml(block.content),
+    [block.content],
+  );
+  useEffect(() => {
+    if (!ref.current) return;
+    if (ref.current.innerHTML !== sanitized) {
+      ref.current.innerHTML = sanitized;
+    }
+    const cleanup = rewriteRelativeRefs(ref.current, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor);
+    return cleanup;
+  }, [sanitized, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor]);
+  return (
+    <div
+      ref={ref}
+      data-block-id={block.id}
+      data-block-type="html"
+      className="html-block my-4 text-[15px] leading-relaxed text-foreground/90"
+    />
+  );
+};
+export const HtmlBlock = React.memo(
+  HtmlBlockImpl,
+  (prev, next) =>
+    prev.block.id === next.block.id &&
+    prev.block.content === next.block.content &&
+    prev.imageBaseDir === next.imageBaseDir &&
+    prev.onOpenLinkedDoc === next.onOpenLinkedDoc &&
+    prev.onOpenCodeFile === next.onOpenCodeFile &&
+    prev.onNavigateAnchor === next.onNavigateAnchor,
+);

package/components/blocks/MathBlock.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import katex from 'katex';
+import type { Block } from '../../types';
+
+type MathBlockProps = {
+  block: Block;
+};
+
+export const normalizeMathTex = (tex: string): string => tex.trim();
+
+export const renderMathToHtml = (tex: string, displayMode: boolean): string => (
+  katex.renderToString(tex, {
+    displayMode,
+    throwOnError: false,
+    strict: 'warn',
+    trust: false,
+    output: 'html',
+  })
+);
+
+export const MathBlock: React.FC<MathBlockProps> = ({ block }) => {
+  const tex = normalizeMathTex(block.content);
+  const html = useMemo(() => renderMathToHtml(tex, true), [tex]);
+
+  return (
+    <div
+      className="math-block math-annotatable my-5 overflow-x-auto py-2 text-foreground"
+      data-block-id={block.id}
+      data-block-type="math"
+      data-math-tex={tex}
+      data-math-display="true"
+      aria-label={tex}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};

package/components/blocks/TableBlock.tsx

@@ -0,0 +1,146 @@
+import React, { useRef } from 'react';
+import { Block } from '../../types';
+import { InlineMarkdown } from '../InlineMarkdown';
+
+interface TableBlockProps {
+  block: Block;
+  onHover?: (element: HTMLElement) => void;
+  onLeave?: () => void;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  onNavigateAnchor?: (hash: string) => void;
+  imageBaseDir?: string;
+  onImageClick?: (src: string, alt: string) => void;
+  githubRepo?: string;
+}
+
+// Parse pipe-delimited markdown table content into headers + rows.
+// Exported so TableToolbar can reuse it to build a CSV copy without
+// needing a second parser.
+export const parseTableContent = (content: string): { headers: string[]; rows: string[][] } => {
+  const lines = content.split('\n').filter((line) => line.trim());
+  if (lines.length === 0) return { headers: [], rows: [] };
+
+  const parseRow = (line: string): string[] =>
+    line
+      .replace(/^\|/, '')
+      .replace(/\|$/, '')
+      .split(/(?<!\\)\|/)
+      .map((cell) => cell.trim().replace(/\\\|/g, '|'));
+
+  const headers = parseRow(lines[0]);
+  const rows: string[][] = [];
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (/^[\|\-:\s]+$/.test(line)) continue; // separator row
+    rows.push(parseRow(line));
+  }
+  return { headers, rows };
+};
+
+// RFC 4180 CSV escaping: quote values that contain a comma, double-quote,
+// CR, or LF; escape inner double-quotes by doubling them.
+const csvEscape = (value: string): string => {
+  if (/[",\r\n]/.test(value)) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+};
+
+// Build RFC 4180 CSV from pre-parsed headers + rows. The popout uses this
+// directly with TanStack's visible (filter + sort applied) rows.
+export const buildCsvFromRows = (headers: string[], rows: string[][]): string => {
+  const lines = [headers, ...rows].map((row) => row.map(csvEscape).join(','));
+  return lines.join('\n');
+};
+
+// Rebuild a pipe-delimited markdown table from pre-parsed headers + rows.
+// Inverse of parseTableContent. Whitespace normalized (one space per cell
+// padding). The popout uses this for copy-as-markdown when filter or sort
+// might change what the user sees.
+// parseTableContent unescapes `\|` → `|`, so cells may hold literal pipes.
+// Re-escape on the way out — otherwise the serialized table sprouts extra
+// columns wherever a cell had a pipe.
+const mdCellEscape = (value: string): string => value.replace(/\|/g, '\\|');
+
+export const buildMarkdownTable = (headers: string[], rows: string[][]): string => {
+  const headerLine = `| ${headers.map(mdCellEscape).join(' | ')} |`;
+  const separator = `| ${headers.map(() => '---').join(' | ')} |`;
+  const bodyLines = rows.map((row) => `| ${row.map(mdCellEscape).join(' | ')} |`);
+  return [headerLine, separator, ...bodyLines].join('\n');
+};
+
+// Convert the markdown table's pipe-delimited source into RFC 4180 CSV.
+// The hover toolbar uses this on the raw block content (no filter state).
+export const buildCsv = (markdown: string): string => {
+  const { headers, rows } = parseTableContent(markdown);
+  return buildCsvFromRows(headers, rows);
+};
+
+export const TableBlock: React.FC<TableBlockProps> = ({
+  block,
+  onHover,
+  onLeave,
+  onOpenLinkedDoc,
+  onOpenCodeFile,
+  onNavigateAnchor,
+  imageBaseDir,
+  onImageClick,
+  githubRepo,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { headers, rows } = parseTableContent(block.content);
+
+  const handleMouseEnter = () => {
+    if (containerRef.current && onHover) onHover(containerRef.current);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="my-4 overflow-x-auto"
+      data-block-id={block.id}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={onLeave}
+    >
+      <table className="min-w-full border-collapse text-sm">
+        <thead>
+          <tr className="border-b border-border">
+            {headers.map((header, i) => (
+              <th key={i} className="px-3 py-2 text-left font-semibold text-foreground/90 bg-muted/30">
+                <InlineMarkdown
+                  imageBaseDir={imageBaseDir}
+                  onImageClick={onImageClick}
+                  text={header}
+                  onOpenLinkedDoc={onOpenLinkedDoc}
+                  onOpenCodeFile={onOpenCodeFile}
+                  onNavigateAnchor={onNavigateAnchor}
+                  githubRepo={githubRepo}
+                />
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, rowIdx) => (
+            <tr key={rowIdx} className="border-b border-border/50 hover:bg-muted/20">
+              {row.map((cell, cellIdx) => (
+                <td key={cellIdx} className="px-3 py-2 text-foreground/80">
+                  <InlineMarkdown
+                    imageBaseDir={imageBaseDir}
+                    onImageClick={onImageClick}
+                    text={cell}
+                    onOpenLinkedDoc={onOpenLinkedDoc}
+                    onOpenCodeFile={onOpenCodeFile}
+                    onNavigateAnchor={onNavigateAnchor}
+                    githubRepo={githubRepo}
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/components/blocks/TablePopout.tsx

@@ -0,0 +1,279 @@
+import React, { useMemo, useState } from 'react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
+} from '@tanstack/react-table';
+import { Block } from '../../types';
+import { InlineMarkdown } from '../InlineMarkdown';
+import { PopoutDialog } from '../PopoutDialog';
+import { parseTableContent, buildCsvFromRows, buildMarkdownTable } from './TableBlock';
+
+interface TablePopoutProps {
+  block: Block;
+  open: boolean;
+  onClose: () => void;
+  /** Portal target — pass Viewer's annotation containerRef so annotation
+   *  hooks can walk into the popout's text nodes. Null falls back to body. */
+  container?: HTMLElement | null;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  onNavigateAnchor?: (hash: string) => void;
+  imageBaseDir?: string;
+  onImageClick?: (src: string, alt: string) => void;
+  githubRepo?: string;
+}
+
+type Row = Record<string, string>;
+
+const TablePopoutImpl: React.FC<TablePopoutProps> = ({
+  block,
+  open,
+  onClose,
+  container,
+  onOpenLinkedDoc,
+  onOpenCodeFile,
+  onNavigateAnchor,
+  imageBaseDir,
+  onImageClick,
+  githubRepo,
+}) => {
+  const { headers, rows } = useMemo(() => parseTableContent(block.content), [block.content]);
+
+  const columnIds = useMemo(() => {
+    const seen = new Map<string, number>();
+    return headers.map((h, i) => {
+      const base = h.trim() || `col-${i}`;
+      const n = (seen.get(base) ?? 0) + 1;
+      seen.set(base, n);
+      return n === 1 ? base : `${base}-${n}`;
+    });
+  }, [headers]);
+
+  const data = useMemo<Row[]>(
+    () =>
+      rows.map((row) => {
+        const obj: Row = {};
+        columnIds.forEach((id, i) => {
+          obj[id] = row[i] ?? '';
+        });
+        return obj;
+      }),
+    [rows, columnIds],
+  );
+
+  const columns = useMemo<ColumnDef<Row, string>[]>(() => {
+    const helper = createColumnHelper<Row>();
+    return columnIds.map((id, i) =>
+      helper.accessor((row) => row[id], {
+        id,
+        header: headers[i],
+        cell: (info) => (
+          <InlineMarkdown
+            imageBaseDir={imageBaseDir}
+            onImageClick={onImageClick}
+            text={info.getValue()}
+            onOpenLinkedDoc={onOpenLinkedDoc}
+            onOpenCodeFile={onOpenCodeFile}
+            onNavigateAnchor={onNavigateAnchor}
+            githubRepo={githubRepo}
+          />
+        ),
+      }),
+    );
+  }, [columnIds, headers, imageBaseDir, onImageClick, onOpenLinkedDoc, onNavigateAnchor, githubRepo]);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [copiedMd, setCopiedMd] = useState(false);
+  const [copiedCsv, setCopiedCsv] = useState(false);
+
+  const getVisibleRowsData = (): string[][] =>
+    table.getRowModel().rows.map((row) =>
+      columnIds.map((id) => row.getValue<string>(id) ?? ''),
+    );
+
+  const handleCopyMarkdown = async () => {
+    try {
+      await navigator.clipboard.writeText(buildMarkdownTable(headers, getVisibleRowsData()));
+      setCopiedMd(true);
+      setTimeout(() => setCopiedMd(false), 1500);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const handleCopyCsv = async () => {
+    try {
+      await navigator.clipboard.writeText(buildCsvFromRows(headers, getVisibleRowsData()));
+      setCopiedCsv(true);
+      setTimeout(() => setCopiedCsv(false), 1500);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    globalFilterFn: 'includesString',
+  });
+
+  const visibleRows = table.getRowModel().rows;
+  const totalRows = data.length;
+
+  return (
+    <PopoutDialog
+      open={open}
+      onClose={onClose}
+      title="Table"
+      container={container}
+      dataAttributes={{ 'data-block-id': block.id }}
+    >
+      <div className="flex items-center gap-3 px-5 pt-4 pb-3 pr-12">
+        <div className="relative max-w-sm flex-1">
+          <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M10 18a8 8 0 100-16 8 8 0 000 16z" />
+          </svg>
+          <input
+            type="text"
+            value={globalFilter}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            placeholder="Filter rows…"
+            className="w-full pl-8 pr-3 py-1.5 text-sm bg-muted/40 border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-primary/50 focus:border-primary/50"
+          />
+        </div>
+        <span className="text-xs text-muted-foreground tabular-nums">
+          {visibleRows.length === totalRows
+            ? `${totalRows} row${totalRows === 1 ? '' : 's'}`
+            : `${visibleRows.length} of ${totalRows}`}
+        </span>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            onClick={handleCopyMarkdown}
+            title={
+              copiedMd
+                ? 'Copied!'
+                : visibleRows.length === totalRows
+                  ? 'Copy as markdown'
+                  : `Copy ${visibleRows.length} row${visibleRows.length === 1 ? '' : 's'} as markdown`
+            }
+            className={`p-1.5 rounded-md transition-colors ${
+              copiedMd ? 'text-success' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+            }`}
+          >
+            {copiedMd ? (
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+            ) : (
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+            )}
+          </button>
+          <button
+            onClick={handleCopyCsv}
+            title={
+              copiedCsv
+                ? 'Copied as CSV!'
+                : visibleRows.length === totalRows
+                  ? 'Copy as CSV'
+                  : `Copy ${visibleRows.length} row${visibleRows.length === 1 ? '' : 's'} as CSV`
+            }
+            className={`px-2 py-1 rounded-md text-[10px] font-bold tracking-tight uppercase leading-none transition-colors ${
+              copiedCsv ? 'text-success' : 'text-primary hover:bg-primary/10'
+            }`}
+          >
+            {copiedCsv ? '✓' : 'CSV'}
+          </button>
+        </div>
+      </div>
+
+      <div className="overflow-auto flex-1 px-5 pb-5">
+        <table className="min-w-full border-collapse text-sm">
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id} className="border-b border-border">
+                {headerGroup.headers.map((header) => {
+                  const sort = header.column.getIsSorted();
+                  return (
+                    <th
+                      key={header.id}
+                      onClick={header.column.getToggleSortingHandler()}
+                      className="px-3 py-2 text-left font-semibold text-foreground/90 bg-muted/30 sticky top-0 z-10 select-none cursor-pointer hover:bg-muted/50 transition-colors"
+                    >
+                      <span className="inline-flex items-center gap-1.5">
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        <SortIndicator dir={sort} />
+                      </span>
+                    </th>
+                  );
+                })}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {visibleRows.length === 0 ? (
+              <tr>
+                <td colSpan={columnIds.length} className="px-3 py-8 text-center text-sm text-muted-foreground">
+                  No rows match the filter.
+                </td>
+              </tr>
+            ) : (
+              visibleRows.map((row) => (
+                <tr key={row.id} className="border-b border-border/50 hover:bg-muted/20">
+                  {row.getVisibleCells().map((cell) => (
+                    <td key={cell.id} className="px-3 py-2 text-foreground/80">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </PopoutDialog>
+  );
+};
+
+// Memoize on meaningful props (block identity, content, open, container).
+// Upstream Viewer re-renders (annotation toolbar opening, selection change,
+// hover state shuffling) keep firing while the popout is mounted. Without
+// this memo, TanStack's flexRender re-evaluates every cell on every parent
+// re-render, which conflicts with web-highlighter's DOM mutations (the
+// library inserts <mark> tags into the live DOM) and React's reconciler
+// throws NotFoundError trying to remove nodes it doesn't own.
+export const TablePopout = React.memo(
+  TablePopoutImpl,
+  (prev, next) =>
+    prev.block.id === next.block.id &&
+    prev.block.content === next.block.content &&
+    prev.open === next.open &&
+    prev.container === next.container &&
+    prev.imageBaseDir === next.imageBaseDir &&
+    prev.githubRepo === next.githubRepo,
+);
+
+const SortIndicator: React.FC<{ dir: false | 'asc' | 'desc' }> = ({ dir }) => {
+  const activeUp = dir === 'asc';
+  const activeDown = dir === 'desc';
+  return (
+    <span className="inline-flex flex-col leading-none text-[9px]">
+      <span className={activeUp ? 'text-foreground' : 'text-muted-foreground/40'}>▲</span>
+      <span className={activeDown ? 'text-foreground' : 'text-muted-foreground/40'}>▼</span>
+    </span>
+  );
+};