@file-viewer/renderer-text 2.2.2 → 2.2.3

package/dist/markdown.js

@@ -1,5 +1,5 @@
 import { marked } from 'marked';
-import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, readFileViewerText as readText, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, readFileViewerText as readText, registerFileViewerZoomProvider, resolveFileViewerFitScale, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
 const markdownStyle = `
 .markdown-viewer{min-height:100%;padding:28px 16px 48px;background:var(--file-viewer-render-surface-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)}
@@ -31,13 +31,40 @@ const createStyle = () => {
     style.textContent = markdownStyle;
     return style;
 };
+const MARKDOWN_BASE_MAX_WIDTH = 980;
+const MARKDOWN_BASE_PADDING = 45;
+const MARKDOWN_BASE_FONT_SIZE = 16;
+const MARKDOWN_MIN_SCALE = 0.6;
+const MARKDOWN_MAX_SCALE = 2.4;
 const clampZoom = (value) => {
-    return Math.min(2.4, Math.max(0.6, Number(value.toFixed(2))));
+    return Math.min(MARKDOWN_MAX_SCALE, Math.max(MARKDOWN_MIN_SCALE, 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`);
+    host.style.setProperty('--markdown-max-width', `${MARKDOWN_BASE_MAX_WIDTH * zoom}px`);
+    host.style.setProperty('--markdown-padding', `${MARKDOWN_BASE_PADDING * zoom}px`);
+    host.style.setProperty('--markdown-font-size', `${MARKDOWN_BASE_FONT_SIZE * zoom}px`);
+};
+const readCssPixels = (value) => {
+    const pixels = Number.parseFloat(value || '');
+    return Number.isFinite(pixels) ? pixels : 0;
+};
+const readMarkdownViewport = (root, request) => {
+    var _a;
+    const viewportWidth = Math.max(1, request.viewportWidth || root.clientWidth || 0);
+    const viewportHeight = Math.max(1, request.viewportHeight || root.clientHeight || 0);
+    const view = root.ownerDocument.defaultView;
+    const computed = (_a = view === null || view === void 0 ? void 0 : view.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(view, root);
+    const mobile = viewportWidth <= 767;
+    const horizontalPadding = computed
+        ? readCssPixels(computed.paddingLeft) + readCssPixels(computed.paddingRight)
+        : mobile ? 20 : 32;
+    const verticalPadding = computed
+        ? readCssPixels(computed.paddingTop) + readCssPixels(computed.paddingBottom)
+        : mobile ? 42 : 76;
+    return {
+        width: Math.max(1, viewportWidth - horizontalPadding),
+        height: Math.max(1, viewportHeight - verticalPadding),
+    };
 };
 let mermaidRenderSequence = 0;
 let mermaidRenderQueue = Promise.resolve();
@@ -153,14 +180,15 @@ export default async function renderMarkdown(buffer, target, context) {
     root.append(article);
     target.replaceChildren(createStyle(), root);
     await renderEmbeddedMermaid(article, (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.theme);
+    const baseContentHeight = Math.max(article.scrollHeight || 0, article.offsetHeight || 0, 0);
     const getZoomState = () => ({
         scale: zoom,
         label: `${Math.round(zoom * 100)}%`,
-        canZoomIn: zoom < 2.4,
-        canZoomOut: zoom > 0.6,
+        canZoomIn: zoom < MARKDOWN_MAX_SCALE,
+        canZoomOut: zoom > MARKDOWN_MIN_SCALE,
         canReset: zoom !== 1,
-        minScale: 0.6,
-        maxScale: 2.4,
+        minScale: MARKDOWN_MIN_SCALE,
+        maxScale: MARKDOWN_MAX_SCALE,
     });
     const setZoom = (scale) => {
         zoom = clampZoom(scale);
@@ -168,11 +196,54 @@ export default async function renderMarkdown(buffer, target, context) {
         zoomEmitter.emit();
         return getZoomState();
     };
+    const fitMarkdown = (request) => {
+        var _a, _b;
+        const viewport = readMarkdownViewport(root, request);
+        const minScale = (_a = request.minScale) !== null && _a !== void 0 ? _a : MARKDOWN_MIN_SCALE;
+        const requestedMaxScale = (_b = request.maxScale) !== null && _b !== void 0 ? _b : MARKDOWN_MAX_SCALE;
+        // A flowing document must not be fitted against its full scroll height.
+        // Auto therefore follows the readable content width. It stays at 1:1 by
+        // default, but an explicit maxScale can opt into the wider DOCX-like fit
+        // requested by the caller.
+        const maxScale = request.mode === 'auto' && request.maxScale == null
+            ? Math.max(minScale, Math.min(1, requestedMaxScale))
+            : requestedMaxScale;
+        const scale = resolveFileViewerFitScale({
+            mode: request.mode === 'auto' ? 'width' : request.mode,
+            viewportWidth: viewport.width,
+            viewportHeight: viewport.height,
+            contentWidth: MARKDOWN_BASE_MAX_WIDTH,
+            contentHeight: baseContentHeight || viewport.height,
+            currentScale: zoom,
+            minScale,
+            maxScale,
+        });
+        if (!scale) {
+            return {
+                applied: false,
+                mode: request.mode,
+                resize: request.resize,
+                source: request.source,
+                reason: 'unmeasurable',
+                provider: 'zoom',
+            };
+        }
+        const state = setZoom(scale);
+        return {
+            applied: true,
+            mode: request.mode,
+            resize: request.resize,
+            scale: state.scale,
+            source: request.source,
+            provider: 'zoom',
+        };
+    };
     registerFileViewerZoomProvider(root, {
         zoomIn: () => setZoom(zoom + 0.1),
         zoomOut: () => setZoom(zoom - 0.1),
         resetZoom: () => setZoom(1),
         setZoom,
+        fit: fitMarkdown,
         getState: getZoomState,
         subscribe: zoomEmitter.subscribe,
     });

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@file-viewer/renderer-text",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": false,
   "type": "module",
-  "description": "Standalone code, text, Markdown, patch diff, and Git bundle renderer plugin for Flyfish File Viewer.",
+  "description": "Standalone code, text, Markdown, patch diff, and Git bundle renderer plugin for File Viewer.",
   "keywords": [
     "file-viewer",
     "renderer",
@@ -23,8 +23,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "author": {
-    "name": "Wangyu",
-    "email": "wybaby168@gmail.com"
+    "name": "Yu Wang",
+    "email": "admin@flyfish.dev"
   },
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.2.2",
+    "@file-viewer/core": "2.2.3",
     "diff2html": "^3.4.56",
     "highlight.js": "^11.11.1",
     "marked": "^18.0.5",