@pdfme/schemas 5.5.9 → 5.5.10-dev.125

package/src/multiVariableText/propPanel.ts

@@ -1,13 +1,22 @@
 import { propPanel as parentPropPanel } from '../text/propPanel.js';
 import { PropPanel, PropPanelWidgetProps } from '@pdfme/common';
 import { MultiVariableTextSchema } from './types.js';
+import { getVariableNames } from './variables.js';
 
 const mapDynamicVariables = (props: PropPanelWidgetProps) => {
   const { rootElement, changeSchemas, activeSchema, i18n, options } = props;
 
   const mvtSchema = activeSchema as unknown as MultiVariableTextSchema;
   const text = mvtSchema.text || '';
-  const variables = JSON.parse(mvtSchema.content || '{}') as Record<string, string>;
+  let variables: Record<string, string> = {};
+  try {
+    const parsed = JSON.parse(mvtSchema.content || '{}');
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      variables = parsed as Record<string, string>;
+    }
+  } catch {
+    // content is not valid JSON (e.g. a plain string value) — start fresh
+  }
   const variablesChanged = updateVariablesFromText(text, variables);
   const varNames = Object.keys(variables);
 
@@ -61,14 +70,14 @@ const mapDynamicVariables = (props: PropPanelWidgetProps) => {
       /^(rgb|hsl)a?\(\s*([+-]?\d+%?\s*,\s*){2,3}[+-]?\d+%?\s*\)$/i.test(colorValue);
     const safeColorValue = isValidColor ? colorValue : '#168fe3';
 
-    // Use safe string concatenation for innerHTML
     const typingInstructions = i18n('schemas.mvt.typingInstructions');
     const sampleField = i18n('schemas.mvt.sampleField');
-    para.innerHTML =
-      typingInstructions +
-      ` <code style="color:${safeColorValue}; font-weight:bold;">{` +
-      sampleField +
-      '}</code>';
+    para.appendChild(document.createTextNode(typingInstructions + ' '));
+    const codeEl = document.createElement('code');
+    codeEl.style.color = safeColorValue;
+    codeEl.style.fontWeight = 'bold';
+    codeEl.textContent = `{${sampleField}}`;
+    para.appendChild(codeEl);
     rootElement.appendChild(para);
   }
 };
@@ -113,7 +122,7 @@ export const propPanel: PropPanel<MultiVariableTextSchema> = {
       },
     };
   },
-  widgets: { ...(parentPropPanel.widgets || {}), mapDynamicVariables },
+  widgets: { ...parentPropPanel.widgets, mapDynamicVariables },
   defaultSchema: {
     ...parentPropPanel.defaultSchema,
     readOnly: false,
@@ -127,14 +136,14 @@ export const propPanel: PropPanel<MultiVariableTextSchema> = {
 };
 
 const updateVariablesFromText = (text: string, variables: Record<string, string>): boolean => {
-  const regex = /\{([^{}]+)}/g;
-  const matches = text.match(regex);
+  const matches = getVariableNames(text);
   let changed = false;
 
-  if (matches) {
+  if (matches.length > 0) {
+    const uniqueMatches = new Set(matches);
+
     // Add any new variables
-    for (const match of matches) {
-      const variableName = match.replace('{', '').replace('}', '');
+    for (const variableName of uniqueMatches) {
       if (!(variableName in variables)) {
         // NOTE: We upper case the variable name as the default value
         variables[variableName] = variableName.toUpperCase();
@@ -143,7 +152,7 @@ const updateVariablesFromText = (text: string, variables: Record<string, string>
     }
     // Remove any that no longer exist
     Object.keys(variables).forEach((variableName) => {
-      if (!matches.includes('{' + variableName + '}')) {
+      if (!uniqueMatches.has(variableName)) {
         delete variables[variableName];
         changed = true;
       }

package/src/multiVariableText/types.ts

@@ -1,6 +1,6 @@
 import type { TextSchema } from '../text/types.js';
 
-export interface MultiVariableTextSchema extends TextSchema {
+export type MultiVariableTextSchema = TextSchema & {
   text: string;
   variables: string[];
-}
+};

package/src/multiVariableText/uiRender.ts

@@ -8,6 +8,7 @@ import {
 import { isEditable } from '../utils.js';
 import { getFontKitFont } from '../text/helper.js';
 import { substituteVariables } from './helper.js';
+import { countUniqueVariableNames, getVariableIndices } from './variables.js';
 
 export const uiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
   const { value, schema, rootElement, mode, onChange, ...rest } = arg;
@@ -68,9 +69,17 @@ const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
     rootElement.parentElement.style.outline = '';
   }
 
-  const variables: Record<string, string> = value
-    ? (JSON.parse(value) as Record<string, string>) || {}
-    : {};
+  let variables: Record<string, string> = {};
+  if (value) {
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        variables = parsed as Record<string, string>;
+      }
+    } catch {
+      // value is not valid JSON — use empty variables
+    }
+  }
   const variableIndices = getVariableIndices(rawText);
   const substitutedText = substituteVariables(rawText, variables);
   const font = options?.font || getDefaultFont();
@@ -86,16 +95,18 @@ const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
   let inVarString = false;
 
   for (let i = 0; i < rawText.length; i++) {
-    if (variableIndices[i]) {
+    const variableName = variableIndices.get(i);
+
+    if (variableName) {
       inVarString = true;
       let span = document.createElement('span');
       span.style.outline = `${theme.colorPrimary} dashed 1px`;
       makeElementPlainTextContentEditable(span);
-      span.textContent = variables[variableIndices[i]];
+      span.textContent = variables[variableName];
       span.addEventListener('blur', (e: Event) => {
         const newValue = (e.target as HTMLSpanElement).textContent || '';
-        if (newValue !== variables[variableIndices[i]]) {
-          variables[variableIndices[i]] = newValue;
+        if (newValue !== variables[variableName]) {
+          variables[variableName] = newValue;
           if (onChange) onChange({ key: 'content', value: JSON.stringify(variables) });
           if (stopEditing) stopEditing();
         }
@@ -114,30 +125,6 @@ const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
   }
 };
 
-const getVariableIndices = (content: string) => {
-  const regex = /\{([^}]+)}/g;
-  const indices = [];
-  let match;
-
-  while ((match = regex.exec(content)) !== null) {
-    indices[match.index] = match[1];
-  }
-
-  return indices;
-};
-
-const countUniqueVariableNames = (content: string) => {
-  const regex = /\{([^}]+)}/g;
-  const uniqueMatchesSet = new Set();
-  let match;
-
-  while ((match = regex.exec(content)) !== null) {
-    uniqueMatchesSet.add(match[1]);
-  }
-
-  return uniqueMatchesSet.size;
-};
-
 /**
  * An optimisation to try to minimise jank while typing.
  * Only check whether variables were modified based on certain key presses.

package/src/multiVariableText/variables.ts

@@ -0,0 +1,63 @@
+export type VariableMatch = {
+  name: string;
+  startIndex: number;
+  endIndex: number;
+};
+
+export type VariableIndices = Map<number, string>;
+
+export const visitVariables = (
+  content: string,
+  visitor: (match: VariableMatch) => void,
+): void => {
+  let startIndex = -1;
+
+  for (let i = 0; i < content.length; i++) {
+    const char = content[i];
+
+    if (char === '{') {
+      // Restart from the latest opener so malformed input behaves like /{([^{}]+)}/g
+      // without requiring backtracking.
+      startIndex = i;
+      continue;
+    }
+
+    if (char === '}' && startIndex !== -1) {
+      const name = content.slice(startIndex + 1, i);
+      if (name.length > 0) {
+        visitor({ name, startIndex, endIndex: i });
+      }
+      startIndex = -1;
+    }
+  }
+};
+
+export const getVariableIndices = (content: string): VariableIndices => {
+  const indices: VariableIndices = new Map();
+
+  visitVariables(content, ({ name, startIndex }) => {
+    indices.set(startIndex, name);
+  });
+
+  return indices;
+};
+
+export const countUniqueVariableNames = (content: string): number => {
+  const variableNames = new Set<string>();
+
+  visitVariables(content, ({ name }) => {
+    variableNames.add(name);
+  });
+
+  return variableNames.size;
+};
+
+export const getVariableNames = (content: string): string[] => {
+  const variableNames: string[] = [];
+
+  visitVariables(content, ({ name }) => {
+    variableNames.push(name);
+  });
+
+  return variableNames;
+};

package/src/tables/tableHelper.ts

@@ -123,7 +123,7 @@ function cellStyles(
   }
   const otherStyles = Object.assign({}, styles.styles, sectionStyles);
 
-  const colStyles = styles.columnStyles[column.index] || styles.columnStyles[column.index] || {};
+  const colStyles = styles.columnStyles[column.index] || {};
 
   const rowStyles =
     sectionName === 'body' && rowIndex % 2 === 0
@@ -269,7 +269,8 @@ export function createSingleTable(body: string[][], args: CreateTableArgs) {
     schema.bodyStyles.alternateBackgroundColor = schema.bodyStyles.backgroundColor;
     schema.bodyStyles.backgroundColor = alternateBackgroundColor;
   }
-  schema.showHead = schema.showHead === false ? false : (!schema.__isSplit || schema.repeatHead === true);
+  schema.showHead =
+    schema.showHead === false ? false : !schema.__isSplit || schema.repeatHead === true;
 
   const input = parseInput(schema, body);
 

package/src/tables/types.ts

@@ -21,7 +21,7 @@ export interface CellStyle {
 
 export type CellSchema = Schema & CellStyle;
 
-export interface TableSchema extends Schema {
+export type TableSchema = Schema & {
   showHead: boolean;
   head: string[];
   headWidthPercentages: number[];
@@ -36,7 +36,7 @@ export interface TableSchema extends Schema {
   columnStyles: {
     alignment?: { [colIndex: number]: ALIGNMENT };
   };
-}
+};
 
 export interface Styles {
   fontName: string | undefined;

package/src/tables/uiRender.ts

@@ -203,7 +203,7 @@ const resetEditingPosition = () => {
 };
 
 export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
-  const { rootElement, onChange, schema, value, mode, scale} = arg;
+  const { rootElement, onChange, schema, value, mode, scale } = arg;
   const body = getBody(value);
   const bodyWidthRange = getBodyWithRange(value, schema.__bodyRange);
   const table = await createSingleTable(bodyWidthRange, arg);

package/src/tables.ts

@@ -0,0 +1 @@
+export { getDynamicHeightsForTable } from './tables/dynamicTemplate.js';

package/src/text/helper.ts

@@ -9,6 +9,7 @@ import {
   getFallbackFontName,
   getDefaultFont,
   DEFAULT_FONT_NAME,
+  isUrlSafeToFetch,
 } from '@pdfme/common';
 import { Buffer } from 'buffer';
 import type { TextSchema, FontWidthCalcValues } from './types.js';
@@ -109,6 +110,26 @@ const getFallbackFont = (font: Font) => {
 
 const getCacheKey = (fontName: string) => `getFontKitFont-${fontName}`;
 
+export const fetchRemoteFontData = async (url: string): Promise<ArrayBuffer> => {
+  if (!isUrlSafeToFetch(url)) {
+    throw Error(
+      '[@pdfme/schemas] Invalid or unsafe URL for font data. Only http: and https: URLs pointing to public hosts are allowed.',
+    );
+  }
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    return await response.arrayBuffer();
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error);
+    throw Error(`[@pdfme/schemas] Failed to fetch remote font data from ${url}. ${reason}`);
+  }
+};
+
 export const getFontKitFont = async (
   fontName: string | undefined,
   font: Font,
@@ -123,9 +144,11 @@ export const getFontKitFont = async (
   const currentFont = font[fntNm] || getFallbackFont(font) || getDefaultFont()[DEFAULT_FONT_NAME];
   let fontData = currentFont.data;
   if (typeof fontData === 'string') {
-    fontData = fontData.startsWith('http')
-      ? await fetch(fontData).then((res) => res.arrayBuffer())
-      : b64toUint8Array(fontData);
+    if (fontData.startsWith('http')) {
+      fontData = await fetchRemoteFontData(fontData);
+    } else {
+      fontData = b64toUint8Array(fontData);
+    }
   }
 
   // Convert fontData to Buffer if it's not already a Buffer
@@ -367,7 +390,7 @@ export const splitTextToSize = (arg: {
     boxWidthInPt,
   };
   let lines: string[] = [];
-  value.split(/\r\n|\r|\n|\f|\u000B/g).forEach((line: string) => {
+  value.split(/\r\n|\r|\n|\f|\v/g).forEach((line: string) => {
     lines = lines.concat(getSplittedLinesBySegmenter(line, fontWidthCalcValues));
   });
   return lines;

package/src/text/pdfRender.ts

@@ -25,6 +25,7 @@ import {
   heightOfFontAtSize,
   getFontDescentInPt,
   getFontKitFont,
+  fetchRemoteFontData,
   widthOfTextAtSize,
   splitTextToSize,
 } from './helper.js';
@@ -44,7 +45,7 @@ const embedAndGetFontObj = async (arg: {
     Object.values(font).map(async (v) => {
       let fontData = v.data;
       if (typeof fontData === 'string' && fontData.startsWith('http')) {
-        fontData = await fetch(fontData).then((res) => res.arrayBuffer());
+        fontData = await fetchRemoteFontData(fontData);
       }
       return pdfDoc.embedFont(fontData, {
         subset: typeof v.subset === 'undefined' ? true : v.subset,

package/src/text/types.ts

@@ -11,7 +11,7 @@ export type FontWidthCalcValues = {
   characterSpacing: number;
   boxWidthInPt: number;
 };
-export interface TextSchema extends Schema {
+export type TextSchema = Schema & {
   fontName?: string;
   alignment: ALIGNMENT;
   verticalAlignment: VERTICAL_ALIGNMENT;
@@ -27,4 +27,4 @@ export interface TextSchema extends Schema {
   };
   fontColor: string;
   backgroundColor: string;
-}
+};

package/src/utils.ts

@@ -213,9 +213,90 @@ export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): st
   // In lucide 0.475.0, the icon is an array of elements, not a single SVG element
   // We need to create an SVG wrapper and add the elements as children
 
+  const safeTagNames = new Set([
+    'svg',
+    'circle',
+    'ellipse',
+    'g',
+    'line',
+    'path',
+    'polygon',
+    'polyline',
+    'rect',
+  ]);
+  const safeAttributeNames = new Set([
+    'aria-hidden',
+    'aria-label',
+    'class',
+    'clip-rule',
+    'cx',
+    'cy',
+    'd',
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'focusable',
+    'height',
+    'id',
+    'opacity',
+    'points',
+    'preserveAspectRatio',
+    'r',
+    'role',
+    'rx',
+    'ry',
+    'stroke',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-opacity',
+    'stroke-width',
+    'transform',
+    'vector-effect',
+    'viewBox',
+    'width',
+    'x',
+    'x1',
+    'x2',
+    'xmlns',
+    'xmlns:xlink',
+    'y',
+    'y1',
+    'y2',
+  ]);
+  const escapeHtmlAttribute = (value: string): string =>
+    value
+      .replaceAll('&', '&amp;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#39;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;');
+  const escapeHtmlText = (value: string): string =>
+    value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+  const toSafeAttributeString = (attributes: Record<string, string>): string =>
+    Object.entries(attributes)
+      .filter(
+        ([key, value]) =>
+          safeAttributeNames.has(key) &&
+          value !== undefined &&
+          value !== null &&
+          !key.toLowerCase().startsWith('on'),
+      )
+      .map(([key, value]) => `${key}="${escapeHtmlAttribute(String(value))}"`)
+      .join(' ');
+  const toSafeTagName = (tag: unknown): string => {
+    const tagName = String(tag);
+    if (!safeTagNames.has(tagName)) {
+      throw new Error(`Invalid SVG tag name: ${tagName}`);
+    }
+    return tagName;
+  };
+
   // Handle non-array input
   if (!Array.isArray(icon)) {
-    return String(icon);
+    return escapeHtmlText(String(icon));
   }
 
   // Create default SVG attributes
@@ -229,18 +310,14 @@ export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): st
     'stroke-width': '2',
     'stroke-linecap': 'round',
     'stroke-linejoin': 'round',
-    ...(attrs || {}),
+    ...attrs,
   };
-
-  // Format SVG attributes string
-  const svgAttrString = Object.entries(svgAttrs)
-    .map(([key, value]) => `${key}="${value}"`)
-    .join(' ');
+  const svgAttrString = toSafeAttributeString(svgAttrs);
 
   // Helper function to process a single element
   const processElement = (element: unknown): string => {
     if (!Array.isArray(element)) {
-      return String(element);
+      return escapeHtmlText(String(element));
     }
 
     const [tag, attributes = {}, children = []] = element as [
@@ -248,12 +325,8 @@ export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): st
       Record<string, string>,
       unknown[],
     ];
-    const tagName = String(tag);
-
-    // Format attributes string
-    const attrString = Object.entries(attributes)
-      .map(([key, value]) => `${key}="${value}"`)
-      .join(' ');
+    const tagName = toSafeTagName(tag);
+    const attrString = toSafeAttributeString(attributes);
 
     // Process children recursively
     let childrenString = '';

package/tsconfig.build.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.build.base.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./dist",
+    "emitDeclarationOnly": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.json

@@ -1,6 +1,16 @@
 {
-  "extends": "./tsconfig.esm",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./dist",
-  }
-}
+    "composite": true,
+    "declaration": true,
+    "declarationDir": "./dist/typecheck",
+    "emitDeclarationOnly": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "outDir": "./dist/typecheck",
+    "tsBuildInfoFile": "./dist/typecheck/tsconfig.tsbuildinfo",
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"],
+  "references": [{ "path": "../common" }, { "path": "../pdf-lib" }]
+}

package/vite.config.mts

@@ -0,0 +1,51 @@
+import { readFileSync } from 'node:fs';
+import { builtinModules } from 'node:module';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageJson = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf8')) as {
+  dependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+};
+
+const builtinModuleSet = new Set([
+  ...builtinModules,
+  ...builtinModules.map((moduleName) => `node:${moduleName}`),
+]);
+const packageDependencies = [
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+];
+
+const isExternal = (id: string) => {
+  if (id.startsWith('air-datepicker/locale/')) {
+    return false;
+  }
+
+  return (
+    builtinModuleSet.has(id) ||
+    packageDependencies.some((dependency) => id === dependency || id.startsWith(`${dependency}/`))
+  );
+};
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: {
+        builtins: resolve(__dirname, 'src/builtins.ts'),
+        index: resolve(__dirname, 'src/index.ts'),
+        tables: resolve(__dirname, 'src/tables.ts'),
+        utils: resolve(__dirname, 'src/utils.ts'),
+      },
+      fileName: (_, entryName) => `${entryName}.js`,
+      formats: ['es'],
+    },
+    minify: false,
+    outDir: 'dist',
+    rollupOptions: { external: isExternal },
+    sourcemap: true,
+    target: 'es2020',
+  },
+});