@startsimpli/ui 0.4.142 → 0.4.144

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.142",
+  "version": "0.4.144",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -33,7 +33,8 @@
     "./terminal/styles": "./src/components/terminal/xterm.css",
     "./session": "./src/components/session/index.ts",
     "./session-console": "./src/components/session/AgentSessionConsole.tsx",
-    "./tailwind": "./tailwind.preset.js"
+    "./tailwind": "./tailwind.preset.js",
+    "./track-changes": "./src/components/track-changes/index.ts"
   },
   "files": [
     "src",
@@ -49,6 +50,11 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
     "@startsimpli/api": "^0.5.66",
     "@startsimpli/auth": "^0.4.38",
     "@startsimpli/i18n": "^0.1.3"
@@ -68,17 +74,25 @@
     },
     "@tanstack/react-query": {
       "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/lang-markdown": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
     }
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
-    "@types/dagre": "^0.7.52",
-    "@types/react-big-calendar": "^1.16.3",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xyflow/react": "^12.10.2",
-    "dagre": "^0.8.5",
-    "xterm": "^5.3.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -93,8 +107,14 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@types/dagre": "^0.7.52",
+    "@types/react-big-calendar": "^1.16.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xyflow/react": "^12.10.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
     "date-fns": "^3.6.0",
     "dompurify": "^3.4.1",
     "lucide-react": "^0.408.0",
@@ -106,9 +126,15 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.6.1",
     "tailwindcss-animate": "^1.0.7",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "xterm": "^5.3.0"
   },
   "devDependencies": {
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.14",
     "@swc/core": "^1.15.30",
     "@swc/jest": "^0.2.39",
     "@tanstack/react-query": "^5.99.2",
@@ -126,8 +152,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/i18n": "0.1.3",
-    "@startsimpli/realtime": "0.0.2"
+    "@startsimpli/realtime": "0.0.2",
+    "@startsimpli/i18n": "0.1.3"
   },
   "keywords": [
     "ui",

package/src/components/blog/MarkdownRenderer.tsx

@@ -22,6 +22,23 @@ export interface MarkdownRendererProps {
   /** Syntax-highlighting style for fenced code blocks. Default `"light"`. */
   theme?: 'light' | 'dark'
   className?: string
+  /**
+   * Extra rehype plugins, run after GFM. The seam the track-changes Read view
+   * uses to draw marks by source position (bd startsim-whwxd.3); absent, the
+   * renderer is exactly what it was.
+   */
+  rehypePlugins?: React.ComponentProps<typeof ReactMarkdown>['rehypePlugins']
+}
+
+/** The plain text of rendered children. With a rehype plugin wrapping text
+ *  runs (track-changes marks), a heading's children are elements, and
+ *  `String(children)` would give every heading the id `object-object`. */
+function textOf(node: React.ReactNode): string {
+  if (node == null || typeof node === 'boolean') return ''
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(textOf).join('')
+  if (React.isValidElement(node)) return textOf((node.props as { children?: React.ReactNode }).children)
+  return ''
 }
 
 function slugify(text: string): string {
@@ -31,7 +48,7 @@ function slugify(text: string): string {
     .replace(/(^-|-$)/g, '')
 }
 
-export function MarkdownRenderer({ content, theme = 'light', className }: MarkdownRendererProps) {
+export function MarkdownRenderer({ content, theme = 'light', className, rehypePlugins }: MarkdownRendererProps) {
   // Wide GFM tables and long code lines both scroll sideways, and on macOS
   // neither said so (startsim-5pq7h.1).
   useScrollAffordance()
@@ -47,25 +64,26 @@ export function MarkdownRenderer({ content, theme = 'light', className }: Markdo
     <div className={cn('prose prose-lg max-w-none', className)}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
+        {...(rehypePlugins ? { rehypePlugins } : {})}
         components={{
           // h1 in content renders as h2 — the page template owns the real <h1>.
           h1: ({ children, ...props }) => (
-            <h2 id={slugify(String(children ?? ''))} className="text-3xl font-heading font-semibold mb-4 mt-10 first:mt-0 text-foreground scroll-mt-8" {...props}>
+            <h2 id={slugify(textOf(children))} className="text-3xl font-heading font-semibold mb-4 mt-10 first:mt-0 text-foreground scroll-mt-8" {...props}>
               {children}
             </h2>
           ),
           h2: ({ children, ...props }) => (
-            <h2 id={slugify(String(children ?? ''))} className="text-3xl font-heading font-semibold mb-4 mt-10 first:mt-0 text-foreground scroll-mt-8" {...props}>
+            <h2 id={slugify(textOf(children))} className="text-3xl font-heading font-semibold mb-4 mt-10 first:mt-0 text-foreground scroll-mt-8" {...props}>
               {children}
             </h2>
           ),
           h3: ({ children, ...props }) => (
-            <h3 id={slugify(String(children ?? ''))} className="text-2xl font-heading font-semibold mb-3 mt-8 first:mt-0 text-foreground scroll-mt-8" {...props}>
+            <h3 id={slugify(textOf(children))} className="text-2xl font-heading font-semibold mb-3 mt-8 first:mt-0 text-foreground scroll-mt-8" {...props}>
               {children}
             </h3>
           ),
           h4: ({ children, ...props }) => (
-            <h4 id={slugify(String(children ?? ''))} className="text-xl font-heading font-semibold mb-2 mt-6 first:mt-0 text-foreground scroll-mt-8" {...props}>
+            <h4 id={slugify(textOf(children))} className="text-xl font-heading font-semibold mb-2 mt-6 first:mt-0 text-foreground scroll-mt-8" {...props}>
               {children}
             </h4>
           ),