opentui-markdown-render 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opentui-markdown-render",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "OpenTUI Markdown renderer with optional native LaTeX math",
   "type": "module",
   "license": "MIT",

package/src/app.tsx

@@ -1,5 +1,5 @@
-import type { CliRenderer, SyntaxStyle } from "@opentui/core"
-import { createMemo, createSignal, onCleanup } from "solid-js"
+import type { CliRenderer } from "@opentui/core"
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { useCanvasGraphics } from "./graphics"
 import { resolveHeadingStyles } from "./headings"
 import { rgbaToHex } from "./math"
@@ -155,14 +155,14 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
   // The look of the heading levels is a configuration of its own: the colours
   // come from the theme, the attributes and the spacing from the config file.
   const headings = createMemo(() => resolveHeadingStyles(config().headings))
-  let currentSyntax: SyntaxStyle | undefined
   const syntaxStyle = createMemo(() => {
-    currentSyntax?.destroy()
     const nativeScene = (renderer as CliRenderer & { readonly nativeScene?: object }).nativeScene
-    currentSyntax = generateSyntax(theme(), headings(), theme().markdown.codeBlock, nativeScene)
-    return currentSyntax
+    return generateSyntax(theme(), headings(), theme().markdown.codeBlock, nativeScene)
+  })
+  createEffect(() => {
+    const style = syntaxStyle()
+    onCleanup(() => void renderer.idle().then(() => style.destroy()))
   })
-  onCleanup(() => currentSyntax?.destroy())
   return (
         <box
           width="100%"

package/src/media.tsx

@@ -1,5 +1,6 @@
 import { NativeImage, imageInfo, parseColor, type ColorInput, type RGBA } from "@opentui/core"
-import { decompressFrames, parseGIF } from "gifuct-js"
+import { useRenderer } from "@opentui/solid"
+import { decompressFrame, parseGIF, type ParsedGif } from "gifuct-js"
 import path from "node:path"
 import { createEffect, createResource, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
 
@@ -44,8 +45,16 @@ export function rgbToHex(color: Rgb) {
   return `#${channel(color[0])}${channel(color[1])}${channel(color[2])}`
 }
 
-type AnimatedFrame = { readonly image: NativeImage; readonly delay: number }
-type Media = { readonly box: { columns: number; rows: number }; readonly image?: NativeImage; readonly frames?: readonly AnimatedFrame[] }
+type GifFrame = Parameters<typeof decompressFrame>[0]
+type GifAnimation = {
+  readonly width: number
+  readonly height: number
+  readonly frames: readonly GifFrame[]
+  readonly colorTable: ParsedGif["gct"]
+  readonly target: { width: number; height: number }
+  readonly background: Rgb
+}
+type Media = { readonly box: { columns: number; rows: number }; readonly image?: NativeImage; readonly animation?: GifAnimation }
 
 export { standaloneImage, type MarkdownImage } from "./core/image"
 
@@ -88,6 +97,7 @@ export function LocalImage(props: {
   readonly textColor?: () => RGBA
   readonly limits?: ImageLimits
 }) {
+  const renderer = useRenderer()
   const [failure, setFailure] = createSignal<string>()
   // The cell size is part of the key so the image is reloaded and re-fitted once
   // the terminal reports its pixel resolution (kitty queries it after startup).
@@ -145,26 +155,40 @@ export function LocalImage(props: {
 
   createEffect(() => {
     const value = media()
-    if (!value?.frames?.length) {
+    if (!value?.animation) {
       setFrame(value?.image)
       return
     }
+    const animation = value.animation
+    const canvas = new Uint8Array(animation.width * animation.height * 4)
     let index = 0
+    let current: NativeImage | undefined
     let timer: ReturnType<typeof setTimeout> | undefined
     const next = () => {
-      const current = value.frames![index]!
-      setFrame(current.image)
-      index = (index + 1) % value.frames!.length
-      timer = setTimeout(next, current.delay)
+      const decoded = decompressFrame(animation.frames[index]!, animation.colorTable, true)
+      const before = decoded.disposalType === 3 ? canvas.slice() : undefined
+      drawPatch(canvas, animation.width, animation.height, decoded.patch, decoded.dims.left, decoded.dims.top, decoded.dims.width, decoded.dims.height)
+      const image = prepareImage(NativeImage.fromRgba(canvas.slice(), animation.width, animation.height), animation.target, animation.background)
+      const previous = current
+      current = image
+      setFrame(image)
+      if (previous) void renderer.idle().then(() => previous.dispose())
+      if (decoded.disposalType === 2) clearPatch(canvas, animation.width, decoded.dims.left, decoded.dims.top, decoded.dims.width, decoded.dims.height)
+      if (before) canvas.set(before)
+      index = (index + 1) % animation.frames.length
+      timer = setTimeout(next, Math.max(50, decoded.delay || 100))
     }
     next()
     onCleanup(() => {
       if (timer) clearTimeout(timer)
+      const image = current
+      if (image) void renderer.idle().then(() => image.dispose())
+      setFrame()
     })
   })
   createEffect(() => {
     const value = media()
-    onCleanup(() => disposeMedia(value))
+    onCleanup(() => void renderer.idle().then(() => disposeMedia(value)))
   })
 
   return (
@@ -197,21 +221,13 @@ export function LocalImage(props: {
   )
 }
 
-function loadGif(bytes: Uint8Array, box: { columns: number; rows: number }, target: { width: number; height: number }, background: Rgb) {
+export function loadGif(bytes: Uint8Array, box: { columns: number; rows: number }, target: { width: number; height: number }, background: Rgb) {
   const gif = parseGIF(bytes.slice().buffer as ArrayBuffer)
   const width = gif.lsd.width
   const height = gif.lsd.height
-  const canvas = new Uint8Array(width * height * 4)
-  const frames = decompressFrames(gif, true).map((frame) => {
-    const before = canvas.slice()
-    drawPatch(canvas, width, height, frame.patch, frame.dims.left, frame.dims.top, frame.dims.width, frame.dims.height)
-    const image = prepareImage(NativeImage.fromRgba(canvas.slice(), width, height), target, background)
-    if (frame.disposalType === 2) clearPatch(canvas, width, frame.dims.left, frame.dims.top, frame.dims.width, frame.dims.height)
-    if (frame.disposalType === 3) canvas.set(before)
-    return { image, delay: Math.max(50, frame.delay || 100) }
-  })
+  const frames = gif.frames.filter((frame): frame is GifFrame => "image" in frame)
   if (!frames.length) throw new Error("GIF contains no frames")
-  return { box, frames }
+  return { box, animation: { width, height, frames, colorTable: gif.gct, target, background } }
 }
 
 function drawPatch(canvas: Uint8Array, width: number, height: number, patch: Uint8ClampedArray, left: number, top: number, patchWidth: number, patchHeight: number) {
@@ -263,5 +279,4 @@ function prepareImage(image: NativeImage, target: { width: number; height: numbe
 
 function disposeMedia(media: Media | undefined) {
   media?.image?.dispose()
-  media?.frames?.forEach((frame) => frame.image.dispose())
 }

package/src/view/code.tsx

@@ -13,15 +13,22 @@ export type CodeBlockProps = {
   syntaxStyle?: SyntaxStyle
 }
 
+export function resolveCodeFiletype(language: string | null) {
+  const token = language?.trim().split(/\s+/, 1)[0]?.toLowerCase() ?? ""
+  return token === "jsonc" ? "json" : infoStringToFiletype(language ?? "")
+}
+
 export function CodeBlock(props: CodeBlockProps) {
   const renderer = useRenderer()
   const nativeScene = (renderer as typeof renderer & { readonly nativeScene?: object }).nativeScene
   const owned = props.syntaxStyle ? undefined : generateSyntax(props.theme, props.headings, props.theme.markdown.codeBlock, nativeScene)
-  onCleanup(() => owned?.destroy())
+  onCleanup(() => {
+    if (owned) void renderer.idle().then(() => owned.destroy())
+  })
   return (
     <code
       content={props.content}
-      filetype={infoStringToFiletype(props.language ?? "")}
+      filetype={resolveCodeFiletype(props.language)}
       syntaxStyle={props.syntaxStyle ?? owned!}
       fg={props.theme.markdown.codeBlock}
       bg={props.theme.background.base}

package/src/view/document.tsx

@@ -67,7 +67,7 @@ export function DocumentView(props: DocumentViewProps) {
     if (input.block().type === "mermaid") {
       return <MermaidDiagramView source={(input.block() as Extract<Block, { type: "mermaid" }>).content}
         theme={props.theme} columns={input.columns} mermaidOptions={props.mermaidOptions}
-        headings={props.headings} onDiagnostic={props.onDiagnostic} />
+        headings={props.headings} syntaxStyle={props.syntaxStyle} onDiagnostic={props.onDiagnostic} />
     }
     const view = createMemo(() => {
       const block = input.block()

package/src/view/inline-flow.tsx

@@ -25,24 +25,34 @@ export type InlineFlowProps = {
 
 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} />
+  const update = () => {
+    const content = new StyledText(props.chunks())
+    if (ref) ref.content = content
+    return content
+  }
+  createEffect(update)
+  return <text ref={(renderable) => {
+    ref = renderable
+    renderable.content = update()
+  }} wrapMode="none" width={props.width} flexShrink={0} />
 }
 
 function StyledSegment(props: { entry: LayoutRun; textRow: number }) {
   let ref: TextRenderable | undefined
-  createEffect(() => {
+  const update = () => {
     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} />
+    const content = atom.type === "text" ? new StyledText([{
+      __isChunk: true, text: atom.text, fg: atom.fg, attributes: atom.attributes,
+      ...(atom.href ? { link: { url: atom.href } } : {}),
+    }]) : new StyledText([])
+    if (ref) ref.content = content
+    return content
+  }
+  createEffect(update)
+  return <text ref={(renderable) => {
+    ref = renderable
+    renderable.content = update()
+  }} width={props.entry.columns} flexShrink={0} wrapMode="none" marginTop={props.textRow} />
 }
 
 export function InlineFlow(props: InlineFlowProps) {