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 多窗口、窗口状态、文件关联、链接与代码块均完成真实环境验收。
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
export function createSvgDataUrl(svgMarkup: string) {
|
|
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
|
|
}
|
|
|
|
export interface MermaidBoxSize {
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export type MermaidOutputMode = "inline-svg" | "svg-image";
|
|
|
|
export function resolveMermaidOutputMode(
|
|
search: string
|
|
): MermaidOutputMode {
|
|
return new URLSearchParams(search).get("mermaid-output") ===
|
|
"inline-svg"
|
|
? "inline-svg"
|
|
: "svg-image";
|
|
}
|
|
|
|
export function getLockedMermaidBoxSize(
|
|
size: MermaidBoxSize
|
|
): MermaidBoxSize | undefined {
|
|
if (
|
|
!Number.isFinite(size.width) ||
|
|
!Number.isFinite(size.height) ||
|
|
size.width <= 0 ||
|
|
size.height <= 0
|
|
) {
|
|
return undefined;
|
|
}
|
|
|
|
return size;
|
|
}
|
|
|
|
export function getMermaidImageAlt(
|
|
ariaLabel: string | null,
|
|
title: string | null
|
|
) {
|
|
return ariaLabel?.trim() || title?.trim() || "Mermaid 图表";
|
|
}
|
|
|
|
export function replaceMermaidSvgWithImages(container: ParentNode) {
|
|
const diagrams = Array.from(
|
|
container.querySelectorAll<HTMLElement>(".mermaid")
|
|
);
|
|
|
|
for (const diagram of diagrams) {
|
|
const svg = diagram.querySelector<SVGSVGElement>("svg");
|
|
if (!svg) {
|
|
continue;
|
|
}
|
|
|
|
const documentWindow = svg.ownerDocument.defaultView;
|
|
const svgRect = svg.getBoundingClientRect();
|
|
const diagramRect = diagram.getBoundingClientRect();
|
|
const computedStyle = documentWindow?.getComputedStyle(svg);
|
|
const lockedSvgSize = getLockedMermaidBoxSize(svgRect);
|
|
const lockedDiagramSize = getLockedMermaidBoxSize(diagramRect);
|
|
const image = svg.ownerDocument.createElement("img");
|
|
image.className = "mermaid-svg-image";
|
|
image.alt = getMermaidImageAlt(
|
|
svg.getAttribute("aria-label"),
|
|
svg.querySelector("title")?.textContent ?? null
|
|
);
|
|
image.src = createSvgDataUrl(
|
|
new XMLSerializer().serializeToString(svg)
|
|
);
|
|
image.style.cssText = svg.style.cssText;
|
|
if (computedStyle?.display) {
|
|
image.style.setProperty("display", computedStyle.display, "important");
|
|
}
|
|
if (computedStyle?.verticalAlign) {
|
|
image.style.setProperty(
|
|
"vertical-align",
|
|
computedStyle.verticalAlign,
|
|
"important"
|
|
);
|
|
}
|
|
if (lockedSvgSize) {
|
|
const width = `${lockedSvgSize.width}px`;
|
|
const height = `${lockedSvgSize.height}px`;
|
|
image.style.setProperty("width", width, "important");
|
|
image.style.setProperty("height", height, "important");
|
|
image.style.setProperty("max-width", width, "important");
|
|
image.style.setProperty("max-height", height, "important");
|
|
image.setAttribute("width", String(lockedSvgSize.width));
|
|
image.setAttribute("height", String(lockedSvgSize.height));
|
|
}
|
|
if (lockedDiagramSize) {
|
|
diagram.style.setProperty("box-sizing", "border-box", "important");
|
|
diagram.style.setProperty(
|
|
"height",
|
|
`${lockedDiagramSize.height}px`,
|
|
"important"
|
|
);
|
|
}
|
|
svg.replaceWith(image);
|
|
}
|
|
}
|