@file-viewer/renderer-text 3.0.0 → 3.0.1

package/README.en.md

@@ -13,6 +13,9 @@ const options = {
   renderers: textRenderer,
   text: {
     lineNumbers: true,
+    wrapLongLines: true,
+    prettyPrint: true,
+    prettyPrintMaxBytes: 512 * 1024,
   },
 }
 ```
@@ -34,6 +37,10 @@ const options = {
 - Code and text preview uses `highlight.js` core with per-language dynamic imports instead of registering every language up front.
 - Code, text, and virtualized Markdown source views show their file type, indexing status, and line-count metadata bar by default. Set `options.text.toolbar: false` to hide this renderer-local bar without hiding the viewer-level download, search, or zoom toolbar.
 - Regular code and text previews can show a line-number gutter with `options.text.lineNumbers: true`. The gutter is excluded from copied source, search matches, and assistive reading. Virtual large-text views keep their existing gutter unless it is explicitly set to `false`.
+- `options.text.wrapLongLines: true` changes layout only and never inserts source newlines. Regular previews keep one gutter entry per logical line; large files remain bounded in the virtual window while wrapping to the available width.
+- `options.text.prettyPrint: true` lazily loads Prettier and only the parser plugins needed by a supported structured format. It formats a display copy, labels the toolbar as a formatted preview, and provides a switch back to the original source. JSON/JSONC/JSON5, JavaScript/TypeScript, HTML/Vue, CSS, YAML, Markdown, GraphQL, and XML share this path.
+- `prettyPrintMaxBytes` limits only Prettier and defaults to the effective `virtualizeAboveBytes` value (512 KiB when omitted). Oversized, malformed, and unsupported inputs fall back to the original source, which continues through the existing regular or virtual renderer. XML uses a conservative whitespace-preserving mode; mixed content and `xml:space="preserve"` stay on the original source path.
+- The legacy `*-full` script-tag IIFE assets do not bundle Prettier, so `prettyPrint` falls back to the original source there. Use the ESM integration (standard component packages or `@file-viewer/preset-*`) for formatted previews.
 - With the text-tools capability installed, `patch` uses `diff2html` for side-by-side review and `bundle` / `bdl` enables Git bundle inspection.
 - With the Mermaid capability installed, fenced Mermaid blocks render as diagrams. Without it, the source stays visible with the exact CLI enablement command.
 - HTML, XML, Vue, and similar files are escaped and shown as source, never executed.

package/README.md

@@ -13,6 +13,9 @@ const options = {
   renderers: textRenderer,
   text: {
     lineNumbers: true,
+    wrapLongLines: true,
+    prettyPrint: true,
+    prettyPrintMaxBytes: 512 * 1024,
   },
 }
 ```
@@ -34,6 +37,10 @@ const options = {
 - 代码和文本使用 `highlight.js` core + 按语言动态加载，避免一次性注册全部语言。
 - 代码、文本和超大 Markdown 源码视图默认显示文件类型、索引状态和行数元信息栏；传入 `options.text.toolbar: false` 可隐藏该 renderer 内部栏，不影响 Viewer 的下载、搜索、缩放等全局工具栏。
 - 普通代码和文本可通过 `options.text.lineNumbers: true` 显示行号；行号不会进入复制内容、搜索结果或无障碍朗读。超大文本保留原有的虚拟行号栏，可显式传 `false` 隐藏。
+- `options.text.wrapLongLines: true` 仅改变布局，不向源码插入换行。普通预览会按逻辑行维护行号，超大文本仍使用有界虚拟窗口并按可用宽度换行。
+- `options.text.prettyPrint: true` 会在支持的结构化文本上按需加载 Prettier 与对应 parser，仅格式化显示副本；工具栏会标明“格式化预览”，并可切回原始源码。JSON/JSONC/JSON5、JavaScript/TypeScript、HTML/Vue、CSS、YAML、Markdown、GraphQL 和 XML 共用同一路径。
+- `prettyPrintMaxBytes` 只限制 Prettier，默认继承 `virtualizeAboveBytes`（未配置时为 512 KiB）。超限、语法错误或不支持的格式直接回退原始源码，之后仍由普通或虚拟文本 renderer 决定展示方式。XML 使用保守的 whitespace-preserving 模式；检测到混合内容或 `xml:space="preserve"` 时直接保留原文。
+- 历史 `*-full` 包的 script 标签 IIFE 资源不打包 Prettier，该路径下 `prettyPrint` 无错误回退到原始源码；需要格式化预览时使用 ESM 集成（标准组件包或 `@file-viewer/preset-*`）。
 - 安装 text-tools capability 后，`patch` 使用 `diff2html` 渲染左右比对视图，`bundle` / `bdl` 才启用 Git bundle 结构检查。
 - 安装 Mermaid capability 后，Markdown 内嵌 Mermaid 图才会渲染；未安装时保留源码并显示精确 CLI 启用命令。
 - HTML / XML / Vue 等文件按源码方式转义展示，不执行脚本。

package/dist/code.d.ts

@@ -2,10 +2,8 @@ import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-v
 /**
  * Framework-neutral text/code renderer.
  *
- * highlight.js core and language definitions are loaded lazily by format. HTML
- * and XML are highlighted as escaped source text, never executed as real DOM.
- * @param buffer 文本二进制内容
- * @param target 目标
- * @param type 文件扩展名，用于选择 highlight.js 语言
+ * highlight.js core, Prettier standalone, and parser definitions are loaded
+ * lazily by format. HTML and XML are always mounted as escaped source text and
+ * never executed as real DOM.
  */
 export default function renderText(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/code.js

@@ -1,6 +1,7 @@
 import { createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, decodeFileViewerTextBuffer, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
 import { codeStyle } from './codeStyle.js';
 import renderLargeText, { shouldVirtualizeTextBuffer } from './largeText.js';
+import { formatFileViewerTextForDisplay, resolveFileViewerPrettyPrintMaxBytes, supportsFileViewerPrettyPrint } from './prettyPrint.js';
 const languageMap = {
     bash: 'bash',
     c: 'cpp',
@@ -15,6 +16,8 @@ const languageMap = {
     bdl: 'plaintext',
     gv: 'plaintext',
     go: 'go',
+    graphql: 'graphql',
+    gql: 'graphql',
     h: 'cpp',
     hcl: 'plaintext',
     hpp: 'cpp',
@@ -60,6 +63,7 @@ const languageLoaders = {
     css: () => import('highlight.js/lib/languages/css'),
     diff: () => import('highlight.js/lib/languages/diff'),
     go: () => import('highlight.js/lib/languages/go'),
+    graphql: () => import('highlight.js/lib/languages/graphql'),
     http: () => import('highlight.js/lib/languages/http'),
     ini: () => import('highlight.js/lib/languages/ini'),
     java: () => import('highlight.js/lib/languages/java'),
@@ -81,8 +85,8 @@ const languageLoaders = {
 };
 let highlighterPromise = null;
 const registeredLanguages = new Set();
-const createElement = (tagName, className, text) => {
-    const element = document.createElement(tagName);
+const createElement = (documentRef, tagName, className, text) => {
+    const element = documentRef.createElement(tagName);
     if (className) {
         element.className = className;
     }
@@ -91,8 +95,8 @@ const createElement = (tagName, className, text) => {
     }
     return element;
 };
-const createStyle = () => {
-    const style = document.createElement('style');
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
     style.textContent = codeStyle;
     return style;
 };
@@ -139,21 +143,122 @@ const lineCountOf = (value) => {
 const createLineNumberText = (lineCount) => {
     return Array.from({ length: lineCount }, (_, index) => String(index + 1)).join('\n');
 };
+const createWrappedSourceLine = (documentRef, lineNumber) => {
+    const row = createElement(documentRef, 'span', 'code-source-line');
+    row.dataset.line = String(lineNumber);
+    const number = createElement(documentRef, 'span', 'code-source-line-number', String(lineNumber));
+    number.setAttribute('aria-hidden', 'true');
+    const content = createElement(documentRef, 'span', 'code-source-line-content');
+    row.append(number, content);
+    return { row, content };
+};
+/**
+ * Splits trusted highlight.js markup into logical source-line wrappers while
+ * recreating active token spans after every newline. This keeps multiline
+ * comments and strings highlighted without coupling visual wrapping to source
+ * line numbers.
+ */
+const mountWrappedHighlightedLines = (code, highlightedHtml, expectedLineCount) => {
+    const documentRef = code.ownerDocument;
+    const staging = createElement(documentRef, 'span');
+    staging.innerHTML = highlightedHtml;
+    const lines = [createWrappedSourceLine(documentRef, 1)];
+    let lineIndex = 0;
+    const activeElements = [];
+    let activeClones = [];
+    const currentContent = () => lines[lineIndex].content;
+    const currentParent = () => { var _a; return (_a = activeClones[activeClones.length - 1]) !== null && _a !== void 0 ? _a : currentContent(); };
+    const continueOnNextLine = () => {
+        lineIndex += 1;
+        lines.push(createWrappedSourceLine(documentRef, lineIndex + 1));
+        let parent = currentContent();
+        activeClones = activeElements.map(element => {
+            const clone = element.cloneNode(false);
+            parent.append(clone);
+            parent = clone;
+            return clone;
+        });
+    };
+    const visit = (node) => {
+        var _a;
+        if (node.nodeType === 3) {
+            const parts = ((_a = node.textContent) !== null && _a !== void 0 ? _a : '').split(/\r\n|\r|\n/);
+            parts.forEach((part, index) => {
+                if (part) {
+                    currentParent().append(documentRef.createTextNode(part));
+                }
+                if (index < parts.length - 1) {
+                    continueOnNextLine();
+                }
+            });
+            return;
+        }
+        if (node.nodeType !== 1) {
+            return;
+        }
+        const element = node;
+        const clone = element.cloneNode(false);
+        currentParent().append(clone);
+        activeElements.push(element);
+        activeClones.push(clone);
+        Array.from(element.childNodes).forEach(visit);
+        activeElements.pop();
+        activeClones.pop();
+    };
+    Array.from(staging.childNodes).forEach(visit);
+    while (lines.length < expectedLineCount) {
+        lines.push(createWrappedSourceLine(documentRef, lines.length + 1));
+    }
+    code.replaceChildren(...lines.map(line => line.row));
+};
+const mountCodeMarkup = (pre, code, highlightedHtml, lineCount, showLineNumbers, wrapLongLines) => {
+    code.replaceChildren();
+    if (showLineNumbers && wrapLongLines) {
+        pre.className = 'code-area code-area--wrapped-line-numbers';
+        pre.replaceChildren(code);
+        mountWrappedHighlightedLines(code, highlightedHtml, lineCount);
+        return;
+    }
+    pre.className = showLineNumbers ? 'code-area code-area--line-numbers' : 'code-area';
+    if (showLineNumbers) {
+        const gutter = createElement(pre.ownerDocument, 'span', 'code-line-numbers', createLineNumberText(lineCount));
+        gutter.setAttribute('aria-hidden', 'true');
+        pre.replaceChildren(gutter, code);
+    }
+    else {
+        pre.replaceChildren(code);
+    }
+    code.innerHTML = highlightedHtml;
+};
+const canPossiblyFitDecodedPrettyPrintLimit = (buffer, maxBytes) => {
+    // UTF-16 ASCII is the widest supported source encoding relative to its
+    // decoded UTF-8 representation. This fast guard avoids decoding enormous
+    // structured files that cannot possibly fit the configured decoded limit.
+    return buffer.byteLength <= (maxBytes * 2) + 4;
+};
 /**
  * Framework-neutral text/code renderer.
  *
- * highlight.js core and language definitions are loaded lazily by format. HTML
- * and XML are highlighted as escaped source text, never executed as real DOM.
- * @param buffer 文本二进制内容
- * @param target 目标
- * @param type 文件扩展名，用于选择 highlight.js 语言
+ * highlight.js core, Prettier standalone, and parser definitions are loaded
+ * lazily by format. HTML and XML are always mounted as escaped source text and
+ * never executed as real DOM.
  */
 export default async function renderText(buffer, target, type, context) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
     const extension = type || 'txt';
     const normalizedExtension = extension.trim().toLowerCase();
-    if (normalizedExtension !== 'bundle' &&
+    const textOptions = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.text;
+    let sourceText;
+    let prettyPrintResult;
+    if ((textOptions === null || textOptions === void 0 ? void 0 : textOptions.prettyPrint) === true &&
+        supportsFileViewerPrettyPrint(normalizedExtension) &&
+        canPossiblyFitDecodedPrettyPrintLimit(buffer, resolveFileViewerPrettyPrintMaxBytes(textOptions))) {
+        sourceText = decodeFileViewerTextBuffer(buffer, textOptions.encoding).text;
+        prettyPrintResult = await formatFileViewerTextForDisplay(sourceText, normalizedExtension, textOptions, context === null || context === void 0 ? void 0 : context.signal);
+    }
+    if (!(prettyPrintResult === null || prettyPrintResult === void 0 ? void 0 : prettyPrintResult.formatted) &&
+        normalizedExtension !== 'bundle' &&
         normalizedExtension !== 'bdl' &&
         shouldVirtualizeTextBuffer(buffer, context)) {
         return renderLargeText(buffer, target, extension, context);
@@ -166,58 +271,92 @@ export default async function renderText(buffer, target, type, context) {
         const { default: renderGitBundle } = await import('./gitBundle.js');
         return renderGitBundle(buffer, target, extension, context);
     }
-    const text = decodeFileViewerTextBuffer(buffer, (_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.encoding).text;
+    const originalText = sourceText !== null && sourceText !== void 0 ? sourceText : decodeFileViewerTextBuffer(buffer, textOptions === null || textOptions === void 0 ? void 0 : textOptions.encoding).text;
+    const formattedText = (prettyPrintResult === null || prettyPrintResult === void 0 ? void 0 : prettyPrintResult.formatted) ? prettyPrintResult.text : null;
     const language = resolveLanguage(extension);
-    const lineCount = lineCountOf(text);
-    const showToolbar = ((_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.toolbar) !== false;
-    const showLineNumbers = ((_f = (_e = context === null || context === void 0 ? void 0 : context.options) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f.lineNumbers) === true;
+    const showToolbar = (textOptions === null || textOptions === void 0 ? void 0 : textOptions.toolbar) !== false;
+    const showLineNumbers = (textOptions === null || textOptions === void 0 ? void 0 : textOptions.lineNumbers) === true;
+    const wrapLongLines = (textOptions === null || textOptions === void 0 ? void 0 : textOptions.wrapLongLines) === true;
+    const documentRef = target.ownerDocument;
     let disposed = false;
     let zoom = 1;
+    let showingFormatted = formattedText !== null;
+    let renderGeneration = 0;
     const zoomEmitter = createZoomChangeEmitter();
-    const root = createElement('div', 'code-viewer');
+    const root = createElement(documentRef, 'div', wrapLongLines ? 'code-viewer code-viewer--wrap-lines' : 'code-viewer');
     root.dataset.viewerZoomProvider = 'code';
     root.dataset.textToolbar = String(showToolbar);
     root.dataset.lineNumbers = String(showLineNumbers);
-    const toolbar = createElement('div', 'code-toolbar');
-    toolbar.append(createElement('span', '', extension.toUpperCase()), createElement('strong', '', `${lineCount} lines`));
-    const pre = createElement('pre', showLineNumbers ? 'code-area code-area--line-numbers' : 'code-area');
-    const code = createElement('code', `hljs language-${language}`);
-    code.innerHTML = language === 'plaintext'
-        ? escapeHtml(text)
-        : t('text.code.loadingHighlight');
-    if (showLineNumbers) {
-        const gutter = createElement('span', 'code-line-numbers', createLineNumberText(lineCount));
-        gutter.setAttribute('aria-hidden', 'true');
-        pre.append(gutter);
-    }
+    root.dataset.wrapLongLines = String(wrapLongLines);
+    root.dataset.prettyPrint = (_b = prettyPrintResult === null || prettyPrintResult === void 0 ? void 0 : prettyPrintResult.reason) !== null && _b !== void 0 ? _b : 'disabled';
+    const toolbar = createElement(documentRef, 'div', 'code-toolbar');
+    const extensionLabel = createElement(documentRef, 'span', '', extension.toUpperCase());
+    const toolbarMeta = createElement(documentRef, 'div', 'code-toolbar-meta');
+    const representationStatus = createElement(documentRef, 'span', 'code-format-status');
+    const representationToggle = createElement(documentRef, 'button', 'code-format-toggle');
+    representationToggle.type = 'button';
+    const lineSummary = createElement(documentRef, 'strong');
+    toolbarMeta.append(representationStatus, representationToggle, lineSummary);
+    toolbar.append(extensionLabel, toolbarMeta);
+    const pre = createElement(documentRef, 'pre', 'code-area');
+    const code = createElement(documentRef, 'code', `hljs language-${language}`);
     pre.append(code);
     if (showToolbar) {
         root.append(toolbar);
     }
     root.append(pre);
     root.style.setProperty('--code-font-size', `${13 * zoom}px`);
-    target.replaceChildren(createStyle(), root);
-    const updateHighlighted = async () => {
+    target.replaceChildren(createStyle(documentRef), root);
+    const currentText = () => showingFormatted && formattedText !== null ? formattedText : originalText;
+    const syncRepresentationControls = (lineCount) => {
+        const formatted = showingFormatted && formattedText !== null;
+        root.dataset.textRepresentation = formatted ? 'formatted' : 'source';
+        lineSummary.textContent = `${lineCount} lines`;
+        representationStatus.hidden = !formatted;
+        representationStatus.textContent = formatted ? t('text.code.formattedPreview') : '';
+        representationToggle.hidden = formattedText === null;
+        representationToggle.textContent = formatted
+            ? t('text.code.showOriginal')
+            : t('text.code.showFormatted');
+        representationToggle.setAttribute('aria-pressed', String(formatted));
+    };
+    const renderCurrentRepresentation = async () => {
+        const generation = renderGeneration + 1;
+        renderGeneration = generation;
+        const text = currentText();
+        const lineCount = lineCountOf(text);
+        syncRepresentationControls(lineCount);
         if (language === 'plaintext') {
+            mountCodeMarkup(pre, code, escapeHtml(text), lineCount, showLineNumbers, wrapLongLines);
             return;
         }
+        code.textContent = t('text.code.loadingHighlight');
         try {
             const hljs = await loadHighlighter();
             const hasLanguage = await registerLanguageOnce(hljs, language);
-            if (disposed) {
+            if (disposed || generation !== renderGeneration) {
                 return;
             }
-            code.innerHTML = hasLanguage
+            const highlighted = hasLanguage
                 ? hljs.highlight(text, { language, ignoreIllegals: true }).value
                 : escapeHtml(text);
+            mountCodeMarkup(pre, code, highlighted, lineCount, showLineNumbers, wrapLongLines);
         }
         catch {
-            if (!disposed) {
-                code.innerHTML = escapeHtml(text);
+            if (!disposed && generation === renderGeneration) {
+                mountCodeMarkup(pre, code, escapeHtml(text), lineCount, showLineNumbers, wrapLongLines);
             }
         }
     };
-    void updateHighlighted();
+    const toggleRepresentation = () => {
+        if (formattedText === null) {
+            return;
+        }
+        showingFormatted = !showingFormatted;
+        void renderCurrentRepresentation();
+    };
+    representationToggle.addEventListener('click', toggleRepresentation);
+    await renderCurrentRepresentation();
     const getZoomState = () => ({
         scale: zoom,
         label: `${Math.round(zoom * 100)}%`,
@@ -245,6 +384,8 @@ export default async function renderText(buffer, target, type, context) {
         $el: target,
         unmount() {
             disposed = true;
+            renderGeneration += 1;
+            representationToggle.removeEventListener('click', toggleRepresentation);
             unregisterFileViewerZoomProvider(root);
             target.replaceChildren();
         }

package/dist/codeStyle.d.ts

@@ -1 +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--line-numbers{display:grid;grid-template-columns:max-content max-content;padding:18px 0 28px}\n.code-line-numbers{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}\n.code-area.code-area--line-numbers code{padding:0 20px}\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";
+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;--code-accent:#0969da;--code-accent-border:rgba(9,105,218,.28);--code-accent-soft:rgba(9,105,218,.1);background:var(--code-bg);color:var(--code-text);box-sizing:border-box}\n.code-toolbar{position:sticky;top:0;z-index:2;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-toolbar-meta{display:inline-flex;min-width:0;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}\n.code-toolbar-meta>span{overflow:hidden;text-overflow:ellipsis}\n.code-format-status{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--code-accent-border);border-radius:999px;background:var(--code-accent-soft);color:var(--code-accent)!important;font-size:11px!important}\n.code-format-toggle{min-height:26px;padding:0 9px;border:1px solid var(--code-border);border-radius:6px;background:var(--code-bg);color:var(--code-text);font:600 11px/1.2 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer}\n.code-format-toggle:hover{border-color:var(--code-accent);color:var(--code-accent)}\n.code-format-toggle:focus-visible{outline:2px solid var(--code-accent);outline-offset:2px}\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--line-numbers{display:grid;grid-template-columns:max-content max-content;padding:18px 0 28px}\n.code-line-numbers{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}\n.code-area.code-area--line-numbers code{padding:0 20px}\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-viewer--wrap-lines .code-area{width:100%;min-width:0;overflow-x:hidden}\n.code-viewer--wrap-lines .code-area code{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}\n.code-area--wrapped-line-numbers{display:block;padding:18px 0 28px}\n.code-area--wrapped-line-numbers code{width:100%;padding:0;white-space:normal!important}\n.code-source-line{display:grid;width:100%;min-width:0;grid-template-columns:max-content minmax(0,1fr);align-items:stretch;min-height:1.7em}\n.code-source-line-number{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font:inherit;line-height:inherit;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}\n.code-source-line-content{display:block;min-width:0;padding:0 20px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;box-sizing:border-box}\n.code-source-line-content:empty::after{content:' '}\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;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}\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;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}}\n";

package/dist/codeStyle.js

@@ -1,12 +1,26 @@
 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-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;--code-accent:#0969da;--code-accent-border:rgba(9,105,218,.28);--code-accent-soft:rgba(9,105,218,.1);background:var(--code-bg);color:var(--code-text);box-sizing:border-box}
+.code-toolbar{position:sticky;top:0;z-index:2;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-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-format-status{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--code-accent-border);border-radius:999px;background:var(--code-accent-soft);color:var(--code-accent)!important;font-size:11px!important}
+.code-format-toggle{min-height:26px;padding:0 9px;border:1px solid var(--code-border);border-radius:6px;background:var(--code-bg);color:var(--code-text);font:600 11px/1.2 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer}
+.code-format-toggle:hover{border-color:var(--code-accent);color:var(--code-accent)}
+.code-format-toggle:focus-visible{outline:2px solid var(--code-accent);outline-offset:2px}
 .code-area{display:block;min-width:min-content;margin:0;padding:18px 20px 28px;overflow:auto;background:transparent;box-sizing:border-box}
 .code-area--line-numbers{display:grid;grid-template-columns:max-content max-content;padding:18px 0 28px}
 .code-line-numbers{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}
 .code-area.code-area--line-numbers code{padding:0 20px}
 .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-viewer--wrap-lines .code-area{width:100%;min-width:0;overflow-x:hidden}
+.code-viewer--wrap-lines .code-area code{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
+.code-area--wrapped-line-numbers{display:block;padding:18px 0 28px}
+.code-area--wrapped-line-numbers code{width:100%;padding:0;white-space:normal!important}
+.code-source-line{display:grid;width:100%;min-width:0;grid-template-columns:max-content minmax(0,1fr);align-items:stretch;min-height:1.7em}
+.code-source-line-number{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font:inherit;line-height:inherit;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}
+.code-source-line-content{display:block;min-width:0;padding:0 20px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;box-sizing:border-box}
+.code-source-line-content:empty::after{content:' '}
 .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)}
@@ -14,6 +28,6 @@ export const codeStyle = `
 .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}}
+[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;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}
+@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;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}}
 `;

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/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 {};

package/dist/prettyPrint.js

@@ -0,0 +1,232 @@
+export const DEFAULT_PRETTY_PRINT_MAX_BYTES = 512 * 1024;
+const htmlEmbeddedLanguagePattern = /<(?:script|style)(?:\s|>)/i;
+const htmlScriptPattern = /<script(?:\s|>)/i;
+const htmlStylePattern = /<style(?:\s|>)/i;
+const withHtmlEmbeddedPlugins = (source) => {
+    if (!htmlEmbeddedLanguagePattern.test(source)) {
+        return ['html'];
+    }
+    const plugins = ['html'];
+    if (htmlScriptPattern.test(source)) {
+        plugins.push('babel', 'estree', 'typescript');
+    }
+    if (htmlStylePattern.test(source)) {
+        plugins.push('postcss');
+    }
+    return plugins;
+};
+const prettierLanguages = {
+    cjs: { parser: 'babel', plugins: ['babel', 'estree'] },
+    css: { parser: 'css', plugins: ['postcss'] },
+    graphql: { parser: 'graphql', plugins: ['graphql'] },
+    gql: { parser: 'graphql', plugins: ['graphql'] },
+    html: { parser: 'html', plugins: ['html'], resolvePlugins: withHtmlEmbeddedPlugins },
+    htm: { parser: 'html', plugins: ['html'], resolvePlugins: withHtmlEmbeddedPlugins },
+    ipynb: { parser: 'json', plugins: ['babel', 'estree'] },
+    js: { parser: 'babel', plugins: ['babel', 'estree'] },
+    json: { parser: 'json', plugins: ['babel', 'estree'] },
+    json5: { parser: 'json5', plugins: ['babel', 'estree'] },
+    jsonc: { parser: 'jsonc', plugins: ['babel', 'estree'] },
+    jsx: { parser: 'babel', plugins: ['babel', 'estree'] },
+    markdown: { parser: 'markdown', plugins: ['markdown'] },
+    md: { parser: 'markdown', plugins: ['markdown'] },
+    mjs: { parser: 'babel', plugins: ['babel', 'estree'] },
+    react: { parser: 'babel', plugins: ['babel', 'estree'] },
+    ts: { parser: 'typescript', plugins: ['typescript', 'estree'] },
+    tsx: { parser: 'typescript', plugins: ['typescript', 'estree'] },
+    vue: {
+        parser: 'vue',
+        plugins: ['html', 'babel', 'estree', 'typescript', 'postcss']
+    },
+    xml: {
+        parser: 'xml',
+        plugins: ['xml'],
+        options: {
+            xmlWhitespaceSensitivity: 'preserve',
+            xmlQuoteAttributes: 'preserve',
+            xmlSortAttributesByKey: false
+        }
+    },
+    yaml: { parser: 'yaml', plugins: ['yaml'] },
+    yml: { parser: 'yaml', plugins: ['yaml'] }
+};
+const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+const hasWhitespaceSensitiveXml = (source) => {
+    if (/\bxml:space\s*=\s*(["'])preserve\1/i.test(source)) {
+        return true;
+    }
+    const Parser = globalThis.DOMParser;
+    if (typeof Parser !== 'function') {
+        // The text renderer itself is browser-facing, but fail closed when this
+        // helper is evaluated in a non-DOM runtime.
+        return true;
+    }
+    try {
+        const documentRef = new Parser().parseFromString(source, 'application/xml');
+        if (documentRef.querySelector('parsererror')) {
+            return false;
+        }
+        const containsMixedContent = (element) => {
+            var _a, _b, _c;
+            const preservesWhitespace = ((_a = element.getAttributeNS(XML_NAMESPACE, 'space')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'preserve' ||
+                ((_b = element.getAttribute('xml:space')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'preserve';
+            if (preservesWhitespace) {
+                return true;
+            }
+            let hasElementChild = false;
+            let hasDirectText = false;
+            for (const child of Array.from(element.childNodes)) {
+                if (child.nodeType === 1) {
+                    hasElementChild = true;
+                    if (containsMixedContent(child)) {
+                        return true;
+                    }
+                }
+                else if ((child.nodeType === 3 || child.nodeType === 4) && ((_c = child.textContent) === null || _c === void 0 ? void 0 : _c.trim())) {
+                    hasDirectText = true;
+                }
+            }
+            return hasElementChild && hasDirectText;
+        };
+        return documentRef.documentElement
+            ? containsMixedContent(documentRef.documentElement)
+            : false;
+    }
+    catch {
+        return false;
+    }
+};
+const pluginLoaders = {
+    babel: () => import('prettier/plugins/babel').then(module => module.default),
+    estree: () => import('prettier/plugins/estree').then(module => module.default),
+    typescript: () => import('prettier/plugins/typescript').then(module => module.default),
+    postcss: () => import('prettier/plugins/postcss').then(module => module.default),
+    html: () => import('prettier/plugins/html').then(module => module.default),
+    markdown: () => import('prettier/plugins/markdown').then(module => module.default),
+    yaml: () => import('prettier/plugins/yaml').then(module => module.default),
+    graphql: () => import('prettier/plugins/graphql').then(module => module.default),
+    xml: () => import('@prettier/plugin-xml').then(module => module.default)
+};
+const loadPrettierRuntime = async (definition, source) => {
+    var _a, _b;
+    const prettierPromise = import('prettier/standalone');
+    const pluginNames = (_b = (_a = definition.resolvePlugins) === null || _a === void 0 ? void 0 : _a.call(definition, source)) !== null && _b !== void 0 ? _b : definition.plugins;
+    const [prettier, ...plugins] = await Promise.all([
+        prettierPromise,
+        ...pluginNames.map(pluginName => pluginLoaders[pluginName]())
+    ]);
+    return {
+        format: prettier.format,
+        plugins
+    };
+};
+const utf8ByteLength = (source) => new TextEncoder().encode(source).byteLength;
+export const resolveFileViewerPrettyPrintMaxBytes = (options) => {
+    var _a;
+    const configured = (_a = options === null || options === void 0 ? void 0 : options.prettyPrintMaxBytes) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.virtualizeAboveBytes;
+    if (!Number.isFinite(configured)) {
+        return DEFAULT_PRETTY_PRINT_MAX_BYTES;
+    }
+    return Math.max(0, Math.trunc(Number(configured)));
+};
+export const supportsFileViewerPrettyPrint = (extension) => {
+    return Boolean(prettierLanguages[extension.trim().toLowerCase()]);
+};
+/**
+ * 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 const formatFileViewerTextForDisplay = async (source, extension, options, signal, runtimeLoader = loadPrettierRuntime) => {
+    const maxBytes = resolveFileViewerPrettyPrintMaxBytes(options);
+    const sourceByteLength = utf8ByteLength(source);
+    if ((options === null || options === void 0 ? void 0 : options.prettyPrint) !== true) {
+        return { text: source, formatted: false, reason: 'disabled', sourceByteLength, maxBytes };
+    }
+    const definition = prettierLanguages[extension.trim().toLowerCase()];
+    if (!definition) {
+        return { text: source, formatted: false, reason: 'unsupported', sourceByteLength, maxBytes };
+    }
+    if (sourceByteLength > maxBytes) {
+        return {
+            text: source,
+            formatted: false,
+            reason: 'too-large',
+            parser: definition.parser,
+            sourceByteLength,
+            maxBytes
+        };
+    }
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+        return {
+            text: source,
+            formatted: false,
+            reason: 'aborted',
+            parser: definition.parser,
+            sourceByteLength,
+            maxBytes
+        };
+    }
+    if (definition.parser === 'xml' && hasWhitespaceSensitiveXml(source)) {
+        return {
+            text: source,
+            formatted: false,
+            reason: 'whitespace-sensitive',
+            parser: definition.parser,
+            sourceByteLength,
+            maxBytes
+        };
+    }
+    try {
+        const runtime = await runtimeLoader(definition, source);
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            return {
+                text: source,
+                formatted: false,
+                reason: 'aborted',
+                parser: definition.parser,
+                sourceByteLength,
+                maxBytes
+            };
+        }
+        const formatted = await runtime.format(source, {
+            parser: definition.parser,
+            plugins: runtime.plugins,
+            tabWidth: 2,
+            useTabs: false,
+            printWidth: 80,
+            endOfLine: 'lf',
+            ...definition.options
+        });
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            return {
+                text: source,
+                formatted: false,
+                reason: 'aborted',
+                parser: definition.parser,
+                sourceByteLength,
+                maxBytes
+            };
+        }
+        return {
+            text: formatted.replace(/\n$/, ''),
+            formatted: true,
+            reason: 'formatted',
+            parser: definition.parser,
+            sourceByteLength,
+            maxBytes
+        };
+    }
+    catch {
+        return {
+            text: source,
+            formatted: false,
+            reason: 'failed',
+            parser: definition.parser,
+            sourceByteLength,
+            maxBytes
+        };
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-text",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "private": false,
   "type": "module",
   "description": "Standalone code, text, and Markdown renderer for File Viewer; Mermaid, patch diff, and Git bundle tools are explicit opt-in capabilities.",
@@ -58,14 +58,16 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "3.0.0",
+    "@file-viewer/core": "3.0.1",
+    "@prettier/plugin-xml": "3.4.2",
+    "dompurify": "^3.4.14",
     "highlight.js": "^11.11.1",
     "marked": "^18.0.5",
-    "dompurify": "^3.4.13"
+    "prettier": "3.8.3"
   },
   "devDependencies": {
     "diff2html": "^3.4.56",
-    "mermaid": "^11.16.1",
+    "mermaid": "^11.17.2",
     "pako": "^2.1.0",
     "jsdom": "^27.4.0",
     "typescript": "^6.0.3"