@polotno/pdf-export 0.1.34 → 0.1.36

package/lib/text/parser.js

@@ -0,0 +1,415 @@
+import { decode as decodeEntities } from 'html-entities';
+export function decodeHtmlEntities(text) {
+    if (!text) {
+        return text;
+    }
+    const decoded = decodeEntities(text);
+    // Don't replace tabs here - we'll handle them with expandTabsToTabStops
+    return decoded;
+}
+/**
+ * Normalize rich text HTML by converting block-level line breaks into newline characters
+ * while preserving inline formatting tags.
+ */
+export function normalizeRichText(text) {
+    if (!text) {
+        return text;
+    }
+    let normalized = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    // Convert explicit HTML break tags into newline characters
+    normalized = normalized.replace(/<br\s*\/?>/gi, '\n');
+    // Treat paragraph boundaries as newlines and drop opening tags
+    normalized = normalized.replace(/<\/p\s*>/gi, '\n');
+    normalized = normalized.replace(/<p[^>]*>/gi, '');
+    // Collapse excessive consecutive newlines produced by HTML cleanup
+    normalized = normalized.replace(/\n{3,}/g, '\n\n');
+    // Trim stray leading/trailing newlines introduced by paragraph conversion
+    normalized = normalized.replace(/^\n+/, '').replace(/\n+$/, '');
+    // Decode common HTML non-breaking space entities into their unicode counterpart
+    normalized = normalized.replace(/&(nbsp|#160|#xA0);/gi, '\u00A0');
+    // Strip zero-width characters that can create missing-glyph boxes in PDF output
+    normalized = normalized.replace(/[\u200B\u200C\u200D\uFEFF\u2060]/g, '');
+    return normalized;
+}
+/**
+ * Parse HTML text into styled segments
+ */
+export 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 = decodeHtmlEntities(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;
+}
+/**
+ * Parse HTML into tokens (text and tags)
+ */
+export 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
+            const decodedContent = decodeHtmlEntities(match[4]);
+            tokens.push({
+                type: 'text',
+                content: match[4],
+                decodedContent,
+            });
+        }
+        else {
+            // Tag
+            const isClosing = match[1] === '/';
+            const tagName = match[2].toLowerCase();
+            tokens.push({
+                type: 'tag',
+                content: match[0],
+                tagName: tagName,
+                isClosing: isClosing,
+            });
+        }
+    }
+    return tokens;
+}
+const VOID_ELEMENTS = new Set(['br']);
+function parseAttributes(raw) {
+    const attributes = {};
+    const attrRegex = /([^\s=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+    let attrMatch;
+    while ((attrMatch = attrRegex.exec(raw)) !== null) {
+        const name = attrMatch[1].toLowerCase();
+        const value = attrMatch[2] ?? attrMatch[3] ?? attrMatch[4] ?? '';
+        attributes[name] = value;
+    }
+    return attributes;
+}
+function parseSimpleHTML(html) {
+    const root = {
+        type: 'element',
+        tagName: 'root',
+        attributes: {},
+        children: [],
+    };
+    const stack = [root];
+    const tagRegex = /<\/?([a-zA-Z0-9:-]+)([^>]*)>/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = tagRegex.exec(html)) !== null) {
+        if (match.index > lastIndex) {
+            const textContent = html.slice(lastIndex, match.index);
+            if (textContent) {
+                stack[stack.length - 1].children.push({
+                    type: 'text',
+                    content: textContent,
+                });
+            }
+        }
+        const fullMatch = match[0];
+        const isClosing = fullMatch.startsWith('</');
+        const tagName = match[1].toLowerCase();
+        const attrChunk = match[2] || '';
+        if (isClosing) {
+            for (let i = stack.length - 1; i >= 0; i--) {
+                if (stack[i].tagName === tagName) {
+                    stack.length = i;
+                    break;
+                }
+            }
+        }
+        else {
+            const attributes = parseAttributes(attrChunk);
+            const elementNode = {
+                type: 'element',
+                tagName,
+                attributes,
+                children: [],
+            };
+            const parent = stack[stack.length - 1];
+            parent.children.push(elementNode);
+            const selfClosing = fullMatch.endsWith('/>') || VOID_ELEMENTS.has(tagName);
+            if (!selfClosing) {
+                stack.push(elementNode);
+            }
+        }
+        lastIndex = tagRegex.lastIndex;
+    }
+    if (lastIndex < html.length) {
+        const remaining = html.slice(lastIndex);
+        if (remaining) {
+            stack[stack.length - 1].children.push({
+                type: 'text',
+                content: remaining,
+            });
+        }
+    }
+    return root;
+}
+function serializeAttributes(attributes) {
+    const entries = Object.entries(attributes);
+    if (!entries.length) {
+        return '';
+    }
+    return (' ' +
+        entries
+            .map(([key, value]) => value === '' ? key : `${key}="${value.replace(/"/g, '&quot;')}"`)
+            .join(' '));
+}
+function shouldSkipNode(node) {
+    if (node.type === 'element' && node.tagName === 'span') {
+        const classAttr = node.attributes['class'] || node.attributes['className'] || '';
+        if (/\bql-cursor\b/.test(classAttr)) {
+            return true;
+        }
+    }
+    return false;
+}
+function serializeNodes(nodes) {
+    return nodes
+        .map((node) => {
+        if (shouldSkipNode(node)) {
+            return '';
+        }
+        if (node.type === 'text') {
+            return node.content.replace(/\uFEFF/g, '');
+        }
+        const attrs = serializeAttributes(node.attributes);
+        if (VOID_ELEMENTS.has(node.tagName)) {
+            return `<${node.tagName}${attrs}>`;
+        }
+        return `<${node.tagName}${attrs}>${serializeNodes(node.children)}</${node.tagName}>`;
+    })
+        .join('');
+}
+function getIndentLevelFromAttributes(attributes) {
+    const classAttr = attributes['class'] || attributes['className'] || '';
+    const match = classAttr.match(/ql-indent-(\d+)/);
+    return match ? parseInt(match[1], 10) : 0;
+}
+function detectIndentLevel(node) {
+    const directIndent = getIndentLevelFromAttributes(node.attributes);
+    if (directIndent > 0) {
+        return directIndent;
+    }
+    for (const child of node.children) {
+        if (child.type === 'element' &&
+            child.tagName !== 'ul' &&
+            child.tagName !== 'ol') {
+            const childIndent = detectIndentLevel(child);
+            if (childIndent > 0) {
+                return childIndent;
+            }
+        }
+    }
+    return 0;
+}
+function nodesToParagraphs(nodes, baseIndentLevel = 0) {
+    const paragraphs = [];
+    let pendingInline = [];
+    const flushInline = () => {
+        if (pendingInline.length === 0) {
+            return;
+        }
+        const html = serializeNodes(pendingInline);
+        paragraphs.push({ html });
+        pendingInline = [];
+    };
+    for (const node of nodes) {
+        if (shouldSkipNode(node)) {
+            continue;
+        }
+        if (node.type === 'text') {
+            const newlineRegex = /\n+/g;
+            let lastIndex = 0;
+            let match;
+            while ((match = newlineRegex.exec(node.content)) !== null) {
+                const chunk = node.content.slice(lastIndex, match.index);
+                if (chunk.length > 0) {
+                    pendingInline.push({
+                        type: 'text',
+                        content: chunk,
+                    });
+                }
+                flushInline();
+                const extraBreaks = match[0].length - 1;
+                for (let extra = 0; extra < extraBreaks; extra++) {
+                    paragraphs.push({ html: '' });
+                }
+                lastIndex = newlineRegex.lastIndex;
+            }
+            const rest = node.content.slice(lastIndex);
+            if (rest.length > 0) {
+                pendingInline.push({
+                    type: 'text',
+                    content: rest,
+                });
+            }
+            continue;
+        }
+        if (node.tagName === 'p') {
+            flushInline();
+            const html = serializeNodes(node.children);
+            paragraphs.push({
+                html,
+            });
+            continue;
+        }
+        if (node.tagName === 'br') {
+            flushInline();
+            paragraphs.push({ html: '' });
+            continue;
+        }
+        if (node.tagName === 'ul' || node.tagName === 'ol') {
+            flushInline();
+            paragraphs.push(...collectListParagraphs(node, baseIndentLevel));
+            continue;
+        }
+        pendingInline.push(node);
+    }
+    flushInline();
+    return paragraphs;
+}
+function collectListParagraphs(listNode, baseIndentLevel) {
+    const paragraphs = [];
+    const listIndent = baseIndentLevel + getIndentLevelFromAttributes(listNode.attributes);
+    let counter = 1;
+    for (const child of listNode.children) {
+        if (child.type !== 'element' || child.tagName !== 'li') {
+            continue;
+        }
+        const liIndentFromAttribute = getIndentLevelFromAttributes(child.attributes);
+        const detectedIndent = detectIndentLevel(child);
+        const indentLevel = liIndentFromAttribute > 0
+            ? listIndent + liIndentFromAttribute
+            : listIndent + detectedIndent;
+        const itemParagraphs = nodesToParagraphs(child.children, indentLevel);
+        let markerAssigned = false;
+        for (const paragraph of itemParagraphs) {
+            if (!paragraph.listMeta) {
+                paragraph.listMeta = {
+                    type: listNode.tagName,
+                    index: counter,
+                    indentLevel,
+                    displayMarker: !markerAssigned,
+                };
+                markerAssigned = true;
+            }
+            paragraphs.push(paragraph);
+        }
+        if (!markerAssigned) {
+            paragraphs.push({
+                html: '',
+                listMeta: {
+                    type: listNode.tagName,
+                    index: counter,
+                    indentLevel,
+                    displayMarker: true,
+                },
+            });
+        }
+        if (listNode.tagName === 'ol') {
+            counter += 1;
+        }
+    }
+    return paragraphs;
+}
+export function parseHtmlToParagraphs(html) {
+    const root = parseSimpleHTML(html);
+    return nodesToParagraphs(root.children);
+}
+/**
+ * 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
+ */
+export 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 };
+}

package/lib/text/render.d.ts

@@ -0,0 +1,8 @@
+import { TextElement, TextLine, LineRenderContext, SegmentRenderOptions, RenderSegment } from './types.js';
+export declare function drawListMarker(doc: PDFKit.PDFDocument, element: TextElement, line: TextLine, lineXOffset: number, lineYOffset: number, fonts: Record<string, boolean>, color: string, opacity: number, mode: 'fill' | 'stroke', textOptions: PDFKit.Mixins.TextOptions): Promise<void>;
+export declare function prepareLineForRendering(doc: PDFKit.PDFDocument, element: TextElement, line: TextLine, lineIndex: number, yOffset: number, lineHeightPx: number, cumulativeYOffset: number, textOptions: PDFKit.Mixins.TextOptions, fonts: Record<string, boolean>, markerColor: string, markerOpacity: number, markerMode: 'fill' | 'stroke'): Promise<LineRenderContext>;
+export declare function renderSegmentsForLine(doc: PDFKit.PDFDocument, element: TextElement, line: TextLine, renderSegments: RenderSegment[], context: LineRenderContext, textOptions: PDFKit.Mixins.TextOptions, options: SegmentRenderOptions): Promise<void>;
+export declare function renderPDFX1aStroke(doc: PDFKit.PDFDocument, element: TextElement, textLines: TextLine[], yOffset: number, lineHeightPx: number, textOptions: PDFKit.Mixins.TextOptions, fonts: Record<string, boolean>): Promise<void>;
+export declare function renderStandardStroke(doc: PDFKit.PDFDocument, element: TextElement, textLines: TextLine[], yOffset: number, lineHeightPx: number, textOptions: PDFKit.Mixins.TextOptions, fonts: Record<string, boolean>): Promise<void>;
+export declare function renderTextFill(doc: PDFKit.PDFDocument, element: TextElement, textLines: TextLine[], yOffset: number, lineHeightPx: number, textOptions: PDFKit.Mixins.TextOptions, fonts: Record<string, boolean>): Promise<void>;
+export declare function renderTextBackground(doc: PDFKit.PDFDocument, element: TextElement, verticalAlignmentOffset: number, textOptions: PDFKit.Mixins.TextOptions): void;

package/lib/text/render.js

@@ -0,0 +1,237 @@
+import { stripHtml } from 'string-strip-html';
+import { parseColor } from '../utils.js';
+import { calculateLineXOffset, calculateTextContentXOffset, calculateEffectiveWidth, buildRenderSegmentsForLine, } from './layout.js';
+import { loadFontForSegment } from './fonts.js';
+export async function drawListMarker(doc, element, line, lineXOffset, lineYOffset, fonts, color, opacity, mode, textOptions) {
+    if (!line.listMeta || !line.listMeta.showMarker) {
+        return;
+    }
+    const markerSegment = {
+        text: line.listMeta.markerText,
+    };
+    const fontKey = await loadFontForSegment(doc, markerSegment, element, fonts);
+    const previousFontSize = doc._fontSize !== undefined
+        ? doc._fontSize
+        : element.fontSize;
+    doc.font(fontKey);
+    doc.fontSize(line.listMeta.markerFontSize);
+    if (mode === 'fill') {
+        doc.fillColor(color, opacity);
+    }
+    else {
+        doc.strokeColor(color, opacity);
+    }
+    doc.text(line.listMeta.markerText, lineXOffset + line.listMeta.indentPx, lineYOffset, {
+        ...textOptions,
+        width: line.listMeta.markerBoxWidth,
+        align: line.listMeta.markerAlignment,
+        continued: false,
+        lineBreak: false,
+        underline: false,
+        characterSpacing: 0,
+        stroke: mode === 'stroke',
+        fill: mode === 'fill',
+    });
+    doc.fontSize(previousFontSize);
+}
+export async function prepareLineForRendering(doc, element, line, lineIndex, yOffset, lineHeightPx, cumulativeYOffset, textOptions, fonts, markerColor, markerOpacity, markerMode) {
+    const markerXOffset = calculateLineXOffset(element, line);
+    const lineYOffset = yOffset + cumulativeYOffset;
+    const strippedLineText = stripHtml(line.text).result;
+    const heightOfLine = line.text === ''
+        ? lineHeightPx
+        : doc.heightOfString(strippedLineText, textOptions);
+    const contentStartX = calculateTextContentXOffset(element, line);
+    const isJustify = element.align === 'justify';
+    // Disable justification if line contains tabs - tabs position content precisely,
+    // and justification would interfere by spreading spaces
+    const hasTabs = line.text.includes('\t');
+    const widthOption = isJustify && !hasTabs
+        ? Math.max(element.width - (line.listMeta ? line.listMeta.textStartPx : 0), 1)
+        : undefined;
+    // Handle list markers if needed
+    if (line.listMeta?.showMarker) {
+        await drawListMarker(doc, element, line, markerXOffset, lineYOffset, fonts, markerColor, markerOpacity, markerMode, textOptions);
+        // Restore color after drawing marker (marker may have changed the color state)
+        if (markerMode === 'fill') {
+            doc.fillColor(markerColor, markerOpacity);
+        }
+        else {
+            doc.strokeColor(markerColor, markerOpacity);
+        }
+    }
+    return {
+        markerXOffset,
+        lineYOffset,
+        contentStartX,
+        widthOption,
+        heightOfLine,
+    };
+}
+export async function renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, options) {
+    const { mode, color, opacity = element.opacity, heightOfLine, offsetX = 0, offsetY = 0, applySegmentColor, } = options;
+    const totalTextSegments = renderSegments.filter((seg) => seg.type === 'text').length;
+    let processedTextSegments = 0;
+    // Position cursor at line start (with optional offset)
+    doc.x = context.contentStartX + offsetX;
+    doc.y = context.lineYOffset + offsetY;
+    for (const renderSegment of renderSegments) {
+        if (renderSegment.type === 'tab') {
+            const advanceWidth = renderSegment.advanceWidth ?? 0;
+            doc.x = context.contentStartX + advanceWidth + offsetX;
+            continue;
+        }
+        const { segment, text = '', wordSpacing = 0, fontKey } = renderSegment;
+        processedTextSegments += 1;
+        const isLastSegment = processedTextSegments === totalTextSegments;
+        doc.font(fontKey);
+        doc.fontSize(element.fontSize);
+        // Apply color (either segment-specific or global)
+        if (applySegmentColor) {
+            applySegmentColor(segment);
+        }
+        else if (color) {
+            if (mode === 'fill') {
+                doc.fillColor(color, opacity);
+            }
+            else {
+                doc.strokeColor(color, opacity);
+            }
+        }
+        const hasUnderline = segment.underline || textOptions.underline || false;
+        const effectiveWidth = calculateEffectiveWidth(element, line, context.widthOption, hasUnderline);
+        doc.text(text, {
+            ...textOptions,
+            width: effectiveWidth,
+            height: heightOfLine,
+            continued: !isLastSegment,
+            underline: hasUnderline,
+            lineBreak: hasUnderline,
+            stroke: mode === 'stroke',
+            fill: mode === 'fill',
+            wordSpacing,
+        });
+    }
+}
+export async function renderPDFX1aStroke(doc, element, textLines, yOffset, lineHeightPx, textOptions, fonts) {
+    const strokeColor = parseColor(element.stroke).hex;
+    const strokeWidth = element.strokeWidth;
+    // Generate stroke offsets in a circle pattern (8 directions)
+    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,
+        });
+    }
+    // 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 context = await prepareLineForRendering(doc, element, line, i, yOffset, lineHeightPx, i * lineHeightPx, textOptions, fonts, strokeColor, element.opacity, 'fill');
+        const renderSegments = await buildRenderSegmentsForLine(doc, element, line.text, textOptions, fonts);
+        // Render with each offset to create stroke effect
+        for (const offset of offsets) {
+            doc.text('', context.contentStartX + offset.x, context.lineYOffset + offset.y, {
+                height: 0,
+                width: 0,
+            });
+            await renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, {
+                mode: 'fill',
+                color: strokeColor,
+                opacity: element.opacity,
+                offsetX: offset.x,
+                offsetY: offset.y,
+            });
+        }
+    }
+    doc.restore();
+    await renderTextFill(doc, element, textLines, yOffset, lineHeightPx, textOptions, fonts);
+}
+export async function renderStandardStroke(doc, element, textLines, yOffset, lineHeightPx, textOptions, fonts) {
+    const strokeParsedColor = parseColor(element.stroke);
+    doc.save();
+    doc.lineWidth(element.strokeWidth);
+    doc.lineCap('round').lineJoin('round');
+    doc.strokeColor(strokeParsedColor.hex, element.opacity);
+    let cumulativeYOffset = 0;
+    for (let i = 0; i < textLines.length; i++) {
+        const line = textLines[i];
+        const context = await prepareLineForRendering(doc, element, line, i, yOffset, lineHeightPx, cumulativeYOffset, textOptions, fonts, strokeParsedColor.hex, element.opacity, 'stroke');
+        cumulativeYOffset += context.heightOfLine;
+        const renderSegments = await buildRenderSegmentsForLine(doc, element, line.text, textOptions, fonts);
+        await renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, {
+            mode: 'stroke',
+            color: strokeParsedColor.hex,
+            opacity: element.opacity,
+            heightOfLine: context.heightOfLine,
+        });
+    }
+    doc.restore();
+}
+export 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);
+    let cumulativeYOffset = 0;
+    for (let i = 0; i < textLines.length; i++) {
+        const line = textLines[i];
+        const context = await prepareLineForRendering(doc, element, line, i, yOffset, lineHeightPx, cumulativeYOffset, textOptions, fonts, baseParsedColor.hex, baseOpacity, 'fill');
+        cumulativeYOffset += context.heightOfLine;
+        const renderSegments = await buildRenderSegmentsForLine(doc, element, line.text, textOptions, fonts);
+        // Apply segment-specific colors for rich text
+        const applySegmentColor = (segment) => {
+            const segmentParsedColor = segment.color
+                ? parseColor(segment.color)
+                : parseColor(element.fill);
+            // Fallback to element fill if segment color parsing fails
+            const segmentColor = segmentParsedColor?.hex || parseColor(element.fill).hex || '#000000';
+            // Segment alpha can be NaN (e.g. rgba(..., var(--x, 1))) -> fallback to 1
+            const a = segmentParsedColor?.rgba?.[3];
+            const segmentOpacity = Math.min(typeof a === 'number' && a >= 0 && a <= 1 ? a : 1, element.opacity, 1);
+            doc.fillColor(segmentColor, segmentOpacity);
+        };
+        await renderSegmentsForLine(doc, element, line, renderSegments, context, textOptions, {
+            mode: 'fill',
+            heightOfLine: context.heightOfLine,
+            applySegmentColor,
+        });
+    }
+}
+export 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);
+}