@file-viewer/renderer-text 2.1.24 → 2.1.26

package/README.en.md

@@ -1,6 +1,6 @@
 # @file-viewer/renderer-text
 
-Standalone code, text, Markdown, patch, and git bundle renderer package for Flyfish File Viewer. It handles source highlighting, Markdown reading surfaces, side-by-side patch diffs, git bundle inspection, and unified zoom for `.txt`, `.json`, `.ts`, `.vue`, `.log`, `.md`, `.markdown`, `.patch`, `.bundle`, and other code delivery formats.
+Standalone code, text, Markdown, patch, and git bundle renderer package for Flyfish File Viewer. It handles source highlighting, Markdown reading surfaces, embedded Mermaid diagrams in Markdown, side-by-side patch diffs, git bundle inspection, and unified zoom for `.txt`, `.json`, `.ts`, `.vue`, `.log`, `.md`, `.markdown`, `.patch`, `.bundle`, and other code delivery formats.
 
 ## Usage
 

package/README.md

@@ -1,6 +1,6 @@
 # @file-viewer/renderer-text
 
-Flyfish File Viewer 的独立代码、文本、Markdown、patch 和 git bundle renderer 包。它负责 `.txt`、`.json`、`.ts`、`.vue`、`.log`、`.md`、`.markdown`、`.patch`、`.bundle` 等文本与代码交付文件的源码高亮、Markdown 阅读面、左右比对、bundle 结构查看和统一缩放。
+Flyfish File Viewer 的独立代码、文本、Markdown、patch 和 git bundle renderer 包。它负责 `.txt`、`.json`、`.ts`、`.vue`、`.log`、`.md`、`.markdown`、`.patch`、`.bundle` 等文本与代码交付文件的源码高亮、Markdown 阅读面、Markdown 内嵌 Mermaid 图、左右比对、bundle 结构查看和统一缩放。
 
 ## 用法
 

package/dist/code.js

@@ -1,4 +1,6 @@
 import { createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, readFileViewerText as readText, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
+import { codeStyle } from './codeStyle.js';
+import renderLargeText, { shouldVirtualizeTextBuffer } from './largeText.js';
 const languageMap = {
     bash: 'bash',
     c: 'cpp',
@@ -77,22 +79,6 @@ const languageLoaders = {
     xml: () => import('highlight.js/lib/languages/xml'),
     yaml: () => import('highlight.js/lib/languages/yaml')
 };
-const codeStyle = `
-.code-viewer{min-height:100%;--code-bg:#f6f8fa;--code-toolbar-bg:rgba(255,255,255,.92);--code-border:rgba(31,35,40,.12);--code-text:#24292f;--code-muted:#57606a;--code-keyword:#cf222e;--code-title:#8250df;--code-string:#0a3069;--code-number:#0550ae;--code-comment:#6e7781;--code-attr:#953800;--code-built-in:#116329;background:var(--code-bg);color:var(--code-text);box-sizing:border-box}
-.code-toolbar{position:sticky;top:0;z-index:1;display:flex;height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--code-border);background:var(--code-toolbar-bg);backdrop-filter:blur(12px);box-sizing:border-box}
-.code-toolbar span,.code-toolbar strong{color:var(--code-muted);font-size:12px;font-weight:700;letter-spacing:0}
-.code-area{display:block;min-width:min-content;margin:0;padding:18px 20px 28px;overflow:auto;background:transparent;box-sizing:border-box}
-.code-area code{display:block;padding:0;overflow:visible;background:transparent;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;tab-size:2;white-space:pre}
-.code-area .hljs-comment,.code-area .hljs-quote{color:var(--code-comment)}
-.code-area .hljs-keyword,.code-area .hljs-selector-tag,.code-area .hljs-subst{color:var(--code-keyword)}
-.code-area .hljs-string,.code-area .hljs-doctag,.code-area .hljs-regexp{color:var(--code-string)}
-.code-area .hljs-title,.code-area .hljs-section,.code-area .hljs-selector-id{color:var(--code-title);font-weight:700}
-.code-area .hljs-number,.code-area .hljs-literal,.code-area .hljs-variable,.code-area .hljs-template-variable{color:var(--code-number)}
-.code-area .hljs-attr,.code-area .hljs-attribute,.code-area .hljs-name,.code-area .hljs-selector-class{color:var(--code-attr)}
-.code-area .hljs-built_in,.code-area .hljs-type,.code-area .hljs-class .hljs-title{color:var(--code-built-in)}
-[data-viewer-theme='dark'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}
-@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}}
-`;
 let highlighterPromise = null;
 const registeredLanguages = new Set();
 const createElement = (tagName, className, text) => {
@@ -163,6 +149,11 @@ export default async function renderText(buffer, target, type, context) {
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
     const extension = type || 'txt';
     const normalizedExtension = extension.trim().toLowerCase();
+    if (normalizedExtension !== 'bundle' &&
+        normalizedExtension !== 'bdl' &&
+        shouldVirtualizeTextBuffer(buffer, context)) {
+        return renderLargeText(buffer, target, extension, context);
+    }
     if (normalizedExtension === 'patch') {
         const { default: renderPatch } = await import('./patch.js');
         return renderPatch(buffer, target, extension, context);

package/dist/codeStyle.d.ts

@@ -0,0 +1 @@
+export declare const codeStyle = "\n.code-viewer{min-height:100%;--code-bg:#f6f8fa;--code-toolbar-bg:rgba(255,255,255,.92);--code-border:rgba(31,35,40,.12);--code-text:#24292f;--code-muted:#57606a;--code-keyword:#cf222e;--code-title:#8250df;--code-string:#0a3069;--code-number:#0550ae;--code-comment:#6e7781;--code-attr:#953800;--code-built-in:#116329;background:var(--code-bg);color:var(--code-text);box-sizing:border-box}\n.code-toolbar{position:sticky;top:0;z-index:1;display:flex;height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--code-border);background:var(--code-toolbar-bg);backdrop-filter:blur(12px);box-sizing:border-box}\n.code-toolbar span,.code-toolbar strong{color:var(--code-muted);font-size:12px;font-weight:700;letter-spacing:0}\n.code-area{display:block;min-width:min-content;margin:0;padding:18px 20px 28px;overflow:auto;background:transparent;box-sizing:border-box}\n.code-area code{display:block;padding:0;overflow:visible;background:transparent;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;tab-size:2;white-space:pre}\n.code-area .hljs-comment,.code-area .hljs-quote{color:var(--code-comment)}\n.code-area .hljs-keyword,.code-area .hljs-selector-tag,.code-area .hljs-subst{color:var(--code-keyword)}\n.code-area .hljs-string,.code-area .hljs-doctag,.code-area .hljs-regexp{color:var(--code-string)}\n.code-area .hljs-title,.code-area .hljs-section,.code-area .hljs-selector-id{color:var(--code-title);font-weight:700}\n.code-area .hljs-number,.code-area .hljs-literal,.code-area .hljs-variable,.code-area .hljs-template-variable{color:var(--code-number)}\n.code-area .hljs-attr,.code-area .hljs-attribute,.code-area .hljs-name,.code-area .hljs-selector-class{color:var(--code-attr)}\n.code-area .hljs-built_in,.code-area .hljs-type,.code-area .hljs-class .hljs-title{color:var(--code-built-in)}\n[data-viewer-theme='dark'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}\n@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}}\n";

package/dist/codeStyle.js

@@ -0,0 +1,16 @@
+export const codeStyle = `
+.code-viewer{min-height:100%;--code-bg:#f6f8fa;--code-toolbar-bg:rgba(255,255,255,.92);--code-border:rgba(31,35,40,.12);--code-text:#24292f;--code-muted:#57606a;--code-keyword:#cf222e;--code-title:#8250df;--code-string:#0a3069;--code-number:#0550ae;--code-comment:#6e7781;--code-attr:#953800;--code-built-in:#116329;background:var(--code-bg);color:var(--code-text);box-sizing:border-box}
+.code-toolbar{position:sticky;top:0;z-index:1;display:flex;height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--code-border);background:var(--code-toolbar-bg);backdrop-filter:blur(12px);box-sizing:border-box}
+.code-toolbar span,.code-toolbar strong{color:var(--code-muted);font-size:12px;font-weight:700;letter-spacing:0}
+.code-area{display:block;min-width:min-content;margin:0;padding:18px 20px 28px;overflow:auto;background:transparent;box-sizing:border-box}
+.code-area code{display:block;padding:0;overflow:visible;background:transparent;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;tab-size:2;white-space:pre}
+.code-area .hljs-comment,.code-area .hljs-quote{color:var(--code-comment)}
+.code-area .hljs-keyword,.code-area .hljs-selector-tag,.code-area .hljs-subst{color:var(--code-keyword)}
+.code-area .hljs-string,.code-area .hljs-doctag,.code-area .hljs-regexp{color:var(--code-string)}
+.code-area .hljs-title,.code-area .hljs-section,.code-area .hljs-selector-id{color:var(--code-title);font-weight:700}
+.code-area .hljs-number,.code-area .hljs-literal,.code-area .hljs-variable,.code-area .hljs-template-variable{color:var(--code-number)}
+.code-area .hljs-attr,.code-area .hljs-attribute,.code-area .hljs-name,.code-area .hljs-selector-class{color:var(--code-attr)}
+.code-area .hljs-built_in,.code-area .hljs-type,.code-area .hljs-class .hljs-title{color:var(--code-built-in)}
+[data-viewer-theme='dark'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}
+@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}}
+`;

package/dist/index.js

@@ -6,7 +6,13 @@ if (textDefinitions.length !== textRendererIds.length) {
 }
 export const textRendererDefinitions = textDefinitions;
 export const renderFileViewerCode = (buffer, target, type, context) => import('./code.js').then(({ default: renderCode }) => renderCode(buffer, target, type, context));
-export const renderFileViewerMarkdown = (buffer, target) => import('./markdown.js').then(({ default: renderMarkdown }) => renderMarkdown(buffer, target));
+export const renderFileViewerMarkdown = (buffer, target, type, context) => import('./largeText.js').then(async ({ default: renderLargeText, shouldVirtualizeTextBuffer }) => {
+    if (shouldVirtualizeTextBuffer(buffer, context)) {
+        return renderLargeText(buffer, target, type || 'md', context);
+    }
+    const { default: renderMarkdown } = await import('./markdown.js');
+    return renderMarkdown(buffer, target, context);
+});
 export const textRenderer = {
     id: 'file-viewer-renderer-text',
     label: 'Flyfish File Viewer text renderer',

package/dist/largeText.d.ts

@@ -0,0 +1,6 @@
+import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-viewer/core';
+export declare const DEFAULT_LARGE_TEXT_THRESHOLD_BYTES: number;
+export declare const DEFAULT_LARGE_TEXT_LINE_SEGMENT_BYTES: number;
+export declare const DEFAULT_LARGE_TEXT_OVERSCAN_LINES = 12;
+export declare const shouldVirtualizeTextBuffer: (buffer: ArrayBuffer, context?: FileRenderContext) => boolean;
+export default function renderLargeText(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/largeText.js

@@ -0,0 +1,580 @@
+import { DEFAULT_FILE_VIEWER_SEARCH_MAX_MATCHES, createEmptyFileViewerSearchState, createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, normalizeFileViewerSearchOptions, registerFileViewerSearchProvider, registerFileViewerZoomProvider, unregisterFileViewerSearchProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
+import { codeStyle } from './codeStyle.js';
+export const DEFAULT_LARGE_TEXT_THRESHOLD_BYTES = 512 * 1024;
+export const DEFAULT_LARGE_TEXT_LINE_SEGMENT_BYTES = 16 * 1024;
+export const DEFAULT_LARGE_TEXT_OVERSCAN_LINES = 12;
+const LARGE_TEXT_LINE_CHECKPOINT_STRIDE = 256;
+const LARGE_TEXT_INDEX_YIELD_BYTES = 4 * 1024 * 1024;
+const LARGE_TEXT_SEARCH_CHUNK_BYTES = 256 * 1024;
+const LARGE_TEXT_MAX_SCROLL_HEIGHT = 8000000;
+const LARGE_TEXT_BASE_LINE_HEIGHT = 22.1;
+const clamp = (value, minimum, maximum) => {
+    return Number.isFinite(value)
+        ? Math.max(minimum, Math.min(maximum, value))
+        : minimum;
+};
+const clampZoom = (value) => {
+    return Math.min(2.6, Math.max(0.6, Number(value.toFixed(2))));
+};
+const getWindow = (target) => target.ownerDocument.defaultView;
+const nextBrowserTurn = (target) => {
+    const view = getWindow(target);
+    return new Promise(resolve => {
+        if (view === null || view === void 0 ? void 0 : view.setTimeout) {
+            view.setTimeout(resolve, 0);
+            return;
+        }
+        setTimeout(resolve, 0);
+    });
+};
+const isUtf8ContinuationByte = (value) => (value & 0xc0) === 0x80;
+const alignUtf8Start = (bytes, offset, limit) => {
+    let nextOffset = clamp(offset, 0, limit);
+    while (nextOffset < limit && isUtf8ContinuationByte(bytes[nextOffset])) {
+        nextOffset += 1;
+    }
+    return nextOffset;
+};
+const alignUtf8End = (bytes, offset, limit) => {
+    let nextOffset = clamp(offset, 0, limit);
+    while (nextOffset < limit && isUtf8ContinuationByte(bytes[nextOffset])) {
+        nextOffset += 1;
+    }
+    return nextOffset;
+};
+const isLineBreak = (bytes, offset) => {
+    const byte = bytes[offset];
+    if (byte === 13) {
+        return bytes[offset + 1] === 10 ? 2 : 1;
+    }
+    return byte === 10 ? 1 : 0;
+};
+const buildLargeTextIndex = async (bytes, target, onProgress) => {
+    const checkpoints = [0];
+    let lineIndex = 0;
+    let offset = 0;
+    let nextYieldOffset = LARGE_TEXT_INDEX_YIELD_BYTES;
+    while (offset < bytes.byteLength) {
+        const lineBreakSize = isLineBreak(bytes, offset);
+        if (lineBreakSize) {
+            offset += lineBreakSize;
+            lineIndex += 1;
+            if (lineIndex % LARGE_TEXT_LINE_CHECKPOINT_STRIDE === 0) {
+                checkpoints.push(offset);
+            }
+        }
+        else {
+            offset += 1;
+        }
+        if (offset >= nextYieldOffset) {
+            onProgress(Math.min(99, Math.round((offset / Math.max(1, bytes.byteLength)) * 100)));
+            nextYieldOffset = offset + LARGE_TEXT_INDEX_YIELD_BYTES;
+            await nextBrowserTurn(target);
+        }
+    }
+    onProgress(100);
+    return {
+        bytes,
+        checkpoints,
+        lineCount: lineIndex + 1
+    };
+};
+const locateLargeTextLineStart = (index, requestedLine) => {
+    var _a;
+    const lineIndex = clamp(Math.trunc(requestedLine), 0, index.lineCount - 1);
+    const checkpointIndex = Math.floor(lineIndex / LARGE_TEXT_LINE_CHECKPOINT_STRIDE);
+    let currentLine = checkpointIndex * LARGE_TEXT_LINE_CHECKPOINT_STRIDE;
+    let offset = (_a = index.checkpoints[checkpointIndex]) !== null && _a !== void 0 ? _a : 0;
+    while (currentLine < lineIndex && offset < index.bytes.byteLength) {
+        const lineBreakSize = isLineBreak(index.bytes, offset);
+        offset += lineBreakSize || 1;
+        if (lineBreakSize) {
+            currentLine += 1;
+        }
+    }
+    return offset;
+};
+const readLargeTextLineBounds = (index, startLine, count) => {
+    const lines = [];
+    let lineIndex = clamp(Math.trunc(startLine), 0, index.lineCount - 1);
+    let offset = locateLargeTextLineStart(index, lineIndex);
+    while (lines.length < count && lineIndex < index.lineCount) {
+        const start = offset;
+        while (offset < index.bytes.byteLength && !isLineBreak(index.bytes, offset)) {
+            offset += 1;
+        }
+        lines.push({ lineIndex, start, end: offset });
+        const lineBreakSize = isLineBreak(index.bytes, offset);
+        offset += lineBreakSize;
+        lineIndex += 1;
+    }
+    return lines;
+};
+const findLargeTextLineAtOffset = (index, requestedOffset) => {
+    var _a, _b;
+    const offset = clamp(Math.trunc(requestedOffset), 0, index.bytes.byteLength);
+    let low = 0;
+    let high = index.checkpoints.length - 1;
+    while (low < high) {
+        const middle = Math.ceil((low + high) / 2);
+        if (((_a = index.checkpoints[middle]) !== null && _a !== void 0 ? _a : 0) <= offset) {
+            low = middle;
+        }
+        else {
+            high = middle - 1;
+        }
+    }
+    let lineIndex = low * LARGE_TEXT_LINE_CHECKPOINT_STRIDE;
+    let cursor = (_b = index.checkpoints[low]) !== null && _b !== void 0 ? _b : 0;
+    while (cursor < offset && cursor < index.bytes.byteLength) {
+        const lineBreakSize = isLineBreak(index.bytes, cursor);
+        cursor += lineBreakSize || 1;
+        if (lineBreakSize) {
+            lineIndex += 1;
+        }
+    }
+    return clamp(lineIndex, 0, index.lineCount - 1);
+};
+const decodeLargeTextSegment = (index, line, segmentIndex, segmentBytes) => {
+    const segmentCount = Math.max(1, Math.ceil((line.end - line.start) / segmentBytes));
+    const normalizedSegment = clamp(Math.trunc(segmentIndex), 0, segmentCount - 1);
+    const rawStart = line.start + (normalizedSegment * segmentBytes);
+    const rawEnd = Math.min(line.end, rawStart + segmentBytes);
+    const start = alignUtf8Start(index.bytes, rawStart, line.end);
+    const end = alignUtf8End(index.bytes, rawEnd, line.end);
+    return {
+        text: new TextDecoder('utf-8').decode(index.bytes.subarray(start, end)),
+        segmentCount,
+        segmentIndex: normalizedSegment
+    };
+};
+const formatLargeNumber = (value) => {
+    try {
+        return new Intl.NumberFormat().format(value);
+    }
+    catch {
+        return String(value);
+    }
+};
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const createLargeTextSearchRegExp = (query, options) => {
+    const escaped = escapeRegExp(query);
+    return new RegExp(options.wholeWord ? `\\b${escaped}\\b` : escaped, options.caseSensitive ? 'g' : 'gi');
+};
+const cloneLargeTextSearchState = (state) => ({
+    ...state,
+    current: state.current ? { ...state.current } : null,
+    matches: state.matches.map(match => ({ ...match }))
+});
+export const shouldVirtualizeTextBuffer = (buffer, context) => {
+    var _a, _b;
+    const configured = (_b = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.virtualizeAboveBytes;
+    const threshold = Number.isFinite(configured)
+        ? Math.max(0, Number(configured))
+        : DEFAULT_LARGE_TEXT_THRESHOLD_BYTES;
+    return buffer.byteLength > threshold;
+};
+const largeTextStyle = `
+.code-viewer--virtual{height:100%;min-height:240px;display:flex;flex-direction:column;overflow:hidden}
+.code-viewer--virtual .code-toolbar{flex:0 0 42px}
+.code-toolbar-meta{display:inline-flex;min-width:0;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
+.code-toolbar-meta span{overflow:hidden;text-overflow:ellipsis}
+.code-virtual-scroll{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;contain:strict;background:var(--code-bg)}
+.code-virtual-spacer{position:relative;min-width:100%}
+.code-virtual-window{position:absolute;top:0;left:0;min-width:100%;will-change:transform}
+.code-virtual-line{display:flex;height:var(--code-line-height,22.1px);min-width:max-content;align-items:stretch;color:var(--code-text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:var(--code-line-height,22.1px);white-space:pre;contain:layout paint style}
+.code-virtual-line--match{background:rgba(255,215,0,.18)}
+.code-virtual-number{position:sticky;left:0;z-index:1;display:inline-block;width:var(--code-line-number-width,7ch);flex:0 0 var(--code-line-number-width,7ch);padding:0 1.25ch 0 .75ch;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);text-align:right;user-select:none;box-sizing:border-box}
+.code-virtual-content{display:inline-block;padding:0 18px;white-space:pre}
+.code-virtual-content mark{border-radius:2px;background:#ffd54f;color:#1f2328}
+.code-line-segments{position:sticky;left:var(--code-line-number-width,7ch);z-index:1;display:inline-flex;height:100%;align-items:center;gap:2px;padding:0 4px;border-right:1px solid var(--code-border);background:var(--code-toolbar-bg)}
+.code-line-segments button{width:22px;height:18px;padding:0;border:1px solid var(--code-border);border-radius:4px;background:var(--code-bg);color:var(--code-muted);font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
+.code-line-segments button:disabled{cursor:not-allowed;opacity:.4}
+.code-line-segments span{min-width:64px;color:var(--code-muted);font-size:11px;line-height:1;text-align:center}
+`;
+export default async function renderLargeText(buffer, target, type = 'txt', context) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
+    const documentRef = target.ownerDocument;
+    const bytes = new Uint8Array(buffer);
+    const configuredSegmentBytes = (_b = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.maxRenderedLineBytes;
+    const segmentBytes = Number.isFinite(configuredSegmentBytes)
+        ? clamp(Math.trunc(Number(configuredSegmentBytes)), 1024, 256 * 1024)
+        : DEFAULT_LARGE_TEXT_LINE_SEGMENT_BYTES;
+    const configuredOverscan = (_d = (_c = context === null || context === void 0 ? void 0 : context.options) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d.virtualOverscanLines;
+    const overscan = Number.isFinite(configuredOverscan)
+        ? clamp(Math.trunc(Number(configuredOverscan)), 2, 100)
+        : DEFAULT_LARGE_TEXT_OVERSCAN_LINES;
+    let disposed = false;
+    let zoom = 1;
+    let scheduledFrame = 0;
+    let lastWindowStart = -1;
+    let activeLine = -1;
+    let searchGeneration = 0;
+    const lineSegments = new Map();
+    const zoomEmitter = createZoomChangeEmitter();
+    const style = documentRef.createElement('style');
+    style.textContent = `${codeStyle}\n${largeTextStyle}`;
+    const root = documentRef.createElement('div');
+    root.className = 'code-viewer code-viewer--virtual';
+    root.dataset.viewerZoomProvider = 'code';
+    root.dataset.viewerSearchProvider = 'code-virtual';
+    const toolbar = documentRef.createElement('div');
+    toolbar.className = 'code-toolbar';
+    const extensionLabel = documentRef.createElement('span');
+    extensionLabel.textContent = type.toUpperCase();
+    const toolbarMeta = documentRef.createElement('div');
+    toolbarMeta.className = 'code-toolbar-meta';
+    const status = documentRef.createElement('span');
+    const lineSummary = documentRef.createElement('strong');
+    status.textContent = t('text.code.indexingLargeFile', { progress: 0 });
+    toolbarMeta.append(status, lineSummary);
+    toolbar.append(extensionLabel, toolbarMeta);
+    root.append(toolbar);
+    target.replaceChildren(style, root);
+    (_e = context === null || context === void 0 ? void 0 : context.onProgressiveRender) === null || _e === void 0 ? void 0 : _e.call(context);
+    const index = await buildLargeTextIndex(bytes, target, progress => {
+        if (!disposed) {
+            status.textContent = t('text.code.indexingLargeFile', { progress });
+        }
+    });
+    if (disposed) {
+        return { $el: target, unmount() { } };
+    }
+    status.textContent = t('text.code.virtualized');
+    root.dataset.totalLines = String(index.lineCount);
+    lineSummary.textContent = `${formatLargeNumber(index.lineCount)} lines`;
+    root.style.setProperty('--code-line-number-width', `${Math.max(6, String(index.lineCount).length + 2)}ch`);
+    const viewport = documentRef.createElement('div');
+    viewport.className = 'code-virtual-scroll';
+    viewport.dataset.viewerScrollContainer = 'true';
+    viewport.tabIndex = 0;
+    const spacer = documentRef.createElement('div');
+    spacer.className = 'code-virtual-spacer';
+    const windowElement = documentRef.createElement('div');
+    windowElement.className = 'code-virtual-window';
+    spacer.append(windowElement);
+    viewport.append(spacer);
+    root.append(viewport);
+    const getLineHeight = () => LARGE_TEXT_BASE_LINE_HEIGHT * zoom;
+    const getViewportHeight = () => Math.max(240, viewport.clientHeight || 600);
+    const getWindowLineCount = () => Math.min(index.lineCount, Math.ceil(getViewportHeight() / getLineHeight()) + (overscan * 2) + 2);
+    const getSpacerHeight = () => Math.min(LARGE_TEXT_MAX_SCROLL_HEIGHT, Math.max(getViewportHeight(), index.lineCount * getLineHeight()));
+    const usesCappedScrollHeight = () => index.lineCount * getLineHeight() > LARGE_TEXT_MAX_SCROLL_HEIGHT;
+    const updateSpacerHeight = () => {
+        root.style.setProperty('--code-font-size', `${13 * zoom}px`);
+        root.style.setProperty('--code-line-height', `${getLineHeight()}px`);
+        spacer.style.height = `${getSpacerHeight()}px`;
+    };
+    const getFirstVisibleLine = () => {
+        if (!usesCappedScrollHeight()) {
+            return clamp(Math.floor(viewport.scrollTop / getLineHeight()), 0, index.lineCount - 1);
+        }
+        const maxScrollTop = Math.max(1, getSpacerHeight() - getViewportHeight());
+        return clamp(Math.round((viewport.scrollTop / maxScrollTop) * (index.lineCount - 1)), 0, index.lineCount - 1);
+    };
+    const getWindowOffset = (startLine, renderedLineCount) => {
+        if (!usesCappedScrollHeight()) {
+            return startLine * getLineHeight();
+        }
+        const maxStart = Math.max(1, index.lineCount - renderedLineCount);
+        const maxOffset = Math.max(0, getSpacerHeight() - (renderedLineCount * getLineHeight()));
+        return (startLine / maxStart) * maxOffset;
+    };
+    const appendHighlightedContent = (content, text, query) => {
+        if (!query) {
+            content.textContent = text || ' ';
+            return;
+        }
+        const position = text.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
+        if (position < 0) {
+            content.textContent = text || ' ';
+            return;
+        }
+        content.append(documentRef.createTextNode(text.slice(0, position)), Object.assign(documentRef.createElement('mark'), { textContent: text.slice(position, position + query.length) }), documentRef.createTextNode(text.slice(position + query.length)));
+    };
+    let searchState = createEmptyFileViewerSearchState();
+    const renderWindow = (force = false) => {
+        var _a;
+        if (disposed) {
+            return;
+        }
+        const firstVisibleLine = getFirstVisibleLine();
+        const visibleCount = getWindowLineCount();
+        const startLine = clamp(firstVisibleLine - overscan, 0, Math.max(0, index.lineCount - visibleCount));
+        if (!force && startLine === lastWindowStart) {
+            return;
+        }
+        lastWindowStart = startLine;
+        const lines = readLargeTextLineBounds(index, startLine, visibleCount);
+        const fragment = documentRef.createDocumentFragment();
+        for (const line of lines) {
+            const row = documentRef.createElement('div');
+            row.className = 'code-virtual-line';
+            row.dataset.line = String(line.lineIndex + 1);
+            if (line.lineIndex === activeLine) {
+                row.classList.add('code-virtual-line--match');
+            }
+            const number = documentRef.createElement('span');
+            number.className = 'code-virtual-number';
+            number.textContent = String(line.lineIndex + 1);
+            row.append(number);
+            const currentSegment = (_a = lineSegments.get(line.lineIndex)) !== null && _a !== void 0 ? _a : 0;
+            const decoded = decodeLargeTextSegment(index, line, currentSegment, segmentBytes);
+            if (decoded.segmentCount > 1) {
+                const segments = documentRef.createElement('span');
+                segments.className = 'code-line-segments';
+                const actions = [
+                    ['first', '⇤', t('text.code.firstSegment')],
+                    ['previous', '‹', t('text.code.previousSegment')],
+                    ['next', '›', t('text.code.nextSegment')],
+                    ['last', '⇥', t('text.code.lastSegment')]
+                ];
+                for (const [action, label, title] of actions.slice(0, 2)) {
+                    const button = documentRef.createElement('button');
+                    button.type = 'button';
+                    button.dataset.segmentAction = action;
+                    button.dataset.lineIndex = String(line.lineIndex);
+                    button.title = title;
+                    button.setAttribute('aria-label', title);
+                    button.textContent = label;
+                    button.disabled = decoded.segmentIndex === 0;
+                    segments.append(button);
+                }
+                const segmentLabel = documentRef.createElement('span');
+                segmentLabel.textContent = `${decoded.segmentIndex + 1}/${decoded.segmentCount}`;
+                segments.append(segmentLabel);
+                for (const [action, label, title] of actions.slice(2)) {
+                    const button = documentRef.createElement('button');
+                    button.type = 'button';
+                    button.dataset.segmentAction = action;
+                    button.dataset.lineIndex = String(line.lineIndex);
+                    button.title = title;
+                    button.setAttribute('aria-label', title);
+                    button.textContent = label;
+                    button.disabled = decoded.segmentIndex === decoded.segmentCount - 1;
+                    segments.append(button);
+                }
+                row.append(segments);
+            }
+            const content = documentRef.createElement('span');
+            content.className = 'code-virtual-content';
+            appendHighlightedContent(content, decoded.text, line.lineIndex === activeLine ? searchState.query : '');
+            row.append(content);
+            fragment.append(row);
+        }
+        windowElement.replaceChildren(fragment);
+        windowElement.style.transform = `translateY(${getWindowOffset(startLine, lines.length)}px)`;
+    };
+    const scheduleRender = () => {
+        var _a, _b;
+        if (scheduledFrame || disposed) {
+            return;
+        }
+        const view = getWindow(target);
+        if (view === null || view === void 0 ? void 0 : view.requestAnimationFrame) {
+            scheduledFrame = view.requestAnimationFrame(() => {
+                scheduledFrame = 0;
+                renderWindow();
+            });
+            return;
+        }
+        scheduledFrame = Number((_b = (_a = view === null || view === void 0 ? void 0 : view.setTimeout) === null || _a === void 0 ? void 0 : _a.call(view, () => {
+            scheduledFrame = 0;
+            renderWindow();
+        }, 0)) !== null && _b !== void 0 ? _b : setTimeout(() => {
+            scheduledFrame = 0;
+            renderWindow();
+        }, 0));
+    };
+    const scrollToLine = (requestedLine) => {
+        const lineIndex = clamp(Math.trunc(requestedLine), 0, index.lineCount - 1);
+        if (usesCappedScrollHeight()) {
+            const maxScrollTop = Math.max(0, getSpacerHeight() - getViewportHeight());
+            viewport.scrollTop = index.lineCount > 1
+                ? (lineIndex / (index.lineCount - 1)) * maxScrollTop
+                : 0;
+        }
+        else {
+            viewport.scrollTop = lineIndex * getLineHeight();
+        }
+        lastWindowStart = -1;
+        renderWindow(true);
+    };
+    const setActiveSearchMatch = (requestedIndex) => {
+        const matches = searchState.matches;
+        if (!matches.length) {
+            activeLine = -1;
+            searchState.currentIndex = -1;
+            searchState.current = null;
+            renderWindow(true);
+            return cloneLargeTextSearchState(searchState);
+        }
+        const currentIndex = ((requestedIndex % matches.length) + matches.length) % matches.length;
+        const match = matches[currentIndex];
+        searchState.currentIndex = currentIndex;
+        searchState.current = match;
+        activeLine = match.lineIndex;
+        const lineStart = locateLargeTextLineStart(index, match.lineIndex);
+        lineSegments.set(match.lineIndex, Math.max(0, Math.floor((match.byteOffset - lineStart) / segmentBytes)));
+        scrollToLine(match.lineIndex);
+        return cloneLargeTextSearchState(searchState);
+    };
+    const clearSearch = () => {
+        searchGeneration += 1;
+        searchState = createEmptyFileViewerSearchState();
+        activeLine = -1;
+        renderWindow(true);
+        return cloneLargeTextSearchState(searchState);
+    };
+    const searchLargeText = async (rawQuery, rawOptions) => {
+        const query = rawQuery.replace(/\s+/g, ' ').trim();
+        const options = normalizeFileViewerSearchOptions(rawOptions);
+        if (!query || options.enabled === false) {
+            return clearSearch();
+        }
+        const generation = searchGeneration + 1;
+        searchGeneration = generation;
+        const matches = [];
+        const maxMatches = Math.max(1, options.maxMatches || DEFAULT_FILE_VIEWER_SEARCH_MAX_MATCHES);
+        const expression = createLargeTextSearchRegExp(query, options);
+        const encoder = new TextEncoder();
+        const encodedQueryBytes = encoder.encode(query).byteLength;
+        const overlap = clamp(encodedQueryBytes * 2, 256, 64 * 1024);
+        for (let primaryStart = 0; primaryStart < index.bytes.byteLength && matches.length < maxMatches;) {
+            const primaryEnd = Math.min(index.bytes.byteLength, primaryStart + LARGE_TEXT_SEARCH_CHUNK_BYTES);
+            const decodeStart = alignUtf8Start(index.bytes, Math.max(0, primaryStart - overlap), index.bytes.byteLength);
+            const decodeEnd = alignUtf8End(index.bytes, Math.min(index.bytes.byteLength, primaryEnd + overlap), index.bytes.byteLength);
+            const text = new TextDecoder('utf-8').decode(index.bytes.subarray(decodeStart, decodeEnd));
+            let lastCharacterOffset = 0;
+            let byteCursor = decodeStart;
+            expression.lastIndex = 0;
+            let match;
+            while ((match = expression.exec(text)) && matches.length < maxMatches) {
+                if (!match[0]) {
+                    expression.lastIndex += 1;
+                    continue;
+                }
+                byteCursor += encoder.encode(text.slice(lastCharacterOffset, match.index)).byteLength;
+                const matchByteOffset = byteCursor;
+                byteCursor += encoder.encode(match[0]).byteLength;
+                lastCharacterOffset = match.index + match[0].length;
+                if (matchByteOffset < primaryStart || matchByteOffset >= primaryEnd) {
+                    continue;
+                }
+                const lineIndex = findLargeTextLineAtOffset(index, matchByteOffset);
+                matches.push({
+                    id: `code-virtual-search-${matches.length + 1}`,
+                    index: matches.length,
+                    text: match[0],
+                    anchor: null,
+                    line: lineIndex + 1,
+                    byteOffset: matchByteOffset,
+                    lineIndex
+                });
+            }
+            primaryStart = primaryEnd;
+            await nextBrowserTurn(target);
+            if (disposed || generation !== searchGeneration) {
+                return cloneLargeTextSearchState(searchState);
+            }
+        }
+        searchState = {
+            query,
+            total: matches.length,
+            currentIndex: matches.length ? 0 : -1,
+            current: matches[0] || null,
+            matches
+        };
+        return matches.length ? setActiveSearchMatch(0) : cloneLargeTextSearchState(searchState);
+    };
+    const getZoomState = () => ({
+        scale: zoom,
+        label: `${Math.round(zoom * 100)}%`,
+        canZoomIn: zoom < 2.6,
+        canZoomOut: zoom > 0.6,
+        canReset: zoom !== 1,
+        minScale: 0.6,
+        maxScale: 2.6
+    });
+    const setZoom = (scale) => {
+        const firstVisibleLine = getFirstVisibleLine();
+        zoom = clampZoom(scale);
+        updateSpacerHeight();
+        scrollToLine(firstVisibleLine);
+        zoomEmitter.emit();
+        return getZoomState();
+    };
+    registerFileViewerSearchProvider(root, {
+        search: searchLargeText,
+        next: () => setActiveSearchMatch(searchState.currentIndex + 1),
+        previous: () => setActiveSearchMatch(searchState.currentIndex - 1),
+        clear: clearSearch,
+        getState: () => cloneLargeTextSearchState(searchState)
+    });
+    registerFileViewerZoomProvider(root, {
+        zoomIn: () => setZoom(zoom + 0.1),
+        zoomOut: () => setZoom(zoom - 0.1),
+        resetZoom: () => setZoom(1),
+        setZoom,
+        getState: getZoomState,
+        subscribe: zoomEmitter.subscribe
+    });
+    (_f = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _f === void 0 ? void 0 : _f.call(context, { print: false, exportHtml: false });
+    viewport.addEventListener('scroll', scheduleRender, { passive: true });
+    viewport.addEventListener('click', event => {
+        var _a, _b;
+        const button = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('button[data-segment-action]');
+        if (!button) {
+            return;
+        }
+        const lineIndex = Number(button.dataset.lineIndex);
+        const line = readLargeTextLineBounds(index, lineIndex, 1)[0];
+        if (!line) {
+            return;
+        }
+        const segmentCount = Math.max(1, Math.ceil((line.end - line.start) / segmentBytes));
+        const current = (_b = lineSegments.get(lineIndex)) !== null && _b !== void 0 ? _b : 0;
+        const action = button.dataset.segmentAction;
+        const next = action === 'first'
+            ? 0
+            : action === 'last'
+                ? segmentCount - 1
+                : action === 'previous'
+                    ? current - 1
+                    : current + 1;
+        lineSegments.set(lineIndex, clamp(next, 0, segmentCount - 1));
+        renderWindow(true);
+    });
+    const ResizeObserverCtor = (_g = getWindow(target)) === null || _g === void 0 ? void 0 : _g.ResizeObserver;
+    const resizeObserver = ResizeObserverCtor
+        ? new ResizeObserverCtor(() => {
+            updateSpacerHeight();
+            renderWindow(true);
+        })
+        : null;
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(viewport);
+    updateSpacerHeight();
+    renderWindow(true);
+    return {
+        $el: target,
+        unmount() {
+            var _a, _b;
+            disposed = true;
+            searchGeneration += 1;
+            const view = getWindow(target);
+            if (scheduledFrame && (view === null || view === void 0 ? void 0 : view.cancelAnimationFrame)) {
+                view.cancelAnimationFrame(scheduledFrame);
+            }
+            else if (scheduledFrame) {
+                (_a = view === null || view === void 0 ? void 0 : view.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(view, scheduledFrame);
+            }
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            viewport.removeEventListener('scroll', scheduleRender);
+            unregisterFileViewerSearchProvider(root);
+            unregisterFileViewerZoomProvider(root);
+            (_b = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _b === void 0 ? void 0 : _b.call(context, null);
+            target.replaceChildren();
+        }
+    };
+}

package/dist/markdown.d.ts

@@ -1,3 +1,3 @@
-import { type FileViewerRenderedInstance } from '@file-viewer/core';
+import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-viewer/core';
 export declare const stripMarkdownFrontmatter: (text: string) => string;
-export default function renderMarkdown(buffer: ArrayBuffer, target: HTMLDivElement): Promise<FileViewerRenderedInstance>;
+export default function renderMarkdown(buffer: ArrayBuffer, target: HTMLDivElement, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/markdown.js

@@ -17,6 +17,10 @@ const markdownStyle = `
 .markdown-body tr{background:var(--bgColor-default);border-top:1px solid var(--borderColor-muted)}
 .markdown-body tr:nth-child(2n){background:var(--bgColor-muted)}
 .markdown-body blockquote{padding:0 1em;color:var(--fgColor-muted);border-left:.25em solid var(--borderColor-default)}
+.markdown-mermaid{display:flex;justify-content:center;width:100%;margin:0 0 16px;overflow:auto;border:1px solid var(--borderColor-muted);border-radius:10px;padding:16px;box-sizing:border-box;background:var(--bgColor-default)}
+.markdown-mermaid svg{display:block;max-width:100%;height:auto;margin:auto}
+.markdown-mermaid-error{margin:-8px 0 16px;color:#cf222e;font-size:.875em}
+[data-viewer-theme='dark'] .markdown-mermaid-error{color:#ff7b72}
 [data-viewer-theme='dark'] .markdown-viewer{background:#101820}
 [data-viewer-theme='dark'] .markdown-body{color-scheme:dark;--bgColor-default:#0d1117;--bgColor-muted:#151b23;--bgColor-neutral-muted:#656c7633;--borderColor-default:#3d444d;--borderColor-muted:#3d444db3;--borderColor-neutral-muted:#3d444db3;--fgColor-default:#f0f6fc;--fgColor-muted:#9198a1;--fgColor-accent:#4493f8;background:var(--bgColor-default);border-color:rgba(139,148,158,.26);color:var(--fgColor-default);box-shadow:0 24px 56px rgba(0,0,0,.38)}
 @media (max-width:767px){.markdown-viewer{padding:14px 10px 28px}.markdown-body{padding:22px 18px;border-radius:10px}}
@@ -35,6 +39,87 @@ const applyMarkdownZoom = (host, zoom) => {
     host.style.setProperty('--markdown-padding', `${45 * zoom}px`);
     host.style.setProperty('--markdown-font-size', `${16 * zoom}px`);
 };
+let mermaidRenderSequence = 0;
+let mermaidRenderQueue = Promise.resolve();
+const isDarkTheme = (documentRef, theme) => {
+    var _a, _b;
+    if (theme === 'dark') {
+        return true;
+    }
+    if (theme === 'light') {
+        return false;
+    }
+    return Boolean((_b = (_a = documentRef.defaultView) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)').matches);
+};
+const sanitizeMermaidSvg = (documentRef, svg) => {
+    var _a;
+    const Parser = ((_a = documentRef.defaultView) === null || _a === void 0 ? void 0 : _a.DOMParser) || DOMParser;
+    const parsed = new Parser().parseFromString(svg, 'image/svg+xml');
+    const parseError = parsed.querySelector('parsererror');
+    if (parseError) {
+        throw new Error(parseError.textContent || 'Unable to parse the Mermaid SVG.');
+    }
+    parsed.querySelectorAll('script,iframe,object,embed').forEach(node => node.remove());
+    parsed.querySelectorAll('*').forEach(node => {
+        for (const attribute of Array.from(node.attributes)) {
+            if (/^on/i.test(attribute.name)) {
+                node.removeAttribute(attribute.name);
+            }
+            else if (/^(?:href|xlink:href|src)$/i.test(attribute.name) && /^\s*javascript:/i.test(attribute.value)) {
+                node.removeAttribute(attribute.name);
+            }
+        }
+    });
+    return documentRef.importNode(parsed.documentElement, true);
+};
+const renderMermaidSvg = async (documentRef, source, theme) => {
+    const render = async () => {
+        const mermaidModule = await import('mermaid');
+        const mermaid = mermaidModule.default;
+        const id = `file-viewer-markdown-mermaid-${Date.now()}-${mermaidRenderSequence += 1}`;
+        mermaid.initialize({
+            startOnLoad: false,
+            securityLevel: 'strict',
+            theme: isDarkTheme(documentRef, theme) ? 'dark' : 'default',
+        });
+        const rendered = await mermaid.render(id, source);
+        return sanitizeMermaidSvg(documentRef, rendered.svg);
+    };
+    const result = mermaidRenderQueue.then(render, render);
+    mermaidRenderQueue = result.then(() => undefined, () => undefined);
+    return result;
+};
+const renderEmbeddedMermaid = async (article, theme) => {
+    const documentRef = article.ownerDocument;
+    const mermaidBlocks = Array.from(article.querySelectorAll('pre > code')).filter(code => /(?:^|\s)(?:language|lang)-mermaid(?:\s|$)/i.test(code.className));
+    for (const code of mermaidBlocks) {
+        const pre = code.parentElement;
+        if (!pre) {
+            continue;
+        }
+        const source = code.textContent || '';
+        try {
+            const svg = await renderMermaidSvg(documentRef, source, theme);
+            svg.classList.add('markdown-mermaid-svg');
+            svg.setAttribute('role', 'img');
+            svg.setAttribute('aria-label', 'Mermaid diagram preview');
+            const shell = documentRef.createElement('div');
+            shell.className = 'markdown-mermaid';
+            shell.dataset.markdownMermaid = 'rendered';
+            shell.appendChild(svg);
+            pre.replaceWith(shell);
+        }
+        catch (error) {
+            pre.classList.add('markdown-mermaid-source-error');
+            const message = documentRef.createElement('p');
+            message.className = 'markdown-mermaid-error';
+            message.setAttribute('role', 'alert');
+            message.textContent = 'Mermaid diagram could not be rendered. The source is shown above.';
+            pre.after(message);
+            console.warn('[file-viewer] Unable to render embedded Mermaid diagram.', error);
+        }
+    }
+};
 export const stripMarkdownFrontmatter = (text) => {
     const input = text.replace(/^\uFEFF/, '');
     if (!input.startsWith('---')) {
@@ -53,7 +138,8 @@ export const stripMarkdownFrontmatter = (text) => {
     }
     return input.slice(match.index + match[0].length).replace(/^\r?\n/, '');
 };
-export default async function renderMarkdown(buffer, target) {
+export default async function renderMarkdown(buffer, target, context) {
+    var _a;
     const text = await readText(buffer);
     let zoom = 1;
     const zoomEmitter = createZoomChangeEmitter();
@@ -66,6 +152,7 @@ export default async function renderMarkdown(buffer, target) {
     applyMarkdownZoom(root, zoom);
     root.append(article);
     target.replaceChildren(createStyle(), root);
+    await renderEmbeddedMermaid(article, (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.theme);
     const getZoomState = () => ({
         scale: zoom,
         label: `${Math.round(zoom * 100)}%`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-text",
-  "version": "2.1.24",
+  "version": "2.1.26",
   "private": false,
   "type": "module",
   "description": "Standalone code, text, Markdown, patch diff, and Git bundle renderer plugin for Flyfish File Viewer.",
@@ -57,10 +57,11 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.1.24",
+    "@file-viewer/core": "2.1.26",
     "diff2html": "^3.4.56",
     "highlight.js": "^11.11.1",
     "marked": "^18.0.5",
+    "mermaid": "^11.15.0",
     "pako": "^2.1.0"
   },
   "devDependencies": {