@startsimpli/ui 0.4.143 → 0.4.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.143",
+  "version": "0.4.145",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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>
           ),