@campxdev/pdfme 1.2.2 → 1.3.0

package/dist/esm/schemas.js

@@ -1,9 +1,9 @@
-import { m as propPanel$1, p as pdfRender$2, u as uiRender$2, c as createSvgStr, d as convertForPdfLayoutProps, i as isEditable, a as addAlphaToHex, k as createErrorElm, D as DEFAULT_OPACITY, H as HEX_COLOR_PATTERN, n as getBodyWithRange, o as createSingleTable, q as getBody, f as getDefaultCellStyles, t as getColumnStylesPropPanelSchema, v as getCellPropPanelSchema, w as DEFAULT_FONT_COLOR, x as DEFAULT_CHARACTER_SPACING, y as DEFAULT_FONT_SIZE, z as DEFAULT_ALIGNMENT, A as getExtraFormatterSchema, F as Formatter, B as DEFAULT_LINE_HEIGHT, V as VERTICAL_ALIGN_MIDDLE, C as mapVerticalAlignToFlex } from './chunks/index-C7jr4GIK.js';
-export { b as builtInPlugins, g as getDynamicHeightsForTable, s as multiVariableText } from './chunks/index-C7jr4GIK.js';
-import { c as validateBarcodeInput, f as createBarCode, D as DEFAULT_BARCODE_COLOR, g as DEFAULT_BARCODE_BG_COLOR, h as DEFAULT_BARCODE_INCLUDETEXT, B as BARCODE_TYPES, r as rectangle, j as cellSchema } from './chunks/index-C4F7EwBG.js';
-export { d as dynamicBarcode, a as dynamicQrCode, b as dynamicTable, e as ellipse, i as image, l as line, s as signature, v as variableBarcodes } from './chunks/index-C4F7EwBG.js';
-import { TextCursorInput, Route, QrCode, Barcode, Table, CalendarClock, Calendar, Clock, ChevronDown, CircleDot, Circle, SquareCheck, Square } from 'lucide';
-import { E as px2mm, Z as ZOOM, r as getFallbackFontName, D as DEFAULT_FONT_NAME } from './chunks/helper-D5PPN6Bv.js';
+import { p as pdfRender$3, l as propPanel$2, u as uiRender$3, i as isEditable, m as getFontKitFont, n as buildStyledTextContainer, o as makeElementPlainTextContentEditable, c as createSvgStr, e as convertForPdfLayoutProps, d as addAlphaToHex, k as createErrorElm, D as DEFAULT_OPACITY, H as HEX_COLOR_PATTERN, q as getBodyWithRange, v as createSingleTable, w as getBody, j as getDefaultCellStyles, x as getColumnStylesPropPanelSchema, y as getCellPropPanelSchema, z as DEFAULT_FONT_COLOR, A as DEFAULT_CHARACTER_SPACING, B as DEFAULT_FONT_SIZE, C as DEFAULT_ALIGNMENT, E as getExtraFormatterSchema, F as Formatter, t as textSchema, G as DEFAULT_LINE_HEIGHT, V as VERTICAL_ALIGN_MIDDLE, I as mapVerticalAlignToFlex } from './chunks/index-D_-j4c4P.js';
+export { b as builtInPlugins, g as getDynamicHeightsForTable, s as richText, a as singleVariableText } from './chunks/index-D_-j4c4P.js';
+import { c as validateVariables, g as substituteVariables, h as createInsertVariableWidget, j as validateBarcodeInput, k as createBarCode, D as DEFAULT_BARCODE_COLOR, m as DEFAULT_BARCODE_BG_COLOR, n as DEFAULT_BARCODE_INCLUDETEXT, B as BARCODE_TYPES, r as rectangle, o as cellSchema } from './chunks/fontSizePxWidget-CbzQrSSM.js';
+export { d as dynamicBarcode, a as dynamicQrCode, b as dynamicTable, e as ellipse, f as fontSizePxWidget, i as image, l as line, s as signature, v as variableBarcodes } from './chunks/fontSizePxWidget-CbzQrSSM.js';
+import { Type, Route, QrCode, Barcode, Table, CalendarClock, Calendar, Clock, ChevronDown, CircleDot, Circle, SquareCheck, Square } from 'lucide';
+import { q as getDefaultFont, E as px2mm, Z as ZOOM, r as getFallbackFontName, D as DEFAULT_FONT_NAME } from './chunks/helper-DSxGxZ0j.js';
 import AirDatepicker from 'air-datepicker';
 import localeAr from 'air-datepicker/locale/ar';
 import localeBg from 'air-datepicker/locale/bg';
@@ -52,11 +52,470 @@ import 'uuid';
 import 'bwip-js';
 import 'zod';
 
-const textSchema = {
+const pdfRender$2 = async (arg) => {
+    const { value, schema, pageContext, ...rest } = arg;
+    // Static mode: no template text → render value directly as plain text
+    if (!schema.text) {
+        await pdfRender$3({ value, schema, ...rest });
+        return;
+    }
+    // readOnly: value is already resolved by generate.ts via replacePlaceholders
+    if (schema.readOnly) {
+        await pdfRender$3({ value, schema, ...rest });
+        return;
+    }
+    // Dynamic mode (form): substitute variables in template
+    if (!validateVariables(value, schema)) {
+        return;
+    }
+    const renderArgs = {
+        value: substituteVariables(schema.text, value || '{}', pageContext),
+        schema,
+        ...rest,
+    };
+    await pdfRender$3(renderArgs);
+};
+
+const insertVariableWidget = createInsertVariableWidget('text');
+const mapDynamicVariables = (props) => {
+    const { rootElement, changeSchemas, activeSchema } = props;
+    const mvtSchema = activeSchema;
+    const text = mvtSchema.text ?? '';
+    if (!text) {
+        rootElement.style.display = 'none';
+        return;
+    }
+    const variables = JSON.parse(mvtSchema.content || '{}');
+    const variablesChanged = updateVariablesFromText(text, variables);
+    const varNames = Object.keys(variables);
+    if (variablesChanged) {
+        changeSchemas([
+            { key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id },
+            { key: 'variables', value: varNames, schemaId: activeSchema.id },
+            { key: 'readOnly', value: varNames.length === 0, schemaId: activeSchema.id },
+        ]);
+    }
+    // No UI needed — sample data is auto-generated from variable paths
+    rootElement.style.display = 'none';
+};
+const propPanel$1 = {
+    schema: (propPanelProps) => {
+        if (typeof propPanel$2.schema !== 'function') {
+            throw new Error('Oops, is text schema no longer a function?');
+        }
+        // Safely call schema function with proper type handling
+        const parentSchema = typeof propPanel$2.schema === 'function' ? propPanel$2.schema(propPanelProps) : {};
+        return {
+            insertVariablePicker: {
+                type: 'void',
+                widget: 'insertVariableWidget',
+                bind: false,
+                span: 24,
+            },
+            '----': { type: 'void', widget: 'Divider' },
+            ...parentSchema,
+            dynamicVariables: {
+                type: 'object',
+                widget: 'mapDynamicVariables',
+                bind: false,
+                span: 0,
+            },
+        };
+    },
+    widgets: { ...(propPanel$2.widgets || {}), mapDynamicVariables, insertVariableWidget },
+    defaultSchema: {
+        ...propPanel$2.defaultSchema,
+        readOnly: false,
+        type: 'text',
+        text: 'Type Something...',
+        width: 50,
+        height: 15,
+        content: '{}',
+        variables: [],
+    },
+};
+/** Known JS globals/keywords that should NOT be treated as user-defined variables */
+const RESERVED_NAMES$1 = new Set([
+    'true', 'false', 'null', 'undefined', 'typeof', 'instanceof', 'in',
+    'void', 'delete', 'new', 'this', 'NaN', 'Infinity',
+    'Math', 'String', 'Number', 'Boolean', 'Array', 'Object', 'Date', 'JSON',
+    'isNaN', 'parseFloat', 'parseInt', 'decodeURI', 'decodeURIComponent',
+    'encodeURI', 'encodeURIComponent', 'date', 'dateTime',
+    'currentPage', 'totalPages',
+]);
+/**
+ * Extract full dot-notation paths from an expression string.
+ * E.g. "student.marks.sem1 > 80" → ["student.marks.sem1"]
+ * Handles method calls: "student.name.toUpperCase()" → ["student.name"]
+ * Skips string literals and reserved names.
+ */
+const extractDotPaths = (expr) => {
+    // Replace string literals with spaces (preserving positions for nextChar lookup)
+    const cleaned = expr.replace(/'[^']*'|"[^"]*"|`[^`]*`/g, (m) => ' '.repeat(m.length));
+    const pathRegex = /[a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*/g;
+    const paths = new Set();
+    let m;
+    while ((m = pathRegex.exec(cleaned)) !== null) {
+        let path = m[0];
+        // If followed by '(', the last segment is a method call — trim it
+        const nextChar = cleaned[m.index + path.length];
+        if (nextChar === '(') {
+            const lastDot = path.lastIndexOf('.');
+            if (lastDot !== -1) {
+                path = path.substring(0, lastDot);
+            }
+            else {
+                // Standalone function call like parseInt(...) — skip
+                continue;
+            }
+        }
+        const root = path.split('.')[0];
+        if (!RESERVED_NAMES$1.has(root))
+            paths.add(path);
+    }
+    return Array.from(paths);
+};
+/**
+ * Build a nested default object from dot-paths.
+ * E.g. ["student.name", "student.marks.sem1"] →
+ *   { name: "NAME", marks: { sem1: "SEM1" } }
+ * Merges into an existing object, only adding missing leaves.
+ * Returns true if anything was added.
+ */
+const buildNestedDefault = (obj, paths) => {
+    let added = false;
+    for (const path of paths) {
+        const parts = path.split('.');
+        if (parts.length <= 1)
+            continue; // no nested parts
+        let current = obj;
+        for (let i = 1; i < parts.length - 1; i++) {
+            if (!(parts[i] in current) || typeof current[parts[i]] !== 'object' || current[parts[i]] === null) {
+                current[parts[i]] = {};
+                added = true;
+            }
+            current = current[parts[i]];
+        }
+        const leaf = parts[parts.length - 1];
+        if (!(leaf in current)) {
+            current[leaf] = path.replace(/\./g, '_').toUpperCase();
+            added = true;
+        }
+    }
+    return added;
+};
+const updateVariablesFromText = (text, variables) => {
+    // Find all {...} blocks and extract dot-notation paths from each
+    const blockRegex = /\{([^{}]+)\}/g;
+    const allPaths = new Set();
+    let blockMatch;
+    while ((blockMatch = blockRegex.exec(text)) !== null) {
+        for (const path of extractDotPaths(blockMatch[1])) {
+            allPaths.add(path);
+        }
+    }
+    // Group paths by root identifier
+    const rootToPaths = new Map();
+    for (const path of allPaths) {
+        const root = path.split('.')[0];
+        if (!rootToPaths.has(root))
+            rootToPaths.set(root, []);
+        rootToPaths.get(root).push(path);
+    }
+    const allRoots = new Set(rootToPaths.keys());
+    let changed = false;
+    for (const [root, paths] of rootToPaths) {
+        const hasNested = paths.some((p) => p.includes('.'));
+        if (hasNested) {
+            // Parse existing value or start fresh
+            let obj = {};
+            if (root in variables) {
+                try {
+                    const parsed = JSON.parse(variables[root]);
+                    if (typeof parsed === 'object' && parsed !== null) {
+                        obj = parsed;
+                    }
+                }
+                catch {
+                    /* not JSON, will rebuild */
+                }
+            }
+            const added = buildNestedDefault(obj, paths);
+            if (!(root in variables) || added) {
+                variables[root] = JSON.stringify(obj);
+                changed = true;
+            }
+        }
+        else {
+            if (!(root in variables)) {
+                variables[root] = root.toUpperCase();
+                changed = true;
+            }
+        }
+    }
+    // Remove variables whose root is no longer referenced
+    for (const varName of Object.keys(variables)) {
+        if (!allRoots.has(varName)) {
+            delete variables[varName];
+            changed = true;
+        }
+    }
+    return changed;
+};
+
+const uiRender$2 = async (arg) => {
+    const { value, schema, rootElement, mode, onChange, pageContext, ...rest } = arg;
+    // Static mode: no template text → delegate to plain text behavior
+    if (!schema.text) {
+        await uiRender$3(arg);
+        return;
+    }
+    // Dynamic mode: template with optional variables
+    let text = schema.text;
+    let numVariables = (schema.variables || []).length;
+    if (mode === 'form' && numVariables > 0) {
+        await formUiRender(arg);
+        return;
+    }
+    await uiRender$3({
+        value: isEditable(mode, schema) ? text : substituteVariables(text, value, pageContext),
+        schema,
+        mode: mode === 'form' ? 'viewer' : mode, // if no variables for form it's just a viewer
+        rootElement,
+        onChange: (arg) => {
+            if (!Array.isArray(arg)) {
+                if (onChange) {
+                    onChange({ key: 'text', value: arg.value });
+                }
+            }
+            else {
+                throw new Error('onChange is not an array, the parent text plugin has changed...');
+            }
+        },
+        ...rest,
+    });
+    const textBlock = rootElement.querySelector('#text-' + String(schema.id));
+    if (!textBlock) {
+        throw new Error('Text block not found. Ensure the text block has an id of "text-" + schema.id');
+    }
+    if (mode === 'designer') {
+        textBlock.addEventListener('keyup', (event) => {
+            text = textBlock.textContent || '';
+            if (keyPressShouldBeChecked(event)) {
+                const newNumVariables = countUniqueVariableNames(text);
+                if (numVariables !== newNumVariables) {
+                    if (onChange) {
+                        onChange({ key: 'text', value: text });
+                    }
+                    numVariables = newNumVariables;
+                }
+            }
+        });
+    }
+};
+/** Re-evaluate all expression spans inside a container using current variable values */
+const refreshExpressionSpans = (container, variables, pageCtx) => {
+    container.querySelectorAll('[data-expr]').forEach((span) => {
+        const expr = span.getAttribute('data-expr');
+        span.textContent = substituteVariables(`{${expr}}`, variables, pageCtx);
+    });
+};
+const formUiRender = async (arg) => {
+    const { value, schema, rootElement, onChange, stopEditing, theme, _cache, options, pageContext } = arg;
+    const rawText = schema.text;
+    if (rootElement.parentElement) {
+        // remove the outline for the whole schema, we'll apply outlines on each individual variable field instead
+        rootElement.parentElement.style.outline = '';
+    }
+    const variables = value
+        ? JSON.parse(value) || {}
+        : {};
+    const substitutedText = substituteVariables(rawText, variables, pageContext);
+    const font = options?.font || getDefaultFont();
+    const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
+    const textBlock = buildStyledTextContainer(arg, fontKitFont, substitutedText);
+    // Tokenize rawText into static text, simple-identifier variables (editable), and
+    // complex expressions (evaluated, static). This supports both {name} and {price * 1.1}.
+    const tokens = tokenizeTemplate(rawText, variables, pageContext);
+    // Find variables that have inline editable spans (standalone {var} tokens)
+    const inlineVarNames = new Set(tokens.filter((t) => t.type === 'simpleVar')
+        .map(t => t.name));
+    // Variables that only appear inside expressions — need separate input fields
+    const expressionOnlyVars = (schema.variables || []).filter(v => !inlineVarNames.has(v));
+    if (expressionOnlyVars.length > 0) {
+        const varSection = document.createElement('div');
+        Object.assign(varSection.style, {
+            width: '100%',
+            padding: '2px 4px',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '4px',
+            marginBottom: '2px',
+        });
+        for (const varName of expressionOnlyVars) {
+            const row = document.createElement('div');
+            Object.assign(row.style, { display: 'flex', alignItems: 'center', gap: '2px' });
+            const label = document.createElement('label');
+            label.textContent = varName + ':';
+            Object.assign(label.style, {
+                fontSize: '9px', whiteSpace: 'nowrap', color: theme.colorText,
+            });
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.value = variables[varName] ?? '';
+            Object.assign(input.style, {
+                width: '60px',
+                fontSize: '9px',
+                border: `1px dashed ${theme.colorPrimary}`,
+                borderRadius: '2px',
+                padding: '1px 3px',
+                outline: 'none',
+            });
+            input.addEventListener('input', (e) => {
+                variables[varName] = e.target.value;
+                if (onChange)
+                    onChange({ key: 'content', value: JSON.stringify(variables) });
+                refreshExpressionSpans(textBlock, variables, pageContext);
+            });
+            row.appendChild(label);
+            row.appendChild(input);
+            varSection.appendChild(row);
+        }
+        rootElement.insertBefore(varSection, textBlock);
+    }
+    for (const token of tokens) {
+        if (token.type === 'text') {
+            const span = document.createElement('span');
+            span.style.letterSpacing = 'inherit';
+            span.textContent = token.text;
+            textBlock.appendChild(span);
+        }
+        else if (token.type === 'simpleVar') {
+            const varName = token.name;
+            const span = document.createElement('span');
+            span.style.outline = `${theme.colorPrimary} dashed 1px`;
+            makeElementPlainTextContentEditable(span);
+            span.textContent = variables[varName] ?? '';
+            span.addEventListener('blur', (e) => {
+                const newValue = e.target.textContent || '';
+                if (newValue !== variables[varName]) {
+                    variables[varName] = newValue;
+                    if (onChange)
+                        onChange({ key: 'content', value: JSON.stringify(variables) });
+                    if (stopEditing)
+                        stopEditing();
+                    refreshExpressionSpans(textBlock, variables, pageContext);
+                }
+            });
+            textBlock.appendChild(span);
+        }
+        else {
+            // Complex expression — show evaluated result as static span with data-expr for re-evaluation
+            const span = document.createElement('span');
+            span.style.letterSpacing = 'inherit';
+            span.textContent = token.evaluated;
+            span.setAttribute('data-expr', token.raw);
+            textBlock.appendChild(span);
+        }
+    }
+};
+// Simple identifier regex — matches {name}, {orderId}, etc. but NOT {price * 1.1}
+const SIMPLE_VAR_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+/** Tokenize a template string into static text, simple-identifier vars, and complex expressions. */
+const tokenizeTemplate = (rawText, variables, pageCtx) => {
+    const tokens = [];
+    let i = 0;
+    while (i < rawText.length) {
+        if (rawText[i] !== '{') {
+            const start = i;
+            while (i < rawText.length && rawText[i] !== '{')
+                i++;
+            tokens.push({ type: 'text', text: rawText.slice(start, i) });
+        }
+        else {
+            // Find matching closing brace (handle nested braces)
+            let depth = 1;
+            let j = i + 1;
+            while (j < rawText.length && depth > 0) {
+                if (rawText[j] === '{')
+                    depth++;
+                else if (rawText[j] === '}')
+                    depth--;
+                j++;
+            }
+            const inner = rawText.slice(i + 1, j - 1);
+            if (SIMPLE_VAR_RE.test(inner)) {
+                tokens.push({ type: 'simpleVar', name: inner });
+            }
+            else {
+                // Evaluate the expression using substituteVariables on just this segment
+                const evaluated = substituteVariables(`{${inner}}`, variables, pageCtx);
+                tokens.push({ type: 'expression', evaluated, raw: inner });
+            }
+            i = j;
+        }
+    }
+    return tokens;
+};
+/** Reserved names — JS globals and expression builtins (must match propPanel's set) */
+const RESERVED_NAMES = new Set([
+    'true', 'false', 'null', 'undefined', 'typeof', 'instanceof', 'in',
+    'void', 'delete', 'new', 'this', 'NaN', 'Infinity',
+    'Math', 'String', 'Number', 'Boolean', 'Array', 'Object', 'Date', 'JSON',
+    'isNaN', 'parseFloat', 'parseInt', 'decodeURI', 'decodeURIComponent',
+    'encodeURI', 'encodeURIComponent', 'date', 'dateTime',
+    'currentPage', 'totalPages',
+]);
+/** Count unique user-defined variable identifiers in all {...} blocks */
+const countUniqueVariableNames = (content) => {
+    const blockRegex = /\{([^{}]+)\}/g;
+    const allIds = new Set();
+    let blockMatch;
+    while ((blockMatch = blockRegex.exec(content)) !== null) {
+        const cleaned = blockMatch[1].replace(/'[^']*'|"[^"]*"|`[^`]*`/g, '');
+        const tokenRegex = /\.?[a-zA-Z_$][a-zA-Z0-9_$]*/g;
+        let m;
+        while ((m = tokenRegex.exec(cleaned)) !== null) {
+            const token = m[0];
+            if (!token.startsWith('.') && !RESERVED_NAMES.has(token)) {
+                allIds.add(token);
+            }
+        }
+    }
+    return allIds.size;
+};
+/**
+ * An optimisation to try to minimise jank while typing.
+ * Only check whether variables were modified based on certain key presses.
+ * Regex would otherwise be performed on every key press (which isn't terrible, but this code helps).
+ */
+const keyPressShouldBeChecked = (event) => {
+    if (event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight') {
+        return false;
+    }
+    const selection = window.getSelection();
+    const contenteditable = event.target;
+    const isCursorAtEnd = selection?.focusOffset === contenteditable?.textContent?.length;
+    if (isCursorAtEnd) {
+        return event.key === '}' || event.key === 'Backspace' || event.key === 'Delete';
+    }
+    const isCursorAtStart = selection?.anchorOffset === 0;
+    if (isCursorAtStart) {
+        return event.key === '{' || event.key === 'Backspace' || event.key === 'Delete';
+    }
+    return true;
+};
+
+const schema$3 = {
     pdf: pdfRender$2,
     ui: uiRender$2,
     propPanel: propPanel$1,
-    icon: createSvgStr(TextCursorInput),
+    icon: createSvgStr(Type),
+    uninterruptedEditMode: true,
 };
 
 const isValidSVG = (svgString) => {
@@ -199,7 +658,7 @@ const barcodeDefaults = [
         defaultSchema: {
             name: '',
             type: 'qrcode',
-            content: 'https://pdfme.com/',
+            content: '',
             position,
             ...defaultColors,
             width: 30,
@@ -1600,13 +2059,13 @@ const schema$2 = {
     pdf: textSchema.pdf,
     propPanel: {
         ...textSchema.propPanel,
-        widgets: { ...propPanel$1.widgets, addOptions },
+        widgets: { ...propPanel$2.widgets, addOptions },
         schema: (propPanelProps) => {
-            if (typeof propPanel$1.schema !== 'function') {
+            if (typeof propPanel$2.schema !== 'function') {
                 throw Error('Oops, is text schema no longer a function?');
             }
             // Safely call the parent schema function with proper type checking
-            const parentSchema = propPanel$1.schema(propPanelProps);
+            const parentSchema = propPanel$2.schema(propPanelProps);
             // Create a type-safe return object
             return {
                 ...parentSchema,
@@ -1764,4 +2223,4 @@ const schema = {
     icon: getCheckedIcon(),
 };
 
-export { barcodes, schema as checkbox, date, dateTime, schema$1 as radioGroup, rectangle, schema$2 as select, svgSchema as svg, tableSchema as table, textSchema as text, time };
+export { barcodes, schema as checkbox, date, dateTime, schema$3 as multiVariableText, schema$1 as radioGroup, rectangle, schema$2 as select, svgSchema as svg, tableSchema as table, textSchema as text, time };