@file-viewer/renderer-text 2.4.0 → 3.0.1

package/dist/largeText.js

@@ -8,6 +8,7 @@ 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 LARGE_TEXT_MEASUREMENT_BLOCK_LINES = 256;
 const clamp = (value, minimum, maximum) => {
     return Number.isFinite(value)
         ? Math.max(minimum, Math.min(maximum, value))
@@ -234,8 +235,6 @@ export const shouldVirtualizeMarkdownBuffer = (buffer, context) => {
 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}
@@ -248,9 +247,15 @@ const largeTextStyle = `
 .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}
+.code-viewer--virtual.code-viewer--wrap-lines .code-virtual-scroll{overflow-x:hidden}
+.code-viewer--virtual.code-viewer--wrap-lines .code-virtual-spacer,.code-viewer--virtual.code-viewer--wrap-lines .code-virtual-window{width:100%;min-width:0}
+.code-viewer--virtual.code-viewer--wrap-lines .code-virtual-line{width:100%;height:auto;min-height:var(--code-line-height,22.1px);min-width:0;align-items:flex-start;white-space:normal;contain:layout paint style}
+.code-viewer--virtual.code-viewer--wrap-lines .code-virtual-number{align-self:stretch}
+.code-viewer--virtual.code-viewer--wrap-lines .code-line-segments{flex:0 0 auto;align-self:stretch;height:auto}
+.code-viewer--virtual.code-viewer--wrap-lines .code-virtual-content{display:block;min-width:0;flex:1 1 auto;padding:0 18px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
 `;
 export default async function renderLargeText(buffer, target, type = 'txt', context) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
     const documentRef = target.ownerDocument;
     const sourceBytes = new Uint8Array(buffer);
@@ -268,9 +273,11 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
     // Undefined preserves the large-text renderer's pre-option behavior. An
     // explicit boolean has the same meaning in both regular and virtual views.
     const showLineNumbers = ((_k = (_j = context === null || context === void 0 ? void 0 : context.options) === null || _j === void 0 ? void 0 : _j.text) === null || _k === void 0 ? void 0 : _k.lineNumbers) !== false;
+    const wrapLongLines = ((_m = (_l = context === null || context === void 0 ? void 0 : context.options) === null || _l === void 0 ? void 0 : _l.text) === null || _m === void 0 ? void 0 : _m.wrapLongLines) === true;
     let disposed = false;
     let zoom = 1;
     let scheduledFrame = 0;
+    let measurementFrame = 0;
     let lastWindowStart = -1;
     let activeLine = -1;
     let searchGeneration = 0;
@@ -279,13 +286,17 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
     const style = documentRef.createElement('style');
     style.textContent = `${codeStyle}\n${largeTextStyle}`;
     const root = documentRef.createElement('div');
-    root.className = showLineNumbers
-        ? 'code-viewer code-viewer--virtual code-viewer--line-numbers'
-        : 'code-viewer code-viewer--virtual';
+    root.className = [
+        'code-viewer',
+        'code-viewer--virtual',
+        showLineNumbers ? 'code-viewer--line-numbers' : '',
+        wrapLongLines ? 'code-viewer--wrap-lines' : ''
+    ].filter(Boolean).join(' ');
     root.dataset.viewerZoomProvider = 'code';
     root.dataset.viewerSearchProvider = 'code-virtual';
     root.dataset.textToolbar = String(showToolbar);
     root.dataset.lineNumbers = String(showLineNumbers);
+    root.dataset.wrapLongLines = String(wrapLongLines);
     root.dataset.textEncoding = source.encoding;
     const toolbar = documentRef.createElement('div');
     toolbar.className = 'code-toolbar';
@@ -302,7 +313,7 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
         root.append(toolbar);
     }
     target.replaceChildren(style, root);
-    (_l = context === null || context === void 0 ? void 0 : context.onProgressiveRender) === null || _l === void 0 ? void 0 : _l.call(context);
+    (_o = context === null || context === void 0 ? void 0 : context.onProgressiveRender) === null || _o === void 0 ? void 0 : _o.call(context);
     const index = await buildLargeTextIndex(bytes, source.encoding, target, progress => {
         if (!disposed) {
             status.textContent = t('text.code.indexingLargeFile', { progress });
@@ -329,29 +340,154 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
     root.append(viewport);
     const getLineHeight = () => LARGE_TEXT_BASE_LINE_HEIGHT * zoom;
     const getViewportHeight = () => Math.max(240, viewport.clientHeight || 600);
+    const measuredLineHeights = new Map();
+    const measuredLineHeightsByBlock = new Map();
+    const heightCorrectionTree = new Float64Array(Math.ceil(index.lineCount / LARGE_TEXT_MEASUREMENT_BLOCK_LINES) + 1);
+    const updateHeightCorrection = (blockIndex, delta) => {
+        for (let treeIndex = blockIndex + 1; treeIndex < heightCorrectionTree.length; treeIndex += treeIndex & -treeIndex) {
+            heightCorrectionTree[treeIndex] += delta;
+        }
+    };
+    const getHeightCorrectionBeforeBlock = (blockIndex) => {
+        let correction = 0;
+        for (let treeIndex = blockIndex; treeIndex > 0; treeIndex -= treeIndex & -treeIndex) {
+            correction += heightCorrectionTree[treeIndex];
+        }
+        return correction;
+    };
+    const getOffsetForLine = (requestedLine) => {
+        const lineIndex = clamp(Math.trunc(requestedLine), 0, index.lineCount);
+        if (!wrapLongLines || lineIndex === 0) {
+            return lineIndex * getLineHeight();
+        }
+        const blockIndex = Math.floor(lineIndex / LARGE_TEXT_MEASUREMENT_BLOCK_LINES);
+        let correction = getHeightCorrectionBeforeBlock(blockIndex);
+        const blockMeasurements = measuredLineHeightsByBlock.get(blockIndex);
+        if (blockMeasurements) {
+            for (const [measuredLine, height] of blockMeasurements) {
+                if (measuredLine >= lineIndex) {
+                    continue;
+                }
+                correction += height - getLineHeight();
+            }
+        }
+        return (lineIndex * getLineHeight()) + correction;
+    };
+    const getTotalContentHeight = () => getOffsetForLine(index.lineCount);
     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 getSpacerHeight = () => Math.min(LARGE_TEXT_MAX_SCROLL_HEIGHT, Math.max(getViewportHeight(), getTotalContentHeight()));
+    const usesCappedScrollHeight = () => getTotalContentHeight() > 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 getLineAtOffset = (requestedOffset) => {
+        const offset = clamp(requestedOffset, 0, Math.max(0, getTotalContentHeight() - 1));
+        let low = 0;
+        let high = Math.max(0, index.lineCount - 1);
+        while (low < high) {
+            const middle = Math.ceil((low + high) / 2);
+            if (getOffsetForLine(middle) <= offset) {
+                low = middle;
+            }
+            else {
+                high = middle - 1;
+            }
+        }
+        return low;
+    };
     const getFirstVisibleLine = () => {
         if (!usesCappedScrollHeight()) {
-            return clamp(Math.floor(viewport.scrollTop / getLineHeight()), 0, index.lineCount - 1);
+            return wrapLongLines
+                ? getLineAtOffset(viewport.scrollTop)
+                : 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();
+            return getOffsetForLine(startLine);
         }
         const maxStart = Math.max(1, index.lineCount - renderedLineCount);
         const maxOffset = Math.max(0, getSpacerHeight() - (renderedLineCount * getLineHeight()));
         return (startLine / maxStart) * maxOffset;
     };
+    const setMeasuredLineHeight = (lineIndex, measuredHeight) => {
+        var _a;
+        const nextHeight = Math.max(getLineHeight(), measuredHeight);
+        const previousHeight = (_a = measuredLineHeights.get(lineIndex)) !== null && _a !== void 0 ? _a : getLineHeight();
+        if (Math.abs(nextHeight - previousHeight) < 0.5) {
+            return false;
+        }
+        const blockIndex = Math.floor(lineIndex / LARGE_TEXT_MEASUREMENT_BLOCK_LINES);
+        measuredLineHeights.set(lineIndex, nextHeight);
+        let blockMeasurements = measuredLineHeightsByBlock.get(blockIndex);
+        if (!blockMeasurements) {
+            blockMeasurements = new Map();
+            measuredLineHeightsByBlock.set(blockIndex, blockMeasurements);
+        }
+        blockMeasurements.set(lineIndex, nextHeight);
+        updateHeightCorrection(blockIndex, nextHeight - previousHeight);
+        return true;
+    };
+    const clearMeasuredLineHeights = () => {
+        measuredLineHeights.clear();
+        measuredLineHeightsByBlock.clear();
+        heightCorrectionTree.fill(0);
+    };
+    const scheduleWrappedMeasurement = (startLine, renderedLineCount) => {
+        var _a, _b, _c;
+        if (!wrapLongLines || disposed || renderedLineCount === 0) {
+            return;
+        }
+        const view = getWindow(target);
+        if (measurementFrame && (view === null || view === void 0 ? void 0 : view.cancelAnimationFrame)) {
+            view.cancelAnimationFrame(measurementFrame);
+        }
+        else if (measurementFrame) {
+            (_a = view === null || view === void 0 ? void 0 : view.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(view, measurementFrame);
+        }
+        const measure = () => {
+            measurementFrame = 0;
+            if (disposed) {
+                return;
+            }
+            const anchorLine = getFirstVisibleLine();
+            const anchorOffset = usesCappedScrollHeight()
+                ? 0
+                : viewport.scrollTop - getOffsetForLine(anchorLine);
+            let changed = false;
+            const rows = Array.from(windowElement.querySelectorAll('.code-virtual-line'));
+            for (const row of rows) {
+                const lineIndex = Number(row.dataset.line) - 1;
+                if (!Number.isInteger(lineIndex) || lineIndex < 0) {
+                    continue;
+                }
+                const measuredHeight = row.getBoundingClientRect().height || row.offsetHeight || 0;
+                if (measuredHeight) {
+                    changed = setMeasuredLineHeight(lineIndex, measuredHeight) || changed;
+                }
+            }
+            if (!changed) {
+                return;
+            }
+            updateSpacerHeight();
+            if (!usesCappedScrollHeight()) {
+                viewport.scrollTop = getOffsetForLine(anchorLine) + anchorOffset;
+            }
+            windowElement.style.transform = `translateY(${getWindowOffset(startLine, renderedLineCount)}px)`;
+            lastWindowStart = -1;
+            scheduleRender();
+        };
+        if (view === null || view === void 0 ? void 0 : view.requestAnimationFrame) {
+            measurementFrame = view.requestAnimationFrame(measure);
+        }
+        else {
+            measurementFrame = Number((_c = (_b = view === null || view === void 0 ? void 0 : view.setTimeout) === null || _b === void 0 ? void 0 : _b.call(view, measure, 0)) !== null && _c !== void 0 ? _c : setTimeout(measure, 0));
+        }
+    };
     const appendHighlightedContent = (content, text, query) => {
         if (!query) {
             content.textContent = text || ' ';
@@ -383,6 +519,7 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
             const row = documentRef.createElement('div');
             row.className = 'code-virtual-line';
             row.dataset.line = String(line.lineIndex + 1);
+            row.dataset.logicalLine = String(line.lineIndex + 1);
             if (line.lineIndex === activeLine) {
                 row.classList.add('code-virtual-line--match');
             }
@@ -439,6 +576,7 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
         }
         windowElement.replaceChildren(fragment);
         windowElement.style.transform = `translateY(${getWindowOffset(startLine, lines.length)}px)`;
+        scheduleWrappedMeasurement(startLine, lines.length);
     };
     const scheduleRender = () => {
         var _a, _b;
@@ -470,7 +608,7 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
                 : 0;
         }
         else {
-            viewport.scrollTop = lineIndex * getLineHeight();
+            viewport.scrollTop = getOffsetForLine(lineIndex);
         }
         lastWindowStart = -1;
         renderWindow(true);
@@ -592,6 +730,9 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
     const setZoom = (scale) => {
         const firstVisibleLine = getFirstVisibleLine();
         zoom = clampZoom(scale);
+        if (wrapLongLines) {
+            clearMeasuredLineHeights();
+        }
         updateSpacerHeight();
         scrollToLine(firstVisibleLine);
         zoomEmitter.emit();
@@ -612,7 +753,7 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
         getState: getZoomState,
         subscribe: zoomEmitter.subscribe
     });
-    (_m = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _m === void 0 ? void 0 : _m.call(context, { print: false, exportHtml: false });
+    (_p = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _p === void 0 ? void 0 : _p.call(context, { print: false, exportHtml: false });
     viewport.addEventListener('scroll', scheduleRender, { passive: true });
     viewport.addEventListener('click', event => {
         var _a, _b;
@@ -638,9 +779,16 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
         lineSegments.set(lineIndex, clamp(next, 0, segmentCount - 1));
         renderWindow(true);
     });
-    const ResizeObserverCtor = (_o = getWindow(target)) === null || _o === void 0 ? void 0 : _o.ResizeObserver;
+    const ResizeObserverCtor = (_q = getWindow(target)) === null || _q === void 0 ? void 0 : _q.ResizeObserver;
     const resizeObserver = ResizeObserverCtor
         ? new ResizeObserverCtor(() => {
+            if (wrapLongLines) {
+                const firstVisibleLine = getFirstVisibleLine();
+                clearMeasuredLineHeights();
+                updateSpacerHeight();
+                scrollToLine(firstVisibleLine);
+                return;
+            }
             updateSpacerHeight();
             renderWindow(true);
         })
@@ -651,7 +799,7 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
     return {
         $el: target,
         unmount() {
-            var _a, _b;
+            var _a, _b, _c;
             disposed = true;
             searchGeneration += 1;
             const view = getWindow(target);
@@ -661,11 +809,17 @@ export default async function renderLargeText(buffer, target, type = 'txt', cont
             else if (scheduledFrame) {
                 (_a = view === null || view === void 0 ? void 0 : view.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(view, scheduledFrame);
             }
+            if (measurementFrame && (view === null || view === void 0 ? void 0 : view.cancelAnimationFrame)) {
+                view.cancelAnimationFrame(measurementFrame);
+            }
+            else if (measurementFrame) {
+                (_b = view === null || view === void 0 ? void 0 : view.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(view, measurementFrame);
+            }
             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);
+            (_c = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _c === void 0 ? void 0 : _c.call(context, null);
             target.replaceChildren();
         }
     };

package/dist/markdown.d.ts

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

package/dist/markdown.js

@@ -1,27 +1,22 @@
 import { marked } from 'marked';
 import createDOMPurify from 'dompurify';
-import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, decodeFileViewerTextBuffer, registerFileViewerZoomProvider, resolveFileViewerFitScale, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
-const createSafeTextFragment = (documentRef, value) => {
-    const fragment = documentRef.createDocumentFragment();
-    fragment.append(documentRef.createTextNode(value));
-    return fragment;
-};
-const sanitizeMarkdownHtml = (documentRef, html) => {
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, assertFileViewerMermaidSourceHasNoExternalResources, decodeFileViewerTextBuffer, registerFileViewerZoomProvider, resolveFileViewerFitScale, unregisterFileViewerZoomProvider, sanitizeFileViewerSvgResources, } from '@file-viewer/core';
+import { getFileViewerMermaidLoader } from './optionalCapabilities.js';
+import { sanitizeFileViewerRichHtml } from './sanitizeHtml.js';
+const sanitizeMarkdownHtml = sanitizeFileViewerRichHtml;
+const purifierByDocument = new WeakMap();
+const getMarkdownPurifier = (documentRef) => {
+    const cached = purifierByDocument.get(documentRef);
+    if (cached)
+        return cached;
     const windowRef = documentRef.defaultView;
-    if (!windowRef) {
-        return createSafeTextFragment(documentRef, html);
-    }
+    if (!windowRef)
+        return null;
     const purifier = createDOMPurify(windowRef);
-    if (!purifier.isSupported) {
-        return createSafeTextFragment(documentRef, html);
-    }
-    return purifier.sanitize(html, {
-        RETURN_DOM_FRAGMENT: true,
-        USE_PROFILES: { html: true },
-        ADD_ATTR: ['target'],
-        FORBID_TAGS: ['style', 'iframe', 'object', 'embed', 'form'],
-        FORBID_ATTR: ['style', 'srcdoc'],
-    });
+    if (!purifier.isSupported)
+        return null;
+    purifierByDocument.set(documentRef, purifier);
+    return purifier;
 };
 const hardenMarkdownLinks = (root) => {
     root.querySelectorAll('a[target]').forEach(anchor => {
@@ -108,35 +103,38 @@ const isDarkTheme = (documentRef, theme) => {
     }
     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.');
+export const sanitizeMermaidSvg = (documentRef, svg) => {
+    const purifier = getMarkdownPurifier(documentRef);
+    if (!purifier) {
+        throw new Error('Unable to initialize the Mermaid SVG sanitizer.');
     }
-    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);
-            }
-        }
+    const fragment = purifier.sanitize(svg, {
+        RETURN_DOM_FRAGMENT: true,
+        USE_PROFILES: { html: true, svg: true, svgFilters: true },
+        FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form'],
+        FORBID_ATTR: ['srcdoc'],
     });
-    return documentRef.importNode(parsed.documentElement, true);
+    const root = fragment.querySelector('svg');
+    if (!root) {
+        throw new Error('Unable to parse the Mermaid SVG.');
+    }
+    sanitizeFileViewerSvgResources(fragment);
+    return documentRef.importNode(root, true);
 };
 const renderMermaidSvg = async (documentRef, source, theme) => {
     const render = async () => {
-        const mermaidModule = await import('mermaid');
+        assertFileViewerMermaidSourceHasNoExternalResources(source);
+        const loadMermaid = getFileViewerMermaidLoader();
+        if (!loadMermaid) {
+            throw new Error('Mermaid support is opt-in. Run `npx file-viewer-cli add mermaid-markdown --write`, then `npx file-viewer-cli install --yes`.');
+        }
+        const mermaidModule = await loadMermaid();
         const mermaid = mermaidModule.default;
         const id = `file-viewer-markdown-mermaid-${Date.now()}-${mermaidRenderSequence += 1}`;
         mermaid.initialize({
             startOnLoad: false,
             securityLevel: 'strict',
+            htmlLabels: false,
             theme: isDarkTheme(documentRef, theme) ? 'dark' : 'default',
         });
         const rendered = await mermaid.render(id, source);
@@ -171,7 +169,9 @@ const renderEmbeddedMermaid = async (article, theme) => {
             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.';
+            message.textContent = error instanceof Error && error.message.includes('npx file-viewer-cli')
+                ? error.message
+                : '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);
         }

package/dist/optionalCapabilities.d.ts

@@ -0,0 +1,21 @@
+export type FileViewerMermaidModule = {
+    default: {
+        initialize(options: Record<string, unknown>): void;
+        render(id: string, source: string): Promise<{
+            svg: string;
+        }>;
+    };
+};
+export type FileViewerMermaidLoader = () => Promise<FileViewerMermaidModule>;
+export type FileViewerDiffToHtml = (input: string, options: Record<string, unknown>) => string;
+export type FileViewerPakoModule = typeof import('pako');
+/**
+ * Enables embedded Mermaid blocks without making Mermaid part of the base text
+ * renderer dependency closure. Capability packs call this once at startup.
+ */
+export declare const registerFileViewerMermaidLoader: (loader: FileViewerMermaidLoader | null) => void;
+export declare const getFileViewerMermaidLoader: () => FileViewerMermaidLoader | null;
+export declare const registerFileViewerDiffToHtml: (renderer: FileViewerDiffToHtml | null) => void;
+export declare const getFileViewerDiffToHtml: () => FileViewerDiffToHtml | null;
+export declare const registerFileViewerPakoLoader: (loader: (() => Promise<FileViewerPakoModule>) | null) => void;
+export declare const getFileViewerPakoLoader: () => (() => Promise<FileViewerPakoModule>) | null;

package/dist/optionalCapabilities.js

@@ -0,0 +1,19 @@
+let mermaidLoader = null;
+let diffToHtml = null;
+let pakoLoader = null;
+/**
+ * Enables embedded Mermaid blocks without making Mermaid part of the base text
+ * renderer dependency closure. Capability packs call this once at startup.
+ */
+export const registerFileViewerMermaidLoader = (loader) => {
+    mermaidLoader = loader;
+};
+export const getFileViewerMermaidLoader = () => mermaidLoader;
+export const registerFileViewerDiffToHtml = (renderer) => {
+    diffToHtml = renderer;
+};
+export const getFileViewerDiffToHtml = () => diffToHtml;
+export const registerFileViewerPakoLoader = (loader) => {
+    pakoLoader = loader;
+};
+export const getFileViewerPakoLoader = () => pakoLoader;

package/dist/patch.js

@@ -1,5 +1,6 @@
 import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, decodeFileViewerTextBuffer, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
-import { html as diffToHtml } from 'diff2html';
+import { getFileViewerDiffToHtml } from './optionalCapabilities.js';
+import { sanitizeFileViewerRichHtml } from './sanitizeHtml.js';
 const patchStyle = `
 .patch-viewer{min-height:100%;--patch-bg:#f6f8fa;--patch-surface:#fff;--patch-border:rgba(31,35,40,.12);--patch-text:#24292f;--patch-muted:#57606a;--patch-add:#dafbe1;--patch-del:#ffebe9;--patch-info:#ddf4ff;--patch-font-size:13px;background:var(--patch-bg);color:var(--patch-text);box-sizing:border-box}
 .patch-toolbar{position:sticky;top:0;z-index:2;display:flex;height:46px;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid var(--patch-border);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-sizing:border-box}
@@ -52,18 +53,6 @@ const countFiles = (text) => {
     }
     return ((_a = text.match(/^---\s+/gm)) === null || _a === void 0 ? void 0 : _a.length) || 1;
 };
-const escapeHtml = (value) => {
-    return value.replace(/[&<>"']/g, char => {
-        const entities = {
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#39;'
-        };
-        return entities[char];
-    });
-};
 export default async function renderPatch(buffer, target, type = 'patch', context) {
     var _a, _b;
     const documentRef = target.ownerDocument || document;
@@ -76,16 +65,21 @@ export default async function renderPatch(buffer, target, type = 'patch', contex
     toolbar.append(createElement(documentRef, 'span', undefined, type.toUpperCase()), createElement(documentRef, 'strong', undefined, `${countFiles(text)} files · side-by-side`));
     const body = createElement(documentRef, 'div', 'patch-body');
     try {
-        body.innerHTML = diffToHtml(text, {
+        const diffToHtml = getFileViewerDiffToHtml();
+        if (!diffToHtml) {
+            throw new Error('Patch side-by-side rendering is opt-in. Run `npx file-viewer-cli add text-tools --write`, then `npx file-viewer-cli install --yes`.');
+        }
+        const rendered = diffToHtml(text, {
             drawFileList: true,
             matching: 'lines',
             outputFormat: 'side-by-side',
             renderNothingWhenEmpty: false
         });
+        body.replaceChildren(sanitizeFileViewerRichHtml(documentRef, rendered, { allowSvg: true }));
     }
     catch {
         const fallback = createElement(documentRef, 'pre', 'patch-fallback');
-        fallback.innerHTML = escapeHtml(text);
+        fallback.textContent = text;
         body.replaceChildren(fallback);
     }
     root.append(toolbar, body);

package/dist/prettyPrint.d.ts

@@ -0,0 +1,35 @@
+import type { FileViewerTextOptions } from '@file-viewer/core';
+export declare const DEFAULT_PRETTY_PRINT_MAX_BYTES: number;
+export type FileViewerPrettyPrintReason = 'formatted' | 'disabled' | 'unsupported' | 'too-large' | 'whitespace-sensitive' | 'failed' | 'aborted';
+export interface FileViewerPrettyPrintResult {
+    text: string;
+    formatted: boolean;
+    reason: FileViewerPrettyPrintReason;
+    parser?: string;
+    sourceByteLength: number;
+    maxBytes: number;
+}
+type PrettierPlugin = Record<string, unknown>;
+type PrettierRuntime = {
+    format: (source: string, options: Record<string, unknown>) => string | Promise<string>;
+    plugins: PrettierPlugin[];
+};
+type PrettierPluginName = 'babel' | 'estree' | 'typescript' | 'postcss' | 'html' | 'markdown' | 'yaml' | 'graphql' | 'xml';
+interface PrettierLanguageDefinition {
+    parser: string;
+    plugins: readonly PrettierPluginName[];
+    resolvePlugins?: (source: string) => readonly PrettierPluginName[];
+    options?: Readonly<Record<string, unknown>>;
+}
+export type FileViewerPrettierRuntimeLoader = (definition: PrettierLanguageDefinition, source: string) => Promise<PrettierRuntime>;
+export declare const resolveFileViewerPrettyPrintMaxBytes: (options?: FileViewerTextOptions) => number;
+export declare const supportsFileViewerPrettyPrint: (extension: string) => boolean;
+/**
+ * Formats a decoded display representation without mutating the source buffer.
+ *
+ * Parser support and byte limits are resolved before the Prettier runtime or
+ * any parser plugin is imported. Failures intentionally return the original
+ * source so malformed or unsupported uploads remain previewable.
+ */
+export declare const formatFileViewerTextForDisplay: (source: string, extension: string, options?: FileViewerTextOptions, signal?: AbortSignal, runtimeLoader?: FileViewerPrettierRuntimeLoader) => Promise<FileViewerPrettyPrintResult>;
+export {};