@flyfish-group/file-viewer-react 1.0.24 → 2.0.0

package/README.en.md

@@ -0,0 +1,39 @@
+# @flyfish-group/file-viewer-react
+
+React file preview component. This package is the historical alias of `@file-viewer/react` and now provides the same native React component experience: it mounts the shared core directly and exposes consistent props, events, and ref APIs.
+
+```bash
+npm install @flyfish-group/file-viewer-react
+```
+
+```tsx
+import FileViewer from '@flyfish-group/file-viewer-react'
+
+export function Preview() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <FileViewer
+        url="/files/demo.docx"
+        options={{
+          theme: 'light',
+          toolbar: { position: 'bottom-right' },
+          archive: { cache: true }
+        }}
+        onViewerEvent={(event) => {
+          console.log(event.type, event.event, event.payload)
+        }}
+      />
+    </div>
+  )
+}
+```
+
+`file` takes precedence over `url`. When passing a `Blob` or `ArrayBuffer`, also provide `name`, for example `contract.pdf`, so the viewer can detect the format:
+
+```tsx
+<FileViewer file={blob} name="contract.pdf" />
+```
+
+`options` cover theme, watermarking, search, unified zoom, download, print, HTML export, beforeOperation guards, lifecycle hooks, and format-specific settings. Lifecycle, operation availability, search state, and document location updates are emitted through `onViewerEvent`.
+
+New projects should prefer the standard package name `@file-viewer/react`. Official documentation: https://doc.flyfish-viewer.app/

package/README.md

@@ -1,13 +1,11 @@
 # @flyfish-group/file-viewer-react
 
-React 文件预览组件。只提供私有化部署路线: 依赖的 `@flyfish-group/file-viewer-web` 会随包携带 Vue 基线 viewer 产物；使用 `npm install` 或已允许 pnpm 安装脚本后，会复制到宿主项目 `public/file-viewer`。React 组件默认加载 `/file-viewer/index.html`，不依赖任何外部服务。
+React 文件预览组件。这个包是 `@file-viewer/react` 的历史包名同步版本，当前提供原生 React 组件体验: 组件内部直接挂载共享预览底座，并暴露一致的 props、事件和 ref API。
 
 ```bash
-npm install @flyfish-group/file-viewer-react@1.0.23
+npm install @flyfish-group/file-viewer-react
 ```
 
-pnpm 10 默认会拦截依赖包的 `postinstall`。如果安装后提示 `Ignored build scripts: @flyfish-group/file-viewer-web`，请执行 `pnpm approve-builds` 允许该包，或运行 `pnpm exec file-viewer-copy-assets ./public/file-viewer`。复制脚本会先清空目标目录再复制，避免 `index.html` 和 `assets/*` hash 不同版本导致动态 import 404。
-
 ```tsx
 import FileViewer from '@flyfish-group/file-viewer-react'
 
@@ -23,10 +21,7 @@ export function Preview() {
           theme: 'light',
           toolbar: { position: 'bottom-right' },
           watermark: { text: '内部预览', opacity: 0.14 },
-          archive: {
-            workerUrl: '/file-viewer/vendor/libarchive/worker-bundle.js',
-            cache: true
-          }
+          archive: { cache: true }
         }}
       />
     </div>
@@ -34,18 +29,12 @@ export function Preview() {
 }
 ```
 
-`file` 优先级高于 `url`。当传入 `Blob` 或 `ArrayBuffer` 时，请同时传 `name`，例如 `contract.pdf`，用于 Vue 基线预览器识别格式。
+`file` 优先级高于 `url`。当传入 `Blob` 或 `ArrayBuffer` 时，请同时传 `name`，例如 `contract.pdf`，用于识别格式:
 
 ```tsx
 <FileViewer file={blob} name="contract.pdf" />
 ```
 
-如果你的静态目录不是 `public/file-viewer`，复制到自定义目录后再覆盖 `viewerUrl`:
-
-```tsx
-<FileViewer viewerUrl="/vendor/file-viewer/index.html" url={url} />
-```
-
-React 组件内部复用 `mountViewerFrame` 的地址协议，会默认追加 `__flyfish_viewer_version` 来绕开旧 iframe 入口页缓存；静态服务已经保证 HTML 不缓存时，可传 `cacheKey={false}` 关闭。
+`options` 支持主题、水印、搜索、统一缩放、下载、打印、导出 HTML、beforeOperation 前置校验、生命周期 hooks 和格式专项参数。生命周期、操作能力变化、搜索状态和当前位置会通过 `onViewerEvent` 回传给宿主。
 
-`options` 会透传给 Vue 基线预览器，可配置主题、下载/打印/导出 HTML 操作栏、文字或图片水印、搜索高亮、AI 友好文本切片，以及压缩包预览的 `libarchive.js` Worker、IndexedDB 缓存和体积上限。`theme` 支持 `light`、`dark`、`system`，默认跟随系统；固定浅色宿主 UI 建议传 `theme: 'light'`。`toolbar.position` 支持 `auto`、`top`、`bottom-right`，默认 `auto`，PDF 会自动悬浮到右下角以避开自身导航栏；`pdf.toolbar` 可隐藏 PDF 自身工具栏，适合文档比对等紧凑场景。搜索 API 会按格式选择最佳链路，PDF 走 PDF.js 原生搜索，文本类格式走通用 DOM 高亮。打印按钮会按当前格式和渲染链路动态显隐；Word / PDF 打印和导出会生成完整页面，不依赖当前 iframe 视口或已渲染 canvas。生命周期、操作能力变化、搜索状态和当前位置会通过 `onViewerEvent` 回传给宿主，适合记录加载耗时、审计下载/打印尝试、搜索命中、页码/行号、AI 切片和溯源状态。
+新项目建议优先使用标准包名 `@file-viewer/react`。官方文档: https://doc.flyfish-viewer.app/

package/dist/index.d.ts

@@ -1,54 +1,2 @@
-import { type IframeHTMLAttributes } from 'react';
-import { type FileRef, type ViewerFrameEventHandler, type ViewerFrameOptions } from '@flyfish-group/file-viewer-web';
-export type { FileRef, ViewerFrameEventHandler, ViewerFrameOptions, ViewerRuntimeOptions, ViewerToolbarOptions, ViewerToolbarPosition, ViewerThemeMode } from '@flyfish-group/file-viewer-web';
-export interface FileViewerHandle {
-    iframe: HTMLIFrameElement | null;
-    postFile(): boolean;
-    reload(): void;
-}
-export interface FileViewerProps extends Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'children' | 'src'> {
-    /**
-     * 私有化部署后的 Vue 基线预览器页面地址。
-     *
-     * 不传时默认使用 `@flyfish-group/file-viewer-web` 安装后复制到宿主项目的 `/file-viewer/index.html`。
-     */
-    viewerUrl?: string;
-    /**
-     * 远端文件地址。会透传给 iframe 里的 Vue 基线预览器。
-     */
-    url?: string;
-    /**
-     * 本地二进制输入。优先级高于 url，会通过 postMessage 推送给 iframe。
-     */
-    file?: FileRef;
-    /**
-     * 当 file 是 Blob 或 ArrayBuffer 时用于识别扩展名。
-     */
-    name?: string;
-    /**
-     * 允许推送二进制的宿主 origin。默认取当前页面 origin。
-     */
-    from?: string;
-    /**
-     * postMessage 的目标 origin。默认从 viewerUrl 推导。
-     */
-    targetOrigin?: string;
-    /**
-     * 预留给 Vue 基线页面的查询参数。
-     */
-    params?: ViewerFrameOptions['params'];
-    /**
-     * iframe 入口页的缓存标识。默认使用 web 包版本；传 false 可关闭。
-     */
-    cacheKey?: ViewerFrameOptions['cacheKey'];
-    /**
-     * 透传给 Vue 基线预览器的运行时选项，例如水印、工具栏和压缩包缓存限制。
-     */
-    options?: ViewerFrameOptions['options'];
-    /**
-     * iframe 模式下接收基线预览器抛出的生命周期和操作事件。
-     */
-    onViewerEvent?: ViewerFrameEventHandler;
-}
-export declare const FileViewer: import("react").ForwardRefExoticComponent<FileViewerProps & import("react").RefAttributes<FileViewerHandle>>;
-export default FileViewer;
+export { FileViewer, default, } from '@file-viewer/react';
+export type { FileRef, FileViewerHandle, FileViewerProps, ViewerAiOptions, ViewerArchiveOptions, ViewerCadOptions, ViewerController, ViewerControllerAccessor, ViewerControllerHandle, ViewerDocxOptions, ViewerEvent, ViewerEventHandler, ViewerEventType, ViewerMountOptions, ViewerOptions, ViewerPdfOptions, ViewerSpreadsheetOptions, ViewerSearchOptions, ViewerThemeMode, ViewerToolbarOptions, ViewerToolbarPosition, ViewerTypstOptions, ViewerWatermarkOptions, } from '@file-viewer/react';

package/dist/index.js

@@ -1,112 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { buildViewerSrc, postFileToViewer } from '@flyfish-group/file-viewer-web';
-const defaultStyle = {
-    width: '100%',
-    height: '100%',
-    border: 0,
-    display: 'block'
-};
-export const FileViewer = forwardRef((props, forwardedRef) => {
-    const { viewerUrl, url, file, name, from, targetOrigin, params, cacheKey, options, onViewerEvent, onLoad, style, title = 'Flyfish Viewer 文件预览', ...iframeProps } = props;
-    const iframeRef = useRef(null);
-    const [frameReady, setFrameReady] = useState(false);
-    const frameOptions = useMemo(() => ({
-        viewerUrl,
-        url,
-        file,
-        name,
-        from,
-        targetOrigin,
-        params,
-        cacheKey,
-        options
-    }), [viewerUrl, url, file, name, from, targetOrigin, params, cacheKey, options]);
-    const src = useMemo(() => buildViewerSrc(frameOptions), [frameOptions]);
-    const retryTimerRef = useRef(undefined);
-    const retryCountRef = useRef(0);
-    const lifecycleAcknowledgedRef = useRef(false);
-    const postFile = useCallback(() => {
-        return postFileToViewer(iframeRef.current, frameOptions);
-    }, [frameOptions]);
-    const clearFilePostRetry = useCallback(() => {
-        if (retryTimerRef.current) {
-            window.clearTimeout(retryTimerRef.current);
-            retryTimerRef.current = undefined;
-        }
-    }, []);
-    const scheduleFilePost = useCallback(() => {
-        clearFilePostRetry();
-        retryCountRef.current = 0;
-        lifecycleAcknowledgedRef.current = false;
-        if (!frameOptions.file) {
-            return;
-        }
-        const post = () => {
-            if (lifecycleAcknowledgedRef.current) {
-                clearFilePostRetry();
-                return;
-            }
-            postFile();
-            retryCountRef.current += 1;
-            if (retryCountRef.current < 8) {
-                retryTimerRef.current = window.setTimeout(post, 120);
-            }
-            else {
-                retryTimerRef.current = undefined;
-            }
-        };
-        post();
-    }, [clearFilePostRetry, frameOptions.file, postFile]);
-    const reload = useCallback(() => {
-        if (iframeRef.current) {
-            iframeRef.current.src = src;
-        }
-    }, [src]);
-    useImperativeHandle(forwardedRef, () => ({
-        get iframe() {
-            return iframeRef.current;
-        },
-        postFile,
-        reload
-    }), [postFile, reload]);
-    useEffect(() => {
-        clearFilePostRetry();
-        lifecycleAcknowledgedRef.current = false;
-        setFrameReady(false);
-    }, [clearFilePostRetry, src]);
-    useEffect(() => {
-        if (frameReady) {
-            scheduleFilePost();
-        }
-    }, [frameReady, scheduleFilePost]);
-    useEffect(() => {
-        const handleMessage = (event) => {
-            var _a, _b, _c;
-            if (event.source !== ((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
-                return;
-            }
-            if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.type) !== 'flyfish-viewer:lifecycle' &&
-                ((_c = event.data) === null || _c === void 0 ? void 0 : _c.type) !== 'flyfish-viewer:operation') {
-                return;
-            }
-            if (event.data.type === 'flyfish-viewer:lifecycle') {
-                lifecycleAcknowledgedRef.current = true;
-                clearFilePostRetry();
-            }
-            onViewerEvent === null || onViewerEvent === void 0 ? void 0 : onViewerEvent(event.data, event);
-        };
-        window.addEventListener('message', handleMessage);
-        return () => window.removeEventListener('message', handleMessage);
-    }, [clearFilePostRetry, onViewerEvent]);
-    useEffect(() => {
-        return () => clearFilePostRetry();
-    }, [clearFilePostRetry]);
-    const handleLoad = useCallback((event) => {
-        setFrameReady(true);
-        onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
-    }, [onLoad]);
-    return (_jsx("iframe", { ...iframeProps, ref: iframeRef, src: src, title: title, style: { ...defaultStyle, ...style }, onLoad: handleLoad }));
-});
-FileViewer.displayName = 'FileViewer';
-export default FileViewer;
+export { FileViewer, default, } from '@file-viewer/react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyfish-group/file-viewer-react",
-  "version": "1.0.24",
+  "version": "2.0.0",
   "private": false,
   "type": "module",
   "description": "Private-deploy React component for Flyfish Viewer",
@@ -8,7 +8,7 @@
     "file-viewer",
     "document-preview",
     "react",
-    "iframe",
+    "native-viewer",
     "office-preview"
   ],
   "publishConfig": {
@@ -22,7 +22,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/flyfish-dev/file-viewer.git",
-    "directory": "packages/react"
+    "directory": "packages/compat/react"
   },
   "homepage": "https://github.com/flyfish-dev/file-viewer",
   "bugs": {
@@ -41,13 +41,14 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "README.en.md"
   ],
   "peerDependencies": {
     "react": ">=17 <20"
   },
   "dependencies": {
-    "@flyfish-group/file-viewer-web": "^1.0.24"
+    "@file-viewer/react": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",