@embedpdf-editor/chapter-snippet 0.3.3 → 0.3.4
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.
- package/README.md +77 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# @embedpdf-editor/chapter-snippet
|
|
2
2
|
|
|
3
|
-
框架无关的章节 PDF 阅读器运行时。它把 Preact 阅读器封装成 Web Component
|
|
3
|
+
框架无关的章节 PDF 阅读器运行时。它把 Preact 阅读器封装成 Web Component。
|
|
4
|
+
|
|
5
|
+
**Vue 2 请使用本包**(`@embedpdf-editor/chapter-snippet`),不要用已移除的 `@embedpdf-editor/vue2-chapter-viewer`。宿主为 Vue 2 / 传统页面 / 微前端,或任何不想引入 React/Vue3 渲染器的场景。
|
|
4
6
|
|
|
5
7
|
能力与 React/Vue3 渲染器保持一致:多章连续滚动、划线/高亮、附注、段落书签、章节目录和标注导入导出。
|
|
6
8
|
|
|
@@ -114,6 +116,62 @@ viewer?.addEventListener(CHAPTER_SNIPPET_EVENTS.ready, (event) => {
|
|
|
114
116
|
|
|
115
117
|
旧版本的 `editorInput` 仍可使用,但新代码应改为 `options`。`options.features` 会参与合并,顶层 `features` 仅作为兼容覆盖保留。
|
|
116
118
|
|
|
119
|
+
### `ChapterViewerOptions`(与 React / Vue3 一致)
|
|
120
|
+
|
|
121
|
+
| 字段 | 说明 |
|
|
122
|
+
| --- | --- |
|
|
123
|
+
| `manifest` | 章节目录,见 [React README Manifest](../react-chapter-viewer/README.md#manifest) |
|
|
124
|
+
| `notes` | `NoteCallbacks`,见 [React README](../react-chapter-viewer/README.md#notes附注回调) |
|
|
125
|
+
| `bookmarks` | `ParagraphBookmarkCallbacks`,见 [React README](../react-chapter-viewer/README.md#bookmarks段落书签回调) |
|
|
126
|
+
| `chapterPdfLoader` / `overlapStrategy` | 自定义 PDF 加载与重叠页策略 |
|
|
127
|
+
| `features` | 功能开关与 UI 定制,见下 |
|
|
128
|
+
|
|
129
|
+
加密 PDF 可在底层 `createPdfChapterEditor` 选项中设置 `passwordProvider`(如 `CallbackPasswordProvider` from `@embedpdf-editor/chapter-core`)。
|
|
130
|
+
|
|
131
|
+
### `features` 配置
|
|
132
|
+
|
|
133
|
+
与 React / Vue3 **同一套** `ChapterViewerConfig`(`@embedpdf-editor/chapter-viewer`)。完整字段表见 [React README:`features` 配置](../react-chapter-viewer/README.md#features-配置)。
|
|
134
|
+
|
|
135
|
+
| 模块 | 要点 |
|
|
136
|
+
| --- | --- |
|
|
137
|
+
| `markup` | `styles` 四类划线;`annotationMenu` 默认选中后在下方显示「删除」;`squiggly.offsetY` 默认 **4** |
|
|
138
|
+
| `bookmarks` | `marker` / `hover` 自定义图标 |
|
|
139
|
+
| `notes` | `marker.renderIcon`、`renderMenuActions`、`highlightColor` |
|
|
140
|
+
| `zoom` | `pageWidth`、`min` / `max` / `enabled` |
|
|
141
|
+
| `selectionToolbar` | `hiddenBuiltinActions`、`extraActions`;扩展动作监听 `selectionExtraAction` 事件 |
|
|
142
|
+
|
|
143
|
+
```js
|
|
144
|
+
features: {
|
|
145
|
+
markup: {
|
|
146
|
+
styles: {
|
|
147
|
+
highlight: { color: '#fef08a', opacity: 0.45 },
|
|
148
|
+
underline: { color: '#dc2626', thickness: 1.5, offsetY: 2.5 },
|
|
149
|
+
squiggly: { color: '#dc2626', thickness: 1.5, offsetY: 4 },
|
|
150
|
+
},
|
|
151
|
+
annotationMenu: {
|
|
152
|
+
enabled: true,
|
|
153
|
+
renderMenu: ({ onDelete }) => {
|
|
154
|
+
const btn = document.createElement('button');
|
|
155
|
+
btn.textContent = '移除';
|
|
156
|
+
btn.onclick = onDelete;
|
|
157
|
+
return btn;
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
notes: {
|
|
162
|
+
marker: {
|
|
163
|
+
renderIcon: () => /* DOM */,
|
|
164
|
+
renderMenuActions: ({ onEdit, onDelete }) => /* DOM */,
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
selectionToolbar: {
|
|
168
|
+
extraActions: [{ id: 'cite', label: '引用', order: 10 }],
|
|
169
|
+
},
|
|
170
|
+
},
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
`renderMenu` / `renderIcon` 在 snippet(Preact)内执行,请返回 **DOM 或 Preact 节点**;Vue 2 宿主不要用 `h()` 直接塞进 Shadow DOM。
|
|
174
|
+
|
|
117
175
|
## 事件
|
|
118
176
|
|
|
119
177
|
snippet 通过 DOM `CustomEvent` 把需要宿主 UI 参与的动作抛出来。
|
|
@@ -169,6 +227,24 @@ import {
|
|
|
169
227
|
|
|
170
228
|
在 snippet 中可通过 `chapter-viewer-ready` 事件拿到 `registry`,再调用这些 API。导出格式包含 `bookmarks`、`notes`、`markup`,版本常量为 `CHAPTER_ANNOTATIONS_ARCHIVE_VERSION`。
|
|
171
229
|
|
|
230
|
+
| 选项 | 说明 |
|
|
231
|
+
| --- | --- |
|
|
232
|
+
| `mode` | `replace` 清空后导入;`merge` 合并 |
|
|
233
|
+
| `ensureChapterLoaded` | 默认 true,导入 markup 前打开 PDF |
|
|
234
|
+
| `bookmarks` / `notes` / `markup` | 默认 true,可关闭某一类 |
|
|
235
|
+
| `persistNotes` / `persistBookmarks` | 导入后写回业务存储 |
|
|
236
|
+
|
|
237
|
+
示例见 `examples/chapter-viewer-demo-vue2/src/components/AnnotationsDemoBar.vue`。
|
|
238
|
+
|
|
239
|
+
## 与 React / Vue3 渲染器的区别
|
|
240
|
+
|
|
241
|
+
| 项 | React / Vue3 | chapter-snippet(本包,含 Vue 2) |
|
|
242
|
+
| --- | --- | --- |
|
|
243
|
+
| 运行时 | 框架内 `editor-engine` 组件 | Shadow DOM Web Component + Preact |
|
|
244
|
+
| 初始化 | `<ChapterPdfViewer options={...} />` | `ChapterEmbedPDF.init({ type: 'container', target, options })` |
|
|
245
|
+
| Registry | hook / ref | `chapter-viewer-ready` → `detail.registry` |
|
|
246
|
+
| Vite | `chapterViewerViteResolve()` | `chapterSnippetViteResolve()` |
|
|
247
|
+
|
|
172
248
|
## 常见问题
|
|
173
249
|
|
|
174
250
|
| 现象 | 处理 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf-editor/chapter-snippet",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/embedpdf-chapter.js",
|
|
@@ -64,14 +64,14 @@
|
|
|
64
64
|
"rollup-plugin-livereload": "^2.0.5",
|
|
65
65
|
"typescript": "^5.1.6",
|
|
66
66
|
"@embedpdf-editor/chapter-core": "0.1.0",
|
|
67
|
-
"@embedpdf-editor/chapter-
|
|
68
|
-
"@embedpdf-editor/plugin-chapter-render": "0.1.0",
|
|
67
|
+
"@embedpdf-editor/plugin-chapter-manager": "0.1.0",
|
|
69
68
|
"@embedpdf-editor/plugin-chapter-scroll": "0.1.0",
|
|
69
|
+
"@embedpdf-editor/plugin-chapter-render": "0.1.0",
|
|
70
|
+
"@embedpdf-editor/editor-engine": "0.1.0",
|
|
71
|
+
"@embedpdf-editor/chapter-viewer": "0.1.0",
|
|
70
72
|
"@embedpdf-editor/plugin-editor-toolbar": "0.1.0",
|
|
71
73
|
"@embedpdf-editor/plugin-note": "0.1.0",
|
|
72
|
-
"@embedpdf-editor/
|
|
73
|
-
"@embedpdf-editor/plugin-paragraph-bookmark": "0.1.0",
|
|
74
|
-
"@embedpdf-editor/plugin-chapter-manager": "0.1.0"
|
|
74
|
+
"@embedpdf-editor/plugin-paragraph-bookmark": "0.1.0"
|
|
75
75
|
},
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|