Fix missing photos and page stretching in PDF exports

package.json

@@ -19,7 +19,7 @@
     "android": "expo run:android",
     "test:lifecycle": "node --experimental-strip-types --test scripts/lifecyclePolicy.test.mjs scripts/reviewPromptService.test.mjs",
     "test:catalog": "node --experimental-strip-types --test scripts/catalogStore.test.mjs",
-    "test": "node --experimental-strip-types --test scripts/lifecyclePolicy.test.mjs scripts/reviewPromptService.test.mjs scripts/catalogStore.test.mjs scripts/backupEngine.test.mjs",
+    "test": "node --experimental-strip-types --test scripts/lifecyclePolicy.test.mjs scripts/reviewPromptService.test.mjs scripts/catalogStore.test.mjs scripts/backupEngine.test.mjs scripts/exportService.test.mjs",
     "test:backup": "node --experimental-strip-types --test scripts/backupEngine.test.mjs",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },

scripts/exportService.test.mjs

@@ -0,0 +1,168 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+import vm from 'node:vm';
+import ts from 'typescript';
+import { buildPdfHtml } from '../src/services/pdfExportHtml.ts';
+
+const source = ts.transpileModule(
+  readFileSync(new URL('../src/services/exportService.ts', import.meta.url), 'utf8'),
+  { compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 } },
+).outputText;
+
+function notebook(pages) {
+  return {
+    version: '1.0',
+    pages: pages.map((page, index) => ({
+      id: 'page-' + (index + 1),
+      title: 'Page ' + (index + 1),
+      data: '{"pages":{}}',
+      rotation: 0,
+      pageType: 'plain',
+      ...page,
+    })),
+  };
+}
+
+function harness(files = {}) {
+  const printCalls = [];
+  const batchCalls = [];
+  const fileReads = [];
+  const exports = {};
+  const fileSystem = {
+    EncodingType: { Base64: 'base64' },
+    async readAsStringAsync(uri) {
+      fileReads.push(uri);
+      if (!(uri in files)) throw new Error('File not found');
+      return files[uri];
+    },
+  };
+  const print = {
+    async printToFileAsync(options) {
+      printCalls.push(options);
+      return { uri: 'file:///export.pdf', numberOfPages: 3 };
+    },
+  };
+  const mobileInk = {
+    async batchExportPages(...args) {
+      batchCalls.push(args);
+      return args[0].map((_, index) => 'data:image/png;base64,' + (index + 1));
+    },
+  };
+  vm.runInNewContext(source, {
+    exports,
+    __DEV__: false,
+    require(name) {
+      if (name === 'expo-file-system/legacy') return fileSystem;
+      if (name === 'expo-print') return print;
+      if (name === 'expo-sharing') {
+        return { isAvailableAsync: async () => false };
+      }
+      if (name === 'react-native') return { PixelRatio: { get: () => 2 } };
+      if (name === '@mathnotes/mobile-ink') return mobileInk;
+      if (name === './pdfExportHtml') {
+        return {
+          buildPdfHtml,
+          NOTE_PAGE_WIDTH: 820,
+          NOTE_PAGE_HEIGHT: 1061,
+          PDF_PAGE_WIDTH: 612,
+          PDF_PAGE_HEIGHT: 792,
+        };
+      }
+      throw new Error('Unexpected import: ' + name);
+    },
+  });
+  return { exportNotebookAsPdf: exports.exportNotebookAsPdf, printCalls, batchCalls, fileReads };
+}
+
+test('a three-page PDF includes a photo and typed text on their original page', async () => {
+  const photo = 'file:///notes/photo.jpg';
+  const h = harness({ [photo]: 'cGhvdG8=' });
+  const data = notebook([
+    {},
+    {
+      insertedElements: [{
+        id: 'photo',
+        type: 'image',
+        x: 40,
+        y: 70,
+        width: 250,
+        height: 150,
+        rotation: 15,
+        zIndex: 2,
+        cropRect: { x: 0.1, y: 0.2, width: 0.5, height: 0.5 },
+        sourceUri: photo,
+      }],
+      textBoxes: [{
+        id: 'caption',
+        x: 45,
+        y: 240,
+        width: 300,
+        height: 100,
+        content: 'Photo <one> & two',
+        color: '#123456',
+        fontSize: 18,
+      }],
+    },
+    {},
+  ]);
+
+  const result = await h.exportNotebookAsPdf({ data, filename: 'three-page' });
+  assert.equal(result.ok, true);
+  assert.equal(h.batchCalls.length, 1);
+  assert.equal(h.batchCalls[0][0].length, 3);
+  assert.deepEqual(h.fileReads, [photo]);
+  assert.equal(h.printCalls.length, 1);
+  const { html, width, height } = h.printCalls[0];
+  assert.equal(width, 612);
+  assert.equal(height, 792);
+  assert.equal((html.match(/<section class="page">/g) ?? []).length, 3);
+  const sections = html.split('<section class="page">');
+  assert.doesNotMatch(sections[1], /data:image\/jpeg/);
+  assert.match(sections[2], /data:image\/jpeg;base64,cGhvdG8=/);
+  assert.match(sections[2], /transform:rotate\(15deg\)/);
+  assert.match(sections[2], /left:-50px;top:-60px;width:500px;height:300px/);
+  assert.match(sections[2], /Photo &lt;one&gt; &amp; two/);
+  assert.doesNotMatch(sections[3], /data:image\/jpeg/);
+});
+
+test('export fails before printing when a saved photo cannot be read', async () => {
+  const h = harness();
+  const data = notebook([{
+    insertedElements: [{
+      id: 'missing',
+      type: 'image',
+      x: 0,
+      y: 0,
+      sourceUri: 'file:///notes/missing.png',
+    }],
+  }]);
+  const result = await h.exportNotebookAsPdf({ data, filename: 'missing-photo' });
+  assert.equal(result.ok, false);
+  assert.match(result.error, /File not found/);
+  assert.equal(h.printCalls.length, 0);
+});
+
+test('page HTML preserves a uniform scale and escapes typed text', () => {
+  const html = buildPdfHtml([{
+    rasterUri: 'data:image/png;base64,QQ==',
+    images: [],
+    textBoxes: [{
+      id: 'text',
+      x: 20,
+      y: 30,
+      width: 200,
+      height: 100,
+      content: '<script>alert("x")</script>',
+      color: '#000000',
+    }],
+  }]);
+  assert.match(html, /transform:scale\(0\.995\d+/);
+  assert.match(html, /@page\{size:letter;margin:0\}/);
+  assert.match(html, /width:8\.5in;height:11in/);
+  assert.match(html, /object-fit:contain/);
+  assert.doesNotMatch(html, /object-fit:fill/);
+  assert.match(html, /&lt;script&gt;alert\(&quot;x&quot;\)&lt;\/script&gt;/);
+  assert.doesNotMatch(html, /<script>/);
+  assert.match(html, /page-break-after:always/);
+});

src/services/exportService.ts

@@ -3,9 +3,15 @@ import * as Print from 'expo-print';
 import * as Sharing from 'expo-sharing';
 import { PixelRatio } from 'react-native';
 import { batchExportPages, type SerializedNotebookData } from '@mathnotes/mobile-ink';
+import {
+  buildPdfHtml,
+  NOTE_PAGE_HEIGHT,
+  NOTE_PAGE_WIDTH,
+  PDF_PAGE_HEIGHT,
+  PDF_PAGE_WIDTH,
+  type PrintablePage,
+} from './pdfExportHtml';
 
-const PAGE_WIDTH = 820;
-const PAGE_HEIGHT = 1061;
 const EXPORT_SCALE = 1.0;
 const DEFAULT_NATIVE_BATCH_SIZE = 8;
 const LARGE_NATIVE_BATCH_SIZE = 1;
@@ -18,50 +24,6 @@ export interface ExportOptions {
   filename: string;
 }
 
-function buildHtml(pngDataUris: string[]): string {
-  const pageHtml = pngDataUris
-    .map(
-      (uri) => `
-      <div class="page"><img src="${uri}" /></div>
-    `,
-    )
-    .join('');
-  return `<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    @page { size: letter; margin: 0; }
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: #FFFFFF;
-    }
-    .page {
-      position: relative;
-      width: 100%;
-      height: 792px;
-      page-break-after: avoid;
-      page-break-inside: avoid;
-      overflow: hidden;
-    }
-    .page img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: fill;
-    }
-  </style>
-</head>
-<body>${pageHtml}</body>
-</html>`;
-}
-
 function delay(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -91,6 +53,73 @@ async function toPrintableImageUri(uri: string | undefined): Promise<string | nu
   }
 }
 
+function mimeTypeForImage(uri: string): string {
+  const extension = uri.match(/\.([a-z0-9]+)(?:[?#]|$)/i)?.[1]?.toLowerCase();
+  switch (extension) {
+    case 'jpg':
+    case 'jpeg':
+      return 'image/jpeg';
+    case 'png':
+      return 'image/png';
+    case 'gif':
+      return 'image/gif';
+    case 'webp':
+      return 'image/webp';
+    case 'heic':
+      return 'image/heic';
+    case 'heif':
+      return 'image/heif';
+    default:
+      throw new Error('Unsupported inserted image format');
+  }
+}
+
+async function embedInsertedImage(uri: string): Promise<string> {
+  if (/^data:image\/(?:png|jpeg|gif|webp|heic|heif);base64,[A-Za-z0-9+/=]+$/.test(uri)) {
+    return uri;
+  }
+  if (!uri.startsWith('file://')) {
+    throw new Error('Inserted image is not stored in a readable file');
+  }
+  const mimeType = mimeTypeForImage(uri);
+  const base64 = await FileSystem.readAsStringAsync(uri, {
+    encoding: FileSystem.EncodingType.Base64,
+  });
+  if (!base64) throw new Error('Inserted image file is empty');
+  return 'data:' + mimeType + ';base64,' + base64;
+}
+
+async function preparePrintablePages(
+  data: SerializedNotebookData,
+  rasterUris: string[],
+): Promise<PrintablePage[]> {
+  const cachedImages = new Map<string, string>();
+  const pages: PrintablePage[] = [];
+  for (let index = 0; index < data.pages.length; index += 1) {
+    const page = data.pages[index];
+    const images: PrintablePage['images'] = [];
+    for (const element of page.insertedElements ?? []) {
+      const sourceUri = element.sourceUri ?? element.renderedImageUri;
+      if (!sourceUri) {
+        if (element.type === 'image') throw new Error('Inserted image has no source');
+        continue;
+      }
+      let dataUri = cachedImages.get(sourceUri);
+      if (!dataUri) {
+        dataUri = await embedInsertedImage(sourceUri);
+        cachedImages.set(sourceUri, dataUri);
+      }
+      images.push({ element, dataUri });
+    }
+    pages.push({
+      rasterUri: rasterUris[index],
+      images,
+      textBoxes: page.textBoxes ?? [],
+    });
+  }
+  return pages;
+}
+
 async function renderNativePagesInChunks(options: {
   data: SerializedNotebookData;
   pageIndexes: number[];
@@ -199,8 +228,8 @@ export async function exportNotebookAsPdf(
   try {
     const pixelRatio = PixelRatio.get();
     const nativeScale = Number.isFinite(pixelRatio) && pixelRatio > 0 ? pixelRatio : 1;
-    const exportWidth = Math.round(PAGE_WIDTH * nativeScale);
-    const exportHeight = Math.round(PAGE_HEIGHT * nativeScale);
+    const exportWidth = Math.round(NOTE_PAGE_WIDTH * nativeScale);
+    const exportHeight = Math.round(NOTE_PAGE_HEIGHT * nativeScale);
     const pages = await collectExportImages({
       data,
       exportWidth,
@@ -217,9 +246,12 @@ export async function exportNotebookAsPdf(
       };
     }
 
-    const html = buildHtml(pages);
+    const printablePages = await preparePrintablePages(data, pages);
+    const html = buildPdfHtml(printablePages);
     const printed = await Print.printToFileAsync({
       html,
+      width: PDF_PAGE_WIDTH,
+      height: PDF_PAGE_HEIGHT,
       base64: false,
     });