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

package/LICENSE

@@ -0,0 +1,160 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, "control" means (i) the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+"Object" form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form,
+made available under the License, as indicated by a copyright notice that is
+included in or attached to the work.
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work by
+the copyright owner or by an individual or Legal Entity authorized to submit on
+behalf of the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent to the
+Licensor or its representatives, including but not limited to communication on
+electronic mailing lists, source code control systems, and issue tracking systems
+that are managed by, or on behalf of, the Licensor for the purpose of discussing
+and improving the Work, but excluding communication that is conspicuously marked
+or otherwise designated in writing by the copyright owner as "Not a
+Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide,
+non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+reproduce, prepare Derivative Works of, publicly display, publicly perform,
+sublicense, and distribute the Work and such Derivative Works in Source or
+Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s) with the Work to
+which such Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim in a lawsuit)
+alleging that the Work or a Contribution incorporated within the Work
+constitutes direct or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate as of the date
+such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and in
+Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You
+distribute, all copyright, patent, trademark, and attribution notices from the
+Source form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution, then
+any Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the Derivative
+Works; within the Source form or documentation, if provided along with the
+Derivative Works; or, within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents of the NOTICE
+file are for informational purposes only and do not modify the License. You may
+add Your own attribution notices within Derivative Works that You distribute,
+alongside or as an addendum to the NOTICE text from the Work, provided that such
+additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+Contribution intentionally submitted for inclusion in the Work by You to the
+Licensor shall be under the terms and conditions of this License, without any
+additional terms or conditions. Notwithstanding the above, nothing herein shall
+supersede or modify the terms of any separate license agreement you may have
+executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+trademarks, service marks, or product names of the Licensor, except as required
+for reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+writing, Licensor provides the Work (and each Contributor provides its
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied, including, without limitation, any warranties or
+conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any risks
+associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+tort (including negligence), contract, or otherwise, unless required by
+applicable law (such as deliberate and grossly negligent acts) or agreed to in
+writing, shall any Contributor be liable to You for damages, including any
+direct, indirect, special, incidental, or consequential damages of any character
+arising as a result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill, work stoppage,
+computer failure or malfunction, or any and all other commercial damages or
+losses), even if such Contributor has been advised of the possibility of such
+damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+Derivative Works thereof, You may choose to offer, and charge a fee for,
+acceptance of support, warranty, indemnity, or other liability obligations and/or
+rights consistent with this License. However, in accepting such obligations, You
+may act only on Your own behalf and on Your sole responsibility, not on behalf of
+any other Contributor, and only if You agree to indemnify, defend, and hold each
+Contributor harmless for any liability incurred by, or claims asserted against,
+such Contributor by reason of your accepting any such warranty or additional
+liability.
+
+END OF TERMS AND CONDITIONS
+
+Copyright 2026 Flyfish Viewer

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.25",
+  "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,22 +41,23 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "README.en.md"
   ],
-  "scripts": {
-    "build": "tsc -b tsconfig.json",
-    "type-check": "tsc -b tsconfig.json"
-  },
   "peerDependencies": {
     "react": ">=17 <20"
   },
   "dependencies": {
-    "@flyfish-group/file-viewer-web": "workspace:^1.0.25"
+    "@file-viewer/react": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",
     "react": "^19.2.7",
     "typescript": "^6.0.3"
   },
-  "license": "Apache-2.0"
-}
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "type-check": "tsc -b tsconfig.json"
+  }
+}