opentui-markdown-render 0.0.0-stage → 0.2.0

package/src/view/mermaid.tsx

@@ -0,0 +1,128 @@
+import { createEffect, createMemo, Show, type Accessor } from "solid-js"
+import { type MouseEvent, type TextRenderable } from "@opentui/core"
+import { measureMermaidDiagram, type PreparedDiagram } from "../merman/diagram"
+import { detectMermaidDiagram } from "../merman/detect"
+import { MermaidSyntaxError } from "../merman/diagnostics"
+import { DiagramCanvasSizeError } from "../merman/core/canvas"
+import { resolveOpenCodeDiagramPalette } from "../merman/palette"
+import type { Theme } from "../theme/types"
+import type { MermaidConfig } from "../config/types"
+import { defaultHeadingStyles, type HeadingStyles } from "../headings"
+import { CodeBlock } from "./code"
+
+export type MermaidDiagramViewProps = {
+  source: string
+  theme: Theme
+  columns: number
+  mermaidOptions?: MermaidConfig
+  headings?: HeadingStyles
+  onDiagnostic?: (diagnostic: { level: "error"; message: string }) => void
+}
+
+function DiagramText(props: { prepared: Accessor<PreparedDiagram> }) {
+  let ref: TextRenderable | undefined
+  let dragX: number | undefined
+  createEffect(() => {
+    if (!ref) return
+    const prepared = props.prepared()
+    ref.content = prepared.text
+    ref.height = prepared.height
+    ref.width = "100%"
+    ref.wrapMode = "none"
+    ref.selectable = false
+    ref.marginTop = 1
+  })
+  return <text ref={(renderable) => {
+    ref = renderable
+    if (!ref) return
+    ref.onMouseDown = (event: MouseEvent) => {
+      if (event.button !== 0) return
+      ref?.ctx.clearSelection()
+      dragX = event.x
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    ref.onMouseDrag = (event: MouseEvent) => {
+      if (dragX === undefined) return
+      const dx = event.x - dragX
+      dragX = event.x
+      if (ref && dx) ref.scrollX -= dx
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    ref.onMouseDragEnd = () => { dragX = undefined }
+    ref.onMouseUp = () => { dragX = undefined }
+    ref.onMouseScroll = (event: MouseEvent) => {
+      const direction = event.scroll?.direction
+      if (direction !== "left" && direction !== "right") return
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }} />
+}
+
+export function MermaidDiagramView(props: MermaidDiagramViewProps) {
+  let lastGood: PreparedDiagram | undefined
+  const prepared = createMemo(() => {
+    const source = props.source
+    const kind = detectMermaidDiagram(source)
+    if (kind && lastGood && lastGood.kind !== kind) lastGood = undefined
+    const options = {
+      compact: props.mermaidOptions?.compact,
+      classLayout: props.mermaidOptions?.classLayout,
+      layoutMaxWidth: Math.min(props.mermaidOptions?.layoutMaxWidth ?? 120, Math.max(1, props.columns)),
+      colors: resolveOpenCodeDiagramPalette(props.theme),
+      palette: props.theme.palette,
+    }
+    const restore = () => {
+      if (!lastGood) return undefined
+      try {
+        // Reprepare with the current width and palette, never display an old
+        // StyledText raster carrying stale colors or geometry.
+        return measureMermaidDiagram(lastGood.source, options)
+      } catch {
+        return undefined
+      }
+    }
+    try {
+      const result = measureMermaidDiagram(source, options)
+      if (result && result.height > 0) {
+        lastGood = result
+        return result
+      }
+      if (lastGood && (!kind || lastGood.kind === kind)) {
+        return restore()
+      }
+    } catch (error) {
+      if (error instanceof MermaidSyntaxError && lastGood && lastGood.kind === kind) {
+        return restore()
+      }
+      if (error instanceof MermaidSyntaxError && kind) {
+        const lines = source.split("\n")
+        if (error.lineNumber > 2 && !lines.slice(error.lineNumber).some((line) => line.trim())) {
+          try {
+            const result = measureMermaidDiagram(lines.slice(0, error.lineNumber - 1).join("\n"), options)
+            if (result?.height) {
+              lastGood = result
+              return result
+            }
+          } catch (prefixError) {
+            if (!(prefixError instanceof MermaidSyntaxError || prefixError instanceof DiagramCanvasSizeError)) {
+              props.onDiagnostic?.({ level: "error", message: prefixError instanceof Error ? prefixError.message : String(prefixError) })
+            }
+          }
+        }
+      }
+      if (!(error instanceof MermaidSyntaxError || error instanceof DiagramCanvasSizeError)) {
+        props.onDiagnostic?.({ level: "error", message: error instanceof Error ? error.message : String(error) })
+      }
+    }
+    return undefined
+  })
+  return <box width="100%" flexDirection="column" flexShrink={0}>
+    <Show when={prepared()} fallback={<CodeBlock content={props.source} language="mermaid"
+      theme={props.theme} headings={props.headings ?? defaultHeadingStyles} />}>
+      {(value) => <DiagramText prepared={value} />}
+    </Show>
+  </box>
+}

package/src/view/table.ts

@@ -0,0 +1,100 @@
+import {
+  BoxRenderable,
+  TextTableRenderable,
+  type MouseEvent,
+  type RenderContext,
+} from "@opentui/core"
+
+// In content mode a table keeps its natural columns even when its layout box is
+// narrower, so its drawn width can be larger than `table.width`. The layout
+// itself knows the drawn width; fall back to the box when the field is gone.
+function tableWidth(table: TextTableRenderable): number {
+  const layout = (
+    table as unknown as { computeLayout?: (maxWidth?: number) => { tableWidth?: number } | undefined }
+  ).computeLayout?.(undefined)
+  const width = layout?.tableWidth
+  if (typeof width === "number" && Number.isFinite(width) && width > 0) return Math.round(width)
+  return Number.isFinite(table.width) ? Math.round(table.width) : 0
+}
+
+// OpenTUI's table draws itself into the bounds it is given, so a table wider
+// than the document is clipped by the terminal. The wrapper keeps the table at
+// its natural width and moves it sideways, the same way a Mermaid diagram is
+// panned. A table that actually needs the scroller gives up cell selection:
+// otherwise a drag would select text instead of panning.
+export class ScrollableTableRenderable extends BoxRenderable {
+  protected readonly table: TextTableRenderable
+  protected offset = 0
+  protected panEnabled = true
+  private dragX: number | undefined
+
+  constructor(ctx: RenderContext, table: TextTableRenderable) {
+    super(ctx, {
+      width: "100%",
+      flexDirection: "row",
+      flexShrink: 0,
+      overflow: "hidden",
+    })
+    this.table = table
+    table.flexShrink = 0
+    this.add(table)
+    this.onMouseDown = (event: MouseEvent) => {
+      if (event.button !== 0) return
+      this.dragX = event.x
+    }
+    this.onMouseDrag = (event: MouseEvent) => {
+      if (this.dragX === undefined || !this.panEnabled) return
+      const dx = event.x - this.dragX
+      this.dragX = event.x
+      if (!dx || !this.overflows()) return
+      event.preventDefault()
+      event.stopPropagation()
+      this.scrollBy(-dx)
+    }
+    this.onMouseDragEnd = () => {
+      this.dragX = undefined
+    }
+    this.onMouseUp = () => {
+      this.dragX = undefined
+    }
+    // A vertical wheel is left to the host: the document scroll box owns it.
+    this.onMouseScroll = (event: MouseEvent) => {
+      const direction = event.scroll?.direction
+      if (!this.panEnabled || (direction !== "left" && direction !== "right")) return
+      if (!this.overflows()) return
+      event.preventDefault()
+      event.stopPropagation()
+      this.scrollBy(direction === "left" ? -2 : 2)
+    }
+  }
+
+  // A table that fits keeps cell selection; only a table that has to scroll
+  // gives its drag to the scroller.
+  protected override onResize(width: number, _height: number) {
+    super.onResize(width, _height)
+    this.syncOverflowState(width)
+  }
+
+  protected syncOverflowState(width = this.width) {
+    // A Solid custom renderable receives props before Yoga assigns its first
+    // width. Measuring the table at that point can poison the layout cache.
+    if (!Number.isFinite(width) || width <= 0) return
+    const viewport = Math.round(width)
+    const max = Math.max(0, tableWidth(this.table) - viewport)
+    this.offset = this.panEnabled ? Math.min(this.offset, max) : 0
+    this.table.marginLeft = -this.offset
+    this.table.selectable = !this.panEnabled || max === 0
+  }
+
+  private overflows(width = this.width) {
+    const viewportWidth = Number.isFinite(width) ? Math.round(width) : 0
+    return tableWidth(this.table) > viewportWidth
+  }
+
+  private scrollBy(delta: number) {
+    const viewportWidth = Number.isFinite(this.width) ? Math.round(this.width) : 0
+    const max = Math.max(0, tableWidth(this.table) - viewportWidth)
+    this.offset = Math.max(0, Math.min(max, this.offset + delta))
+    this.table.marginLeft = -this.offset
+  }
+}

package/themes/dark.json

@@ -0,0 +1,32 @@
+{
+  "mode": "dark",
+  "accent": "#58a6ff",
+  "categorical": ["#58a6ff", "#d2a8ff", "#3fb950", "#d29922", "#f85149", "#ffa657"],
+  "text": {
+    "base": "#e6edf3",
+    "muted": "#8b949e",
+    "feedback": { "error": "#f85149", "warning": "#d29922", "success": "#3fb950", "info": "#58a6ff" },
+    "action": { "primary": { "focused": "#58a6ff" } }
+  },
+  "background": { "base": "#0d1117" },
+  "border": { "base": "#30363d" },
+  "frame": { "border": "#30363d", "title": "#8b949e" },
+  "markdown": {
+    "text": "#e6edf3", "heading": "#d2a8ff",
+    "heading1": "#58a6ff", "heading2": "#d2a8ff", "heading3": "#d2a8ff",
+    "heading4": "#8b949e", "heading5": "#8b949e", "heading6": "#8b949e",
+    "link": "#58a6ff", "linkText": "#58a6ff", "code": "#ffa657",
+    "blockQuote": "#8b949e", "emphasis": "#e6edf3", "strong": "#e6edf3",
+    "horizontalRule": "#30363d", "listItem": "#e6edf3", "listEnumeration": "#e6edf3",
+    "image": "#58a6ff", "imageText": "#58a6ff", "codeBlock": "#e6edf3"
+  },
+  "syntax": {
+    "comment": "#8b949e", "keyword": "#ff7b72", "function": "#d2a8ff",
+    "variable": "#ffa657", "string": "#a5d6ff", "number": "#79c0ff",
+    "type": "#ffa657", "operator": "#ff7b72", "punctuation": "#c9d1d9"
+  },
+  "diff": {
+    "text": { "added": "#3fb950", "removed": "#f85149", "context": "#8b949e" },
+    "background": { "added": "#12261e", "removed": "#25171c", "context": "#161b22" }
+  }
+}

package/themes/example.jsonc

@@ -0,0 +1,98 @@
+{
+  // The semantic mode controls contrast-sensitive derived colours.
+  "mode": "dark",
+
+  // Optional fixed Mermaid diagram palette. Omit it to derive diagram colours.
+  "palette": [
+    "#58a6ff", "#d2a8ff", "#3fb950", "#d29922", "#f85149", "#ffa657"
+  ],
+
+  // Main accent and the categorical colours used by diagrams and UI elements.
+  "accent": "#58a6ff",
+  "categorical": ["#58a6ff", "#d2a8ff", "#3fb950", "#d29922", "#f85149", "#ffa657"],
+
+  "text": {
+    "base": "#e6edf3",
+    "muted": "#8b949e",
+    "feedback": {
+      "error": "#f85149",
+      "warning": "#d29922",
+      "success": "#3fb950",
+      "info": "#58a6ff"
+    },
+    "action": {
+      "primary": {
+        "focused": "#58a6ff"
+      }
+    }
+  },
+
+  "background": {
+    "base": "#0d1117"
+  },
+  "border": {
+    "base": "#30363d"
+  },
+
+  // Frame and statusline are optional in the resolved API; these examples show
+  // the complete file shape and can be adjusted independently.
+  "frame": {
+    "border": "#30363d",
+    "title": "#8b949e"
+  },
+  "statusline": {
+    "background": "#161b22",
+    "foreground": "#e6edf3",
+    "title": "#58a6ff",
+    "muted": "#8b949e",
+    "border": "#58a6ff"
+  },
+
+  "markdown": {
+    "text": "#e6edf3",
+    "heading": "#d2a8ff",
+    "heading1": "#58a6ff",
+    "heading2": "#d2a8ff",
+    "heading3": "#d2a8ff",
+    "heading4": "#8b949e",
+    "heading5": "#8b949e",
+    "heading6": "#8b949e",
+    "link": "#58a6ff",
+    "linkText": "#58a6ff",
+    "code": "#ffa657",
+    "blockQuote": "#8b949e",
+    "emphasis": "#e6edf3",
+    "strong": "#e6edf3",
+    "horizontalRule": "#30363d",
+    "listItem": "#e6edf3",
+    "listEnumeration": "#e6edf3",
+    "image": "#58a6ff",
+    "imageText": "#58a6ff",
+    "codeBlock": "#e6edf3"
+  },
+
+  "syntax": {
+    "comment": "#8b949e",
+    "keyword": "#ff7b72",
+    "function": "#d2a8ff",
+    "variable": "#ffa657",
+    "string": "#a5d6ff",
+    "number": "#79c0ff",
+    "type": "#ffa657",
+    "operator": "#ff7b72",
+    "punctuation": "#c9d1d9"
+  },
+
+  "diff": {
+    "text": {
+      "added": "#3fb950",
+      "removed": "#f85149",
+      "context": "#8b949e"
+    },
+    "background": {
+      "added": "#12261e",
+      "removed": "#25171c",
+      "context": "#161b22"
+    }
+  }
+}

package/themes/light.json

@@ -0,0 +1,32 @@
+{
+  "mode": "light",
+  "accent": "#0969da",
+  "categorical": ["#0969da", "#8250df", "#1a7f37", "#9a6700", "#cf222e", "#bc4c00"],
+  "text": {
+    "base": "#1f2328",
+    "muted": "#59636e",
+    "feedback": { "error": "#cf222e", "warning": "#9a6700", "success": "#1a7f37", "info": "#0969da" },
+    "action": { "primary": { "focused": "#0969da" } }
+  },
+  "background": { "base": "#ffffff" },
+  "border": { "base": "#8c959f" },
+  "frame": { "border": "#8c959f", "title": "#59636e" },
+  "markdown": {
+    "text": "#1f2328", "heading": "#8250df",
+    "heading1": "#0969da", "heading2": "#8250df", "heading3": "#8250df",
+    "heading4": "#6f42c1", "heading5": "#3d444d", "heading6": "#3d444d",
+    "link": "#0969da", "linkText": "#0969da", "code": "#953800",
+    "blockQuote": "#59636e", "emphasis": "#1f2328", "strong": "#1f2328",
+    "horizontalRule": "#d1d9e0", "listItem": "#1f2328", "listEnumeration": "#1f2328",
+    "image": "#0969da", "imageText": "#0969da", "codeBlock": "#1f2328"
+  },
+  "syntax": {
+    "comment": "#59636e", "keyword": "#cf222e", "function": "#8250df",
+    "variable": "#1f2328", "string": "#0a3069", "number": "#0550ae",
+    "type": "#0550ae", "operator": "#0550ae", "punctuation": "#1f2328"
+  },
+  "diff": {
+    "text": { "added": "#1a7f37", "removed": "#cf222e", "context": "#59636e" },
+    "background": { "added": "#dafbe1", "removed": "#ffebe9", "context": "#f6f8fa" }
+  }
+}

package/themes/solarized-dark.json

@@ -0,0 +1,32 @@
+{
+  "mode": "dark",
+  "palette": ["#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3", "#b58900", "#cb4b16", "#dc322f", "#d33682", "#6c71c4", "#268bd2", "#2aa198", "#859900"],
+  "accent": "#268bd2",
+  "categorical": ["#268bd2", "#6c71c4", "#859900", "#b58900", "#dc322f", "#cb4b16"],
+  "text": {
+    "base": "#93a1a1", "muted": "#839496",
+    "feedback": { "error": "#dc322f", "warning": "#b58900", "success": "#859900", "info": "#268bd2" },
+    "action": { "primary": { "focused": "#268bd2" } }
+  },
+  "background": { "base": "#002b36" },
+  "border": { "base": "#586e75" },
+  "frame": { "border": "#586e75", "title": "#93a1a1" },
+  "markdown": {
+    "text": "#93a1a1", "heading": "#268bd2",
+    "heading1": "#268bd2", "heading2": "#268bd2", "heading3": "#268bd2",
+    "heading4": "#268bd2", "heading5": "#268bd2", "heading6": "#268bd2",
+    "link": "#268bd2", "linkText": "#268bd2", "code": "#cb4b16",
+    "blockQuote": "#839496", "emphasis": "#93a1a1", "strong": "#93a1a1",
+    "horizontalRule": "#586e75", "listItem": "#93a1a1", "listEnumeration": "#93a1a1",
+    "image": "#268bd2", "imageText": "#268bd2", "codeBlock": "#93a1a1"
+  },
+  "syntax": {
+    "comment": "#839496", "keyword": "#dc322f", "function": "#6c71c4",
+    "variable": "#93a1a1", "string": "#2aa198", "number": "#d33682",
+    "type": "#b58900", "operator": "#268bd2", "punctuation": "#93a1a1"
+  },
+  "diff": {
+    "text": { "added": "#859900", "removed": "#dc322f", "context": "#839496" },
+    "background": { "added": "#073642", "removed": "#073642", "context": "#073642" }
+  }
+}

package/themes/solarized-light.json

@@ -0,0 +1,32 @@
+{
+  "mode": "light",
+  "palette": ["#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3", "#b58900", "#cb4b16", "#dc322f", "#d33682", "#6c71c4", "#268bd2", "#2aa198", "#859900"],
+  "accent": "#268bd2",
+  "categorical": ["#268bd2", "#6c71c4", "#859900", "#b58900", "#dc322f", "#cb4b16"],
+  "text": {
+    "base": "#586e75", "muted": "#657b83",
+    "feedback": { "error": "#dc322f", "warning": "#b58900", "success": "#859900", "info": "#268bd2" },
+    "action": { "primary": { "focused": "#268bd2" } }
+  },
+  "background": { "base": "#fdf6e3" },
+  "border": { "base": "#657b83" },
+  "frame": { "border": "#657b83", "title": "#586e75" },
+  "markdown": {
+    "text": "#586e75", "heading": "#268bd2",
+    "heading1": "#268bd2", "heading2": "#268bd2", "heading3": "#268bd2",
+    "heading4": "#268bd2", "heading5": "#268bd2", "heading6": "#268bd2",
+    "link": "#268bd2", "linkText": "#268bd2", "code": "#cb4b16",
+    "blockQuote": "#657b83", "emphasis": "#586e75", "strong": "#586e75",
+    "horizontalRule": "#657b83", "listItem": "#586e75", "listEnumeration": "#586e75",
+    "image": "#268bd2", "imageText": "#268bd2", "codeBlock": "#586e75"
+  },
+  "syntax": {
+    "comment": "#657b83", "keyword": "#dc322f", "function": "#6c71c4",
+    "variable": "#586e75", "string": "#2aa198", "number": "#d33682",
+    "type": "#b58900", "operator": "#268bd2", "punctuation": "#586e75"
+  },
+  "diff": {
+    "text": { "added": "#859900", "removed": "#dc322f", "context": "#657b83" },
+    "background": { "added": "#eee8d5", "removed": "#eee8d5", "context": "#eee8d5" }
+  }
+}