opentui-markdown-render 0.0.0-stage → 0.2.0

package/src/view/frame.tsx

@@ -0,0 +1,83 @@
+import type { BorderCharacters, BorderStyle } from "@opentui/core"
+import type { JSX } from "solid-js"
+import type { FrameAlign, FrameStyle, ResolvedFrame } from "../core/frame"
+import type { Theme } from "../theme/types"
+
+// OpenTUI only ships the Unicode border sets, so the ASCII frame is expressed as
+// its own character table. Every corner is the same `+`, which is the look the
+// plain-text sketches ask for.
+const asciiBorder: BorderCharacters = {
+  topLeft: "+",
+  topRight: "+",
+  bottomLeft: "+",
+  bottomRight: "+",
+  horizontal: "-",
+  vertical: "|",
+  topT: "+",
+  bottomT: "+",
+  leftT: "+",
+  rightT: "+",
+  cross: "+",
+}
+
+function borderStyle(style: FrameStyle): BorderStyle {
+  if (style === "rounded" || style === "heavy" || style === "double") return style
+  return "single"
+}
+
+function alignSelf(align: FrameAlign) {
+  if (align === "left") return "flex-start" as const
+  if (align === "right") return "flex-end" as const
+  return "center" as const
+}
+
+export function frameBorderColor(theme: Theme) {
+  return theme.frame?.border ?? theme.border.base
+}
+
+export function frameTitleColor(theme: Theme) {
+  return theme.frame?.title ?? theme.text.muted
+}
+
+// The border props are only handed to the box when the frame is on. OpenTUI's
+// `borderStyle` and `borderColor` setters enable the border as a side effect, so
+// passing them while the frame is off would draw a window the host never asked
+// for.
+function borderProps(frame: ResolvedFrame, theme: Theme) {
+  if (!frame.enabled) return {}
+  return {
+    border: true,
+    borderStyle: borderStyle(frame.style),
+    customBorderChars: frame.style === "ascii" ? asciiBorder : undefined,
+    borderColor: frameBorderColor(theme),
+    title: frame.title,
+    titleColor: frameTitleColor(theme),
+    titleAlignment: frame.titleAlign,
+  }
+}
+
+// The frame is deliberately just a box around whatever the host puts inside it.
+// It owns no document state, so a host can wrap its own scroll box and keep the
+// border fixed while the document scrolls, or let the document renderer draw it.
+export function MarkdownFrame(props: {
+  readonly frame: ResolvedFrame
+  readonly theme: Theme
+  readonly children: JSX.Element
+}) {
+  return (
+    <box
+      width={props.frame.width}
+      alignSelf={alignSelf(props.frame.align)}
+      flexDirection="column"
+      flexShrink={0}
+      backgroundColor={props.theme.background.base}
+      paddingLeft={props.frame.paddingX}
+      paddingRight={props.frame.paddingX}
+      paddingTop={props.frame.paddingY}
+      paddingBottom={props.frame.paddingY}
+      {...borderProps(props.frame, props.theme)}
+    >
+      {props.children}
+    </box>
+  )
+}

package/src/view/inline-flow.tsx

@@ -0,0 +1,113 @@
+import { createEffect, createMemo, For, Show } from "solid-js"
+import { StyledText, type RGBA, type TextChunk, type TextRenderable } from "@opentui/core"
+import { mosaicScale, type CanvasGraphics } from "../graphics"
+import { mathImageID, rgbaToHex } from "../math"
+import { layoutAtoms, type LayoutRun, type MathVariant } from "./inline-layout"
+import { flattenInline, type InlineStyleContext } from "./inline-style"
+import { useInlineMathImages } from "./inline-math"
+import type { Inline } from "../core/document"
+import type { Theme, HeadingLevel } from "../theme/types"
+import { headingColor, type HeadingStyles } from "../headings"
+
+export type InlineFlowProps = {
+  inlines: readonly Inline[]
+  columns: number
+  theme: Theme
+  headings: HeadingStyles
+  graphics: CanvasGraphics
+  surface: () => string
+  quote?: boolean
+  heading?: { level: HeadingLevel }
+  prefix?: (index: number) => string
+  prefixColor?: () => RGBA
+  prefixChunks?: (index: number) => TextChunk[]
+}
+
+function PrefixSegment(props: { chunks: () => TextChunk[]; width: number }) {
+  let ref: TextRenderable | undefined
+  createEffect(() => {
+    if (ref) ref.content = new StyledText(props.chunks())
+  })
+  return <text ref={ref} wrapMode="none" width={props.width} flexShrink={0} />
+}
+
+function StyledSegment(props: { entry: LayoutRun; textRow: number }) {
+  let ref: TextRenderable | undefined
+  createEffect(() => {
+    const atom = props.entry.atom
+    if (ref && atom.type === "text") {
+      ref.content = new StyledText([{
+        __isChunk: true, text: atom.text, fg: atom.fg, attributes: atom.attributes,
+        ...(atom.href ? { link: { url: atom.href } } : {}),
+      }])
+    }
+  })
+  return <text ref={ref} width={props.entry.columns} flexShrink={0} wrapMode="none" marginTop={props.textRow} />
+}
+
+export function InlineFlow(props: InlineFlowProps) {
+  const atoms = createMemo(() => {
+    const ctx: InlineStyleContext = { theme: props.theme, headings: props.headings, quote: props.quote, heading: props.heading,
+      hyperlinks: props.graphics.hyperlinks?.() ?? true }
+    return flattenInline(props.inlines, ctx)
+  })
+  const contents = createMemo(() => [...new Set(atoms().flatMap((atom) => atom.type === "math" ? [atom.content] : []))])
+  const foreground = () => rgbaToHex(props.heading ? headingColor(props.theme, props.heading.level) : props.theme.text.base)
+  const images = useInlineMathImages(contents, foreground, props.surface, props.graphics.cell)
+  const scale = createMemo(() => mosaicScale(props.graphics.protocol()))
+  const prefixWidth = () => props.prefix?.(0).length ?? 0
+  const columns = () => Math.max(1, props.columns - prefixWidth())
+  const lines = createMemo(() => layoutAtoms(atoms(), columns(), (content) => {
+    const image = images().get(content)
+    if (!image) return undefined
+    return {
+      normal: { columns: Math.max(1, Math.round(image.normal.columns * scale())), rows: Math.max(1, Math.round(image.normal.rows * scale())), baseline: image.normal.baseline * scale() },
+      compact: { columns: Math.max(1, Math.round(image.compact.columns * scale())), rows: image.compact.rows === 1 ? 1 : Math.max(1, Math.round(image.compact.rows * scale())), baseline: image.compact.baseline * scale() },
+      standard: { columns: Math.max(1, Math.round(image.standard.columns * scale())), rows: Math.max(1, Math.round(image.standard.rows * scale())), baseline: image.standard.baseline * scale() },
+    }
+  }, props.graphics.protocol() !== "blocks"))
+
+  return (
+    <box width="100%" flexDirection="column" flexShrink={0}>
+      <For each={lines()}>
+        {(line, index) => (
+          <box flexDirection="row" alignItems="flex-start" width="100%" height={line.height} flexShrink={0} backgroundColor={props.theme.background.base}>
+            <Show when={props.prefix}>
+              <Show when={props.prefixChunks} fallback={<text fg={props.prefixColor?.() ?? props.theme.markdown.text}
+                wrapMode="none" width={prefixWidth()} flexShrink={0}>{props.prefix?.(index()) ?? ""}</text>}>
+                {(chunks) => <PrefixSegment chunks={() => chunks()(index())} width={prefixWidth()} />}
+              </Show>
+            </Show>
+            <For each={line.runs}>
+              {(entry, position) => {
+                const atom = entry.atom
+                if (atom.type === "text") {
+                  const visible = position() === line.runs.length - 1 ? atom.text.trimEnd() : atom.text
+                  return <StyledSegment entry={{ ...entry, atom: { ...atom, text: visible } }} textRow={line.textRow} />
+                }
+                const variant: MathVariant = entry.variant ?? "normal"
+                return (
+                  <Show when={images().get(atom.content)?.[variant]} fallback={
+                    <text fg={props.theme.text.muted} wrapMode="none" width={entry.columns} flexShrink={0}>{atom.raw}</text>
+                  }>
+                    {(image) => (
+                      <image
+                        id={`opentui-markdown-math-${mathImageID(atom.content, false, foreground(), props.graphics.cell(), 1, variant === "compact", variant === "standard")}-${props.surface()}`}
+                        source={image().png}
+                        fit="fit"
+                        protocol="auto"
+                        width={entry.columns}
+                        height={entry.rows}
+                        flexShrink={0}
+                      />
+                    )}
+                  </Show>
+                )
+              }}
+            </For>
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}

package/src/view/inline-layout.ts

@@ -0,0 +1,149 @@
+import stringWidth from "string-width"
+import type { StyledAtom } from "./inline-style"
+
+export type MathMeasure = { columns: number; rows: number; baseline: number }
+export type MathVariant = "normal" | "compact" | "standard"
+export type LayoutRun = { atom: Extract<StyledAtom, { type: "text" | "math" }>; columns: number; rows: number; variant?: MathVariant }
+export type LayoutLine = { runs: LayoutRun[]; columns: number; height: number; textRow: number }
+
+function hardChunks(content: string, columns: number) {
+  const chunks: string[] = []
+  let current = ""
+  for (const character of content) {
+    if (current && stringWidth(current + character) > columns) {
+      chunks.push(current)
+      current = character
+      continue
+    }
+    current += character
+  }
+  if (current) chunks.push(current)
+  return chunks
+}
+
+// Measurements, compact collision checks, and standard-size choices use the
+// shared styled AST.
+export function layoutAtoms(
+  atoms: readonly StyledAtom[],
+  columns: number,
+  measureOf: (content: string) => { normal: MathMeasure; compact: MathMeasure; standard: MathMeasure } | undefined,
+  compactOverflow: boolean,
+): LayoutLine[] {
+  columns = Math.max(1, columns)
+  const lines: LayoutLine[] = []
+  let current: LayoutLine = { runs: [], columns: 0, height: 1, textRow: 0 }
+  const flush = (force = false) => {
+    if (!current.runs.length && !force) return
+    lines.push(current)
+    current = { runs: [], columns: 0, height: 1, textRow: 0 }
+  }
+  const place = (run: LayoutRun, textRow = 0) => {
+    const add = (entry: LayoutRun) => {
+      current.runs.push(entry)
+      current.columns += entry.columns
+      current.height = Math.max(current.height, entry.rows, textRow + 1)
+      current.textRow = Math.max(current.textRow, textRow)
+    }
+    if (current.columns + run.columns <= columns || !current.runs.length) {
+      add(run)
+      return
+    }
+    if (run.atom.type === "text") {
+      const text = run.atom.text.trimStart()
+      const trimmed = { ...run, atom: { ...run.atom, text }, columns: stringWidth(text) }
+      if (current.columns + trimmed.columns <= columns) {
+        add(trimmed)
+        return
+      }
+      flush()
+      add(trimmed)
+      return
+    }
+    flush()
+    add(run)
+  }
+
+  for (const atom of atoms) {
+    if (atom.type === "break") {
+      flush(true)
+      continue
+    }
+    if (atom.type === "math") {
+      const natural = measureOf(atom.content)?.normal
+      const squeezed = natural ? natural.columns > columns : false
+      const entry: LayoutRun = natural
+        ? { atom, columns: squeezed ? columns : natural.columns, rows: Math.max(1, Math.round(squeezed ? natural.rows * columns / natural.columns : natural.rows)) }
+        : { atom, columns: Math.min(columns, Math.max(3, atom.raw.length)), rows: 1 }
+      place(entry, natural ? Math.max(0, Math.ceil(natural.baseline) - 1) : 0)
+      continue
+    }
+    // Soft newlines in Markdown prose are spaces. A hard break is its own atom.
+    const normalized = atom.text.replace(/\r?\n/g, " ")
+    const words = normalized.match(/\s*\S+\s*/g) ?? (normalized ? [normalized] : [])
+    for (const word of words) {
+      if (stringWidth(word) > columns) {
+        for (const chunk of hardChunks(word.trimEnd(), columns)) {
+          place({ atom: { ...atom, text: chunk }, columns: stringWidth(chunk), rows: 1 })
+        }
+      } else {
+        place({ atom: { ...atom, text: word }, columns: stringWidth(word), rows: 1 })
+      }
+    }
+  }
+  flush()
+
+  if (compactOverflow) {
+    let changed = true
+    while (changed) {
+      changed = false
+      const occupied = lines.flatMap((line, row) => {
+        let column = 0
+        return line.runs.map((entry) => {
+          const area = {
+            entry, column,
+            row: row + (entry.atom.type === "text" ? line.textRow : 0),
+            rows: entry.atom.type === "math" ? entry.rows : 1,
+          }
+          column += entry.columns
+          return area
+        })
+      })
+      for (const area of occupied) {
+        if (area.entry.atom.type !== "math" || area.entry.variant === "compact" || area.rows <= 1) continue
+        const collision = occupied.some((other) =>
+          other.entry !== area.entry &&
+          other.column < area.column + area.entry.columns &&
+          area.column < other.column + other.entry.columns &&
+          other.row < area.row + area.rows &&
+          area.row + 1 < other.row + other.rows,
+        )
+        if (!collision) continue
+        const compact = measureOf(area.entry.atom.content)?.compact
+        if (!compact) continue
+        area.entry.variant = "compact"
+        area.entry.columns = compact.columns
+        area.entry.rows = compact.rows
+        changed = true
+      }
+    }
+  }
+  for (const line of lines) {
+    const entry = line.runs.at(-1)
+    if (!entry || entry.atom.type !== "math" || entry.variant === "compact") continue
+    const standard = measureOf(entry.atom.content)?.standard
+    if (!standard || line.columns - entry.columns + standard.columns > columns) continue
+    entry.variant = "standard"
+    entry.columns = standard.columns
+    entry.rows = standard.rows
+  }
+  for (const line of lines) {
+    line.columns = line.runs.reduce((total, entry) => total + entry.columns, 0)
+    line.textRow = Math.max(0, ...line.runs.flatMap((entry) => {
+      if (entry.atom.type !== "math") return []
+      const measured = measureOf(entry.atom.content)
+      return measured ? [Math.max(0, Math.ceil(measured[entry.variant ?? "normal"].baseline) - 1)] : []
+    }))
+    line.height = Math.max(1, line.textRow + 1, ...line.runs.map((entry) => entry.rows))
+  }
+  return lines
+}

package/src/view/inline-math.ts

@@ -0,0 +1,42 @@
+import { createMemo, createResource, type Accessor } from "solid-js"
+import { renderMathImage, type MathImage } from "../math"
+import type { CellSize } from "../graphics"
+
+export type InlineMathImages = Map<string, { normal: MathImage; compact: MathImage; standard: MathImage }>
+
+export function useInlineMathImages(
+  contents: Accessor<readonly string[]>,
+  foreground: Accessor<string>,
+  background: Accessor<string>,
+  cell: Accessor<CellSize | null>,
+): Accessor<InlineMathImages> {
+  const [rendered] = createResource(
+    () => JSON.stringify({ contents: contents(), color: foreground(), surface: background(), cell: cell() }),
+    async (key) => {
+      const input = JSON.parse(key) as { contents: string[]; color: string; surface: string; cell: CellSize | null }
+      return Promise.all(input.contents.map(async (content) => {
+        try {
+          const normal = await renderMathImage(content, false, input.color, input.surface, input.cell)
+          if (!normal) return undefined
+          const compact = normal.rows > 1
+            ? await renderMathImage(content, false, input.color, input.surface, input.cell, 1, true)
+            : normal
+          const standard = normal.clamped
+            ? await renderMathImage(content, false, input.color, input.surface, input.cell, 1, false, true)
+            : normal
+          return { normal, compact: compact ?? normal, standard: standard ?? normal }
+        } catch {
+          return undefined
+        }
+      }))
+    },
+  )
+  return createMemo(() => {
+    const values = rendered()
+    if (!values) return new Map()
+    return new Map(contents().flatMap((content, index) => {
+      const image = values[index]
+      return image ? [[content, image] as const] : []
+    }))
+  })
+}

package/src/view/inline-style.ts

@@ -0,0 +1,103 @@
+import { TextAttributes, type RGBA, type TextChunk } from "@opentui/core"
+import type { HeadingLevel, Theme } from "../theme/types"
+import type { HeadingStyles } from "../headings"
+import { headingAttributes, headingColor } from "../headings"
+import type { Inline } from "../core/document"
+
+export type StyledAtom =
+  | { type: "text"; text: string; fg: RGBA; attributes: number; href?: string }
+  | { type: "math"; content: string; raw: string; open: string; close: string }
+  | { type: "break"; hard: true }
+
+export type InlineStyleContext = {
+  theme: Theme
+  headings: HeadingStyles
+  heading?: { level: HeadingLevel }
+  quote?: boolean
+  link?: { href: string; title?: string | null }
+  attributes?: number
+  hyperlinks?: boolean
+}
+
+export function flattenInline(inlines: readonly Inline[], ctx: InlineStyleContext): StyledAtom[] {
+  const out: StyledAtom[] = []
+  const baseAttr = (ctx.attributes ?? 0) |
+    (ctx.heading ? headingAttributes(ctx.headings[ctx.heading.level]) : 0) |
+    (ctx.quote ? TextAttributes.ITALIC : 0)
+  const quote = !!ctx.quote
+  const linkCtx = ctx.link
+
+  function walk(list: readonly Inline[], attr: number, link: { href: string; title?: string | null } | undefined) {
+    for (const node of list) {
+      if (node.type === "text") {
+        let fg = ctx.theme.markdown.text
+        if (quote && !link && !ctx.heading) fg = ctx.theme.markdown.blockQuote
+        if (ctx.heading) fg = headingColor(ctx.theme, ctx.heading.level)
+        if (link) fg = ctx.theme.markdown.linkText
+        else if (attr & TextAttributes.BOLD && !ctx.heading) fg = ctx.theme.markdown.strong
+        else if (attr & TextAttributes.ITALIC && !ctx.heading && !quote) fg = ctx.theme.markdown.emphasis
+        if (node.text) out.push({ type: "text", text: node.text, fg, attributes: baseAttr | attr | (link ? TextAttributes.UNDERLINE : 0), href: link?.href })
+        continue
+      }
+      if (node.type === "code") {
+        // code has priority styling
+        const fg = ctx.theme.markdown.code
+        out.push({ type: "text", text: node.text, fg, attributes: TextAttributes.NONE, href: link?.href })
+        continue
+      }
+      if (node.type === "math") {
+        out.push({ type: "math", content: node.content, raw: node.raw, open: node.open, close: node.close })
+        continue
+      }
+      if (node.type === "break") {
+        out.push({ type: "break", hard: true })
+        continue
+      }
+      if (node.type === "strong") {
+        walk(node.children, attr | TextAttributes.BOLD, link)
+        continue
+      }
+      if (node.type === "em") {
+        walk(node.children, attr | TextAttributes.ITALIC, link)
+        continue
+      }
+      if (node.type === "del") {
+        walk(node.children, attr | TextAttributes.STRIKETHROUGH, link)
+        continue
+      }
+      if (node.type === "link") {
+        const l = { href: node.href, title: node.title }
+        walk(node.children, attr, l)
+        const label = node.children.map((child) => child.type === "text" || child.type === "code" ? child.text : "").join("")
+        if (ctx.hyperlinks === false && label !== node.href) {
+          out.push({ type: "text", text: ` (${node.href})`, fg: ctx.theme.markdown.link, attributes: baseAttr, href: node.href })
+        }
+        continue
+      }
+      if (node.type === "inline-image") {
+        const l = link
+        // render alt as text with link style
+        out.push({ type: "text", text: node.alt || node.href || "image", fg: ctx.theme.markdown.linkText, attributes: baseAttr | attr, href: l?.href || node.href })
+        continue
+      }
+    }
+  }
+
+  walk(inlines, baseAttr, linkCtx)
+  return out
+}
+
+export function toTableChunks(inlines: readonly Inline[], theme: Theme, headings: HeadingStyles, hyperlinks = true): TextChunk[] {
+  const chunks: TextChunk[] = []
+  for (const atom of flattenInline(inlines, { theme, headings, hyperlinks })) {
+    if (atom.type === "text") {
+      chunks.push({ __isChunk: true, text: atom.text, fg: atom.fg, attributes: atom.attributes,
+        ...(atom.href ? { link: { url: atom.href } } : {}) })
+    } else if (atom.type === "math") {
+      chunks.push({ __isChunk: true, text: atom.raw, fg: theme.markdown.text })
+    } else {
+      chunks.push({ __isChunk: true, text: "\n", fg: theme.markdown.text })
+    }
+  }
+  return chunks.length ? chunks : [{ __isChunk: true, text: " ", fg: theme.markdown.text }]
+}

package/src/view/math.tsx

@@ -0,0 +1,85 @@
+import { createResource, createSignal, Match, Switch } from "solid-js"
+import { mosaicScale, type CanvasGraphics } from "../graphics"
+import { mathImageID, renderMathImage, rgbaToHex, type CellSize, type MathImage } from "../math"
+import type { Theme } from "../theme/types"
+
+// Display math owns its own block. Inline math flows with the text around it.
+export function DisplayMath(props: {
+  content: string
+  open: string
+  close: string
+  maxWidth: () => number
+  surface: () => string
+  theme: () => Theme
+  graphics: CanvasGraphics
+}) {
+  const [failed, setFailed] = createSignal(false)
+  const color = () => rgbaToHex(props.theme().text.base)
+  // The block-character mosaic packs two vertical pixels per cell, so its
+  // cell box (not its raster) is scaled separately from font rasterization.
+  const mosaic = () => mosaicScale(props.graphics.protocol())
+  // Unrenderable TeX is a value here, not a rejected resource: reading a rejected
+  // resource throws, which would abort the tree on the next update.
+  const [rendered] = createResource(
+    () =>
+      JSON.stringify({
+        content: props.content,
+        color: color(),
+        background: props.surface(),
+        cell: props.graphics.cell(),
+      }),
+    async (key): Promise<{ raster: MathImage } | { error: string }> => {
+      const input = JSON.parse(key) as { content: string; color: string; background: string; cell: CellSize | null }
+      try {
+        const raster = await renderMathImage(input.content, true, input.color, input.background, input.cell)
+        return raster ? { raster } : { error: "Renderer returned no image" }
+      } catch (error) {
+        return { error: error instanceof Error ? error.message : String(error) }
+      }
+    },
+  )
+  const raster = () => {
+    const value = rendered()
+    return value && "raster" in value ? value.raster : undefined
+  }
+  const source = () => `${props.open}${props.content}${props.close}`
+  const box = () => {
+    const image = raster()
+    const columns = (image ? image.columns : Math.min(24, props.maxWidth())) * mosaic()
+    const rows = (image ? image.rows : 3) * mosaic()
+    const max = props.maxWidth()
+    if (columns <= max) return { columns, rows: Math.max(1, rows) }
+    return { columns: max, rows: Math.max(1, Math.round((rows * max) / columns)) }
+  }
+
+  return (
+    <box width="100%" flexShrink={0} flexDirection="column" marginTop={1} marginBottom={1}>
+      <Switch>
+        <Match when={rendered.loading}>
+          <text fg={props.theme().text.muted} alignSelf="center">Rendering math...</text>
+        </Match>
+        <Match when={failed() || (rendered() && "error" in rendered()!)}>
+          <box flexDirection="column" border={["left"]} borderColor={props.theme().text.feedback.error} paddingLeft={1} alignSelf="center">
+            <text fg={props.theme().text.feedback.error}>Could not render TeX; showing source</text>
+            <text fg={props.theme().text.base} wrapMode="word">
+              {source()}
+            </text>
+          </box>
+        </Match>
+        <Match when={raster()}>
+          <box width="100%" height={box().rows} flexShrink={0} alignItems="center" justifyContent="center">
+            <image
+              id={`opentui-markdown-math-${mathImageID(props.content, true, color(), props.graphics.cell())}-${props.surface()}`}
+              source={raster()!.png}
+              fit="fit"
+              protocol="auto"
+              width={box().columns}
+              height={box().rows}
+              onError={() => setFailed(true)}
+            />
+          </box>
+        </Match>
+      </Switch>
+    </box>
+  )
+}