SkyJourney
58087d0c7e
新增共享 Preview Engine，统一 Web 连续预览、快速分页、Playwright PDF 与 Electron PDF；实现稳定前缀复用和修改位置后的增量分页，保留媒体块按文档顺序串行回填与单次重排。 完善跨端链接与桌面文档工作流：Web 受控处理锚点和 HTTP/HTTPS 外链；Desktop 支持本地路径、file URI、系统协议、多窗口、同文件单例、Markdown 当前或新窗口打开，以及聚焦时外部文件变化提示。 统一四套内置主题名称并默认使用 Typora Github；修复连续预览双滚动条、ECharts 尺寸、PDF 本地链接、围栏代码块 Typora DOM 与重复行内样式；桌面发行链强制完整重建内嵌 Web，避免安装包携带陈旧资源。 发布 Web/Compose 与 Windows NSIS/ZIP：镜像 yixiong/md-to-pdf:v0.5.0 已健康部署；NSIS SHA-256 为 60992D1FDCA513F46346C78478537EB4159D8C0E76B41ECF3CDC25BE77707D92，ZIP SHA-256 为 D74F82293FB67126E583546CBA894569EFC9A0B1B6343FAC648CCC95F1D188D8，本机安装版已升级至 v0.5.0。 验证：全项目 238 项测试通过，类型检查、生产构建和 git diff --check 通过；Web 快速/连续/精确预览、Compose、Desktop 多窗口、窗口状态、文件关联、链接与代码块均完成真实环境验收。
93 lines
3.8 KiB
Markdown
93 lines
3.8 KiB
Markdown
# @md-to-pdf/preview-engine
|
||
|
||
Markdown PDF 导出器的共享预览与分页引擎。Web 连续/快速预览、服务端
|
||
Playwright PDF 和 Electron PDF 均通过同一套运行时完成媒体渲染、尺寸
|
||
适配与 Paged.js 分页。
|
||
|
||
## 目录结构
|
||
|
||
```text
|
||
src/
|
||
├── index.ts 公共导出入口
|
||
├── paged-document-runtime.ts 连续与分页渲染主流程
|
||
├── paged-preview.ts 分页载荷、消息协议与页面 CSS
|
||
├── continuous-preview.ts 无分页 DOM 更新与稳定节点复用
|
||
├── incremental-pagination.ts 修改边界、稳定前缀与后缀分页缓存
|
||
├── paged-table-handler.ts 跨页表格表头处理
|
||
├── media-page-backfill.ts 图片与图表按文档顺序回填
|
||
├── document-image-fit.ts Markdown 图片单页适配
|
||
├── mermaid-*.ts Mermaid 配置、渲染与尺寸适配
|
||
├── echarts-page-fit.ts ECharts 单页适配
|
||
├── diagram-page-fit.ts 图像类元素的共享几何计算
|
||
├── pdf-document-links.ts PDF 本地链接暂存编码
|
||
├── preview-styles.ts 预览/打印媒体样式转换
|
||
└── paged-render-target.ts Preview 与 PDF 运行目标
|
||
tests/ 引擎单元测试
|
||
```
|
||
|
||
## 使用方式
|
||
|
||
宿主负责提供渲染根节点和三份第三方样式，公共引擎不依赖 Vite 的
|
||
`?inline` 导入语法：
|
||
|
||
```ts
|
||
import { PagedDocumentRuntime } from "@md-to-pdf/preview-engine";
|
||
|
||
const runtime = new PagedDocumentRuntime(root, {
|
||
highlightCss,
|
||
katexCss,
|
||
echartsCss
|
||
});
|
||
|
||
const result = await runtime.render(payload, {
|
||
target: "preview",
|
||
mermaidOutput: "svg-image"
|
||
});
|
||
|
||
const continuous = await runtime.renderContinuous(payload);
|
||
```
|
||
|
||
`payload` 使用 `@md-to-pdf/core` 中的 `PagedDocumentPayload`。主题 CSS、
|
||
纸张尺寸、页边距、页眉页脚及 Markdown 功能标识都随载荷传入。
|
||
|
||
## 连续预览与增量分页
|
||
|
||
- `renderContinuous()` 不创建纸张和分页节点，只更新统一 `#write` DOM；
|
||
- 连续模式仍等待并渲染 Mermaid、ECharts、图片和字体；
|
||
- 快速分页为源块生成稳定身份，编辑后保留修改点之前的分页结果；
|
||
- 重新计算从最早受影响位置开始，后续页面串行生成；
|
||
- 缓存不参与 Playwright/Electron 的最终 PDF 权威输出。
|
||
|
||
围栏代码块遵循 Typora DOM 约定：外层 `pre.md-fences` 负责主题样式，
|
||
内部语义 `<code>` 会清除重复的行内代码背景、边框、内边距和字号缩放，
|
||
不使用 `!important`，自定义主题仍可用更具体规则覆盖。
|
||
|
||
## 媒体分页
|
||
|
||
图片、Mermaid 和 ECharts 必须与紧邻标题作为同一媒体块。引擎按 DOM
|
||
文档顺序串行处理，每个媒体元素至多回填或缩放一次。图片先按内容限宽
|
||
得到基准高度；上一页空白与媒体需求接近时，才尝试只缩放媒体主体回填，
|
||
标题始终保持自然尺寸。
|
||
|
||
## PDF 链接
|
||
|
||
`preparePdfDocumentLinks()` 仅在 PDF 目标中将本地链接编码为
|
||
`https://mdpdf.local.invalid/...`。PDF.js 注释层通过 core 解码后交给
|
||
Web/Desktop 平台处理，HTTP/HTTPS 和文档内锚点保持原始 PDF 行为。
|
||
|
||
## 设计边界
|
||
|
||
- 本包不解析 Markdown；语义 HTML 由 `@md-to-pdf/renderer` 生成。
|
||
- 本包不读取文件、不发 HTTP 请求，也不决定 Web 或 Electron 平台行为。
|
||
- 第三方展示样式由宿主注入，便于浏览器、Playwright 和 Electron 复用。
|
||
- 媒体块按文档顺序串行判断回填，每个媒体元素至多触发一次重排。
|
||
- 连续与分页模式共享媒体渲染、链接和样式契约，不维护两套引擎。
|
||
|
||
## 验证
|
||
|
||
```powershell
|
||
npm run test -w @md-to-pdf/preview-engine
|
||
npm run typecheck -w @md-to-pdf/preview-engine
|
||
npm run build -w @md-to-pdf/preview-engine
|
||
```
|