image-edit-tools 1.0.6 → 1.0.8

package/src/utils/font-loader.ts

@@ -0,0 +1,119 @@
+import { createHash } from 'crypto';
+import { tmpdir } from 'os';
+import { join } from 'path';
+import { writeFile, access } from 'fs/promises';
+import fetch from 'node-fetch';
+
+const CACHE_DIR = tmpdir();
+const CACHE_PREFIX = 'iet-font-';
+
+/**
+ * Generates a deterministic cache file path for a given URL.
+ * Uses SHA-256 hash truncated to 16 hex chars to avoid filename collisions.
+ *
+ * @param url - The font binary URL to hash
+ * @returns Absolute path without extension in the OS temp directory
+ */
+function cacheKey(url: string): string {
+  return join(
+    CACHE_DIR,
+    CACHE_PREFIX + createHash('sha256').update(url).digest('hex').slice(0, 16),
+  );
+}
+
+/**
+ * Extracts the file extension from a URL, stripping query parameters.
+ *
+ * @param url - URL to extract extension from
+ * @returns File extension (e.g. 'woff2', 'ttf') or 'woff2' as default
+ */
+function extractExtension(url: string): string {
+  const lastSegment = url.split('/').pop() ?? '';
+  const withoutQuery = lastSegment.split('?')[0];
+  const ext = withoutQuery.split('.').pop() ?? 'woff2';
+  return ext;
+}
+
+/**
+ * Resolves a fontUrl to a local `file://` path usable by librsvg.
+ *
+ * Handles three cases:
+ * - `file://` or absolute path → returned as `file://` URI
+ * - `https://fonts.googleapis.com/css*` → fetches CSS, extracts font URL, downloads binary
+ * - Direct binary URL (`.woff`, `.woff2`, `.ttf`, `.otf`) → downloads and caches
+ *
+ * Cache is stored in `os.tmpdir()` with prefix `iet-font-`. No TTL (font files are immutable).
+ *
+ * @param fontUrl - The font URL to resolve
+ * @returns A `file://` URI pointing to a local font file
+ * @throws {Error} If network fetch fails or CSS contains no font URLs
+ *
+ * @example
+ * // Google Fonts CSS URL
+ * const path = await resolveFontUrl('https://fonts.googleapis.com/css2?family=Jua');
+ * // → 'file:///tmp/iet-font-abcdef1234567890.woff2'
+ *
+ * @example
+ * // Direct font binary URL
+ * const path = await resolveFontUrl('https://example.com/font.woff2');
+ * // → 'file:///tmp/iet-font-0123456789abcdef.woff2'
+ */
+export async function resolveFontUrl(fontUrl: string): Promise<string> {
+  // Already a local path — pass through
+  if (fontUrl.startsWith('file://')) {
+    return fontUrl;
+  }
+  if (fontUrl.startsWith('/')) {
+    return `file://${fontUrl}`;
+  }
+
+  // Determine the actual binary URL to download
+  let binaryUrl = fontUrl;
+
+  if (fontUrl.includes('fonts.googleapis.com/css')) {
+    // Google Fonts CSS endpoint — fetch CSS and extract the font binary URL
+    const cssRes = await fetch(fontUrl, {
+      headers: {
+        // Desktop UA ensures we get woff2 (most compact modern format)
+        'User-Agent':
+          'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+      },
+    });
+    if (!cssRes.ok) {
+      throw new Error(`Google Fonts CSS fetch failed: ${cssRes.status}`);
+    }
+
+    const css = await cssRes.text();
+
+    // Extract all url() references pointing to font binary files
+    const urls = [...css.matchAll(/url\((https[^)]+\.(?:woff2?|ttf|otf)[^)]*)\)/g)].map(
+      (m) => m[1],
+    );
+
+    if (urls.length === 0) {
+      throw new Error('No font URL found in Google Fonts CSS');
+    }
+
+    // Prefer woff2 for smaller file size, fallback to first match
+    binaryUrl = urls.find((u) => u.endsWith('.woff2')) ?? urls[0];
+  }
+
+  // Check cache before downloading
+  const ext = extractExtension(binaryUrl);
+  const cacheFile = `${cacheKey(binaryUrl)}.${ext}`;
+
+  try {
+    await access(cacheFile);
+    // Cache hit
+    return `file://${cacheFile}`;
+  } catch {
+    // Cache miss — download the binary
+    const res = await fetch(binaryUrl);
+    if (!res.ok) {
+      throw new Error(`Font download failed: ${res.status} ${binaryUrl}`);
+    }
+    const buf = Buffer.from(await res.arrayBuffer());
+    await writeFile(cacheFile, buf);
+    return `file://${cacheFile}`;
+  }
+}

package/tests/integration/font-url.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { addText } from '../../src/ops/add-text.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const fixture = (name: string) => readFileSync(join(__dirname, '../fixtures', name));
+
+describe('fontUrl integration', () => {
+  let samplePng: Buffer;
+
+  beforeAll(() => {
+    samplePng = fixture('sample.png');
+  });
+
+  it('renders text with Google Fonts URL (Korean)', async () => {
+    const result = await addText(samplePng, {
+      layers: [{
+        text: '한국어 테스트',
+        x: 20, y: 50,
+        fontSize: 32, color: '#000',
+        fontFamily: 'Jua',
+        fontUrl: 'https://fonts.googleapis.com/css2?family=Jua&display=swap',
+        anchor: 'top-left',
+      }]
+    });
+    expect(result.ok).toBe(true);
+  }, { timeout: 30000 });
+
+  it('renders text with direct woff2 font URL', async () => {
+    const result = await addText(samplePng, {
+      layers: [{
+        text: 'Direct Font Test',
+        x: 20, y: 50,
+        fontSize: 28, color: '#333',
+        fontFamily: 'Inter',
+        fontUrl: 'https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2',
+        anchor: 'top-left',
+      }]
+    });
+    expect(result.ok).toBe(true);
+  }, { timeout: 15000 });
+
+  it('renders spans with Google Fonts URL', async () => {
+    const result = await addText(samplePng, {
+      layers: [{
+        text: '',
+        x: 20, y: 50,
+        fontSize: 28, color: '#333',
+        fontFamily: 'Jua',
+        fontUrl: 'https://fonts.googleapis.com/css2?family=Jua&display=swap',
+        spans: [
+          { text: '캠핑장, 북스테이 등 ' },
+          { text: '다양한 주제별 숙소 추천', bold: true, color: '#1A1A1A' },
+        ]
+      }]
+    });
+    expect(result.ok).toBe(true);
+  }, { timeout: 30000 });
+});

package/tests/unit/add-text.test.ts

@@ -3,6 +3,7 @@ import { readFileSync } from 'fs'
 import { join, dirname } from 'path'
 import { fileURLToPath } from 'url'
 import { addText } from '../../src/ops/add-text.js'
+import sharp from 'sharp'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
@@ -74,4 +75,113 @@ describe('addText', () => {
     expect((result as any).bounds).toBeDefined()
     expect((result as any).bounds.contentBottom).toBeGreaterThan(50)
   })
+
+  // ── Spans tests ─────────────────────────────────────────────────────────────
+
+  describe('spans', () => {
+    it('renders mixed bold+normal spans in one line', async () => {
+      const result = await addText(sampleJpeg, {
+        layers: [{
+          text: '',
+          x: 20, y: 50, fontSize: 28, color: '#333',
+          spans: [
+            { text: 'normal ' },
+            { text: 'bold part', bold: true, color: '#000' },
+          ]
+        }]
+      })
+      expect(result.ok).toBe(true)
+      if (!result.ok) return
+      const meta = await sharp(result.data).metadata()
+      expect(meta.width).toBe(400)
+    })
+
+    it('renders italic and custom fontSize spans', async () => {
+      const result = await addText(sampleJpeg, {
+        layers: [{
+          text: '',
+          x: 20, y: 50, fontSize: 24, color: '#333',
+          spans: [
+            { text: 'normal ' },
+            { text: 'italic small', italic: true, fontSize: 16, color: '#666' },
+          ]
+        }]
+      })
+      expect(result.ok).toBe(true)
+    })
+
+    it('handles newline in span text', async () => {
+      const result = await addText(sampleJpeg, {
+        layers: [{
+          text: '',
+          x: 20, y: 50, fontSize: 24, color: '#333',
+          spans: [
+            { text: 'line one\n' },
+            { text: 'line two', bold: true },
+          ]
+        }]
+      })
+      expect(result.ok).toBe(true)
+    })
+
+    it('renders highlight background behind span', async () => {
+      const result = await addText(sampleJpeg, {
+        layers: [{
+          text: '',
+          x: 20, y: 50, fontSize: 24, color: '#333',
+          spans: [
+            { text: 'highlighted', highlight: '#FFFF00' },
+            { text: ' normal' },
+          ]
+        }]
+      })
+      expect(result.ok).toBe(true)
+    })
+
+    it('warns when maxWidth used with spans', async () => {
+      const result = await addText(sampleJpeg, {
+        layers: [{
+          text: '',
+          x: 20, y: 50, fontSize: 24, color: '#333',
+          maxWidth: 200,
+          spans: [{ text: 'hello' }]
+        }]
+      })
+      expect(result.ok).toBe(true)
+      if (!result.ok) return
+      expect(result.warnings).toContain(
+        'maxWidth is not supported with spans'
+      )
+    })
+
+    it('warns when both text and spans are provided', async () => {
+      const result = await addText(sampleJpeg, {
+        layers: [{
+          text: 'this should be ignored',
+          x: 20, y: 50, fontSize: 24, color: '#333',
+          spans: [{ text: 'spans win' }]
+        }]
+      })
+      expect(result.ok).toBe(true)
+      if (!result.ok) return
+      expect(result.warnings).toContain(
+        'text field ignored when spans is provided'
+      )
+    })
+
+    it('renders spans with background box', async () => {
+      const result = await addText(sampleJpeg, {
+        layers: [{
+          text: '',
+          x: 20, y: 50, fontSize: 24, color: '#333',
+          background: { color: '#EEE', padding: 8 },
+          spans: [
+            { text: 'with ' },
+            { text: 'background', bold: true },
+          ]
+        }]
+      })
+      expect(result.ok).toBe(true)
+    })
+  })
 })

package/tests/unit/font-loader.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { resolveFontUrl } from '../../src/utils/font-loader.js';
+
+describe('resolveFontUrl', () => {
+  it('passes through file:// URLs unchanged', async () => {
+    const result = await resolveFontUrl('file:///usr/share/fonts/truetype/noto/NotoSans.ttf');
+    expect(result).toBe('file:///usr/share/fonts/truetype/noto/NotoSans.ttf');
+  });
+
+  it('converts absolute paths to file:// URLs', async () => {
+    const result = await resolveFontUrl('/home/user/fonts/MyFont.ttf');
+    expect(result).toMatch(/^file:\/\//);
+    expect(result).toContain('MyFont.ttf');
+    expect(result).toBe('file:///home/user/fonts/MyFont.ttf');
+  });
+
+  it('downloads and caches a direct woff2 URL', async () => {
+    // Use a real small font file from Google's CDN
+    const url = 'https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2';
+    const result = await resolveFontUrl(url);
+    expect(result).toMatch(/^file:\/\//);
+    expect(result).toMatch(/\.woff2$/);
+  }, { timeout: 15000 });
+
+  it('returns cached file on second call (no re-download)', async () => {
+    const url = 'https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2';
+    const first = await resolveFontUrl(url);
+    const second = await resolveFontUrl(url);
+    // Both should return identical paths (cache hit)
+    expect(second).toBe(first);
+  }, { timeout: 15000 });
+
+  it('resolves Google Fonts CSS URL to local file', async () => {
+    const url = 'https://fonts.googleapis.com/css2?family=Inter&display=swap';
+    const result = await resolveFontUrl(url);
+    expect(result).toMatch(/^file:\/\//);
+    expect(result).toMatch(/\.woff2$/);
+  }, { timeout: 15000 });
+});