@file-viewer/renderer-text 3.0.2 → 3.1.0

package/README.en.md

@@ -43,7 +43,8 @@ const options = {
 - 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.
+- HTML/HTM opens a static page preview with a source-view toggle. `options.text.htmlView: 'source'` starts with the original source. Inline CSS and embedded images are preserved; scripts, forms, external navigation, and external resource requests are blocked by sanitization, CSP, and an opaque sandbox. This is not a website runtime.
+- XML, Vue, and similar files remain escaped source previews. HTML source supports the same highlighting, formatting, and large-text virtualization options.
 - Markdown uses `marked` for a read-only reading surface with dark/light theme support, table scrolling, and a unified zoom provider.
 - Markdown no longer falls back to source because of the general large-text threshold. Set `options.text.markdownVirtualizeAboveBytes` only when an application must bound exceptionally large Markdown files.
 - Does not depend on any online service or public CDN, making it suitable for intranet logs, configs, snippets, README files, and knowledge-base attachments.

package/README.md

@@ -43,7 +43,8 @@ const options = {
 - 历史 `*-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 等文件按源码方式转义展示，不执行脚本。
+- HTML / HTM 默认显示静态页面，提供页面与源码切换；`options.text.htmlView: 'source'` 可默认查看原始源码。页面保留内联 CSS 和内嵌图片，通过净化、CSP 和独立沙箱阻止脚本、表单、外链跳转和外部资源请求，不用于运行完整网站。
+- XML / Vue 等仍按源码转义展示。HTML 源码视图继续支持高亮、格式化和大文本虚拟化。
 - Markdown 使用 `marked` 输出只读阅读面，并保留明暗主题、表格滚动和统一缩放 provider。
 - Markdown 不再因为通用大文本阈值自动退化成源码；如业务必须限制超大 Markdown，可单独设置 `options.text.markdownVirtualizeAboveBytes`。
 - 不绑定任何在线服务或公共 CDN，适合内网日志、配置、代码片段、README 和知识库附件预览。

package/dist/html.d.ts

@@ -0,0 +1,3 @@
+import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-viewer/core';
+export declare function createHtmlPreviewDocument(documentRef: Document, source: string): string;
+export default function renderHtml(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/html.js

@@ -0,0 +1,143 @@
+import createDOMPurify, {} from 'dompurify';
+import { createFileViewerTranslator, decodeFileViewerTextBuffer, disposeFileViewerRendered } from '@file-viewer/core';
+import renderCode from './code.js';
+const previewPolicy = "default-src 'none'; script-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src data:; connect-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'";
+export function createHtmlPreviewDocument(documentRef, source) {
+    const windowRef = documentRef.defaultView;
+    if (!windowRef)
+        throw new Error('HTML preview requires a browser document');
+    const purifier = createDOMPurify(windowRef);
+    const sanitized = purifier.sanitize(source, {
+        WHOLE_DOCUMENT: true,
+        USE_PROFILES: { html: true },
+        ADD_TAGS: ['style'],
+        FORBID_TAGS: [
+            'script',
+            'base',
+            'meta',
+            'link',
+            'iframe',
+            'frame',
+            'frameset',
+            'object',
+            'embed',
+            'form',
+            'template'
+        ],
+        FORBID_ATTR: ['srcdoc', 'action', 'formaction', 'target', 'ping', 'srcset']
+    });
+    const preview = new windowRef.DOMParser().parseFromString(sanitized, 'text/html');
+    for (const element of preview.querySelectorAll('*')) {
+        for (const attribute of [...element.attributes]) {
+            const name = attribute.name.toLowerCase();
+            if (name.startsWith('on'))
+                element.removeAttribute(attribute.name);
+            if (name === 'href' && !attribute.value.trim().startsWith('#'))
+                element.removeAttribute(attribute.name);
+            if (name === 'src' &&
+                !/^data:image\/(?:png|jpeg|gif|webp|avif|bmp|x-icon|svg\+xml)[;,]/i.test(attribute.value.trim())) {
+                element.removeAttribute(attribute.name);
+            }
+        }
+    }
+    // CSP is first, before any retained inline CSS. The containing iframe also has
+    // an opaque origin and no sandbox permissions, even if sanitization regresses.
+    const policy = preview.createElement('meta');
+    policy.httpEquiv = 'Content-Security-Policy';
+    policy.content = previewPolicy;
+    const viewport = preview.createElement('meta');
+    viewport.name = 'viewport';
+    viewport.content = 'width=device-width, initial-scale=1';
+    preview.head.prepend(policy, viewport);
+    return `<!doctype html>\n${preview.documentElement.outerHTML}`;
+}
+export default async function renderHtml(buffer, target, type, context) {
+    var _a, _b, _c, _d;
+    const documentRef = target.ownerDocument;
+    const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
+    const root = documentRef.createElement('div');
+    root.className = 'html-viewer';
+    const style = documentRef.createElement('style');
+    style.textContent = `
+.html-viewer{height:100%;min-height:0;display:flex;flex-direction:column}
+.html-viewer-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #dbe2e8;background:var(--file-viewer-panel,#f8fafc);color:var(--file-viewer-text,#172033)}
+.html-viewer-toolbar button{border:1px solid #cbd5e1;border-radius:6px;padding:5px 10px;background:transparent;color:inherit;cursor:pointer;min-height:36px}
+.html-viewer-toolbar button[aria-pressed="true"]{border-color:#0f766e;background:#0f766e;color:white}
+.html-viewer-hint{font-size:12px;flex:1 1 160px}
+.html-preview-frame,.html-source-view{flex:1;width:100%;min-height:0;border:0}
+.html-preview-frame{background:white}
+.html-source-view{overflow:auto}
+.html-viewer [hidden]{display:none!important}
+@media(max-width:600px){.html-viewer-toolbar button{min-height:44px}}
+`;
+    const toolbar = documentRef.createElement('div');
+    toolbar.className = 'html-viewer-toolbar';
+    const previewButton = documentRef.createElement('button');
+    previewButton.type = 'button';
+    previewButton.textContent = t('text.html.preview');
+    previewButton.dataset.htmlView = 'preview';
+    const sourceButton = documentRef.createElement('button');
+    sourceButton.type = 'button';
+    sourceButton.textContent = t('text.html.source');
+    sourceButton.dataset.htmlView = 'source';
+    const hint = documentRef.createElement('span');
+    hint.className = 'html-viewer-hint';
+    hint.textContent = t('text.html.safePreview');
+    toolbar.append(previewButton, sourceButton, hint);
+    const frame = documentRef.createElement('iframe');
+    frame.className = 'html-preview-frame';
+    frame.title = t('text.html.preview');
+    frame.setAttribute('sandbox', '');
+    frame.referrerPolicy = 'no-referrer';
+    const sourceTarget = documentRef.createElement('div');
+    sourceTarget.className = 'html-source-view';
+    if (((_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.toolbar) !== false)
+        root.append(toolbar);
+    root.append(frame, sourceTarget);
+    target.replaceChildren(style, root);
+    let sourceInstance;
+    let sourcePending;
+    let disposed = false;
+    const select = async (view) => {
+        var _a, _b;
+        if (disposed)
+            return;
+        root.dataset.htmlView = view;
+        previewButton.setAttribute('aria-pressed', String(view === 'preview'));
+        sourceButton.setAttribute('aria-pressed', String(view === 'source'));
+        frame.hidden = view !== 'preview';
+        sourceTarget.hidden = view !== 'source';
+        hint.hidden = view !== 'preview';
+        if (view === 'preview' && !frame.hasAttribute('srcdoc')) {
+            frame.srcdoc = createHtmlPreviewDocument(documentRef, 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);
+        }
+        if (view === 'source' && !sourcePending) {
+            sourcePending = renderCode(buffer, sourceTarget, type, context).then((instance) => {
+                if (disposed)
+                    disposeFileViewerRendered(instance);
+                else
+                    sourceInstance = instance;
+            });
+        }
+        await sourcePending;
+    };
+    const showPreview = () => {
+        void select('preview');
+    };
+    const showSource = () => {
+        void select('source');
+    };
+    previewButton.addEventListener('click', showPreview);
+    sourceButton.addEventListener('click', showSource);
+    await select(((_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.htmlView) || 'preview');
+    return {
+        $el: target,
+        unmount() {
+            disposed = true;
+            previewButton.removeEventListener('click', showPreview);
+            sourceButton.removeEventListener('click', showSource);
+            disposeFileViewerRendered(sourceInstance);
+            target.replaceChildren();
+        }
+    };
+}

package/dist/index.js

@@ -7,7 +7,9 @@ if (textDefinitions.length !== textRendererIds.length) {
     throw new Error('@file-viewer/renderer-text could not locate the shared code/markdown format definitions.');
 }
 export const textRendererDefinitions = textDefinitions;
-export const renderFileViewerCode = (buffer, target, type, context) => import('./code.js').then(({ default: renderCode }) => renderCode(buffer, target, type, context));
+export const renderFileViewerCode = (buffer, target, type, context) => /^(?:html|htm)$/i.test(type || '')
+    ? import('./html.js').then(({ default: renderHtml }) => renderHtml(buffer, target, type, context))
+    : import('./code.js').then(({ default: renderCode }) => renderCode(buffer, target, type, context));
 export const renderFileViewerMarkdown = (buffer, target, type, context) => import('./largeText.js').then(async ({ default: renderLargeText, shouldVirtualizeMarkdownBuffer }) => {
     if (shouldVirtualizeMarkdownBuffer(buffer, context)) {
         return renderLargeText(buffer, target, type || 'md', context);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-text",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "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,11 +58,11 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "3.0.2",
+    "@file-viewer/core": "3.1.0",
     "@prettier/plugin-xml": "3.4.2",
-    "dompurify": "^3.4.14",
+    "dompurify": "3.4.15",
     "highlight.js": "^11.11.1",
-    "marked": "^18.0.5",
+    "marked": "^18.0.12",
     "prettier": "3.9.6"
   },
   "devDependencies": {