@file-viewer/renderer-word 2.1.22 → 2.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.en.md +3 -1
  2. package/README.md +3 -1
  3. package/dist/openDocument.js +2 -2
  4. package/dist/wordDoc.js +28 -0
  5. package/dist/wordDocx.js +41 -3
  6. package/package.json +4 -4
package/README.en.md CHANGED
@@ -31,7 +31,7 @@ Use `@file-viewer/preset-all` when you want the same complete matrix as the offi
31
31
 
32
32
  ## Capabilities
33
33
 
34
- - DOCX / DOCM / DOTX / DOTM use the self-maintained `@file-viewer/docx` engine with Worker parsing, continuous reading layout, cached TOC fields, and async batched rendering.
34
+ - DOCX / DOCM / DOTX / DOTM use the self-maintained `@file-viewer/docx` engine with Worker parsing, continuous reading layout, cached TOC fields, async batched rendering, and a dark document surface that follows the viewer theme.
35
35
  - DOC / DOT use `@file-viewer/doc` with a Word-like paper surface, zoom, print, and HTML export adapters.
36
36
  - RTF uses `rtf.js`; ODT / ODP read `content.xml` from OpenDocument packages for safe structure previews.
37
37
  - The renderer reuses core search, zoom, print, export, lifecycle, and operation APIs.
@@ -54,6 +54,8 @@ const options = {
54
54
  }
55
55
  ```
56
56
 
57
+ DOCX dark rendering follows `options.theme` by default: `dark` enables it, `light` disables it, and `system` follows the browser color scheme. Pass `options.docx.darkMode: true / false` when the host app needs a fixed result.
58
+
57
59
  ## Migration
58
60
 
59
61
  `@file-viewer/core` no longer depends on `@file-viewer/docx`, `@file-viewer/doc`, `rtf.js`, `linkedom`, or `@xmldom/xmldom` directly. Install and pass this renderer for full Word preview, or use `@file-viewer/preset-all`.
package/README.md CHANGED
@@ -31,7 +31,7 @@ const options = {
31
31
 
32
32
  ## 能力边界
33
33
 
34
- - DOCX / DOCM / DOTX / DOTM 使用自研 `@file-viewer/docx`，默认 Worker 解析、连续流式阅读、目录字段缓存和异步分批渲染。
34
+ - DOCX / DOCM / DOTX / DOTM 使用自研 `@file-viewer/docx`，默认 Worker 解析、连续流式阅读、目录字段缓存、异步分批渲染，并跟随 viewer 主题启用暗黑文档面。
35
35
  - DOC / DOT 使用 `@file-viewer/doc`，并套用 Word 风格纸张阅读面、缩放、打印和 HTML 导出适配。
36
36
  - RTF 使用 `rtf.js`，ODT / ODP 读取 OpenDocument 包内 `content.xml` 做安全结构预览。
37
37
  - 继续复用 core 的统一搜索、缩放、打印、导出、生命周期和操作能力。
@@ -54,6 +54,8 @@ const options = {
54
54
  }
55
55
  ```
56
56
 
57
+ DOCX 暗黑渲染默认由 `options.theme` 决定：`dark` 开启、`light` 关闭、`system` 跟随浏览器系统主题。需要业务固定效果时可传 `options.docx.darkMode: true / false`。
58
+
57
59
  ## 迁移说明
58
60
 
59
61
  `@file-viewer/core` 已不再直接依赖 `@file-viewer/docx`、`@file-viewer/doc`、`rtf.js`、`linkedom` 或 `@xmldom/xmldom`。需要 Word 完整预览时，请安装本包并通过 `renderers` 传入，或使用 `@file-viewer/preset-all`。
package/dist/openDocument.js CHANGED
@@ -10,8 +10,8 @@ const openDocumentStyle = `
10
10
  .flyfish-rtf-header{width:min(100%,900px);margin:0 auto 18px;padding:18px 22px;border-radius:8px;background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.1);box-sizing:border-box}
11
11
  .flyfish-rtf-header span{display:block;color:#0f766e;font-size:12px;font-weight:800}.flyfish-rtf-header strong{display:block;margin-top:6px;color:#132235;font-size:24px}
12
12
  .flyfish-rtf-paper{width:min(100%,900px);min-height:980px;margin:0 auto;padding:54px 62px;background:#fff;box-shadow:0 16px 38px rgba(15,23,42,.12);line-height:1.75;box-sizing:border-box}.flyfish-rtf-paper p{margin:0 0 12px}
13
- .file-viewer[data-viewer-theme='dark'] .odf-viewer,.file-viewer[data-viewer-theme='dark'] .flyfish-rtf-viewer{background:#111827}.file-viewer[data-viewer-theme='dark'] .odf-shell>header,.file-viewer[data-viewer-theme='dark'] .odf-page,.file-viewer[data-viewer-theme='dark'] .flyfish-rtf-header,.file-viewer[data-viewer-theme='dark'] .flyfish-rtf-paper{background:#f8fafc;color:#1f2937}
14
- @media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .odf-viewer,.file-viewer[data-viewer-theme='system'] .flyfish-rtf-viewer{background:#111827}.file-viewer[data-viewer-theme='system'] .odf-shell>header,.file-viewer[data-viewer-theme='system'] .odf-page,.file-viewer[data-viewer-theme='system'] .flyfish-rtf-header,.file-viewer[data-viewer-theme='system'] .flyfish-rtf-paper{background:#f8fafc;color:#1f2937}}
13
+ [data-viewer-theme='dark'] .odf-viewer,[data-viewer-theme='dark'] .flyfish-rtf-viewer{background:#111827}[data-viewer-theme='dark'] .odf-shell>header,[data-viewer-theme='dark'] .odf-page,[data-viewer-theme='dark'] .flyfish-rtf-header,[data-viewer-theme='dark'] .flyfish-rtf-paper{background:#f8fafc;color:#1f2937}
14
+ @media (prefers-color-scheme:dark){[data-viewer-theme='system'] .odf-viewer,[data-viewer-theme='system'] .flyfish-rtf-viewer{background:#111827}[data-viewer-theme='system'] .odf-shell>header,[data-viewer-theme='system'] .odf-page,[data-viewer-theme='system'] .flyfish-rtf-header,[data-viewer-theme='system'] .flyfish-rtf-paper{background:#f8fafc;color:#1f2937}}
15
15
  @media (max-width:720px){.odf-viewer,.flyfish-rtf-viewer{padding:14px}.odf-page{padding:28px 24px}.flyfish-rtf-paper{padding:36px 28px}}
16
16
  `;
17
17
  const createStyle = () => {
package/dist/wordDoc.js CHANGED
@@ -70,6 +70,26 @@ const WORD_PAGE_CSS = `
70
70
  .msdoc-page .msdoc-page-break{
71
71
  display:none;
72
72
  }
73
+ [data-viewer-theme='dark'] .msdoc-stage{
74
+ background:#111827;
75
+ }
76
+ [data-viewer-theme='dark'] .msdoc-page > .msdoc-root{
77
+ color-scheme:only light;
78
+ forced-color-adjust:none;
79
+ background:#fff;
80
+ color:#111;
81
+ }
82
+ @media (prefers-color-scheme:dark){
83
+ [data-viewer-theme='system'] .msdoc-stage{
84
+ background:#111827;
85
+ }
86
+ [data-viewer-theme='system'] .msdoc-page > .msdoc-root{
87
+ color-scheme:only light;
88
+ forced-color-adjust:none;
89
+ background:#fff;
90
+ color:#111;
91
+ }
92
+ }
73
93
  @media (max-width: 860px){
74
94
  .msdoc-stage{
75
95
  padding:16px 12px 24px;
@@ -92,6 +112,14 @@ const MSDOC_ZOOM_CSS = `
92
112
  overflow:auto;
93
113
  background:#ececec;
94
114
  }
115
+ [data-viewer-theme='dark'] .msdoc-zoom-viewer{
116
+ background:#111827;
117
+ }
118
+ @media (prefers-color-scheme:dark){
119
+ [data-viewer-theme='system'] .msdoc-zoom-viewer{
120
+ background:#111827;
121
+ }
122
+ }
95
123
  .msdoc-zoom-viewer .msdoc-stage{
96
124
  min-width:max-content;
97
125
  }
package/dist/wordDocx.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { resolveFileViewerDocxWorkerJsZipUrl, resolveFileViewerDocxWorkerUrl, } from '@file-viewer/core/assets';
2
- import { applyPrintPageSize, buildPrintPageStyle, createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, formatCssPixels, getElementPrintPageSize, registerFileViewerZoomProvider, resolveFileViewerFitScale, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
2
+ import { applyPrintPageSize, buildPrintPageStyle, createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, formatCssPixels, getElementPrintPageSize, normalizeFileViewerTheme, registerFileViewerZoomProvider, resolveFileViewerFitScale, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
3
3
  const DOCX_DEFAULT_PAGE_SIZE = {
4
4
  width: 794,
5
5
  height: 1123
@@ -8,7 +8,7 @@ const DOCX_WORKER_UNSAFE_PROTOCOLS = new Set(['file:', 'about:', 'data:']);
8
8
  const DOCX_MIN_SCALE = 0.24;
9
9
  const DOCX_MAX_SCALE = 3;
10
10
  const DOCX_ZOOM_STEP = 0.15;
11
- const DOCX_VENDOR_ASSET_VERSION = '0.3.17';
11
+ const DOCX_VENDOR_ASSET_VERSION = '0.3.18';
12
12
  const ZIP_SIGNATURE_PK = 0x504b;
13
13
  const loadLibrary = (() => {
14
14
  const loader = {
@@ -70,6 +70,26 @@ const shouldUseDocxWorker = (target, docxOptions) => {
70
70
  }
71
71
  return !DOCX_WORKER_UNSAFE_PROTOCOLS.has(getTargetProtocol(target));
72
72
  };
73
+ const prefersDarkColorScheme = (target) => {
74
+ var _a;
75
+ const view = getTargetWindow(target);
76
+ const matchMedia = (_a = view === null || view === void 0 ? void 0 : view.matchMedia) !== null && _a !== void 0 ? _a : globalThis.matchMedia;
77
+ return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches;
78
+ };
79
+ const resolveDocxDarkMode = (target, context, docxOptions) => {
80
+ var _a;
81
+ if ((docxOptions === null || docxOptions === void 0 ? void 0 : docxOptions.darkMode) !== undefined) {
82
+ return docxOptions.darkMode;
83
+ }
84
+ const theme = normalizeFileViewerTheme((_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.theme);
85
+ if (theme === 'dark') {
86
+ return true;
87
+ }
88
+ if (theme === 'light') {
89
+ return false;
90
+ }
91
+ return prefersDarkColorScheme(target);
92
+ };
73
93
  const appendDocxVendorAssetVersion = (url, explicitUrl) => {
74
94
  if (!url || explicitUrl) {
75
95
  return url;
@@ -82,6 +102,7 @@ const createDocxOptions = (target, context, notifyProgressiveRender) => {
82
102
  const documentBaseUrl = target.ownerDocument.URL || undefined;
83
103
  const useWorker = shouldUseDocxWorker(target, docxOptions);
84
104
  const usePagedLayout = (docxOptions === null || docxOptions === void 0 ? void 0 : docxOptions.visualPagination) === true;
105
+ const darkMode = resolveDocxDarkMode(target, context, docxOptions);
85
106
  const progress = (event) => {
86
107
  if (event.phase === 'render' || event.phase === 'layout' || event.phase === 'done') {
87
108
  notifyProgressiveRender();
@@ -91,6 +112,7 @@ const createDocxOptions = (target, context, notifyProgressiveRender) => {
91
112
  useWorker,
92
113
  breakPages: usePagedLayout,
93
114
  ignoreLastRenderedPageBreak: (_b = docxOptions === null || docxOptions === void 0 ? void 0 : docxOptions.ignoreLastRenderedPageBreak) !== null && _b !== void 0 ? _b : !usePagedLayout,
115
+ darkMode,
94
116
  progress
95
117
  };
96
118
  if (useWorker) {
@@ -143,6 +165,11 @@ const DOCX_RESPONSIVE_CSS = `
143
165
  height: 100%;
144
166
  overflow: auto;
145
167
  background: #ececec;
168
+ color-scheme: light;
169
+ }
170
+ .docx-fit-viewer[data-docx-dark-mode='true'] {
171
+ background: #242424;
172
+ color-scheme: dark;
146
173
  }
147
174
  .docx-fit-viewer .docx-wrapper {
148
175
  box-sizing: border-box;
@@ -151,6 +178,9 @@ const DOCX_RESPONSIVE_CSS = `
151
178
  padding: 24px 14px 40px !important;
152
179
  background: #e7e9ec !important;
153
180
  }
181
+ .docx-fit-viewer[data-docx-dark-mode='true'] .docx-wrapper {
182
+ background: #242424 !important;
183
+ }
154
184
  .docx-fit-viewer .docx-page-frame {
155
185
  position: relative;
156
186
  width: 100%;
@@ -174,10 +204,16 @@ const DOCX_RESPONSIVE_CSS = `
174
204
  background: #ffffff !important;
175
205
  box-shadow: 0 2px 14px rgba(25, 35, 48, 0.18);
176
206
  box-sizing: border-box;
177
- color: #111827;
178
207
  overflow: hidden;
179
208
  transform-origin: top center;
180
209
  }
210
+ .docx-fit-viewer[data-docx-dark-mode='true'] .docx-page-frame > section.docx,
211
+ .docx-fit-viewer[data-docx-dark-mode='true'] .docx-flow-frame > section.docx {
212
+ background: rgb(51, 51, 51) !important;
213
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
214
+ outline: 1px solid rgba(255, 255, 255, 0.15);
215
+ outline-offset: -1px;
216
+ }
181
217
  .docx-fit-viewer .docx-flow-frame > section.docx {
182
218
  height: auto !important;
183
219
  min-height: var(--docx-page-height, auto) !important;
@@ -474,6 +510,7 @@ export default async function (buffer, target, context) {
474
510
  const docxOptions = createDocxOptions(target, context, notifyProgressiveRender);
475
511
  const { defaultOptions, renderAsync } = await loadLibrary();
476
512
  target.dataset.docxWorker = docxOptions.useWorker ? 'self' : 'false';
513
+ target.dataset.docxDarkMode = docxOptions.darkMode ? 'true' : 'false';
477
514
  await renderAsync(buffer, target, undefined, {
478
515
  ...defaultOptions,
479
516
  ...docxOptions
@@ -498,6 +535,7 @@ export default async function (buffer, target, context) {
498
535
  (_a = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _a === void 0 ? void 0 : _a.call(context, null);
499
536
  disposeResponsive();
500
537
  delete target.dataset.docxWorker;
538
+ delete target.dataset.docxDarkMode;
501
539
  target.innerHTML = '';
502
540
  }
503
541
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@file-viewer/renderer-word",
3
- "version": "2.1.22",
3
+ "version": "2.1.24",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "Standalone Word and compatible document renderer plugin for Flyfish File Viewer powered by @file-viewer/docx, @file-viewer/doc, and RTF/ODF parsing.",
@@ -57,9 +57,9 @@
57
57
  "LICENSE"
58
58
  ],
59
59
  "dependencies": {
60
- "@file-viewer/core": "^2.1.22",
61
- "@file-viewer/doc": "^2.1.22",
62
- "@file-viewer/docx": "^0.3.17",
60
+ "@file-viewer/core": "2.1.24",
61
+ "@file-viewer/doc": "2.1.24",
62
+ "@file-viewer/docx": "^0.3.18",
63
63
  "jszip": "^3.10.1",
64
64
  "rtf.js": "^3.0.9"
65
65
  },