@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UIFilePreview/RichDocEditor/exportRDocPdf.ts

@@ -0,0 +1,374 @@
+/**
+ * 将块文档（.rdoc）导出为 PDF。
+ *
+ * 与 Markdown 导出完全独立：
+ * 1. 直接克隆编辑器真实 DOM（.bn-editor），并放在 .richdoc-editor-host 作用域下，
+ *    复用编辑器自身的 BlockNote / richdoc 样式，保证导出与编辑时所见一致；
+ * 2. 按块/行边界分页（见 pdfPagination），不会把一行文字切成两半；
+ * 3. 逐页 html2canvas 截图后写入 jsPDF，触发浏览器下载。
+ */
+
+import { buildPageSlices, measureBlocks } from '../pdfPagination';
+
+export interface ExportRDocPdfOptions {
+  /** 编辑器根 DOM（BlockNote 的 editor.domElement） */
+  editorElement: HTMLElement;
+  /** 文件名（.rdoc 后缀会被替换为 .pdf） */
+  fileName: string;
+  /** 分页进度回调（当前页 / 总页数） */
+  onProgress?: (page: number, total: number) => void;
+}
+
+// A4：210mm x 297mm，四周留白 10mm，内容区 190mm x 277mm
+const PAGE_MARGIN_MM = 10;
+const PAGE_WIDTH_MM = 210;
+const PAGE_HEIGHT_MM = 297;
+const CONTENT_WIDTH_MM = PAGE_WIDTH_MM - PAGE_MARGIN_MM * 2; // 190
+const CONTENT_HEIGHT_MM = PAGE_HEIGHT_MM - PAGE_MARGIN_MM * 2; // 277
+// 内容区 CSS 像素宽度（96dpi），离屏容器按此固定宽度排版
+const CONTENT_WIDTH_PX = Math.round((CONTENT_WIDTH_MM / 25.4) * 96); // 718
+const CONTENT_HEIGHT_PX = (CONTENT_WIDTH_PX * CONTENT_HEIGHT_MM) / CONTENT_WIDTH_MM;
+// 截图倍率，保证 PDF 清晰度
+const SCALE = 3;
+// 图片加载最长等待时间（ms），避免图片异常时永久阻塞导出
+const IMAGE_WAIT_TIMEOUT = 8000;
+
+/** 离屏容器标记，供后续定位/清理 */
+const EXPORT_ROOT_ATTR = 'data-rdoc-export-root';
+
+/**
+ * 导出时对克隆 DOM 的少量修正：
+ * 1. 解除编辑器的视口高度限制，让内容自然撑开；
+ * 2. 去掉交互痕迹（光标、占位符、侧边菜单、末尾空块）；
+ * 3. 修正行内 code 的灰底位置——html2canvas 1.4 按行盒画内联元素背景，
+ *    行高 1.5 时灰底会比文字高出一截且整体偏上，需把行高收紧到 1。
+ */
+const RDOC_EXPORT_STYLES = `
+.rdoc-export-preview {
+  background: #ffffff;
+  height: auto !important;
+  overflow: visible !important;
+}
+.rdoc-export-preview .bn-editor {
+  min-height: 0 !important;
+  height: auto !important;
+  padding-block: 0 !important;
+  outline: none !important;
+}
+/* 只影响行内 code，不能波及代码块（pre > code）的行距 */
+.rdoc-export-preview .bn-editor :not(pre) > code {
+  line-height: 1 !important;
+  vertical-align: baseline !important;
+}
+/* 修复 html2canvas 1.4 的字形测量环境（与 Markdown 导出一致）：
+   它会在 body 下临时插入一个 1x1 img 来推算基线，Tailwind preflight 的 img{display:block}
+   会把这个测量图挤出文字行盒，导致所有文字被系统性下移。 */
+body > div > img[width="1"][height="1"] {
+  display: inline !important;
+}
+.rdoc-export-preview .bn-editor pre code {
+  background: none !important;
+  color: inherit !important;
+}
+.rdoc-export-preview .bn-side-menu,
+.rdoc-export-preview .bn-drag-handle,
+.rdoc-export-preview .bn-block-actions,
+.rdoc-export-preview .bn-toolbar,
+.rdoc-export-preview .bn-suggestion-menu,
+.rdoc-export-preview .bn-file-panel,
+.rdoc-export-preview .bn-link-toolbar,
+.rdoc-export-preview .ProseMirror-cursor,
+.rdoc-export-preview .ProseMirror-separator,
+.rdoc-export-preview .bn-trailing-block {
+  display: none !important;
+}
+/* 空块不显示占位提示文字 */
+.rdoc-export-preview [data-placeholder]::before {
+  content: none !important;
+}
+/* 文件/图片块：去掉 hover 态与操作按钮的占位高度 */
+.rdoc-export-preview .bn-file-block-content-wrapper {
+  min-height: 0 !important;
+}
+`;
+
+/** 只保留排版相关的 DOM：清掉编辑态属性与交互元素 */
+const cloneEditorDom = (source: HTMLElement): HTMLElement => {
+  const clone = source.cloneNode(true) as HTMLElement;
+  clone.classList.remove('ProseMirror-focused');
+  clone.removeAttribute('contenteditable');
+  clone.removeAttribute('spellcheck');
+  clone.removeAttribute('translate');
+
+  clone
+    .querySelectorAll(
+      '.bn-side-menu, .bn-drag-handle, .bn-block-actions, .bn-toolbar, .bn-suggestion-menu, .bn-file-panel, .bn-link-toolbar',
+    )
+    .forEach((el) => el.remove());
+  clone.querySelectorAll('[contenteditable]').forEach((el) => {
+    el.removeAttribute('contenteditable');
+    el.removeAttribute('spellcheck');
+  });
+  clone.querySelectorAll('[data-placeholder]').forEach((el) => el.removeAttribute('data-placeholder'));
+  clone.querySelectorAll('[data-selected]').forEach((el) => el.removeAttribute('data-selected'));
+  clone.querySelectorAll('[data-drop-target]').forEach((el) => el.removeAttribute('data-drop-target'));
+  clone
+    .querySelectorAll('.ProseMirror-selectednode, .bn-block-selected')
+    .forEach((el) => el.classList.remove('ProseMirror-selectednode', 'bn-block-selected'));
+  return clone;
+};
+
+/**
+ * BlockNote 的项目符号/序号由 .bn-block-content::before 伪元素绘制，
+ * html2canvas 不渲染伪元素，导出会丢失列表标记。
+ * 这里把伪元素算出的文本落成真实的行内元素（块内容本身是 flex 容器，标记原本就是首个 flex item）。
+ */
+const injectListMarkers = (root: HTMLElement): void => {
+  const contents = root.querySelectorAll<HTMLElement>(
+    '.bn-block-content[data-content-type="bulletListItem"], .bn-block-content[data-content-type="numberedListItem"]',
+  );
+
+  contents.forEach((content) => {
+    if (content.querySelector(':scope > [data-rdoc-list-marker]')) return;
+
+    // 序号直接取 BlockNote 写在元素上的 data-index（比解析伪元素 content 更可靠）；
+    // 项目符号取自伪元素（层级不同分别是 • / ◦ / ▪︎）
+    let text: string;
+    if (content.dataset.contentType === 'numberedListItem') {
+      text = `${content.getAttribute('data-index') ?? content.getAttribute('data-start') ?? '1'}.`;
+    } else {
+      const raw = window.getComputedStyle(content, '::before').content;
+      const matched = raw?.match(/^"((?:\\.|[^"\\])*)"$/);
+      text = matched ? matched[1] : '•';
+    }
+
+    const pseudo = window.getComputedStyle(content, '::before');
+
+    const marker = document.createElement('span');
+    marker.setAttribute('data-rdoc-list-marker', 'true');
+    marker.textContent = text;
+    marker.style.cssText = [
+      'display:flex',
+      'align-items:center',
+      'justify-content:center',
+      'flex:0 0 auto',
+      `min-width:${pseudo.minWidth === 'auto' ? '24px' : pseudo.minWidth}`,
+      `padding-right:${pseudo.paddingRight || '4px'}`,
+      `font-size:${pseudo.fontSize}`,
+      `line-height:${pseudo.lineHeight}`,
+      `color:${pseudo.color}`,
+      'white-space:pre',
+    ].join(';');
+    content.insertBefore(marker, content.firstChild);
+  });
+};
+
+/**
+ * 复选框在 BlockNote 里是原生 input，html2canvas 只会画出一个灰方块（不画对勾）。
+ * 导出时替换成等价的小方框 + 对勾。
+ */
+const replaceCheckboxes = (root: HTMLElement): void => {
+  root
+    .querySelectorAll<HTMLInputElement>(
+      '.bn-block-content[data-content-type="checkListItem"] input[type="checkbox"]',
+    )
+    .forEach((input) => {
+      // 勾选状态以块上的 data-checked 为准（与编辑器渲染的删除线样式同源）
+      const content = input.closest<HTMLElement>('.bn-block-content[data-checked]');
+      const checked = content
+        ? content.getAttribute('data-checked') === 'true'
+        : input.checked;
+      const box = document.createElement('span');
+      box.setAttribute('data-rdoc-checkbox', checked ? 'checked' : 'unchecked');
+      box.textContent = checked ? '✓' : '';
+      box.style.cssText = [
+        'display:inline-flex',
+        'align-items:center',
+        'justify-content:center',
+        'flex:0 0 auto',
+        'box-sizing:border-box',
+        'width:12px',
+        'height:12px',
+        'margin:6px 8px 6px 4px',
+        'border:1px solid #9ca3af',
+        'border-radius:2px',
+        'font-size:10px',
+        'line-height:1',
+        'color:#1f2937',
+      ].join(';');
+      input.replaceWith(box);
+    });
+};
+
+/** 等待容器内图片加载完成（失败也放行，不阻塞导出） */
+const waitForImagesLoaded = (root: HTMLElement): Promise<void> => {
+  const images = Array.from(root.querySelectorAll('img'));
+  if (images.length === 0) return Promise.resolve();
+
+  return Promise.all(
+    images.map(
+      (img) =>
+        new Promise<void>((resolve) => {
+          if (img.complete) {
+            resolve();
+            return;
+          }
+          let settled = false;
+          const finish = () => {
+            if (settled) return;
+            settled = true;
+            window.clearTimeout(timer);
+            img.removeEventListener('load', finish);
+            img.removeEventListener('error', finish);
+            resolve();
+          };
+          const timer = window.setTimeout(finish, IMAGE_WAIT_TIMEOUT);
+          img.addEventListener('load', finish);
+          img.addEventListener('error', finish);
+        }),
+    ),
+  ).then(() => undefined);
+};
+
+/**
+ * 创建离屏渲染容器，返回 BlockNote 容器节点。
+ * 外层带 .richdoc-editor-host，使编辑器的 max-width / code 配色等样式在导出时同样生效。
+ */
+const buildOffscreenContainer = (editorElement: HTMLElement): HTMLElement => {
+  const wrapper = document.createElement('div');
+  wrapper.setAttribute(EXPORT_ROOT_ATTR, 'true');
+  wrapper.className = 'richdoc-editor-host rdoc-export-preview';
+  Object.assign(wrapper.style, {
+    position: 'fixed',
+    top: '0',
+    left: '-100000px',
+    width: `${CONTENT_WIDTH_PX}px`,
+    height: 'auto',
+    background: '#ffffff',
+    pointerEvents: 'none',
+  } as Partial<CSSStyleDeclaration>);
+
+  const styleEl = document.createElement('style');
+  styleEl.setAttribute('data-rdoc-export', 'true');
+  styleEl.textContent = RDOC_EXPORT_STYLES;
+  wrapper.appendChild(styleEl);
+
+  // 与 BlockNoteView 的真实结构一致：根节点同时带 bn-root / bn-container，
+  // 前者提供配色变量与字体，后者提供编辑器基础排版
+  const container = document.createElement('div');
+  container.className = 'bn-root bn-container';
+  container.setAttribute('data-color-scheme', 'light');
+  Object.assign(container.style, {
+    width: `${CONTENT_WIDTH_PX}px`,
+    height: 'auto',
+    background: '#ffffff',
+    overflow: 'visible',
+  } as Partial<CSSStyleDeclaration>);
+
+  // 应用级 CSS 变量定义在 App 根节点上，离屏容器挂在 body 下取不到，
+  // 这里补上富文本样式用到的变量。导出固定为浅色排版，
+  // 因此固定取浅色主题的值（暗色主题下的变量会让行内 code 底色偏深）。
+  container.style.setProperty('--color-markdown-comment', '133 133 133');
+
+  container.appendChild(cloneEditorDom(editorElement));
+  wrapper.appendChild(container);
+  document.body.appendChild(wrapper);
+  return container;
+};
+
+const toPdfFileName = (fileName: string): string => {
+  const base = fileName.replace(/\.rdoc$/i, '').trim() || 'document';
+  return `${base}.pdf`;
+};
+
+/**
+ * 将块文档导出为 PDF 并触发浏览器下载。
+ * @throws 导出失败时抛出异常，由调用方提示用户
+ */
+export const exportRDocPdf = async (options: ExportRDocPdfOptions): Promise<void> => {
+  const { editorElement, fileName, onProgress } = options;
+  if (!editorElement || editorElement.querySelectorAll('.bn-block-outer').length === 0) {
+    throw new Error('内容为空，无法导出 PDF');
+  }
+
+  const container = buildOffscreenContainer(editorElement);
+
+  try {
+    // 伪元素标记/复选框先落成真实 DOM，再参与分页测量
+    injectListMarkers(container);
+    replaceCheckboxes(container);
+
+    if (document.fonts?.ready) {
+      await document.fonts.ready.catch(() => undefined);
+    }
+    await waitForImagesLoaded(container);
+
+    // 双 raf 确保最终布局（图片尺寸、换行）生效
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+    );
+
+    // 顶层块（嵌套在其它 bn-block-outer 里的不算）：分页以块/行边界为准
+    const topLevelBlocks = Array.from(container.querySelectorAll('.bn-block-outer')).filter(
+      (el) => !el.parentElement?.closest('.bn-block-outer'),
+    );
+    const slices = buildPageSlices(measureBlocks(container, topLevelBlocks), CONTENT_HEIGHT_PX);
+    if (slices.length === 0) {
+      throw new Error('内容为空，无法导出 PDF');
+    }
+
+    // 依赖体积较大，按需动态加载
+    const [{ default: html2canvas }, { jsPDF }] = await Promise.all([
+      import('html2canvas'),
+      import('jspdf'),
+    ]);
+
+    const doc = new jsPDF({
+      orientation: 'portrait',
+      unit: 'mm',
+      format: 'a4',
+      compress: true,
+    });
+
+    // 注：html2canvas 1.4 的 Options 类型把大量字段声明为必填，
+    // y/height 在每次调用时补齐
+    const baseCanvasOptions = {
+      scale: SCALE,
+      x: 0,
+      width: CONTENT_WIDTH_PX,
+      backgroundColor: '#ffffff',
+      useCORS: true,
+      logging: false,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      windowWidth: document.documentElement.clientWidth,
+      windowHeight: document.documentElement.clientHeight,
+    };
+
+    for (let page = 0; page < slices.length; page++) {
+      const slice = slices[page];
+
+      const canvas = await html2canvas(container, {
+        ...baseCanvasOptions,
+        y: slice.y,
+        height: slice.height,
+      });
+
+      // 使用 PNG（无损）而非 JPEG：JPEG 压缩会让 1px 细线在部分 PDF 渲染器中丢失
+      const dataUrl = canvas.toDataURL('image/png');
+      const imgWidthMm = (canvas.width / SCALE / 96) * 25.4;
+      const imgHeightMm = (canvas.height / SCALE / 96) * 25.4;
+      doc.addImage(dataUrl, 'PNG', PAGE_MARGIN_MM, PAGE_MARGIN_MM, imgWidthMm, imgHeightMm);
+
+      onProgress?.(page + 1, slices.length);
+
+      if (page < slices.length - 1) {
+        doc.addPage();
+      }
+    }
+
+    doc.save(toPdfFileName(fileName));
+  } finally {
+    container.parentElement?.remove();
+  }
+};