Resolve relative image paths in export/import markdown viewer

The MarkdownBody component now accepts an optional resolveImageSrc callback
that maps relative image paths (like images/org-chart.png) to base64 data URLs
from the portable file entries. This fixes the export README showing a broken
image instead of the org chart PNG.

Applied to both CompanyExport and CompanyImport preview panes.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-19 16:33:30 -05:00
parent 531945cfe2
commit a9802c1962
3 changed files with 45 additions and 6 deletions

View file

@ -8,6 +8,8 @@ import { useTheme } from "../context/ThemeContext";
interface MarkdownBodyProps {
children: string;
className?: string;
/** Optional resolver for relative image paths (e.g. within export packages) */
resolveImageSrc?: (src: string) => string | null;
}
let mermaidLoaderPromise: Promise<typeof import("mermaid").default> | null = null;
@ -112,7 +114,7 @@ function MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: b
);
}
export function MarkdownBody({ children, className }: MarkdownBodyProps) {
export function MarkdownBody({ children, className, resolveImageSrc }: MarkdownBodyProps) {
const { theme } = useTheme();
return (
<div
@ -152,6 +154,12 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
</a>
);
},
img: resolveImageSrc
? ({ src, alt, ...imgProps }) => {
const resolved = src ? resolveImageSrc(src) : null;
return <img {...imgProps} src={resolved ?? src} alt={alt ?? ""} />;
}
: undefined,
}}
>
{children}