@polotno/pdf-export 0.1.19 → 0.1.20

package/lib/compare-render.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/compare-render.js

@@ -0,0 +1,185 @@
+/*
+Compare PDFs produced by polotno-node vs this library for a subset of samples.
+
+Usage examples:
+  node lib/compare-render.js --limit 10
+  node lib/compare-render.js --glob "2021-03-*"
+  node lib/compare-render.js --start 0 --end 50
+
+Outputs:
+  - builds PDFs under `comparisons/<sample>/polotno-node.pdf` and `comparisons/<sample>/current.pdf`
+  - writes a simple byte-size diff report to `comparisons/report.json`
+*/
+import fs from 'fs';
+import path from 'path';
+import crypto from 'crypto';
+import { promisify } from 'util';
+import { createInstance } from 'polotno-node';
+import { pdfToPng } from 'pdf-to-png-converter';
+import pixelmatch from 'pixelmatch';
+import { PNG } from 'pngjs';
+import { jsonToPDF } from './index.js';
+const readFile = promisify(fs.readFile);
+const writeFile = promisify(fs.writeFile);
+const mkdir = promisify(fs.mkdir);
+const access = promisify(fs.access);
+const readdir = promisify(fs.readdir);
+const SAMPLES_DIR = path.resolve('./samples');
+const OUTPUT_DIR = path.resolve('./comparisons');
+function parseArgs() {
+    const args = process.argv.slice(2);
+    const result = {};
+    for (let i = 0; i < args.length; i += 1) {
+        const a = args[i];
+        if (a === '--limit')
+            result.limit = Number(args[++i]);
+        else if (a === '--start')
+            result.start = Number(args[++i]);
+        else if (a === '--end')
+            result.end = Number(args[++i]);
+        else if (a === '--glob')
+            result.glob = String(args[++i]);
+    }
+    return result;
+}
+async function tryEnsureDir(dir) {
+    try {
+        await access(dir, fs.constants.F_OK);
+    }
+    catch {
+        await mkdir(dir, { recursive: true });
+    }
+}
+function sha256(buf) {
+    return crypto.createHash('sha256').update(buf).digest('hex');
+}
+async function loadPolotnoJson(filePath) {
+    const buf = await readFile(filePath, 'utf8');
+    return JSON.parse(buf);
+}
+let polotnoInstance = null;
+async function getPolotnoInstance() {
+    if (polotnoInstance)
+        return polotnoInstance;
+    const key = process.env.POLOTNO_API_KEY || process.env.POLOTNO_API_TOKEN || '';
+    polotnoInstance = await createInstance({ key });
+    return polotnoInstance;
+}
+async function renderWithPolotnoNode(json, outPath) {
+    const instance = await getPolotnoInstance();
+    const base64 = await instance.jsonToPDFBase64(json, {
+        pixelRatio: 4,
+    });
+    await writeFile(outPath, Buffer.from(base64, 'base64'));
+}
+async function renderWithCurrent(json, outPath) {
+    await jsonToPDF(json, outPath, {});
+}
+function pickSampleDirs(allDirs, { start = 0, end, limit, glob }) {
+    let list = allDirs.filter((d) => !d.startsWith('.'));
+    if (glob) {
+        const re = new RegExp('^' + glob.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$');
+        list = list.filter((d) => re.test(d));
+    }
+    if (typeof start === 'number' && typeof end === 'number' && end > start) {
+        list = list.slice(start, end);
+    }
+    if (typeof limit === 'number' && limit > 0) {
+        list = list.slice(0, limit);
+    }
+    return list;
+}
+async function run() {
+    const args = parseArgs();
+    await tryEnsureDir(OUTPUT_DIR);
+    const all = await readdir(SAMPLES_DIR, { withFileTypes: true });
+    const sampleDirs = pickSampleDirs(all.filter((d) => d.isDirectory()).map((d) => d.name), args);
+    const report = [];
+    for (const dir of sampleDirs) {
+        const samplePath = path.join(SAMPLES_DIR, dir);
+        const jsonFiles = (await readdir(samplePath)).filter((f) => f.endsWith('.json') && f !== 'meta.json');
+        if (jsonFiles.length === 0)
+            continue;
+        const designPath = path.join(samplePath, jsonFiles[0]);
+        const json = await loadPolotnoJson(designPath);
+        const outDir = path.join(OUTPUT_DIR, dir);
+        await tryEnsureDir(outDir);
+        const polotnoOut = path.join(outDir, 'polotno-node.pdf');
+        const currentOut = path.join(outDir, 'current.pdf');
+        if (!fs.existsSync(polotnoOut)) {
+            // Render both
+            try {
+                await renderWithPolotnoNode(json, polotnoOut);
+            }
+            catch (e) {
+                await writeFile(path.join(outDir, 'error-polotno.txt'), String(e?.stack || e?.message || e));
+                continue;
+            }
+        }
+        try {
+            await renderWithCurrent(json, currentOut);
+        }
+        catch (e) {
+            await writeFile(path.join(outDir, 'error-current.txt'), String(e?.stack || e?.message || e));
+            continue;
+        }
+        // Rasterize first page of each PDF to PNG (via pdf-to-png-converter)
+        try {
+            const [imgA] = await pdfToPng(polotnoOut, { disableFontFace: true, viewportScale: 2, pagesToProcess: [1] });
+            const [imgB] = await pdfToPng(currentOut, { disableFontFace: true, viewportScale: 2, pagesToProcess: [1] });
+            const pngA = imgA.content;
+            const pngB = imgB.content;
+            const pngAPath = path.join(outDir, 'polotno-node.png');
+            const pngBPath = path.join(outDir, 'current.png');
+            await writeFile(pngAPath, pngA);
+            await writeFile(pngBPath, pngB);
+            // Visual diff with pixelmatch
+            const imgAParsed = PNG.sync.read(pngA);
+            const imgBParsed = PNG.sync.read(pngB);
+            const width = Math.min(imgAParsed.width, imgBParsed.width);
+            const height = Math.min(imgAParsed.height, imgBParsed.height);
+            const cropA = new PNG({ width, height });
+            const cropB = new PNG({ width, height });
+            PNG.bitblt(imgAParsed, cropA, 0, 0, width, height, 0, 0);
+            PNG.bitblt(imgBParsed, cropB, 0, 0, width, height, 0, 0);
+            const diff = new PNG({ width, height });
+            const numDiff = pixelmatch(cropA.data, cropB.data, diff.data, width, height, {
+                threshold: 0.1,
+                includeAA: true,
+            });
+            const diffPath = path.join(outDir, 'diff.png');
+            await writeFile(diffPath, PNG.sync.write(diff));
+            const a = await readFile(polotnoOut);
+            const b = await readFile(currentOut);
+            const item = {
+                sample: dir,
+                polotnoBytes: a.length,
+                currentBytes: b.length,
+                bytesDiff: Math.abs(a.length - b.length),
+                polotnoSha256: sha256(a),
+                currentSha256: sha256(b),
+                identical: numDiff === 0,
+                diffPixels: numDiff,
+                imageWidth: width,
+                imageHeight: height,
+            };
+            report.push(item);
+            await writeFile(path.join(outDir, 'summary.json'), JSON.stringify(item, null, 2));
+            console.log(`${dir}: diffPixels=${numDiff} sizeA=${item.polotnoBytes} sizeB=${item.currentBytes}`);
+        }
+        catch (e) {
+            await writeFile(path.join(outDir, 'error-diff.txt'), String(e?.stack || e?.message || e));
+        }
+    }
+    await writeFile(path.join(OUTPUT_DIR, 'report.json'), JSON.stringify(report, null, 2));
+    console.log(`Done. Compared ${report.length} samples. Report: ${path.join(OUTPUT_DIR, 'report.json')}`);
+    // Close polotno-node instance to allow process to exit
+    if (polotnoInstance) {
+        await polotnoInstance.close();
+        polotnoInstance = null;
+    }
+}
+run().catch((err) => {
+    console.error(err);
+    process.exitCode = 1;
+});

package/lib/ghostscript.js

@@ -45,7 +45,6 @@ export async function convertToPDFX1a(inputPath, outputPath, options = {}) {
             fs.writeFileSync(tempPSFile, psMetadata);
             args.splice(-1, 0, tempPSFile); // Insert before input file
         }
-        console.log('GhostScript command:', 'gs', args.join(' '));
         const gs = spawn('gs', args);
         let stderr = '';
         gs.stderr.on('data', (data) => {
@@ -60,7 +59,6 @@ export async function convertToPDFX1a(inputPath, outputPath, options = {}) {
                 }
             }
             if (code === 0) {
-                console.log('PDF/X-1a conversion successful');
                 resolve();
             }
             else {
@@ -124,7 +122,6 @@ export async function validatePDFX1a(pdfPath) {
                 resolve(true);
             }
             else {
-                console.log('PDF/X-1a validation issues:', stderr);
                 resolve(false);
             }
         });

package/lib/image.d.ts

@@ -12,8 +12,10 @@ export interface ImageElement {
     opacity?: number;
     flipX?: boolean;
     flipY?: boolean;
+    borderSize?: number;
+    borderColor?: string;
 }
 export declare function getProcessedImageKey(element: ImageElement): string;
 export declare function cropImage(src: string, element: ImageElement, cache?: ImageCache | null): Promise<string>;
 export declare function clipImage(src: string, element: ImageElement, cache?: ImageCache | null): Promise<string>;
-export declare function renderImage(doc: any, element: ImageElement, cache?: ImageCache | null): Promise<void>;
+export declare function renderImage(doc: PDFKit.PDFDocument, element: ImageElement, cache?: ImageCache | null): Promise<void>;

package/lib/image.js

@@ -1,4 +1,4 @@
-import { loadImage, PIXEL_RATIO, srcToBuffer } from './utils.js';
+import { loadImage, PIXEL_RATIO, srcToBuffer, parseColor } from './utils.js';
 import Canvas from 'canvas';
 import fs from 'fs';
 import path from 'path';
@@ -79,6 +79,16 @@ export async function clipImage(src, element, cache = null) {
     ctx.globalCompositeOperation = 'source-over';
     return canvas.toDataURL('image/png');
 }
+function applyBorder(doc, element) {
+    if (element.borderSize > 0) {
+        const borderColor = parseColor(element.borderColor).keyword || 'black';
+        doc
+            .rect(element.borderSize / 2, element.borderSize / 2, element.width - element.borderSize, element.height - element.borderSize)
+            .lineWidth(element.borderSize)
+            .strokeColor(borderColor)
+            .stroke();
+    }
+}
 export async function renderImage(doc, element, cache = null) {
     // Check if we have a cached processed version
     const cacheKey = getProcessedImageKey(element);
@@ -89,8 +99,10 @@ export async function renderImage(doc, element, cache = null) {
         doc.image(filePath, 0, 0, {
             width: element.width,
             height: element.height,
-            opacity: element.opacity,
+            // No opacity property in pdfkit
+            // opacity: element.opacity,
         });
+        applyBorder(doc, element);
         return;
     }
     let src = null;
@@ -131,7 +143,8 @@ export async function renderImage(doc, element, cache = null) {
         doc.image(filePath, 0, 0, {
             width: element.width,
             height: element.height,
-            opacity: element.opacity,
+            // opacity: element.opacity,
         });
+        applyBorder(doc, element);
     }
 }

package/lib/index.js

@@ -33,7 +33,7 @@ async function renderElement({ doc, element, fonts, attrs, cache, }) {
     }
     else if (element.type === 'text') {
         await loadFontIfNeeded(doc, element, fonts);
-        renderText(doc, element, attrs);
+        await renderText(doc, element, fonts, attrs);
     }
     else if (element.type === 'line') {
         lineToPDF(doc, element);
@@ -78,7 +78,10 @@ export async function jsonToPDF(json, pdfFileName, attrs = {}) {
                 page.background.indexOf('.png') >= 0 ||
                 page.background.indexOf('.jpg') >= 0;
             if (isURL) {
-                doc.image(await srcToBuffer(page.background, cache), 0, 0);
+                doc.image(await srcToBuffer(page.background, cache), 0, 0, {
+                    cover: [json.width, json.height],
+                    align: 'center',
+                });
             }
             else {
                 doc.rect(0, 0, json.width, json.height);

package/lib/svg.js

@@ -1,6 +1,6 @@
 import { Util } from 'konva/lib/Util.js';
-import fetch from 'node-fetch';
 import { DOMParser, XMLSerializer } from 'xmldom';
+import { fetchWithTimeout } from './utils.js';
 function isInsideDef(element) {
     while (element.parentNode) {
         if (element.nodeName === 'defs') {
@@ -85,7 +85,7 @@ export async function urlToBase64(url, cache = null) {
     if (cache && cache.buffers.has(url)) {
         return cache.buffers.get(url);
     }
-    const req = await fetch(url);
+    const req = await fetchWithTimeout(url);
     let result;
     if (req.buffer) {
         const buffer = await req.buffer();
@@ -116,7 +116,7 @@ export async function urlToString(url, cache = null) {
         svgString = Buffer.from(url.split('base64,')[1], 'base64').toString();
     }
     else {
-        const req = await fetch(url);
+        const req = await fetchWithTimeout(url);
         svgString = await req.text();
     }
     // Store in cache
@@ -175,10 +175,18 @@ export function fixSize(svgString) {
     const str = xmlSerializer.serializeToString(doc);
     return str;
 }
-const sameColors = (c1, c2) => {
-    if (!c1 || !c2) {
+const sameColors = (color1, color2) => {
+    if (!color1 || !color2) {
         return false;
     }
+    if (color2 === 'currentColor' && color1 === 'black') {
+        return true;
+    }
+    const c1 = Util.colorToRGBA(color1);
+    const c2 = Util.colorToRGBA(color2);
+    if (!c1 || !c2) {
+        return;
+    }
     return c1.r === c2.r && c1.g === c2.g && c1.b === c2.b && c1.a === c2.a;
 };
 export function replaceColors(svgString, replaceMap) {
@@ -195,7 +203,7 @@ export function replaceColors(svgString, replaceMap) {
         colors.forEach(({ prop, color }) => {
             // find matched oldColor
             const marchedOldValue = oldColors.find((oldColor) => {
-                return sameColors(Util.colorToRGBA(oldColor), Util.colorToRGBA(color));
+                return sameColors(oldColor, color);
             });
             if (!marchedOldValue) {
                 return;

package/lib/text.d.ts

@@ -2,6 +2,7 @@ export interface TextElement {
     fontFamily: string;
     fontWeight?: string;
     fontSize: number;
+    fontStyle?: string;
     fill: string;
     opacity: number;
     strokeWidth: number;
@@ -23,6 +24,16 @@ export interface RenderAttrs {
     pdfx1a?: boolean;
     textVerticalResizeEnabled?: boolean;
 }
-export declare function getGoogleFontPath(fontFamily: string, fontWeight?: string): Promise<string>;
+export interface TextSegment {
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+}
+export declare function getGoogleFontPath(fontFamily: string, fontWeight?: string, italic?: boolean): Promise<string>;
 export declare function loadFontIfNeeded(doc: any, element: TextElement, fonts: Record<string, boolean>): Promise<string>;
-export declare function renderText(doc: any, element: TextElement, attrs?: RenderAttrs): void;
+/**
+ * Main text rendering function
+ */
+export declare function renderText(doc: PDFKit.PDFDocument, element: TextElement, fonts: Record<string, boolean>, attrs?: RenderAttrs): Promise<void>;

package/lib/text.js

@@ -1,13 +1,104 @@
 import { parseColor, srcToBuffer } from './utils.js';
 import getUrls from 'get-urls';
 import fetch from 'node-fetch';
-export async function getGoogleFontPath(fontFamily, fontWeight = 'normal') {
+import { stripHtml } from "string-strip-html";
+/**
+ * Check if text contains HTML tags
+ */
+function containsHTML(text) {
+    const htmlTagRegex = /<\/?(?:strong|b|em|i|u|span)[^>]*>/i;
+    return htmlTagRegex.test(text);
+}
+/**
+ * Parse HTML text into styled segments
+ */
+function parseHTMLToSegments(html, baseElement) {
+    const segments = [];
+    const tagStack = [];
+    // Regex to match tags and text content
+    const regex = /<(\/?)(strong|b|em|i|u|span)([^>]*)>|([^<]+)/gi;
+    let match;
+    while ((match = regex.exec(html)) !== null) {
+        if (match[4]) {
+            // Text content
+            const text = match[4];
+            // Calculate current styles from tag stack
+            let bold = false;
+            let italic = false;
+            let underline = false;
+            let color = undefined;
+            for (const tag of tagStack) {
+                if (tag.tag === 'strong' || tag.tag === 'b')
+                    bold = true;
+                if (tag.tag === 'em' || tag.tag === 'i')
+                    italic = true;
+                if (tag.tag === 'u')
+                    underline = true;
+                if (tag.color)
+                    color = tag.color;
+            }
+            segments.push({
+                text,
+                bold,
+                italic,
+                underline,
+                color
+            });
+        }
+        else {
+            // Tag
+            const isClosing = match[1] === '/';
+            const tagName = match[2].toLowerCase();
+            const attributes = match[3];
+            if (isClosing) {
+                // Remove from stack
+                const index = tagStack.findIndex(t => t.tag === tagName);
+                if (index !== -1) {
+                    tagStack.splice(index, 1);
+                }
+            }
+            else {
+                // Add to stack
+                const tagData = { tag: tagName };
+                // Parse color from span style attribute
+                if (attributes) {
+                    const colorMatch = /style=["'](?:[^"']*)?color:\s*([^;"']+)/i.exec(attributes);
+                    if (colorMatch) {
+                        tagData.color = colorMatch[1].trim();
+                    }
+                }
+                tagStack.push(tagData);
+            }
+        }
+    }
+    return segments;
+}
+/**
+ * Get font weight string based on bold/italic state
+ */
+function getFontWeight(bold, italic, baseFontWeight) {
+    if (bold) {
+        return 'bold';
+    }
+    return baseFontWeight || 'normal';
+}
+/**
+ * Get font key for caching
+ */
+function getFontKey(fontFamily, bold, italic, baseFontWeight) {
+    const weight = getFontWeight(bold, italic, baseFontWeight);
+    const style = italic ? 'italic' : 'normal';
+    return `${fontFamily}-${weight}-${style}`;
+}
+export async function getGoogleFontPath(fontFamily, fontWeight = 'normal', italic = false) {
     const weight = fontWeight === 'bold' ? '700' : '400';
-    const url = `https://fonts.googleapis.com/css?family=${fontFamily}:${weight}`;
+    const italicParam = italic ? 'italic' : '';
+    const url = `https://fonts.googleapis.com/css?family=${fontFamily}:${italicParam}${weight}`;
     const req = await fetch(url);
     if (!req.ok) {
-        if (weight !== '400') {
-            return getGoogleFontPath(fontFamily, 'normal');
+        if (weight !== '400' || italic) {
+            // Fallback: try normal weight without italic
+            return getGoogleFontPath(fontFamily, 'normal', false);
         }
         throw new Error(`Failed to fetch Google font: ${fontFamily}`);
     }
@@ -21,30 +112,220 @@ export async function loadFontIfNeeded(doc, element, fonts) {
         doc.font(element.fontFamily);
         return element.fontFamily;
     }
-    const fontKey = `${element.fontFamily}-${element.fontWeight || 'normal'}`;
+    const isItalic = element.fontStyle?.indexOf('italic') >= 0;
+    const isBold = element.fontWeight == 'bold';
+    const fontKey = getFontKey(element.fontFamily, isBold, isItalic, element.fontWeight);
     if (!fonts[fontKey]) {
-        const src = await getGoogleFontPath(element.fontFamily, element.fontWeight);
+        const src = await getGoogleFontPath(element.fontFamily, element.fontWeight, isItalic);
         doc.registerFont(fontKey, await srcToBuffer(src));
         fonts[fontKey] = true;
     }
     doc.font(fontKey);
     return fontKey;
 }
-export function renderText(doc, element, attrs = {}) {
-    doc.fontSize(element.fontSize);
-    doc.fillColor(parseColor(element.fill).hex, element.opacity);
-    // Handle stroked text differently for PDF/X-1a compatibility
-    const hasStroke = element.strokeWidth > 0;
-    const isPDFX1a = attrs.pdfx1a;
-    if (hasStroke && !isPDFX1a) {
-        // Standard PDF: use PDFKit's built-in stroke support
-        doc.lineWidth(element.strokeWidth / 2);
-        doc.strokeColor(parseColor(element.stroke).hex);
-    }
-    const props = {
-        align: element.align,
-        fill: element.fill,
-        baseline: 'top',
+/**
+ * Load font for a rich text segment
+ */
+async function loadFontForSegment(doc, segment, element, fonts) {
+    const fontFamily = element.fontFamily;
+    const bold = segment.bold || element.fontWeight == 'bold' || false;
+    const italic = segment.italic || element.fontStyle?.indexOf('italic') >= 0 || false;
+    // Check if universal font is already defined
+    if (fonts[fontFamily]) {
+        doc.font(fontFamily);
+        return fontFamily;
+    }
+    const fontKey = getFontKey(fontFamily, bold, italic, element.fontWeight);
+    if (!fonts[fontKey]) {
+        const weight = getFontWeight(bold, italic, element.fontWeight);
+        const src = await getGoogleFontPath(fontFamily, weight, italic);
+        doc.registerFont(fontKey, await srcToBuffer(src));
+        fonts[fontKey] = true;
+    }
+    doc.font(fontKey);
+    return fontKey;
+}
+/**
+ * Parse HTML into tokens (text and tags)
+ */
+function tokenizeHTML(html) {
+    const tokens = [];
+    const regex = /<(\/?)(strong|b|em|i|u|span)([^>]*)>|([^<]+)/gi;
+    let match;
+    while ((match = regex.exec(html)) !== null) {
+        if (match[4]) {
+            // Text content
+            tokens.push({
+                type: 'text',
+                content: match[4]
+            });
+        }
+        else {
+            // Tag
+            const isClosing = match[1] === '/';
+            const tagName = match[2].toLowerCase();
+            tokens.push({
+                type: 'tag',
+                content: match[0],
+                tagName: tagName,
+                isClosing: isClosing
+            });
+        }
+    }
+    return tokens;
+}
+/**
+ * Reconstruct HTML from tokens while maintaining proper tag nesting across line breaks
+ * @param tokens - Array of parsed HTML tokens
+ * @param openTags - Tags that were opened in previous lines and should be carried forward
+ * @returns Reconstructed HTML string and the updated list of open tags
+ */
+function tokensToHTML(tokens, openTags) {
+    let html = '';
+    const tagStack = [...openTags]; // Clone the open tags
+    // Prepend any open tags
+    for (const tag of openTags) {
+        html += tag.fullTag;
+    }
+    // Process tokens
+    for (const token of tokens) {
+        if (token.type === 'text') {
+            html += token.content;
+        }
+        else if (token.type === 'tag') {
+            html += token.content;
+            if (token.isClosing) {
+                // Remove from stack
+                const idx = tagStack.findIndex(t => t.name === token.tagName);
+                if (idx !== -1) {
+                    tagStack.splice(idx, 1);
+                }
+            }
+            else {
+                // Add to stack
+                tagStack.push({
+                    name: token.tagName,
+                    fullTag: token.content
+                });
+            }
+        }
+    }
+    // Close any remaining open tags for this line
+    for (let i = tagStack.length - 1; i >= 0; i--) {
+        html += `</${tagStack[i].name}>`;
+    }
+    return { html, openTags: tagStack };
+}
+/**
+ * Split text into lines that fit within the element width while preserving HTML formatting
+ * Handles word wrapping and ensures HTML tags are properly opened/closed across line breaks
+ */
+function splitTextIntoLines(doc, element, props) {
+    const lines = [];
+    const paragraphs = element.text.split('\n');
+    for (const paragraph of paragraphs) {
+        // Tokenize the paragraph
+        const tokens = tokenizeHTML(paragraph);
+        // Extract plain text for width calculation
+        const plainText = tokens
+            .filter(t => t.type === 'text')
+            .map(t => t.content)
+            .join('');
+        const paragraphWidth = doc.widthOfString(plainText, props);
+        // Justify alignment using native pdfkit instruments
+        if (paragraphWidth <= element.width || element.align === 'justify') {
+            // Paragraph fits on one line
+            lines.push({ text: paragraph, width: paragraphWidth });
+        }
+        else {
+            // Need to split paragraph into multiple lines
+            let currentLine = '';
+            let currentWidth = 0;
+            let currentTokens = [];
+            let openTags = [];
+            for (const token of tokens) {
+                if (token.type === 'tag') {
+                    currentTokens.push(token);
+                    continue;
+                }
+                // Text token - split by words
+                const textWords = token.content.split(' ');
+                for (let i = 0; i < textWords.length; i++) {
+                    const word = textWords[i];
+                    const testLine = currentLine ? `${currentLine}${i > 0 ? ' ' : ''}${word}` : word;
+                    const testWidth = doc.widthOfString(testLine, props);
+                    if (testWidth <= element.width) {
+                        currentLine = testLine;
+                        currentWidth = testWidth;
+                        // Add text token (with space if not first word in token)
+                        if (i > 0 || currentTokens.length > 0) {
+                            let content = (i > 0 ? ' ' : '') + word;
+                            currentTokens.push({
+                                type: 'text',
+                                content: content
+                            });
+                        }
+                        else {
+                            currentTokens.push({
+                                type: 'text',
+                                content: word
+                            });
+                        }
+                    }
+                    else {
+                        // Line is too long, save current line and start new one
+                        if (currentLine) {
+                            const result = tokensToHTML(currentTokens, openTags);
+                            lines.push({ text: result.html, width: currentWidth });
+                            openTags = result.openTags;
+                            currentTokens = [];
+                        }
+                        currentLine = word;
+                        currentWidth = doc.widthOfString(word, props);
+                        currentTokens.push({
+                            type: 'text',
+                            content: word
+                        });
+                    }
+                }
+            }
+            // Add the last line
+            if (currentLine) {
+                const result = tokensToHTML(currentTokens, openTags);
+                lines.push({ text: result.html, width: currentWidth });
+            }
+        }
+    }
+    return lines;
+}
+/**
+ * Calculate horizontal offset for a line of text based on alignment
+ * @param element - Text element with alignment settings
+ * @param lineWidth - Width of the current line
+ * @returns X offset for positioning the line
+ */
+function calculateLineXOffset(element, lineWidth) {
+    const align = element.align;
+    if (align === 'right') {
+        return element.width - lineWidth;
+    }
+    else if (align === 'center') {
+        return (element.width - lineWidth) / 2;
+    }
+    else if (align === 'justify') {
+        // Justify alignment is handled by PDFKit's align property
+        return 0;
+    }
+    // Default: left alignment
+    return 0;
+}
+/**
+ * Calculate text rendering metrics including line height and baseline offset
+ */
+function calculateTextMetrics(doc, element) {
+    const textOptions = {
+        align: element.align === 'justify' ? 'justify' : 'left',
+        baseline: 'alphabetic',
         lineGap: 1,
         width: element.width,
         underline: element.textDecoration.indexOf('underline') >= 0,
@@ -52,106 +333,245 @@ export function renderText(doc, element, attrs = {}) {
             ? element.letterSpacing * element.fontSize
             : 0,
         lineBreak: false,
-        stroke: hasStroke && !isPDFX1a, // Only use stroke for non-PDF/X-1a
+        stroke: false,
+        fill: false
     };
-    const currentLineHeight = doc.heightOfString('A', props);
+    const currentLineHeight = doc.heightOfString('A', textOptions);
     const lineHeight = element.lineHeight * element.fontSize;
     const fontBoundingBoxAscent = (doc._font.ascender / 1000) * element.fontSize;
     const fontBoundingBoxDescent = (doc._font.descender / 1000) * element.fontSize;
-    const translateY = (fontBoundingBoxAscent - fontBoundingBoxDescent) / 2;
-    const diff = currentLineHeight - lineHeight;
-    props.lineGap = props.lineGap - diff;
-    let yOffset = 0;
-    if ((attrs.textVerticalResizeEnabled || true) && element.verticalAlign) {
-        const textHeight = doc.heightOfString(element.text, props);
-        if (element.verticalAlign === 'middle') {
-            yOffset = (element.height - textHeight) / 2;
-        }
-        else if (element.verticalAlign === 'bottom') {
-            yOffset = element.height - textHeight;
-        }
+    // Calculate baseline offset based on font metrics (similar to Konva rendering)
+    const baselineOffset = (fontBoundingBoxAscent - Math.abs(fontBoundingBoxDescent)) / 2 + lineHeight / 2;
+    // Adjust line gap to match desired line height
+    const lineHeightDiff = currentLineHeight - lineHeight;
+    textOptions.lineGap = textOptions.lineGap - lineHeightDiff;
+    const textLines = splitTextIntoLines(doc, element, textOptions);
+    return {
+        textOptions,
+        lineHeightPx: lineHeight,
+        baselineOffset,
+        textLines
+    };
+}
+/**
+ * Calculate vertical alignment offset for text
+ */
+function calculateVerticalAlignment(doc, element, textOptions) {
+    if (!element.verticalAlign || element.verticalAlign === 'top') {
+        return 0;
     }
-    for (var size = element.fontSize; size > 0; size -= 1) {
+    const strippedContent = stripHtml(element.text).result;
+    const textHeight = doc.heightOfString(strippedContent, textOptions);
+    if (element.verticalAlign === 'middle') {
+        return (element.height - textHeight) / 2;
+    }
+    else if (element.verticalAlign === 'bottom') {
+        return element.height - textHeight;
+    }
+    return 0;
+}
+/**
+ * Reduce font size to fit text within element height
+ */
+function fitTextToHeight(doc, element, textOptions) {
+    const strippedContent = stripHtml(element.text).result;
+    for (let size = element.fontSize; size > 0; size -= 1) {
         doc.fontSize(size);
-        const height = doc.heightOfString(element.text, {
-            ...props,
-        });
+        const height = doc.heightOfString(strippedContent, textOptions);
         if (height <= element.height) {
             break;
         }
     }
-    const halfLineHeight = ((element.lineHeight - 1) / 2) * element.fontSize;
-    if (element.backgroundEnabled) {
-        const backPadding = element.backgroundPadding * (element.fontSize * element.lineHeight);
-        const cornerRadius = element.backgroundCornerRadius *
-            (element.fontSize * element.lineHeight * 0.5);
-        const textWidth = doc.widthOfString(element.text, {
-            ...props,
-            width: element.width,
-        });
-        const textHeight = doc.heightOfString(element.text, {
-            ...props,
-            width: element.width,
+}
+/**
+ * Render text background box
+ */
+function renderTextBackground(doc, element, verticalAlignmentOffset, textOptions) {
+    if (!element.backgroundEnabled) {
+        return;
+    }
+    const strippedContent = stripHtml(element.text).result;
+    const padding = element.backgroundPadding * (element.fontSize * element.lineHeight);
+    const cornerRadius = element.backgroundCornerRadius * (element.fontSize * element.lineHeight * 0.5);
+    const textWidth = doc.widthOfString(strippedContent, {
+        ...textOptions,
+        width: element.width,
+    });
+    const textHeight = doc.heightOfString(strippedContent, {
+        ...textOptions,
+        width: element.width,
+    });
+    let bgX = -padding / 2;
+    let bgY = verticalAlignmentOffset - padding / 2;
+    const bgWidth = textWidth + padding;
+    const bgHeight = textHeight + padding;
+    // Adjust horizontal position based on text alignment
+    if (element.align === 'center') {
+        bgX = (element.width - textWidth) / 2 - padding / 2;
+    }
+    else if (element.align === 'right') {
+        bgX = element.width - textWidth - padding / 2;
+    }
+    doc.roundedRect(bgX, bgY, bgWidth, bgHeight, cornerRadius);
+    doc.fillColor(parseColor(element.backgroundColor).hex);
+    doc.fill();
+    doc.fillColor(parseColor(element.fill).hex, element.opacity);
+}
+/**
+ * Render text stroke using PDF/X-1a compatible method (multiple offset fills)
+ */
+function renderPDFX1aStroke(doc, element, textLines, yOffset, lineHeightPx, textOptions) {
+    const strokeColor = parseColor(element.stroke).hex;
+    const strokeWidth = element.strokeWidth;
+    const isJustify = element.align === 'justify';
+    // Generate stroke offsets in a circle pattern
+    const offsets = [];
+    for (let angle = 0; angle < 360; angle += 45) {
+        const radian = (angle * Math.PI) / 180;
+        offsets.push({
+            x: Math.cos(radian) * strokeWidth,
+            y: Math.sin(radian) * strokeWidth,
         });
-        let bgX = -backPadding / 2;
-        let bgY = -backPadding / 2;
-        let bgWidth = textWidth + backPadding;
-        let bgHeight = textHeight + backPadding;
-        if (element.align === 'center') {
-            bgX = (element.width - textWidth) / 2 - backPadding / 2;
-        }
-        else if (element.align === 'right') {
-            bgX = element.width - textWidth - backPadding / 2;
-        }
-        if (element.verticalAlign === 'middle') {
-            bgY = (element.height - textHeight) / 2 - backPadding / 2;
-        }
-        else if (element.verticalAlign === 'bottom') {
-            bgY = element.height - textHeight - backPadding / 2;
-        }
-        doc.roundedRect(bgX, bgY, bgWidth, bgHeight, cornerRadius);
-        doc.fillColor(parseColor(element.backgroundColor).hex);
-        doc.fill();
-        doc.fillColor(parseColor(element.fill).hex, element.opacity);
     }
-    // Render text with PDF/X-1a compatible stroke simulation
-    if (hasStroke && isPDFX1a) {
-        // For PDF/X-1a: simulate stroke by drawing text multiple times
-        const strokeColor = parseColor(element.stroke).hex;
-        const strokeWidth = element.strokeWidth;
-        // Draw stroke by rendering text multiple times with offsets
-        const offsets = [];
-        for (let angle = 0; angle < 360; angle += 45) {
-            const radian = (angle * Math.PI) / 180;
-            offsets.push({
-                x: Math.cos(radian) * strokeWidth,
-                y: Math.sin(radian) * strokeWidth,
-            });
-        }
-        // Draw stroke layers
-        doc.save();
-        doc.fillColor(strokeColor, element.opacity);
+    // Render stroke layer by drawing text multiple times with offsets
+    doc.save();
+    doc.fillColor(strokeColor, element.opacity);
+    for (let i = 0; i < textLines.length; i++) {
+        const line = textLines[i];
+        const lineXOffset = calculateLineXOffset(element, line.width);
+        const lineYOffset = yOffset + (i * lineHeightPx);
         for (const offset of offsets) {
-            doc.text(element.text, offset.x, yOffset + halfLineHeight + offset.y, {
-                ...props,
-                stroke: false, // Force no stroke for compatibility
-                height: element.height + element.fontSize,
+            doc.text(line.text, lineXOffset + offset.x, lineYOffset + offset.y, {
+                ...textOptions,
+                width: isJustify ? element.width : undefined,
+                stroke: false,
             });
         }
-        doc.restore();
-        // Draw fill text on top
-        doc.fillColor(parseColor(element.fill).hex, element.opacity);
-        doc.text(element.text, 0, yOffset + halfLineHeight, {
-            ...props,
-            stroke: false, // Force no stroke for compatibility
-            height: element.height + element.fontSize,
+    }
+    doc.restore();
+    // Render fill layer on top
+    doc.fillColor(parseColor(element.fill).hex, element.opacity);
+    for (let i = 0; i < textLines.length; i++) {
+        const line = textLines[i];
+        const lineXOffset = calculateLineXOffset(element, line.width);
+        const lineYOffset = yOffset + (i * lineHeightPx);
+        doc.text(line.text, lineXOffset, lineYOffset, {
+            ...textOptions,
+            width: isJustify ? element.width : undefined,
+            stroke: false,
         });
     }
-    else {
-        // Standard rendering
-        doc.text(element.text, 0, yOffset + halfLineHeight, {
-            ...props,
-            height: element.height + element.fontSize,
+}
+/**
+ * Render text stroke using standard PDF stroke
+ */
+function renderStandardStroke(doc, element, textLines, yOffset, lineHeightPx, textOptions) {
+    const isJustify = element.align === 'justify';
+    doc.save();
+    doc.lineWidth(element.strokeWidth);
+    doc.lineCap('round').lineJoin('round');
+    doc.strokeColor(parseColor(element.stroke).hex, element.opacity);
+    let cumulativeYOffset = 0;
+    for (let i = 0; i < textLines.length; i++) {
+        const line = textLines[i];
+        const lineXOffset = calculateLineXOffset(element, line.width);
+        const lineYOffset = yOffset + cumulativeYOffset;
+        const strippedLineText = stripHtml(line.text).result;
+        const heightOfLine = line.text === ''
+            ? lineHeightPx
+            : doc.heightOfString(strippedLineText, textOptions);
+        cumulativeYOffset += heightOfLine;
+        doc.text(line.text, lineXOffset, lineYOffset, {
+            ...textOptions,
+            width: isJustify ? element.width : undefined,
+            height: heightOfLine,
+            stroke: true,
+            fill: false
         });
     }
+    doc.restore();
+}
+/**
+ * Render text fill with rich text support (HTML segments)
+ */
+async function renderTextFill(doc, element, textLines, yOffset, lineHeightPx, textOptions, fonts) {
+    if (!element.fill) {
+        return;
+    }
+    const baseParsedColor = parseColor(element.fill);
+    const baseOpacity = Math.min(baseParsedColor.rgba[3] ?? 1, element.opacity, 1);
+    doc.fillColor(baseParsedColor.hex, baseOpacity);
+    const isJustify = element.align === 'justify';
+    let cumulativeYOffset = 0;
+    for (let i = 0; i < textLines.length; i++) {
+        const line = textLines[i];
+        const lineXOffset = calculateLineXOffset(element, line.width);
+        const lineYOffset = yOffset + cumulativeYOffset;
+        const strippedLineText = stripHtml(line.text).result;
+        const heightOfLine = line.text === ''
+            ? lineHeightPx
+            : doc.heightOfString(strippedLineText, textOptions);
+        cumulativeYOffset += heightOfLine;
+        // Position cursor at line start
+        doc.text('', lineXOffset, lineYOffset, { height: 0, width: 0 });
+        // Parse line into styled segments
+        const segments = parseHTMLToSegments(line.text, element);
+        // Render each segment with its own styling
+        for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
+            const segment = segments[segmentIndex];
+            const isLastSegment = segmentIndex === segments.length - 1;
+            // Load appropriate font for this segment
+            await loadFontForSegment(doc, segment, element, fonts);
+            doc.fontSize(element.fontSize);
+            // Apply segment color
+            const segmentColor = segment.color
+                ? parseColor(segment.color).hex
+                : parseColor(element.fill).hex;
+            const segmentParsedColor = segment.color
+                ? parseColor(segment.color)
+                : parseColor(element.fill);
+            const segmentOpacity = Math.min(segmentParsedColor.rgba[3] ?? 1, element.opacity, 1);
+            doc.fillColor(segmentColor, segmentOpacity);
+            // Render segment text
+            doc.text(segment.text, {
+                ...textOptions,
+                width: isJustify ? element.width : undefined,
+                height: heightOfLine,
+                continued: !isLastSegment,
+                underline: segment.underline || textOptions.underline || false,
+                lineBreak: !!segment.underline, // Workaround for pdfkit bug
+                stroke: false,
+                fill: true
+            });
+        }
+    }
+}
+/**
+ * Main text rendering function
+ */
+export async function renderText(doc, element, fonts, attrs = {}) {
+    doc.fontSize(element.fontSize);
+    const hasStroke = element.strokeWidth > 0;
+    const isPDFX1a = attrs.pdfx1a;
+    // Calculate text metrics and line positioning
+    const metrics = calculateTextMetrics(doc, element);
+    const verticalAlignmentOffset = calculateVerticalAlignment(doc, element, metrics.textOptions);
+    // Fit text to element height if needed
+    fitTextToHeight(doc, element, metrics.textOptions);
+    // Calculate final vertical offset
+    const finalYOffset = verticalAlignmentOffset + metrics.baselineOffset;
+    // Render background if enabled
+    renderTextBackground(doc, element, verticalAlignmentOffset, metrics.textOptions);
+    // Render text based on stroke and PDF/X-1a requirements
+    if (hasStroke && isPDFX1a) {
+        // PDF/X-1a mode: simulate stroke with offset fills
+        renderPDFX1aStroke(doc, element, metrics.textLines, finalYOffset, metrics.lineHeightPx, metrics.textOptions);
+    }
+    else {
+        // Standard rendering: stroke first, then fill
+        if (hasStroke) {
+            renderStandardStroke(doc, element, metrics.textLines, finalYOffset, metrics.lineHeightPx, metrics.textOptions);
+        }
+        await renderTextFill(doc, element, metrics.textLines, finalYOffset, metrics.lineHeightPx, metrics.textOptions, fonts);
+    }
 }

package/lib/utils.d.ts

@@ -1,6 +1,7 @@
 import parseColor from 'parse-color';
 export declare const DPI = 75;
 export declare const PIXEL_RATIO = 2;
+export declare function fetchWithTimeout(url: string, timeout?: number, retries?: number): Promise<any>;
 export declare function pxToPt(px: number): number;
 export interface ImageCache {
     images: Map<string, any>;

package/lib/utils.js

@@ -4,6 +4,41 @@ import Canvas from 'canvas';
 import sharp from 'sharp';
 export const DPI = 75;
 export const PIXEL_RATIO = 2;
+// Fetch with timeout and retry logic
+export async function fetchWithTimeout(url, timeout = 30000, retries = 3) {
+    for (let attempt = 1; attempt <= retries; attempt++) {
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), timeout);
+            const response = await fetch(url, {
+                signal: controller.signal,
+            });
+            clearTimeout(timeoutId);
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            return response;
+        }
+        catch (error) {
+            const isLastAttempt = attempt === retries;
+            const isAbortError = error.name === 'AbortError';
+            const isTimeoutError = error.code === 'ETIMEDOUT' || error.type === 'request-timeout';
+            if (isLastAttempt) {
+                throw new Error(`Failed to fetch ${url} after ${retries} attempts: ${error.message}`);
+            }
+            // Only retry on network/timeout errors, not on 4xx client errors
+            if (isAbortError || isTimeoutError || error.code?.startsWith('E')) {
+                console.warn(`Fetch attempt ${attempt}/${retries} failed for ${url}, retrying...`);
+                // Exponential backoff: 1s, 2s, 4s, etc.
+                await new Promise((resolve) => setTimeout(resolve, Math.pow(2, attempt - 1) * 1000));
+                continue;
+            }
+            // Don't retry on other errors (e.g., 404, 403)
+            throw error;
+        }
+    }
+    throw new Error(`Failed to fetch ${url}`);
+}
 export function pxToPt(px) {
     return (px * DPI) / 100;
 }
@@ -26,10 +61,7 @@ export async function loadImage(src, cache = null) {
     }
     else {
         try {
-            const response = await fetch(src);
-            if (!response.ok) {
-                throw new Error(`Failed to fetch image: ${src} (Status: ${response.status})`);
-            }
+            const response = await fetchWithTimeout(src);
             buffer = await response.buffer();
             const { fileTypeFromBuffer } = await import('file-type');
             const typeData = await fileTypeFromBuffer(buffer);
@@ -38,6 +70,7 @@ export async function loadImage(src, cache = null) {
             }
         }
         catch (error) {
+            console.log(error);
             throw new Error(`Failed to process image from ${src}: ${error.message}`);
         }
     }
@@ -65,10 +98,7 @@ export async function srcToBase64(src, cache = null) {
         base64 = src.split('base64,')[1];
     }
     else {
-        const res = await fetch(src);
-        if (!res.ok) {
-            throw new Error(`Failed to fetch: ${src} (Status: ${res.status})`);
-        }
+        const res = await fetchWithTimeout(src);
         const data = await res.buffer();
         base64 = data.toString('base64');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polotno/pdf-export",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Convert Polotno JSON into vector PDF",
   "type": "module",
   "main": "./lib/index.js",
@@ -14,7 +14,10 @@
   "scripts": {
     "build": "tsc",
     "test": "vitest",
-    "test:update-snapshots": "vitest -u"
+    "test:update-snapshots": "vitest -u",
+    "dev": "vite client",
+    "compare": "node lib/compare-render.js",
+    "postinstall": "patch-package"
   },
   "author": "Anton Lavrenov",
   "files": [
@@ -28,19 +31,28 @@
     "konva": "^10.0.8",
     "node-fetch": "^3.3.2",
     "parse-color": "^1.0.0",
-    "pdfkit": "^0.17.2",
     "pdf2pic": "^3.2.0",
+    "pdfkit": "^0.17.2",
     "polotno": "^2.29.5",
     "sharp": "^0.34.4",
+    "string-strip-html": "^13.5.0",
     "svg-to-pdfkit": "^0.1.8",
     "xmldom": "^0.6.0"
   },
   "devDependencies": {
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.10.0",
+    "@types/parse-color": "^1.0.3",
     "@types/pdfkit": "^0.17.3",
     "jest-image-snapshot": "^6.5.1",
+    "patch-package": "^8.0.1",
     "pdf-img-convert": "^2.0.0",
+    "pdf-to-png-converter": "^3.10.0",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
+    "polotno-node": "^2.12.30",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.3"
+    "@vitejs/plugin-react": "^5.1.0",
+    "vite": "^7.2.0",
+    "vitest": "^4.0.7"
   }
 }