@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/widgets/json-view/JSONView.tsx

@@ -1,30 +1,41 @@
-import type { JSONArray, JSONObject, JSONValue } from "@vertesia/json";
-import { DotBadge } from "@vertesia/ui/core";
-import clsx from "clsx";
-import { ReactNode } from "react";
-import { computeTitleFromName } from "../form/ManagedObject.js";
-
+import type { JSONArray, JSONObject, JSONValue } from '@vertesia/json';
+import { DotBadge } from '@vertesia/ui/core';
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import { computeTitleFromName } from '../form/ManagedObject.js';
 
 interface JSONViewProps {
-    value: JSONObject;
+    value: JSONValue;
 }
 export function JSONView({ value }: JSONViewProps) {
-    return <div className="flex flex-col gap-4 px-2 h-full overflow-auto">
-        {
-            Object.entries(value).map(([key, value]) =>
+    if (Array.isArray(value)) {
+        return (
+            <div className="flex flex-col gap-4 px-2 h-full overflow-auto">
+                <ArrayProperty value={value} />
+            </div>
+        );
+    }
+    if (typeof value !== 'object' || value == null) {
+        return (
+            <div className="flex flex-col gap-4 px-2 h-full overflow-auto">
+                <PropertyElement name="value" value={value} />
+            </div>
+        );
+    }
+    return (
+        <div className="flex flex-col gap-4 px-2 h-full overflow-auto">
+            {Object.entries(value).map(([key, value]) => (
                 <PropertyElement key={key} name={key} value={value as JSONValue} />
-            )
-        }
-    </div>
+            ))}
+        </div>
+    );
 }
 
 interface PropertyTitleProps {
     name: string;
 }
 function PropertyTitle({ name }: PropertyTitleProps) {
-    return (
-        <div className='text-md font-semibold'>{computeTitleFromName(name)}</div>
-    )
+    return <div className="text-md font-semibold">{computeTitleFromName(name)}</div>;
 }
 
 interface BlockElementProps {
@@ -32,9 +43,16 @@ interface BlockElementProps {
     className?: string;
 }
 function BlockElement({ children, className }: BlockElementProps) {
-    return (<div className={clsx('flex flex-col gap-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 dark:border-l-slate-600', className)}>
-        {children}
-    </div>)
+    return (
+        <div
+            className={clsx(
+                'flex flex-col gap-4 py-2 ps-4 border-s-4 border-s-solid border-s-slate-100 dark:border-s-slate-600',
+                className,
+            )}
+        >
+            {children}
+        </div>
+    );
 }
 
 interface PropertyElementProps {
@@ -45,62 +63,75 @@ function PropertyElement({ name, value }: PropertyElementProps) {
     const info = getValueInfo(value);
     switch (info.type) {
         case ValueType.Inline:
-            return (<div className='w-full flex gap-2'>
-                <PropertyTitle name={name + ':'} />
-                <p>{info.value}</p>
-            </div>)
+            return (
+                <div className="w-full flex gap-2">
+                    <PropertyTitle name={`${name}:`} />
+                    <p>{info.value}</p>
+                </div>
+            );
         case ValueType.Paragraph:
-            return (<div>
-                <PropertyTitle name={name} />
-                <p>{info.value}</p>
-            </div>)
+            return (
+                <div>
+                    <PropertyTitle name={name} />
+                    <p>{info.value}</p>
+                </div>
+            );
         case ValueType.Prose:
-            return (<div className="prose dark:prose-invert">
-                <PropertyTitle name={name} />
-                <div className='vprose dark:prose-invert'>{info.value}</div>
-            </div>)
-        case ValueType.Array:
             return (
-                <ArrayProperty name={name} value={value as JSONArray} />
-            )
+                <div className="prose dark:prose-invert">
+                    <PropertyTitle name={name} />
+                    <div className="vprose dark:prose-invert">{info.value}</div>
+                </div>
+            );
+        case ValueType.Array:
+            return <ArrayProperty name={name} value={value as JSONArray} />;
         case ValueType.Object:
             return (
                 <div>
                     <PropertyTitle name={name} />
-                    <BlockElement className='mt-2'>
-                        {
-                            Object.entries(value as JSONObject).map(([key, value]) => <PropertyElement key={key} name={key} value={value as JSONValue} />)
-                        }
+                    <BlockElement className="mt-2">
+                        {Object.entries(value as JSONObject).map(([key, value]) => (
+                            <PropertyElement key={key} name={key} value={value as JSONValue} />
+                        ))}
                     </BlockElement>
                 </div>
-            )
+            );
     }
 }
 
 interface ArrayPropertyProps {
-    name?: string,
+    name?: string;
     value: JSONArray;
 }
 function ArrayProperty({ name, value }: ArrayPropertyProps) {
     const inlineLength = value.join(' ').length;
     const itemMediumLength = inlineLength / value.length;
-    const isInline = (typeof value[0] === 'string') && (inlineLength < 80 || inlineLength < 400 && itemMediumLength < 32);
+    const isInline =
+        typeof value[0] === 'string' && (inlineLength < 80 || (inlineLength < 400 && itemMediumLength < 32));
     const useBullet = value.length > 9;
+    const items = value.map((item, index) => ({
+        item,
+        index,
+        key: `${index}-${JSON.stringify(item)}`,
+    }));
+
     return isInline ? (
-        <div className='flex gap-2 flex-wrap'>
-            {name && <PropertyTitle name={name + ':'} />}
-            {value.map((item, index) => <DotBadge key={index}>{String(item)}</DotBadge>)}
+        <div className="flex gap-2 flex-wrap">
+            {name && <PropertyTitle name={`${name}:`} />}
+            {items.map(({ item, key }) => (
+                <DotBadge key={key}>{String(item)}</DotBadge>
+            ))}
         </div>
     ) : (
         <div>
             {name && <PropertyTitle name={name} />}
-            <div className='flex flex-col gap-2'>
-                {
-                    (value as JSONArray).map((value, index) => <ItemProperty key={index} index={index} value={value} useBullet={useBullet} />)
-                }
+            <div className="flex flex-col gap-2">
+                {items.map(({ item, index, key }) => (
+                    <ItemProperty key={key} index={index} value={item} useBullet={useBullet} />
+                ))}
             </div>
         </div>
-    )
+    );
 }
 
 interface ItemPropertyProps {
@@ -109,31 +140,35 @@ interface ItemPropertyProps {
     useBullet?: boolean;
 }
 function ItemProperty({ index, value, useBullet }: ItemPropertyProps) {
-    const bullet = useBullet ? <span className='text-xl'>&bull;</span> : <span>{index + 1}.</span>
+    const bullet = useBullet ? <span className="text-xl">&bull;</span> : <span>{index + 1}.</span>;
     const info = getValueInfo(value);
-    let content;
+    let content: React.ReactNode;
     switch (info.type) {
         case ValueType.Object:
-            content = <BlockElement>
-                {
-                    Object.entries(value as JSONObject).map(([key, value]) => <PropertyElement key={key} name={key} value={value as JSONValue} />)
-                }
-            </BlockElement>
+            content = (
+                <BlockElement>
+                    {Object.entries(value as JSONObject).map(([key, value]) => (
+                        <PropertyElement key={key} name={key} value={value as JSONValue} />
+                    ))}
+                </BlockElement>
+            );
             break;
         case ValueType.Array:
             content = <ArrayProperty value={value as JSONArray} />;
             break;
-        case ValueType.Prose: content = <div className="prose dark:prose-invert">{info.value}</div>
+        case ValueType.Prose:
+            content = <div className="prose dark:prose-invert">{info.value}</div>;
             break;
-        default: content = <div>{info.value}</div>
+        default:
+            content = <div>{info.value}</div>;
             break;
     }
     return (
-        <div className='flex gap-4 hover:bg-slate-50 dark:hover:bg-slate-800 py-2 pr-2 pl-4'>
-            <div className='font-semibold text-gray-600 dark:text-gray-400'>{bullet}</div>
+        <div className="flex gap-4 hover:bg-slate-50 dark:hover:bg-slate-800 py-2 pe-2 ps-4">
+            <div className="font-semibold text-gray-600 dark:text-gray-400">{bullet}</div>
             <div>{content}</div>
         </div>
-    )
+    );
 }
 
 enum ValueType {
@@ -141,43 +176,48 @@ enum ValueType {
     Paragraph,
     Prose,
     Array,
-    Object
+    Object,
 }
-function getValueInfo(value: JSONValue): { value: any, type: ValueType } {
+type ValueInfo =
+    | { value: string; type: ValueType.Inline | ValueType.Paragraph | ValueType.Prose }
+    | { value: JSONArray; type: ValueType.Array }
+    | { value: JSONObject; type: ValueType.Object };
+
+function getValueInfo(value: JSONValue): ValueInfo {
     if (value == null) {
         return {
             value: '-',
-            type: ValueType.Inline
-        }
+            type: ValueType.Inline,
+        };
     }
     if (Array.isArray(value)) {
         return {
             value,
-            type: ValueType.Array
-        }
+            type: ValueType.Array,
+        };
     }
-    const type = typeof value;
-    if (type === 'string') {
-        const len = (value as string).length;
-        let type;
+    if (typeof value === 'string') {
+        const len = value.length;
+        let valueType: ValueType.Inline | ValueType.Paragraph | ValueType.Prose;
+        let displayValue = value;
         if (len < 80) {
-            type = ValueType.Inline;
+            valueType = ValueType.Inline;
         } else if (len > 400) {
-            type = ValueType.Prose;
+            valueType = ValueType.Prose;
         } else {
-            type = ValueType.Paragraph;
-            value = (value as string).replace(/(?:\n\n)+/g, '\n\n')
+            valueType = ValueType.Paragraph;
+            displayValue = value.replace(/(?:\n\n)+/g, '\n\n');
         }
-        return { type, value };
-    } else if (type === 'number' || type === 'boolean') {
+        return { type: valueType, value: displayValue };
+    } else if (typeof value === 'number' || typeof value === 'boolean') {
         return {
             value: String(value),
-            type: ValueType.Inline
-        }
+            type: ValueType.Inline,
+        };
     } else {
         return {
-            value,
-            type: ValueType.Object
-        }
+            value: value as JSONObject,
+            type: ValueType.Object,
+        };
     }
 }

package/src/widgets/json-view/index.ts

@@ -1,5 +1,7 @@
-export type * from "./types.js";
-export * from "./JSONCode.js";
-export * from "./JSONDisplay.js";
-export * from "./JSONView.js";
-export * from "./JSONSwitcher.js";
+export * from './JSONCode.js';
+export * from './JSONDisplay.js';
+export * from './JSONEditor.js';
+export * from './JSONSwitcher.js';
+export * from './JSONTable.js';
+export * from './JSONView.js';
+export type * from './types.js';

package/src/widgets/markdown/ArtifactContentRenderer.tsx

@@ -6,8 +6,8 @@
 
 import { FusionFragmentHandler, FusionFragmentProvider } from '@vertesia/fusion-ux';
 import DOMPurify from 'dompurify';
-import { useMemo, type ReactElement } from 'react';
-import { type VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
+import { type ReactElement, useMemo } from 'react';
+import type { VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
 import { useCodeBlockContext } from './CodeBlockContext';
 import { CodeBlockErrorBoundary, CodeBlockPlaceholder } from './CodeBlockPlaceholder';
@@ -43,7 +43,7 @@ export interface ArtifactContentRendererProps {
 function autoDetectRenderType(
     content: unknown,
     path: string,
-    contentType?: 'json' | 'text' | 'binary'
+    contentType?: 'json' | 'text' | 'binary',
 ): ExpandRenderType {
     const ext = path.split('.').pop()?.toLowerCase();
 
@@ -130,22 +130,20 @@ function TableRenderer({ content }: { content: unknown }): ReactElement {
         }
 
         const headers = Object.keys(first);
-        const rows = content.map(row =>
-            headers.map(h => {
+        const rows = content.map((row) =>
+            headers.map((h) => {
                 const val = (row as Record<string, unknown>)[h];
                 if (val === null || val === undefined) return '';
                 if (typeof val === 'object') return JSON.stringify(val);
                 return String(val);
-            })
+            }),
         );
 
         return { headers, rows };
     }, [content]);
 
     if (headers.length === 0) {
-        return (
-            <CodeBlockPlaceholder type="table" error="No table data found" />
-        );
+        return <CodeBlockPlaceholder type="table" error="No table data found" />;
     }
 
     return (
@@ -154,7 +152,8 @@ function TableRenderer({ content }: { content: unknown }): ReactElement {
                 <thead>
                     <tr className="border-b">
                         {headers.map((h, i) => (
-                            <th key={i} className="px-3 py-2 text-left font-medium text-muted">
+                            // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
+                            <th key={i} className="px-3 py-2 text-start font-medium text-muted">
                                 {h}
                             </th>
                         ))}
@@ -162,8 +161,10 @@ function TableRenderer({ content }: { content: unknown }): ReactElement {
                 </thead>
                 <tbody>
                     {rows.slice(0, 100).map((row, i) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
                         <tr key={i} className="border-b border-muted/20">
                             {row.map((cell, j) => (
+                                // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
                                 <td key={j} className="px-3 py-2">
                                     {cell}
                                 </td>
@@ -172,11 +173,7 @@ function TableRenderer({ content }: { content: unknown }): ReactElement {
                     ))}
                 </tbody>
             </table>
-            {rows.length > 100 && (
-                <div className="text-sm text-muted py-2">
-                    Showing 100 of {rows.length} rows
-                </div>
-            )}
+            {rows.length > 100 && <div className="text-sm text-muted py-2">Showing 100 of {rows.length} rows</div>}
         </div>
     );
 }
@@ -222,8 +219,10 @@ export function makeSvgResponsive(svg: string): string {
             .replace(/\swidth\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '')
             .replace(/\sheight\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '');
         if (/style="/i.test(a)) {
-            a = a.replace(/style="([^"]*)"/i, (_: string, v: string) =>
-                `style="${v};width:100%;height:auto;display:block;max-width:100%;"`);
+            a = a.replace(
+                /style="([^"]*)"/i,
+                (_: string, v: string) => `style="${v};width:100%;height:auto;display:block;max-width:100%;"`,
+            );
         } else {
             a += ' style="width:100%;height:auto;display:block;max-width:100%;"';
         }
@@ -251,6 +250,7 @@ function MockupRenderer({ content }: { content: unknown }): ReactElement {
     return (
         <div
             style={{ margin: '16px 0', width: '100%', overflowX: 'auto' }}
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: SVG content is processed/sanitized upstream for inline rendering
             dangerouslySetInnerHTML={{ __html: processedSvg }}
         />
     );
@@ -263,14 +263,7 @@ function ImageRenderer({ content, path }: { content: unknown; path: string }): R
     const url = typeof content === 'string' ? content : '';
     const alt = path.split('/').pop() || 'Artifact image';
 
-    return (
-        <img
-            src={url}
-            alt={alt}
-            className="max-w-full h-auto rounded"
-            loading="lazy"
-        />
-    );
+    return <img src={url} alt={alt} className="max-w-full h-auto rounded" loading="lazy" />;
 }
 
 /**
@@ -317,12 +310,7 @@ export function ArtifactContentRenderer({
         case 'vega-lite': {
             const spec = toVegaLiteSpec(content);
             if (!spec) {
-                return (
-                    <CodeBlockPlaceholder
-                        type="chart"
-                        error="Invalid Vega-Lite specification"
-                    />
-                );
+                return <CodeBlockPlaceholder type="chart" error="Invalid Vega-Lite specification" />;
             }
             return (
                 <CodeBlockErrorBoundary type="chart" fallbackCode={JSON.stringify(content, null, 2)}>
@@ -377,9 +365,7 @@ export function ArtifactContentRenderer({
             return (
                 <CodeBlockErrorBoundary type="markdown" fallbackCode={markdownContent}>
                     {MarkdownRenderer ? (
-                        <MarkdownRenderer artifactRunId={runId}>
-                            {markdownContent}
-                        </MarkdownRenderer>
+                        <MarkdownRenderer artifactRunId={runId}>{markdownContent}</MarkdownRenderer>
                     ) : (
                         <pre className="overflow-x-auto p-3 bg-muted/10 rounded text-sm">
                             <code>{markdownContent}</code>
@@ -402,8 +388,6 @@ export function ArtifactContentRenderer({
                     <ImageRenderer content={content} path={path} />
                 </CodeBlockErrorBoundary>
             );
-
-        case 'code':
         default:
             return <CodeRenderer content={content} path={path} />;
     }

package/src/widgets/markdown/CodeBlockContext.tsx

@@ -24,7 +24,7 @@ export function CodeBlockHandlerProvider({
 }: CodeBlockHandlerContext & { children: React.ReactNode }) {
     const value = useMemo(
         () => ({ artifactRunId, onProposalSelect, onProposalSubmit, MarkdownRenderer }),
-        [artifactRunId, onProposalSelect, onProposalSubmit, MarkdownRenderer]
+        [artifactRunId, onProposalSelect, onProposalSubmit, MarkdownRenderer],
     );
     return <CodeBlockContext.Provider value={value}>{children}</CodeBlockContext.Provider>;
 }

package/src/widgets/markdown/CodeBlockPlaceholder.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 // Test the TYPE_CONFIG structure and CodeBlockPlaceholder behavior through type checks
 describe('CodeBlockPlaceholder types', () => {
@@ -23,7 +23,7 @@ describe('CodeBlockPlaceholder types', () => {
 
     it('should have config for all code block types', () => {
         const types = ['chart', 'mermaid', 'proposal', 'code', 'image', 'link'];
-        types.forEach(type => {
+        types.forEach((type) => {
             expect(TYPE_LABELS[type]).toBeTruthy();
             expect(TYPE_HEIGHTS[type]).toBeGreaterThan(0);
         });

package/src/widgets/markdown/CodeBlockPlaceholder.tsx

@@ -1,7 +1,18 @@
+import { Button } from '@vertesia/ui/core';
+import { BarChart3, Code, Download, FileText, GitBranch, Image, Link, MessageSquare, Table } from 'lucide-react';
 import React from 'react';
-import { BarChart3, GitBranch, MessageSquare, Code, Image, Link, Download, Table, FileText } from 'lucide-react';
 
-export type CodeBlockType = 'chart' | 'mermaid' | 'proposal' | 'code' | 'image' | 'link' | 'expand' | 'table' | 'markdown' | 'fusion-fragment';
+export type CodeBlockType =
+    | 'chart'
+    | 'mermaid'
+    | 'proposal'
+    | 'code'
+    | 'image'
+    | 'link'
+    | 'expand'
+    | 'table'
+    | 'markdown'
+    | 'fusion-fragment';
 
 export interface CodeBlockPlaceholderProps {
     /** The type of content being loaded */
@@ -33,13 +44,7 @@ const TYPE_CONFIG: Record<CodeBlockType, { icon: React.ElementType; label: strin
  * Placeholder component shown while code blocks are loading.
  * Provides visual feedback and error states with retry capability.
  */
-export function CodeBlockPlaceholder({
-    type,
-    error,
-    onRetry,
-    message,
-    height,
-}: CodeBlockPlaceholderProps) {
+export function CodeBlockPlaceholder({ type, error, onRetry, message, height }: CodeBlockPlaceholderProps) {
     const config = TYPE_CONFIG[type];
     const displayHeight = height ?? config.defaultHeight;
     const isInline = type === 'link';
@@ -54,12 +59,13 @@ export function CodeBlockPlaceholder({
             >
                 <span className="text-destructive">Failed to load {config.label}</span>
                 {onRetry && (
-                    <button
+                    <Button
+                        variant="unstyled"
                         onClick={onRetry}
-                        className="ml-2 rounded bg-destructive/10 px-2 py-1 text-xs hover:bg-destructive/20 transition-colors"
+                        className="ms-2 rounded bg-destructive/10 px-2 py-1 text-xs hover:bg-destructive/20 transition-colors text-destructive"
                     >
                         Retry
-                    </button>
+                    </Button>
                 )}
             </div>
         );
@@ -82,12 +88,11 @@ export function CodeBlockPlaceholder({
             style={{ minHeight: displayHeight }}
         >
             <IconComponent className="h-8 w-8 text-muted" />
-            <span className="text-sm text-muted">
-                {message || `Loading ${config.label}...`}
-            </span>
+            <span className="text-sm text-muted">{message || `Loading ${config.label}...`}</span>
             <div className="flex gap-1">
                 {[...Array(3)].map((_, i) => (
                     <div
+                        // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
                         key={i}
                         className="h-2 w-2 rounded-full bg-muted animate-bounce"
                         style={{ animationDelay: `${i * 150}ms` }}
@@ -114,10 +119,7 @@ interface CodeBlockErrorBoundaryState {
     error?: Error;
 }
 
-export class CodeBlockErrorBoundary extends React.Component<
-    CodeBlockErrorBoundaryProps,
-    CodeBlockErrorBoundaryState
-> {
+export class CodeBlockErrorBoundary extends React.Component<CodeBlockErrorBoundaryProps, CodeBlockErrorBoundaryState> {
     constructor(props: CodeBlockErrorBoundaryProps) {
         super(props);
         this.state = { hasError: false };

package/src/widgets/markdown/CodeBlockRendering.tsx

@@ -1,11 +1,11 @@
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo } from 'react';
 
 export interface CodeBlockRendererProps {
     code: string;
     language?: string;
 }
 export class CodeBlockRendererRegistry {
-    components: Record<string, React.FunctionComponent<any>> = {};
+    components: Record<string, React.FunctionComponent<CodeBlockRendererProps>> = {};
 
     registerComponent(language: string, component: React.FunctionComponent<CodeBlockRendererProps>) {
         this.components[language] = component;
@@ -14,7 +14,6 @@ export class CodeBlockRendererRegistry {
     getComponent(language: string): React.FunctionComponent<CodeBlockRendererProps> | undefined {
         return this.components[language];
     }
-
 }
 
 const Context = createContext<CodeBlockRendererRegistry | null>(null);
@@ -37,11 +36,7 @@ export function CodeBlockRendererProvider({ components, children }: CodeBlockRen
         return registry;
     }, [components]);
 
-    return (
-        <>
-            <Context.Provider value={registry}>{children}</Context.Provider>
-        </>
-    )
+    return <Context.Provider value={registry}>{children}</Context.Provider>;
 }
 
 export function useCodeBlockRendererRegistry() {

package/src/widgets/markdown/MarkdownFigure.tsx

@@ -1,5 +1,5 @@
-import { useResolvedUrl, parseUrlScheme } from './useResolvedUrl';
 import { CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+import { parseUrlScheme, useResolvedUrl } from './useResolvedUrl';
 
 export interface MarkdownFigureProps {
     src?: string;
@@ -15,13 +15,7 @@ export interface MarkdownFigureProps {
  *
  * Usage in markdown: ![alt text](image-url "Caption text")
  */
-export function MarkdownFigure({
-    src,
-    alt,
-    caption,
-    className,
-    artifactRunId,
-}: MarkdownFigureProps) {
+export function MarkdownFigure({ src, alt, caption, className, artifactRunId }: MarkdownFigureProps) {
     const rawSrc = src || '';
     const { scheme } = parseUrlScheme(rawSrc);
 
@@ -30,9 +24,7 @@ export function MarkdownFigure({
         return (
             <figure className="my-4">
                 <img src={src} alt={alt} className={className} />
-                <figcaption className="mt-2 text-sm text-muted text-center italic">
-                    {caption}
-                </figcaption>
+                <figcaption className="mt-2 text-sm text-muted text-center italic">{caption}</figcaption>
             </figure>
         );
     }
@@ -76,13 +68,7 @@ function ResolvedFigure({
     }
 
     if (error) {
-        return (
-            <CodeBlockPlaceholder
-                type="image"
-                error={error}
-                onRetry={retry}
-            />
-        );
+        return <CodeBlockPlaceholder type="image" error={error} onRetry={retry} />;
     }
 
     if (!url) {
@@ -92,9 +78,7 @@ function ResolvedFigure({
     return (
         <figure className="my-4">
             <img src={url} alt={alt} className={className} />
-            <figcaption className="mt-2 text-sm text-muted text-center italic">
-                {caption}
-            </figcaption>
+            <figcaption className="mt-2 text-sm text-muted text-center italic">{caption}</figcaption>
         </figure>
     );
 }