@file-viewer/core 2.0.0

package/dist/renderers/image.js

@@ -0,0 +1,179 @@
+import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '../documentDom.js';
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter } from '../documentZoom.js';
+const imageMimeMap = {
+    avif: 'image/avif',
+    bmp: 'image/bmp',
+    gif: 'image/gif',
+    heic: 'image/heic',
+    heif: 'image/heif',
+    ico: 'image/x-icon',
+    jxl: 'image/jxl',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    tif: 'image/tiff',
+    tiff: 'image/tiff',
+    webp: 'image/webp',
+};
+const imageStyle = `
+.image-viewer{position:relative;width:100%;height:100%;overflow:auto;background:#eef1f4;box-sizing:border-box}
+.image-stage{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
+.image-stage img{display:block;width:auto;max-width:none;margin:0 auto;border:0;box-shadow:0 18px 48px rgba(15,23,42,.16);background:#fff;cursor:zoom-in}
+.image-lightbox{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(15,23,42,.88);box-sizing:border-box}
+.image-lightbox[hidden]{display:none}
+.image-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);cursor:zoom-out}
+.image-lightbox button{position:absolute;top:20px;right:20px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#172033;font-size:24px;line-height:40px;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.18)}
+.file-viewer[data-viewer-theme='dark'] .image-viewer{background:#101820}
+@media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .image-viewer{background:#101820}}
+@media (max-width:767px){.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox button{top:12px;right:12px}}
+`;
+const createStyle = () => {
+    const style = document.createElement('style');
+    style.textContent = imageStyle;
+    return style;
+};
+const getImageBlobType = (type) => {
+    const normalized = (type || '').trim().toLowerCase();
+    return imageMimeMap[normalized] || 'image/*';
+};
+const readBlobDataUrl = async (blob) => {
+    return await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = event => {
+            var _a;
+            const result = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+            if (typeof result === 'string') {
+                resolve(result);
+                return;
+            }
+            reject(new Error('Unable to read image data URL.'));
+        };
+        reader.onerror = () => reject(reader.error || new Error('Unable to read image data URL.'));
+        reader.readAsDataURL(blob);
+    });
+};
+const renderHeic = async (buffer, type) => {
+    const { default: heic2any } = await import('heic2any');
+    const result = await heic2any({
+        blob: new Blob([buffer], { type: getImageBlobType(type) }),
+        toType: 'image/png',
+    });
+    const blob = Array.isArray(result) ? result[0] : result;
+    return readBlobDataUrl(blob);
+};
+const resolveImageUrl = async (buffer, type) => {
+    const normalizedType = (type || '').trim().toLowerCase();
+    if (normalizedType === 'heic' || normalizedType === 'heif') {
+        return renderHeic(buffer, normalizedType);
+    }
+    return readBlobDataUrl(new Blob([buffer], { type: getImageBlobType(normalizedType) }));
+};
+const clampZoom = (value) => {
+    return Math.min(5, Math.max(0.1, Number(value.toFixed(2))));
+};
+const applyImageZoom = (image, viewportHeight, zoom) => {
+    if (viewportHeight > 0) {
+        image.style.height = `${Math.max(1, Math.round(viewportHeight * zoom))}px`;
+        return;
+    }
+    image.style.height = `${zoom * 100}%`;
+};
+const createLightbox = (src) => {
+    const lightbox = document.createElement('div');
+    lightbox.className = 'image-lightbox';
+    lightbox.hidden = true;
+    lightbox.setAttribute('role', 'dialog');
+    lightbox.setAttribute('aria-modal', 'true');
+    const image = document.createElement('img');
+    image.alt = 'Preview image';
+    image.src = src;
+    const closeButton = document.createElement('button');
+    closeButton.type = 'button';
+    closeButton.setAttribute('aria-label', 'Close image preview');
+    closeButton.textContent = 'x';
+    const close = () => {
+        lightbox.hidden = true;
+    };
+    closeButton.addEventListener('click', close);
+    image.addEventListener('click', close);
+    lightbox.addEventListener('click', event => {
+        if (event.target === lightbox) {
+            close();
+        }
+    });
+    lightbox.append(image, closeButton);
+    return {
+        element: lightbox,
+        open() {
+            lightbox.hidden = false;
+        },
+        destroy() {
+            closeButton.removeEventListener('click', close);
+            image.removeEventListener('click', close);
+            lightbox.remove();
+        },
+    };
+};
+export default async function renderImage(buffer, target, type) {
+    const src = await resolveImageUrl(buffer, type);
+    let zoom = 1;
+    let viewportHeight = 0;
+    const zoomEmitter = createZoomChangeEmitter();
+    const root = document.createElement('div');
+    root.className = 'image-viewer';
+    root.dataset.viewerZoomProvider = 'image';
+    const stage = document.createElement('div');
+    stage.className = 'image-stage';
+    const image = document.createElement('img');
+    image.alt = '图片';
+    image.src = src;
+    stage.append(image);
+    root.append(stage);
+    const lightbox = createLightbox(src);
+    const openLightbox = () => lightbox.open();
+    image.addEventListener('click', openLightbox);
+    document.body.append(lightbox.element);
+    const updateViewportSize = () => {
+        viewportHeight = root.clientHeight || 0;
+        applyImageZoom(image, viewportHeight, zoom);
+        zoomEmitter.emit();
+    };
+    const resizeObserver = new ResizeObserver(updateViewportSize);
+    resizeObserver.observe(root);
+    const getZoomState = () => ({
+        scale: zoom,
+        label: `${Math.round(zoom * 100)}%`,
+        canZoomIn: zoom < 5,
+        canZoomOut: zoom > 0.1,
+        canReset: zoom !== 1,
+        minScale: 0.1,
+        maxScale: 5,
+    });
+    const setZoom = (scale) => {
+        zoom = clampZoom(scale);
+        applyImageZoom(image, viewportHeight, zoom);
+        zoomEmitter.emit();
+        return getZoomState();
+    };
+    registerFileViewerZoomProvider(root, {
+        zoomIn: () => setZoom(zoom + 0.15),
+        zoomOut: () => setZoom(zoom - 0.15),
+        resetZoom: () => setZoom(1),
+        setZoom,
+        getState: getZoomState,
+        subscribe: zoomEmitter.subscribe,
+    });
+    target.replaceChildren(createStyle(), root);
+    updateViewportSize();
+    return {
+        $el: target,
+        unmount() {
+            unregisterFileViewerZoomProvider(root);
+            resizeObserver.disconnect();
+            image.removeEventListener('click', openLightbox);
+            lightbox.destroy();
+            target.replaceChildren();
+        },
+    };
+}

package/dist/renderers/index.d.ts

@@ -0,0 +1,21 @@
+import type { FileRenderHandler, FileViewerRenderedInstance } from '../types';
+type CoreBrowserRendererHandler = FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+interface CoreBrowserRendererHandlerEntry {
+    rendererId: string;
+    handler: CoreBrowserRendererHandler;
+}
+export declare const coreBrowserRendererHandlers: readonly CoreBrowserRendererHandlerEntry[];
+export declare const createFileViewerCoreRendererRegistry: () => {
+    dispatcher: import("..").FileViewerRendererDispatcher<CoreBrowserRendererHandler>;
+    registry: import("..").RendererRegistry;
+    missingRendererIds: string[];
+};
+export declare const fileViewerCoreRendererRegistryBridge: {
+    dispatcher: import("..").FileViewerRendererDispatcher<CoreBrowserRendererHandler>;
+    registry: import("..").RendererRegistry;
+    missingRendererIds: string[];
+};
+export declare const fileViewerCoreRendererRegistry: import("..").RendererRegistry;
+export declare const fileViewerCoreRendererDispatcher: import("..").FileViewerRendererDispatcher<CoreBrowserRendererHandler>;
+export declare const missingFileViewerCoreRendererHandlers: string[];
+export {};

package/dist/renderers/index.js

@@ -0,0 +1,207 @@
+import { DEFAULT_RENDERER_DEFINITIONS } from '../formats.js';
+import { createFileRenderHandlerRegistry } from '../rendererHandler.js';
+import { createFileViewerRendererDispatcher } from '../rendererDispatcher.js';
+import { createFileViewerUnsupportedState } from '../state.js';
+const createWrapper = (el) => ({
+    $el: el,
+    unmount() {
+        // DOM renderers clean themselves up through their own returned instance.
+    },
+});
+export const coreBrowserRendererHandlers = [
+    {
+        rendererId: 'code',
+        handler: async (buffer, target, type) => {
+            const { default: renderCode } = await import('./code.js');
+            return renderCode(buffer, target, type);
+        },
+    },
+    {
+        rendererId: 'markdown',
+        handler: async (buffer, target) => {
+            const { default: renderMarkdown } = await import('./markdown.js');
+            return renderMarkdown(buffer, target);
+        },
+    },
+    {
+        rendererId: 'video',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderVideo } = await import('./video.js');
+            return renderVideo(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'audio',
+        handler: async (buffer, target, type) => {
+            const { default: renderAudio } = await import('./audio.js');
+            return renderAudio(buffer, target, type);
+        },
+    },
+    {
+        rendererId: 'image',
+        handler: async (buffer, target, type) => {
+            const { default: renderImage } = await import('./image.js');
+            return renderImage(buffer, target, type);
+        },
+    },
+    {
+        rendererId: 'umd',
+        handler: async (buffer, target) => {
+            const { default: renderUmd } = await import('./umd.js');
+            return renderUmd(buffer, target);
+        },
+    },
+    {
+        rendererId: 'geo',
+        handler: async (buffer, target, type) => {
+            const { default: renderGeo } = await import('./geo.js');
+            return renderGeo(buffer, target, type);
+        },
+    },
+    {
+        rendererId: 'open-document',
+        handler: async (buffer, target, type) => {
+            const { default: renderOpenDocument } = await import('./openDocument.js');
+            return renderOpenDocument(buffer, target, type);
+        },
+    },
+    {
+        rendererId: 'ofd',
+        handler: async (buffer, target, _type, context) => {
+            const { default: renderOfd } = await import('./ofd.js');
+            return renderOfd(buffer, target, context);
+        },
+    },
+    {
+        rendererId: 'pdf',
+        handler: async (buffer, target, _type, context) => {
+            const { default: renderPdf } = await import('./pdf.js');
+            return renderPdf(buffer, target, context);
+        },
+    },
+    {
+        rendererId: 'office-word-openxml',
+        handler: async (buffer, target, _type, context) => {
+            const { default: renderWordDocx } = await import('./wordDocx.js');
+            return renderWordDocx(buffer, target, context);
+        },
+    },
+    {
+        rendererId: 'office-word-binary',
+        handler: async (buffer, target, _type, context) => {
+            const { default: renderWordDoc } = await import('./wordDoc.js');
+            return renderWordDoc(buffer, target, context);
+        },
+    },
+    {
+        rendererId: 'spreadsheet-openxml',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderSpreadsheet } = await import('./spreadsheet.js');
+            return renderSpreadsheet(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'email',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderEmail } = await import('./email.js');
+            return renderEmail(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'eda',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderEda } = await import('./eda.js');
+            return renderEda(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'cad',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderCad } = await import('./cad.js');
+            return renderCad(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'typst',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderTypst } = await import('./typst.js');
+            return renderTypst(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'office-presentation',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderPptx } = await import('./pptx.js');
+            return renderPptx(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'epub',
+        handler: async (buffer, target) => {
+            const { default: renderEpub } = await import('./epub.js');
+            return renderEpub(buffer, target);
+        },
+    },
+    {
+        rendererId: 'model',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderModel } = await import('./model.js');
+            return renderModel(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'drawing',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderDrawing } = await import('./drawing.js');
+            return renderDrawing(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'data-asset',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderDataAsset } = await import('./data.js');
+            return renderDataAsset(buffer, target, type, context);
+        },
+    },
+    {
+        rendererId: 'archive',
+        handler: async (buffer, target, type, context) => {
+            const { default: renderArchive } = await import('./archive.js');
+            return renderArchive(buffer, target, type, context);
+        },
+    },
+];
+const renderUnsupported = async (_buffer, target, type) => {
+    const state = createFileViewerUnsupportedState(type);
+    const wrapper = document.createElement('div');
+    wrapper.style.textAlign = 'center';
+    wrapper.style.marginTop = '80px';
+    const message = document.createElement('div');
+    message.textContent = state.message;
+    wrapper.appendChild(message);
+    if (state.description) {
+        const description = document.createElement('div');
+        description.textContent = state.description;
+        wrapper.appendChild(description);
+    }
+    target.replaceChildren(wrapper);
+    return createWrapper(target);
+};
+export const createFileViewerCoreRendererRegistry = () => {
+    const bridge = createFileRenderHandlerRegistry({
+        definitions: DEFAULT_RENDERER_DEFINITIONS,
+        handlers: coreBrowserRendererHandlers,
+    });
+    return {
+        ...bridge,
+        dispatcher: createFileViewerRendererDispatcher({
+            registry: bridge.registry,
+            handlers: coreBrowserRendererHandlers,
+            fallbackHandler: renderUnsupported,
+        }),
+    };
+};
+export const fileViewerCoreRendererRegistryBridge = createFileViewerCoreRendererRegistry();
+export const fileViewerCoreRendererRegistry = fileViewerCoreRendererRegistryBridge.registry;
+export const fileViewerCoreRendererDispatcher = fileViewerCoreRendererRegistryBridge.dispatcher;
+export const missingFileViewerCoreRendererHandlers = fileViewerCoreRendererRegistryBridge.missingRendererIds;

package/dist/renderers/markdown.d.ts

@@ -0,0 +1,2 @@
+import type { FileViewerRenderedInstance } from '../types';
+export default function renderMarkdown(buffer: ArrayBuffer, target: HTMLDivElement): Promise<FileViewerRenderedInstance>;

package/dist/renderers/markdown.js

@@ -0,0 +1,83 @@
+import { marked } from 'marked';
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter } from '../documentZoom.js';
+import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '../documentDom.js';
+import { readFileViewerText as readText } from '../source.js';
+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/renderers/model.d.ts

@@ -0,0 +1,2 @@
+import type { FileRenderContext, FileViewerRenderedInstance } from '../types';
+export default function renderModel(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;