@bendyline/squisq-formats 1.1.0 → 1.2.0

package/src/pdf/export.ts

@@ -22,6 +22,7 @@
 import { PDFDocument, StandardFonts, rgb, PDFFont, PDFPage } from 'pdf-lib';
 
 import type { Doc } from '@bendyline/squisq/schemas';
+import { resolveTheme } from '@bendyline/squisq/schemas';
 import { docToMarkdown } from '@bendyline/squisq/doc';
 import type {
   MarkdownDocument,
@@ -103,6 +104,12 @@ export interface PdfExportOptions {
   margin?: number;
   /** Default body font size in points. Default: 11. */
   defaultFontSize?: number;
+  /**
+   * Squisq theme ID to apply (e.g., 'documentary', 'cinematic').
+   * When set, overrides heading, text, and link colors with the theme palette.
+   * Font changes are not supported (pdf-lib uses standard 14 PDF fonts only).
+   */
+  themeId?: string;
 }
 
 /**
@@ -151,6 +158,12 @@ interface FontSet {
   monoBold: PDFFont;
 }
 
+interface RgbColor {
+  r: number;
+  g: number;
+  b: number;
+}
+
 interface ExportContext {
   pdfDoc: PDFDocument;
   fonts: FontSet;
@@ -166,6 +179,12 @@ interface ExportContext {
   contentWidth: number;
   /** Bottom margin y position. */
   bottomY: number;
+  /** Resolved colors (may be overridden by theme). */
+  colors: {
+    text: RgbColor;
+    heading: RgbColor;
+    link: RgbColor;
+  };
 }
 
 async function createExportContext(
@@ -189,6 +208,20 @@ async function createExportContext(
 
   const page = pdfDoc.addPage([pageWidth, pageHeight]);
 
+  // Resolve theme colors if themeId is set
+  let colorText = COLOR_TEXT;
+  let colorHeading = COLOR_HEADING;
+  let colorLink = COLOR_LINK;
+
+  if (options.themeId) {
+    const theme = resolveTheme(options.themeId);
+    if (theme.colors) {
+      colorText = hexToRgb(theme.colors.text) ?? COLOR_TEXT;
+      colorHeading = hexToRgb(theme.colors.primary) ?? COLOR_HEADING;
+      colorLink = hexToRgb(theme.colors.highlight || theme.colors.secondary) ?? COLOR_LINK;
+    }
+  }
+
   return {
     pdfDoc,
     fonts: { regular, bold, italic, boldItalic, mono, monoBold },
@@ -200,6 +233,7 @@ async function createExportContext(
     y: pageHeight - margin,
     contentWidth: pageWidth - 2 * margin,
     bottomY: margin,
+    colors: { text: colorText, heading: colorHeading, link: colorLink },
   };
 }
 
@@ -262,7 +296,7 @@ function flattenInlines(
           text: (node as MarkdownText).value,
           font,
           fontSize: state.code ? CODE_FONT_SIZE : ctx.fontSize,
-          color: state.code ? COLOR_CODE_TEXT : (state.color ?? COLOR_TEXT),
+          color: state.code ? COLOR_CODE_TEXT : (state.color ?? ctx.colors.text),
           link: state.link,
           strikethrough: state.strikethrough,
         });
@@ -307,7 +341,7 @@ function flattenInlines(
           ...flattenInlines(linkNode.children, ctx, {
             ...state,
             link: linkNode.url,
-            color: COLOR_LINK,
+            color: ctx.colors.link,
           }),
         );
         break;
@@ -329,7 +363,7 @@ function flattenInlines(
           text: '\n',
           font: ctx.fonts.regular,
           fontSize: ctx.fontSize,
-          color: COLOR_TEXT,
+          color: ctx.colors.text,
         });
         break;
 
@@ -361,7 +395,7 @@ function flattenInlines(
           text: `[${ref.identifier}]`,
           font: ctx.fonts.regular,
           fontSize: ctx.fontSize * 0.75,
-          color: COLOR_LINK,
+          color: ctx.colors.link,
         });
         break;
       }
@@ -376,7 +410,7 @@ function flattenInlines(
             text: fallback.value,
             font: pickFont(ctx, state.bold, state.italic),
             fontSize: ctx.fontSize,
-            color: state.color ?? COLOR_TEXT,
+            color: state.color ?? ctx.colors.text,
           });
         }
         break;
@@ -601,7 +635,7 @@ function renderHeading(node: MarkdownHeading, ctx: ExportContext, extraIndent: n
     bold: true,
     italic: false,
     code: false,
-    color: COLOR_HEADING,
+    color: ctx.colors.heading,
   });
 
   drawSpans(spans, ctx, w, x0);
@@ -704,7 +738,7 @@ function renderListItem(
     y: ctx.y - ctx.fontSize,
     size: ctx.fontSize,
     font: bulletFont,
-    color: rgb(COLOR_TEXT.r, COLOR_TEXT.g, COLOR_TEXT.b),
+    color: rgb(ctx.colors.text.r, ctx.colors.text.g, ctx.colors.text.b),
   });
 
   const textIndent = indent + bulletWidth + 4;
@@ -969,7 +1003,7 @@ function renderFootnoteDefinition(
     y: ctx.y - ctx.fontSize * 0.75,
     size: ctx.fontSize * 0.75,
     font: ctx.fonts.bold,
-    color: rgb(COLOR_LINK.r, COLOR_LINK.g, COLOR_LINK.b),
+    color: rgb(ctx.colors.link.r, ctx.colors.link.g, ctx.colors.link.b),
   });
 
   // Render children indented
@@ -1022,8 +1056,22 @@ function renderFallbackBlock(
       y: ctx.y - ctx.fontSize,
       size: ctx.fontSize,
       font: ctx.fonts.regular,
-      color: rgb(COLOR_TEXT.r, COLOR_TEXT.g, COLOR_TEXT.b),
+      color: rgb(ctx.colors.text.r, ctx.colors.text.g, ctx.colors.text.b),
     });
     ctx.y -= lineH + PARAGRAPH_SPACING;
   }
 }
+
+// ============================================
+// Color Helpers
+// ============================================
+
+function hexToRgb(hex: string): RgbColor | undefined {
+  const h = hex.startsWith('#') ? hex.slice(1) : hex;
+  if (h.length !== 6) return undefined;
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return undefined;
+  return { r: r / 255, g: g / 255, b: b / 255 };
+}

package/src/pdf/import.ts

@@ -40,8 +40,12 @@ import type {
   MarkdownStrong,
   MarkdownInlineCode,
   MarkdownLink,
+  MarkdownImage,
 } from '@bendyline/squisq/markdown';
 
+import { MemoryContentContainer } from '@bendyline/squisq/storage';
+import type { ContentContainer } from '@bendyline/squisq/storage';
+
 import {
   DEFAULT_FONT_SIZE,
   IMPORT_HEADING_MIN_SIZE,
@@ -127,6 +131,230 @@ export async function pdfToDoc(
   return markdownToDoc(markdownDoc);
 }
 
+/**
+ * Convert a PDF file to a ContentContainer with markdown + extracted images.
+ *
+ * The container will contain:
+ * - The primary markdown document (index.md)
+ * - Any embedded images under images/ (e.g., images/image1.png)
+ *
+ * Image extraction uses pdfjs-dist's operator list API and requires a browser
+ * environment (canvas is used to encode pixel data to PNG).
+ *
+ * @param data - The raw PDF file as ArrayBuffer, Uint8Array, or Blob
+ * @param options - Import options
+ * @returns A ContentContainer with the document and its media
+ */
+export async function pdfToContainer(
+  data: ArrayBuffer | Uint8Array | Blob,
+  options: PdfImportOptions = {},
+): Promise<ContentContainer> {
+  const bytes =
+    data instanceof Blob
+      ? new Uint8Array(await data.arrayBuffer())
+      : data instanceof ArrayBuffer
+        ? new Uint8Array(data)
+        : data;
+
+  const textLines = await extractTextLines(bytes);
+  const images = await extractImages(bytes);
+
+  const bodySize = options.bodyFontSize ?? detectBodyFontSize(textLines);
+
+  // If we have images, insert image references into the block list
+  let blocks = classifyLines(textLines, bodySize, options);
+  if (images.length > 0) {
+    blocks = insertImageBlocks(blocks, images);
+  }
+
+  const markdownDoc: MarkdownDocument = { type: 'document', children: blocks };
+
+  const { stringifyMarkdown } = await import('@bendyline/squisq/markdown');
+  const markdown = stringifyMarkdown(markdownDoc);
+
+  const container = new MemoryContentContainer();
+  await container.writeDocument(markdown);
+
+  for (const img of images) {
+    await container.writeFile(img.path, new Uint8Array(img.data), 'image/png');
+  }
+
+  return container;
+}
+
+/** Extracted image with position info for placement. */
+interface ExtractedImage {
+  path: string;
+  data: ArrayBuffer;
+  page: number;
+  y: number;
+}
+
+/**
+ * Extract embedded images from a PDF using pdfjs-dist operator list API.
+ * Requires browser canvas for PNG encoding.
+ */
+async function extractImages(data: Uint8Array): Promise<ExtractedImage[]> {
+  // Canvas is required for PNG encoding — skip in non-browser environments
+  if (typeof document === 'undefined') return [];
+
+  let pdfjsLib: PdfjsLib & { OPS?: Record<string, number> };
+  try {
+    pdfjsLib = (await import('pdfjs-dist/legacy/build/pdf.mjs')) as unknown as PdfjsLib & {
+      OPS?: Record<string, number>;
+    };
+  } catch {
+    pdfjsLib = (await import('pdfjs-dist')) as unknown as PdfjsLib & {
+      OPS?: Record<string, number>;
+    };
+  }
+
+  await applyWorkerConfig(pdfjsLib);
+
+  const OPS_paintImageXObject = pdfjsLib.OPS?.paintImageXObject ?? 85;
+
+  const loadingTask = pdfjsLib.getDocument({
+    data,
+    isEvalSupported: false,
+    useSystemFonts: true,
+  });
+
+  const pdf = await loadingTask.promise;
+  const images: ExtractedImage[] = [];
+  let counter = 0;
+
+  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+    const page = (await pdf.getPage(pageNum)) as PdfjsPageFull;
+    if (!page.getOperatorList) continue;
+
+    const opList = await page.getOperatorList();
+    const seen = new Set<string>();
+
+    for (let i = 0; i < opList.fnArray.length; i++) {
+      if (opList.fnArray[i] !== OPS_paintImageXObject) continue;
+
+      const imgName = opList.argsArray[i]?.[0];
+      if (!imgName || typeof imgName !== 'string' || seen.has(imgName)) continue;
+      seen.add(imgName);
+
+      try {
+        const imgData = page.objs?.get(imgName) as PdfjsImageData | null;
+        if (!imgData?.data || !imgData.width || !imgData.height) continue;
+
+        const pngData = imageDataToPng(imgData);
+        if (!pngData) continue;
+
+        counter++;
+        images.push({
+          path: `images/image${counter}.png`,
+          data: pngData,
+          page: pageNum - 1,
+          y: 0,
+        });
+      } catch {
+        // Skip images that fail to extract
+      }
+    }
+  }
+
+  return images;
+}
+
+/** Minimal pdfjs image data shape. */
+interface PdfjsImageData {
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+  kind?: number;
+}
+
+/** Extended PdfjsPage with operator list and objs access. */
+interface PdfjsPageFull extends PdfjsPage {
+  getOperatorList(): Promise<{ fnArray: number[]; argsArray: unknown[][] }>;
+  objs?: { get(name: string): unknown; has?(name: string): boolean };
+}
+
+/** Encode pdfjs image data to PNG using a canvas element. */
+function imageDataToPng(img: PdfjsImageData): ArrayBuffer | null {
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+
+    // pdfjs kind=1 is GRAYSCALE, kind=2 is RGB, kind=3 is RGBA
+    let imageData: ImageData;
+    if (img.kind === 3 || img.data.length === img.width * img.height * 4) {
+      // RGBA — use directly
+      imageData = new ImageData(new Uint8ClampedArray(img.data), img.width, img.height);
+    } else if (img.kind === 2 || img.data.length === img.width * img.height * 3) {
+      // RGB — expand to RGBA
+      const rgba = new Uint8ClampedArray(img.width * img.height * 4);
+      for (let j = 0, k = 0; j < img.data.length; j += 3, k += 4) {
+        rgba[k] = img.data[j];
+        rgba[k + 1] = img.data[j + 1];
+        rgba[k + 2] = img.data[j + 2];
+        rgba[k + 3] = 255;
+      }
+      imageData = new ImageData(rgba, img.width, img.height);
+    } else if (img.kind === 1 || img.data.length === img.width * img.height) {
+      // Grayscale — expand to RGBA
+      const rgba = new Uint8ClampedArray(img.width * img.height * 4);
+      for (let j = 0, k = 0; j < img.data.length; j++, k += 4) {
+        rgba[k] = img.data[j];
+        rgba[k + 1] = img.data[j];
+        rgba[k + 2] = img.data[j];
+        rgba[k + 3] = 255;
+      }
+      imageData = new ImageData(rgba, img.width, img.height);
+    } else {
+      return null;
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+
+    // Convert canvas to PNG ArrayBuffer
+    const dataUrl = canvas.toDataURL('image/png');
+    const base64 = dataUrl.split(',')[1];
+    const binaryStr = atob(base64);
+    const bytes = new Uint8Array(binaryStr.length);
+    for (let i = 0; i < binaryStr.length; i++) {
+      bytes[i] = binaryStr.charCodeAt(i);
+    }
+    return bytes.buffer;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Insert image reference blocks between text blocks.
+ * Places each image after the last text block on the same page (or at the end).
+ */
+function insertImageBlocks(
+  blocks: MarkdownBlockNode[],
+  images: ExtractedImage[],
+): MarkdownBlockNode[] {
+  if (images.length === 0) return blocks;
+
+  // Simple strategy: append all images at the end as paragraphs
+  const result = [...blocks];
+  for (const img of images) {
+    const imgNode: MarkdownImage = {
+      type: 'image',
+      url: img.path,
+      alt: `Image ${img.path.replace('images/image', '').replace('.png', '')}`,
+    };
+    const para: MarkdownParagraph = {
+      type: 'paragraph',
+      children: [imgNode],
+    };
+    result.push(para);
+  }
+  return result;
+}
+
 // ============================================
 // Internal Types
 // ============================================

package/src/pdf/index.ts

@@ -25,5 +25,5 @@ export { markdownDocToPdf, docToPdf } from './export.js';
 export type { PdfExportOptions } from './export.js';
 
 // Import
-export { pdfToMarkdownDoc, pdfToDoc, configurePdfWorker } from './import.js';
+export { pdfToMarkdownDoc, pdfToDoc, pdfToContainer, configurePdfWorker } from './import.js';
 export type { PdfImportOptions } from './import.js';