@file-viewer/renderer-text 2.0.11

package/dist/markdown.js

@@ -0,0 +1,81 @@
+import { marked } from 'marked';
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, readFileViewerText as readText, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+const markdownStyle = `
+.markdown-viewer{min-height:100%;padding:28px 16px 48px;background:#eef1f4;overflow:auto;box-sizing:border-box}
+.markdown-body{color-scheme:light;--bgColor-default:#fff;--bgColor-muted:#f6f8fa;--bgColor-neutral-muted:#818b981f;--borderColor-default:#d1d9e0;--borderColor-muted:#d1d9e0b3;--borderColor-neutral-muted:#d1d9e0b3;--fgColor-default:#1f2328;--fgColor-muted:#59636e;--fgColor-accent:#0969da;background:var(--bgColor-default);border:1px solid rgba(20,35,53,.1);border-radius:12px;margin:0 auto;box-sizing:border-box;min-width:200px;max-width:var(--markdown-max-width,980px);padding:var(--markdown-padding,45px);color:var(--fgColor-default);font-size:var(--markdown-font-size,16px);box-shadow:0 18px 42px rgba(15,23,42,.1)}
+.markdown-body h1,.markdown-body h2,.markdown-body h3{margin-top:24px;margin-bottom:16px;font-weight:700;line-height:1.25}
+.markdown-body h1{padding-bottom:.3em;border-bottom:1px solid var(--borderColor-muted);font-size:2em}
+.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid var(--borderColor-muted);font-size:1.5em}
+.markdown-body p,.markdown-body ul,.markdown-body ol,.markdown-body blockquote,.markdown-body table,.markdown-body pre{margin-top:0;margin-bottom:16px}
+.markdown-body a{color:var(--fgColor-accent);text-decoration:none}
+.markdown-body a:hover{text-decoration:underline}
+.markdown-body code{padding:.2em .4em;border-radius:6px;background:var(--bgColor-neutral-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:85%}
+.markdown-body pre{padding:16px;overflow:auto;border-radius:8px;background:var(--bgColor-muted)}
+.markdown-body pre code{padding:0;background:transparent;font-size:100%}
+.markdown-body table{display:block;width:max-content;max-width:100%;overflow:auto;border-spacing:0;border-collapse:collapse}
+.markdown-body th,.markdown-body td{padding:6px 13px;border:1px solid var(--borderColor-default)}
+.markdown-body tr{background:var(--bgColor-default);border-top:1px solid var(--borderColor-muted)}
+.markdown-body tr:nth-child(2n){background:var(--bgColor-muted)}
+.markdown-body blockquote{padding:0 1em;color:var(--fgColor-muted);border-left:.25em solid var(--borderColor-default)}
+.file-viewer[data-viewer-theme='dark'] .markdown-viewer{background:#101820}
+.file-viewer[data-viewer-theme='dark'] .markdown-body{color-scheme:dark;--bgColor-default:#0d1117;--bgColor-muted:#151b23;--bgColor-neutral-muted:#656c7633;--borderColor-default:#3d444d;--borderColor-muted:#3d444db3;--borderColor-neutral-muted:#3d444db3;--fgColor-default:#f0f6fc;--fgColor-muted:#9198a1;--fgColor-accent:#4493f8;background:var(--bgColor-default);border-color:rgba(139,148,158,.26);color:var(--fgColor-default);box-shadow:0 24px 56px rgba(0,0,0,.38)}
+@media (max-width:767px){.markdown-viewer{padding:14px 10px 28px}.markdown-body{padding:22px 18px;border-radius:10px}}
+@media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .markdown-viewer{background:#101820}.file-viewer[data-viewer-theme='system'] .markdown-body{color-scheme:dark;--bgColor-default:#0d1117;--bgColor-muted:#151b23;--bgColor-neutral-muted:#656c7633;--borderColor-default:#3d444d;--borderColor-muted:#3d444db3;--borderColor-neutral-muted:#3d444db3;--fgColor-default:#f0f6fc;--fgColor-muted:#9198a1;--fgColor-accent:#4493f8;background:var(--bgColor-default);border-color:rgba(139,148,158,.26);color:var(--fgColor-default);box-shadow:0 24px 56px rgba(0,0,0,.38)}}
+`;
+const createStyle = () => {
+    const style = document.createElement('style');
+    style.textContent = markdownStyle;
+    return style;
+};
+const clampZoom = (value) => {
+    return Math.min(2.4, Math.max(0.6, Number(value.toFixed(2))));
+};
+const applyMarkdownZoom = (host, zoom) => {
+    host.style.setProperty('--markdown-max-width', `${980 * zoom}px`);
+    host.style.setProperty('--markdown-padding', `${45 * zoom}px`);
+    host.style.setProperty('--markdown-font-size', `${16 * zoom}px`);
+};
+export default async function renderMarkdown(buffer, target) {
+    const text = await readText(buffer);
+    let zoom = 1;
+    const zoomEmitter = createZoomChangeEmitter();
+    const root = document.createElement('div');
+    root.className = 'markdown-viewer';
+    root.dataset.viewerZoomProvider = 'markdown';
+    const article = document.createElement('article');
+    article.className = 'markdown-body';
+    article.innerHTML = await marked(text);
+    applyMarkdownZoom(root, zoom);
+    root.append(article);
+    target.replaceChildren(createStyle(), root);
+    const getZoomState = () => ({
+        scale: zoom,
+        label: `${Math.round(zoom * 100)}%`,
+        canZoomIn: zoom < 2.4,
+        canZoomOut: zoom > 0.6,
+        canReset: zoom !== 1,
+        minScale: 0.6,
+        maxScale: 2.4,
+    });
+    const setZoom = (scale) => {
+        zoom = clampZoom(scale);
+        applyMarkdownZoom(root, zoom);
+        zoomEmitter.emit();
+        return getZoomState();
+    };
+    registerFileViewerZoomProvider(root, {
+        zoomIn: () => setZoom(zoom + 0.1),
+        zoomOut: () => setZoom(zoom - 0.1),
+        resetZoom: () => setZoom(1),
+        setZoom,
+        getState: getZoomState,
+        subscribe: zoomEmitter.subscribe,
+    });
+    return {
+        $el: target,
+        unmount() {
+            unregisterFileViewerZoomProvider(root);
+            target.replaceChildren();
+        },
+    };
+}

package/dist/patch.d.ts

@@ -0,0 +1,2 @@
+import { type FileViewerRenderedInstance } from '@file-viewer/core';
+export default function renderPatch(buffer: ArrayBuffer, target: HTMLDivElement, type?: string): Promise<FileViewerRenderedInstance>;

package/dist/patch.js

@@ -0,0 +1,123 @@
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, readFileViewerText as readText, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
+import { html as diffToHtml } from 'diff2html';
+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}
+.patch-toolbar span,.patch-toolbar strong{color:var(--patch-muted);font-size:12px;font-weight:800;letter-spacing:0}
+.patch-body{padding:16px;overflow:auto;font-size:var(--patch-font-size)}
+.patch-body .d2h-wrapper{min-width:860px}
+.patch-body .d2h-file-wrapper{margin:0 0 16px;overflow:hidden;border:1px solid var(--patch-border);border-radius:8px;background:var(--patch-surface)}
+.patch-body .d2h-file-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--patch-border);background:#f8fafc;color:var(--patch-muted);font-weight:800}
+.patch-body .d2h-file-name-wrapper{display:flex;min-width:0;align-items:center;gap:8px}
+.patch-body .d2h-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.patch-body .d2h-diff-table{width:100%;border-collapse:collapse;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:1em;line-height:1.58}
+.patch-body .d2h-code-side-linenumber,.patch-body .d2h-code-linenumber{width:56px;padding:0 8px;border-right:1px solid var(--patch-border);color:var(--patch-muted);text-align:right;user-select:none}
+.patch-body .d2h-code-side-line,.patch-body .d2h-code-line{padding:0 10px;white-space:pre-wrap;word-break:break-word}
+.patch-body .d2h-ins{background:var(--patch-add)}
+.patch-body .d2h-del{background:var(--patch-del)}
+.patch-body .d2h-info{background:var(--patch-info);color:var(--patch-muted)}
+.patch-body .d2h-file-list-wrapper{margin:0 0 16px;border:1px solid var(--patch-border);border-radius:8px;background:var(--patch-surface)}
+.patch-body .d2h-file-list-header{padding:10px 12px;border-bottom:1px solid var(--patch-border);color:var(--patch-muted);font-weight:800}
+.patch-body .d2h-file-list{margin:0;padding:8px 12px;list-style:none}
+.patch-body .d2h-file-list-line{display:flex;gap:8px;padding:4px 0;color:var(--patch-text);font-size:.95em}
+.patch-fallback{margin:0;padding:18px 20px;overflow:auto;border-radius:8px;background:#0d1117;color:#e6edf3;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--patch-font-size);line-height:1.7;white-space:pre}
+.file-viewer[data-viewer-theme='dark'] .patch-viewer{--patch-bg:#0d1117;--patch-surface:#161b22;--patch-border:rgba(139,148,158,.24);--patch-text:#e6edf3;--patch-muted:#8b949e;--patch-add:rgba(46,160,67,.26);--patch-del:rgba(248,81,73,.24);--patch-info:rgba(56,139,253,.18)}
+.file-viewer[data-viewer-theme='dark'] .patch-toolbar{background:rgba(13,17,23,.92)}
+.file-viewer[data-viewer-theme='dark'] .patch-body .d2h-file-header{background:#161b22}
+@media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .patch-viewer{--patch-bg:#0d1117;--patch-surface:#161b22;--patch-border:rgba(139,148,158,.24);--patch-text:#e6edf3;--patch-muted:#8b949e;--patch-add:rgba(46,160,67,.26);--patch-del:rgba(248,81,73,.24);--patch-info:rgba(56,139,253,.18)}.file-viewer[data-viewer-theme='system'] .patch-toolbar{background:rgba(13,17,23,.92)}.file-viewer[data-viewer-theme='system'] .patch-body .d2h-file-header{background:#161b22}}
+`;
+const createElement = (documentRef, tagName, className, text) => {
+    const element = documentRef.createElement(tagName);
+    if (className) {
+        element.className = className;
+    }
+    if (typeof text === 'string') {
+        element.textContent = text;
+    }
+    return element;
+};
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
+    style.textContent = patchStyle;
+    return style;
+};
+const clampZoom = (value) => {
+    return Math.min(2.4, Math.max(0.6, Number(value.toFixed(2))));
+};
+const countFiles = (text) => {
+    var _a;
+    const matches = text.match(/^diff --git\s+/gm);
+    if (matches === null || matches === void 0 ? void 0 : matches.length) {
+        return matches.length;
+    }
+    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') {
+    const documentRef = target.ownerDocument || document;
+    const text = await readText(buffer);
+    let zoom = 1;
+    const zoomEmitter = createZoomChangeEmitter();
+    const root = createElement(documentRef, 'div', 'patch-viewer');
+    root.dataset.viewerZoomProvider = 'patch';
+    const toolbar = createElement(documentRef, 'div', 'patch-toolbar');
+    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, {
+            drawFileList: true,
+            matching: 'lines',
+            outputFormat: 'side-by-side',
+            renderNothingWhenEmpty: false
+        });
+    }
+    catch {
+        const fallback = createElement(documentRef, 'pre', 'patch-fallback');
+        fallback.innerHTML = escapeHtml(text);
+        body.replaceChildren(fallback);
+    }
+    root.append(toolbar, body);
+    root.style.setProperty('--patch-font-size', `${13 * zoom}px`);
+    target.replaceChildren(createStyle(documentRef), root);
+    const getZoomState = () => ({
+        scale: zoom,
+        label: `${Math.round(zoom * 100)}%`,
+        canZoomIn: zoom < 2.4,
+        canZoomOut: zoom > 0.6,
+        canReset: zoom !== 1,
+        minScale: 0.6,
+        maxScale: 2.4
+    });
+    const setZoom = (scale) => {
+        zoom = clampZoom(scale);
+        root.style.setProperty('--patch-font-size', `${13 * zoom}px`);
+        zoomEmitter.emit();
+        return getZoomState();
+    };
+    registerFileViewerZoomProvider(root, {
+        zoomIn: () => setZoom(zoom + 0.1),
+        zoomOut: () => setZoom(zoom - 0.1),
+        resetZoom: () => setZoom(1),
+        setZoom,
+        getState: getZoomState,
+        subscribe: zoomEmitter.subscribe
+    });
+    return {
+        $el: root,
+        unmount() {
+            unregisterFileViewerZoomProvider(root);
+            target.replaceChildren();
+        }
+    };
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@file-viewer/renderer-text",
+  "version": "2.0.11",
+  "private": false,
+  "type": "module",
+  "description": "Standalone code, text, Markdown, patch diff, and Git bundle renderer plugin for Flyfish File Viewer.",
+  "keywords": [
+    "file-viewer",
+    "renderer",
+    "text",
+    "code",
+    "markdown",
+    "patch",
+    "git-bundle",
+    "highlight.js",
+    "document-preview",
+    "document-viewer",
+    "file-preview",
+    "self-hosted"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": {
+    "name": "Wangyu",
+    "email": "wybaby168@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flyfish-dev/file-viewer-renderer-text.git",
+    "directory": "packages/renderers/text"
+  },
+  "homepage": "https://doc.file-viewer.app/guide/on-demand-renderers",
+  "bugs": {
+    "url": "https://github.com/flyfish-dev/file-viewer-renderer-text/issues"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://dev.flyfish.group/shop"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@file-viewer/core": "^2.0.11",
+    "diff2html": "^3.4.56",
+    "highlight.js": "^11.11.1",
+    "marked": "^18.0.5",
+    "pako": "^2.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "type-check": "tsc -b tsconfig.json"
+  }
+}