@pdfme/schemas 0.0.0

package/src/graphics/image.ts

@@ -0,0 +1,201 @@
+import type { ChangeEvent } from 'react';
+import type { PDFImage } from '@pdfme/pdf-lib';
+import type { Plugin } from '@pdfme/common';
+import type { Schema } from '@pdfme/common';
+import type * as CSS from 'csstype';
+import { px2mm } from '@pdfme/common';
+import { Image } from 'lucide';
+import {
+  convertForPdfLayoutProps,
+  addAlphaToHex,
+  isEditable,
+  readFile,
+  createSvgStr,
+} from '../utils.js';
+import { DEFAULT_OPACITY } from '../constants.js';
+import { getImageDimension } from './imagehelper.js';
+
+const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
+const fullSize = { width: '100%', height: '100%' };
+const defaultValue =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUgAAAGQBAMAAAA+V+RCAAAAAXNSR0IArs4c6QAAABtQTFRFAAAAR3BMAAAAAAAAAAAAAAAAAAAAAAAAAAAAqmQqwQAAAAh0Uk5TDQAvVYGtxusE1uR9AAAKg0lEQVR42tTbwU7bQBDG8TWoPeOBPoBbdbhiVMGV0Kr0GChSe0RtRfccEOROnP0eu8ckTMHrjD27/h4Afvo7u4kUxZXbjuboZ+Hx9vrz+6J8eW5rJKPHhYfr46J/JHn0u/DnuHcko/eF71Ub0j6k3P1Rr0jGIHs4bkPah5RbnveHZMBQ6VKHlMqjnpCMAdfUApk8pNx91QeSMex+C2R2IYFwrkcyht6yEsjkIeXutEjG8AtnApldSGBRqJAMk10JZHYhgaZSIBlG+yWQipAGKZ0ipNmr0uUaEmiKLZEMw52tkLqQD7f6PT7iv1uskLqQV06/nQ9ffswhF+oVUhMS07KX7Xz6+8ot5BQhBVLF/Pry0XGKkAKpGp3IRz7pjmQMiSz3TvB8s85I8h2ReuWy6IpkDIws6UI8745I8oMjy10vnnc3JGN4ZPlRnO9OSPIWyL0LcZ93QTIskOXuXPz9eCR5G2R5io09dUEyjJD7c3kJudiQJkiZMtTxSIYZ8mAu/oGLDGmHLL9hfXfRSIYh8g3W18QiyVsh5VdtoYpEMsyQ8uhM4pDk7ZDyeU/jkAw7pHzesygkeUOkPN+LKCTDGsnP3nNcREhz5MHm8Y5AMkyRskvdjiRvi5Qvyst2JCMB8hBru2lFkjdGypty1opkpEDuY21PbUjy1kh5nS/akIwkyL2fWK0pXEtIc6Q83ssWJCMR8nTjNncxIe2Rh/FIRirkW6ytdjEh7ZHvopGMFEj5EWPiYkLaI/djkYyEyDlWu3SakOmRjIRIWkdOnSJkeiQjfyT5ESAZ+SPJjwDJyB9JfgRIRv5I8iNAMvJHkh8BkpE/kvwIkIz8keRHgGTkjyQ/AiQjfyT5ESAZ+SPJjwDJyB9JfgRIRv5I8iNAMjJF6kLi0gSpC4mJMZJ8tkhdSNQmSF3IUNkiGfkiVSHRFCZIVUgsShOkKiRmNkhVSNzYIFUhMbFBqkKGygapCtkUhkhW/JrUAqkJiakRUhMy1EZITcimsEOy4keaNkhFyFBbIRUhF4UZkv61dzfdaRtRGIBHtqFbXQn2RhizDdg1XprYsVk2TlxryYlTo2WP4yLtwaCf3dNGyu3wWkqaczQzizurAGb05M6HPtBcJT+/jtQU8ucDuekZQwaJc8MGkV33AonIloFAWkO+9NxHbi/IfeQDuY987rmP/AuN9pEYR/eQmP7MbeQ25Xx3lpBX3yuXJxETzSN//AxVkIIUpCAFKUhBClKQghSkIAUpSEEKUpCCFKQgBSlIQQpSkIIUpCAFKUhBClKQghSkIAUpSEEKUpCCFKQgmyy+AeRedKi/jKr+LvII3z25uru7uhx7jSL379PlW/3lB+/1v0vhg+B08XXD6edxM0h+ntJm9K2eGJ7FW3xw/88Ht7vw/65L8BpDtvQF/MdVC5wGxQdg5O08eE0hz4v1a3pe9AsI+AwX0QeasYhzE0g/0XKIhBks8dY/eNI6CqzeagYZZtqa7k7VysBjzD4xeG3ZUQNIVs11y3YKvYLXVfMQg3LbHJKbccjrF7FX8BP+MJD8fzCIXEGv4Mp4JGG5MIbEkLSgsk5FUgVjSFyKPoTKhlVrcU0hMYXDjCvTJlQsU5PIJ712rgzzp6dpxi/mJpFr7a+gMt7A5sM4Ornm/5whJH6rDW9PvhnHROQHZzwtmEFi5zqHymY707d/YwU5h8excGW8ubVHsNc3iFxh5VxZiJPAxGifxOm8C5V1sO4Do1MQTudDqKyNc0AQm5zMMSvhDCob5ti4Az4wMYZkQJBAZRMcXeSfpennnlkkN2WIlc1e2wn60dgjM0j8XqsaOSIohpFlmCZYWcyvrCK5w8VQme8OclVWjcjEMhKm805eidx4VpAIomN8L8gsI2E6P3cUuS3f5Kbdas2dcYewhnzOeDoPM36LI+kA8ikuTv34EOgyq4tkdFqm1Dg0hzwvdyjlW9uoLpL7i7wsy5ExZJun89lXzn4d8gYuD5hAdsoNlhWvwhpkmMHlARPIICsRnSKmdcgupOEzgqRZ+dWi4adBDbIN1zDMIIflBidFHXWRHFpCtop/+HExYwYOIovArYOM36icJ1t2kOXOcHNU1FgbyY4dZHlYsb0vRmxtJP3YChIfCR5kNUdBg8wKUm/CNUEkNaR/+vvjY2IayRXy69ojc6VUOcZH5pAU6y0Y7iCx6l8sICd6DUFWf7bIB8wmkS39jCwEJESS3zOGDLWjL45k5RWMoQVkkGhXCUJAwjVrHkxmkAWkpEAkJ+WW8LeeF6PIIVcAkYTrk9xP12QS2eWpnDcAV3pBsDKJ5CqfCCJ5gHV3IbgmkH5cVgeRrPn1IZ8bRPJw3Y4gkry5Z2/3F/GpWWS7nFMwkhTv3Bvi3/DWjCJDHgkcSfht8c2/xl9572QWGSRlt8NI8gni8jKK+tcZ753MImnIX+dI4i8SaZrmvG3TyE7GoeFI4hkDbMwkks6yfDkiiCR3SihrMo70+yeHBJHkL2L5ZB5Jvk8EkYT2hm2ZQnLBSOL1fh7bTSL//N/IIEHjdtT4XX+MnFduYOPV3fX3QI0gA/3+yVblA/j8BI7NbjBDfzNImmmXZ8PqVptBpwsTuMezIWRL23YQV+5/j3GHcpBoxrfUAJJZHLpB5a2aQYIN2r/nzWzeNnmf+SJNWRVcp+lnj14rR4t0uduge+/SvJH7zPGe+4i4+P3KexSik0McT9Hpu7s/7q7GnttrH3ylPFlFIkhBClKQghSkIAUpSEEKUpCCFKQgBSlIQQpSkIIUpCAFKUhBClKQghSkIAUpSEEKUpCCFKQgbSO7cPO35YKpKN5ryNxN5FR13ETm1cipK0hdpTTze1eQeifUkXNXkG0dubsY337B1HI68osryImO9BNct2W/zLSsFcqPIT+a/bKDUhp623Nwr7gmRecwmzs2l69I6dlxfrPuw2Q4T6SonTs2B2FKRkXd3L3hPdN3g4rC3LmREyT6OFE7SSOn9omYIlKRr7E/2SdiBiJFNHOsU6JIQbpLZ6ZynnAUHxY5M1N2NdCcSHE3deZAaLKbMkxxdF1pb/QoIordau+WxnkhIgXhXXt2jf4Mup8Cuu35vJNBwyo+MGK7Q8MmHxVIP4GV9tavXfD+pkDSOYTSmUCuqES2cgilxUDiXKPgE6sD3L+BeBVITKdxaws5gOcRlUh8hM3GSoNjAoX8iRgJ6VOeezaMmIpiykiehHiEe+aN/tmuYuMxktuby4NnxYitzchOjkrDLR6cZWCYMrIiXc7zoUnj3nX1s8ZUTbqc5eWhMeLpoibvkdJmemBejSPVeIn6V4ssr0nXo7QzNCxp+th4KVKEQXkmRvLQcaxcANKPXTO+eICkgWvIW0JkEDsWyB4hkgbuBRKRQexcIBFJA/cCichg5o5x7VUg6SCzTMN0YYikiSvIL1SNDGLnRg0i6ch2g2PeNUTSmQvIBwIknAtZLXgWiEgKY+sdckTfQ9J+Yte4eUOIhHJkQ4mJABGJSvvGeiT1F7aMyzH9KJL2biyN6zdUjUTlr6l54vZDj+qQWPrXmWEi5KUEJBa//26RGRMuP449+jEkprV8TLPGgenjx8uomkj0N73+g6V/XjknAAAAAElFTkSuQmCC';
+
+type ImageSchema = Schema;
+
+const imageSchema: Plugin<ImageSchema> = {
+  pdf: async (arg) => {
+    const { value, schema, pdfDoc, page, _cache } = arg;
+    if (!value) return;
+
+    const inputImageCacheKey = getCacheKey(schema, value);
+    let image = _cache.get(inputImageCacheKey) as PDFImage;
+    if (!image) {
+      const isPng = value.startsWith('data:image/png;');
+      image = await (isPng ? pdfDoc.embedPng(value) : pdfDoc.embedJpg(value));
+      _cache.set(inputImageCacheKey, image);
+    }
+
+    const _schema = { ...schema, position: { ...schema.position } };
+    const dimension = getImageDimension(value);
+    const imageWidth = px2mm(dimension.width);
+    const imageHeight = px2mm(dimension.height);
+    const boxWidth = _schema.width;
+    const boxHeight = _schema.height;
+
+    const imageRatio = imageWidth / imageHeight;
+    const boxRatio = boxWidth / boxHeight;
+
+    if (imageRatio > boxRatio) {
+      _schema.width = boxWidth;
+      _schema.height = boxWidth / imageRatio;
+      _schema.position.y += (boxHeight - _schema.height) / 2;
+    } else {
+      _schema.width = boxHeight * imageRatio;
+      _schema.height = boxHeight;
+      _schema.position.x += (boxWidth - _schema.width) / 2;
+    }
+
+    const pageHeight = page.getHeight();
+    const lProps = convertForPdfLayoutProps({ schema: _schema, pageHeight });
+    const { width, height, rotate, position, opacity } = lProps;
+    const { x, y } = position;
+
+    const drawOptions = { x, y, rotate, width, height, opacity };
+    page.drawImage(image, drawOptions);
+  },
+  ui: (arg) => {
+    const {
+      value,
+      rootElement,
+      mode,
+      onChange,
+      stopEditing,
+      tabIndex,
+      placeholder,
+      theme,
+      schema,
+    } = arg;
+    const editable = isEditable(mode, schema);
+    const isDefault = value === defaultValue;
+
+    const container = document.createElement('div');
+    const backgroundStyle = placeholder ? `url(${placeholder})` : 'none';
+    const containerStyle: CSS.Properties = {
+      ...fullSize,
+      backgroundImage: value ? 'none' : backgroundStyle,
+      backgroundSize: `contain`,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+    };
+    Object.assign(container.style, containerStyle);
+    container.addEventListener('click', (e) => {
+      if (editable) {
+        e.stopPropagation();
+      }
+    });
+    rootElement.appendChild(container);
+
+    // image tag
+    if (value) {
+      const img = document.createElement('img');
+      const imgStyle: CSS.Properties = {
+        height: '100%',
+        width: '100%',
+        borderRadius: 0,
+        objectFit: 'contain',
+      };
+      Object.assign(img.style, imgStyle);
+      img.src = value;
+      container.appendChild(img);
+    }
+
+    // remove button
+    if (value && !isDefault && editable) {
+      const button = document.createElement('button');
+      button.textContent = 'x';
+      const buttonStyle: CSS.Properties = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: '#333',
+        background: '#f2f2f2',
+        borderRadius: '2px',
+        border: '1px solid #767676',
+        cursor: 'pointer',
+        height: '24px',
+        width: '24px',
+      };
+      Object.assign(button.style, buttonStyle);
+      button.addEventListener('click', () => {
+        if (onChange) onChange({ key: 'content', value: '' });
+      });
+      container.appendChild(button);
+    }
+
+    // file input
+    if ((!value || isDefault) && editable) {
+      const label = document.createElement('label');
+      const labelStyle: CSS.Properties = {
+        ...fullSize,
+        display: editable ? 'flex' : 'none',
+        position: 'absolute',
+        top: 0,
+        backgroundColor: editable || value ? addAlphaToHex(theme.colorPrimaryBg, 30) : 'none',
+        cursor: 'pointer',
+      };
+      Object.assign(label.style, labelStyle);
+      container.appendChild(label);
+      const input = document.createElement('input');
+      const inputStyle: CSS.Properties = {
+        ...fullSize,
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        width: '180px',
+        height: '30px',
+        marginLeft: '-90px',
+        marginTop: '-15px',
+      };
+      Object.assign(input.style, inputStyle);
+      input.tabIndex = tabIndex || 0;
+      input.type = 'file';
+      input.accept = 'image/jpeg, image/png';
+      input.addEventListener('change', (event: Event) => {
+        const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>;
+        readFile(changeEvent.target.files)
+          .then((result) => {
+            if (onChange) onChange({ key: 'content', value: result as string });
+          })
+          .catch((error) => {
+            console.error('Error reading file:', error);
+          });
+      });
+      input.addEventListener('blur', () => {
+        if (stopEditing) stopEditing();
+      });
+      label.appendChild(input);
+    }
+  },
+  propPanel: {
+    schema: {},
+    defaultSchema: {
+      name: '',
+      type: 'image',
+      content: defaultValue,
+      position: { x: 0, y: 0 },
+      width: 40,
+      height: 40,
+      // If the value of "rotate" is set to undefined or not set at all, rotation will be disabled in the UI.
+      // Check this document: https://pdfme.com//docs/custom-schemas#learning-how-to-create-from-pdfmeschemas-code
+      rotate: 0,
+      opacity: DEFAULT_OPACITY,
+    },
+  },
+  icon: createSvgStr(Image),
+};
+
+export default imageSchema;

package/src/graphics/imagehelper.ts

@@ -0,0 +1,156 @@
+// ref: https://github.com/image-size/image-size ----------------------------
+// The following code is adapted from the image-size code. Unnecessary formats and dependencies on Node have been removed.
+import { Buffer } from 'buffer';
+
+type IImage = {
+  validate: (input: Uint8Array) => boolean;
+  calculate: (input: Uint8Array) => { width: number; height: number } | undefined;
+};
+
+const decoder = new TextDecoder();
+const toUTF8String = (input: Uint8Array, start = 0, end = input.length) =>
+  decoder.decode(input.slice(start, end));
+
+const toHexString = (input: Uint8Array, start = 0, end = input.length) =>
+  input.slice(start, end).reduce((memo, i) => memo + ('0' + i.toString(16)).slice(-2), '');
+
+const readUInt16BE = (input: Uint8Array, offset = 0) => input[offset] * 2 ** 8 + input[offset + 1];
+
+const readUInt32BE = (input: Uint8Array, offset = 0) =>
+  input[offset] * 2 ** 24 +
+  input[offset + 1] * 2 ** 16 +
+  input[offset + 2] * 2 ** 8 +
+  input[offset + 3];
+
+const extractSize = (input: Uint8Array, index: number) => {
+  return {
+    height: readUInt16BE(input, index),
+    width: readUInt16BE(input, index + 2),
+  };
+};
+
+const validateInput = (input: Uint8Array, index: number): void => {
+  // index should be within buffer limits
+  if (index > input.length) {
+    throw new TypeError('Corrupt JPG, exceeded buffer limits');
+  }
+  // Every JPEG block must begin with a 0xFF
+  if (input[index] !== 0xff) {
+    throw new TypeError('Invalid JPG, marker table corrupted');
+  }
+};
+
+const JPG: IImage = {
+  validate: (input) => toHexString(input, 0, 2) === 'ffd8',
+
+  calculate(input) {
+    // Skip 4 chars, they are for signature
+    input = input.slice(4);
+
+    let next: number;
+    while (input.length) {
+      // read length of the next block
+      const i = readUInt16BE(input, 0);
+
+      // ensure correct format
+      validateInput(input, i);
+
+      // 0xFFC0 is baseline standard(SOF)
+      // 0xFFC1 is baseline optimized(SOF)
+      // 0xFFC2 is progressive(SOF2)
+      next = input[i + 1];
+      if (next === 0xc0 || next === 0xc1 || next === 0xc2) {
+        const size = extractSize(input, i + 5);
+
+        return size;
+      }
+
+      // move to the next block
+      input = input.slice(i + 2);
+    }
+
+    throw new TypeError('Invalid JPG, no size found');
+  },
+};
+
+const pngSignature = 'PNG\r\n\x1a\n';
+const pngImageHeaderChunkName = 'IHDR';
+
+// Used to detect "fried" png's: http://www.jongware.com/pngdefry.html
+const pngFriedChunkName = 'CgBI';
+
+const PNG: IImage = {
+  validate(input) {
+    if (pngSignature === toUTF8String(input, 1, 8)) {
+      let chunkName = toUTF8String(input, 12, 16);
+      if (chunkName === pngFriedChunkName) {
+        chunkName = toUTF8String(input, 28, 32);
+      }
+      if (chunkName !== pngImageHeaderChunkName) {
+        throw new TypeError('Invalid PNG');
+      }
+      return true;
+    }
+    return false;
+  },
+
+  calculate(input) {
+    if (toUTF8String(input, 12, 16) === pngFriedChunkName) {
+      return {
+        height: readUInt32BE(input, 36),
+        width: readUInt32BE(input, 32),
+      };
+    }
+    return {
+      height: readUInt32BE(input, 20),
+      width: readUInt32BE(input, 16),
+    };
+  },
+};
+
+const typeHandlers = {
+  jpg: JPG,
+  png: PNG,
+};
+
+type imageType = keyof typeof typeHandlers;
+
+function detector(input: Uint8Array): imageType | undefined {
+  const firstBytes: { [byte: number]: imageType } = {
+    0x89: 'png',
+    0xff: 'jpg',
+  };
+  const byte = input[0];
+  if (byte in firstBytes) {
+    const type = firstBytes[byte];
+    if (type && typeHandlers[type].validate(input)) {
+      return type;
+    }
+  }
+
+  const keys = Object.keys(typeHandlers) as imageType[];
+  return keys.find((key: imageType) => typeHandlers[key].validate(input));
+}
+
+export const getImageDimension = (value: string): { height: number; width: number } => {
+  const dataUriPrefix = ';base64,';
+  const idx = value.indexOf(dataUriPrefix);
+  const imgBase64 = value.substring(idx + dataUriPrefix.length, value.length);
+  return imageSize(Buffer.from(imgBase64, 'base64'));
+};
+
+const imageSize = (imgBuffer: Buffer): { height: number; width: number } => {
+  const type = detector(imgBuffer);
+
+  if (typeof type !== 'undefined' && type in typeHandlers) {
+    const size = typeHandlers[type].calculate(imgBuffer);
+    if (size !== undefined) {
+      return size;
+    }
+  }
+
+  throw new TypeError(
+    '[@pdfme/schemas/images] Unsupported file type: ' + (type === undefined ? 'undefined' : type),
+  );
+};
+// ----------------------------

package/src/graphics/svg.ts

@@ -0,0 +1,118 @@
+import { Plugin, Schema } from '@pdfme/common';
+import {
+  convertForPdfLayoutProps,
+  isEditable,
+  addAlphaToHex,
+  createErrorElm,
+  createSvgStr,
+} from '../utils.js';
+import { Route } from 'lucide';
+
+const isValidSVG = (svgString: string): boolean => {
+  try {
+    // Basic validation checks that work in both Node.js and browser
+    if (!svgString || typeof svgString !== 'string') {
+      return false;
+    }
+
+    // Check for basic SVG structure
+    if (!svgString.includes('<svg') || !svgString.includes('</svg>')) {
+      return false;
+    }
+
+    // Additional browser-specific validation if DOMParser is available
+    if (typeof DOMParser !== 'undefined') {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(svgString, 'image/svg+xml');
+      const parserError = doc.querySelector('parsererror');
+      if (parserError !== null) {
+        return false;
+      }
+    }
+
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const defaultValue = `<svg viewBox="0 0 488 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(1,0,0,1,-56,0)" fill="#000000" stroke="none">
+        <path d="M228.667,0L56,172.667L56.267,345.334L56.667,518L59.733,527.334C65.867,545.467 72.933,557.067 86,570.134C96.133,580.4 100,583.2 110.667,588.4C134.533,600.134 120,599.334 300,599.334C480,599.334 465.467,600.134 489.334,588.4C500,583.2 503.867,580.4 514,570.134C527.334,556.8 534.534,544.8 540.267,526.667L543.334,516.667L543.334,83.333L540.267,73.333C534.534,55.2 527.334,43.2 514,29.867C503.867,19.6 500,16.8 489.334,11.6C465.734,0 475.467,0.8 344.667,0.267L228.667,0ZM466.4,41.6C483.334,48.933 496.267,61.867 502.934,78.4L506,86L506,514L502.934,521.734C496,538.934 480.267,553.867 463.334,559.334C455.6,561.867 450.8,562 300,562C149.2,562 144.4,561.867 136.667,559.334C119.733,553.867 104,538.934 97.067,521.734L94,514L93.6,351.067L93.333,188.133L149.067,187.733L204.667,187.333L213.6,182.933C224.8,177.467 235.867,165.867 240.267,155.067C243.333,147.467 243.333,146.4 243.733,92.267L244.133,37.2L458,38L466.4,41.6ZM195.067,304C175.6,306.8 164,320.667 165.6,339.467C166,343.6 167.6,348.667 169.733,352.4C174.4,360.267 185.2,365.734 201.867,368.534C208.4,369.734 215.067,371.467 216.8,372.667C224,377.334 221.467,389.067 212.533,392C205.6,394.4 193.733,392.934 185.6,388.8C173.333,382.534 164,385.334 164,395.2C164,400.934 170.133,406.667 180.267,410.134C190.933,413.867 217.067,413.734 225.467,409.867C238.933,403.6 246.667,390 244.8,375.6C242.667,359.734 232.8,351.334 212.267,347.867C193.6,344.8 189.333,342.4 189.333,334.533C189.333,324.267 201.867,320.933 218.267,326.667C228.667,330.267 232.533,330.133 235.867,325.867C242.133,318 237.6,310.667 224.267,306.8C213.333,303.6 204.267,302.8 195.067,304ZM386,304.133C377.6,305.333 374,306.8 367.334,311.6C355.734,320.133 351.2,336.4 352.4,365.334C353.2,385.334 356,394.4 364.134,402.534C372.267,410.667 381.734,413.734 396.667,413.067C406.8,412.667 409.734,412 415.734,408.667C429.2,401.334 434.534,390.934 435.6,370.667C436.4,353.734 436,353.067 420.934,352.267C401.867,351.334 396,353.467 396,361.867C396,367.867 399.467,370.667 407.067,370.667C413.2,370.667 413.334,370.667 413.334,374.934C413.334,394 386.267,400.534 378.534,383.467C374.934,375.334 374.934,341.867 378.534,333.733C382,326.4 387.467,323.467 396.8,324.267C403.067,324.8 404.667,325.6 410.534,331.067C414.267,334.533 418.4,337.333 419.867,337.333C427.334,337.333 433.334,330.267 431.334,323.733C427.2,310.133 406.4,301.2 386,304.133ZM258.4,308C255.067,311.467 254.533,312.8 255.2,316.4C257.067,326.667 285.333,405.867 288.133,408.8C289.733,410.534 293.067,412.267 295.333,412.8C303.867,414.4 310.667,407.867 314.4,394.667C315.067,392.134 321.2,374.134 327.867,354.8C334.8,334.533 340,317.467 340,314.533C340,303.733 325.067,299.867 319.867,309.467C318.533,312.133 309.467,340.933 302.667,364C301.067,369.467 299.333,374.4 298.8,375.067C298.267,375.6 292.933,360.8 286.933,342C275.333,306 274.133,304 266.267,304C263.867,304 261.067,305.467 258.4,308Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>`;
+
+export type SVGSchema = Schema;
+
+const svgSchema: Plugin<SVGSchema> = {
+  ui: (arg) => {
+    const { rootElement, value, mode, onChange, theme, schema } = arg;
+    const container = document.createElement(isEditable(mode, schema) ? 'textarea' : 'div');
+    container.style.width = '100%';
+    container.style.height = '100%';
+    container.style.boxSizing = 'border-box';
+    if (isEditable(mode, schema)) {
+      const textarea = container as HTMLTextAreaElement;
+      textarea.value = value;
+      textarea.style.position = 'absolute';
+      textarea.style.backgroundColor = addAlphaToHex(theme.colorPrimaryBg, 30);
+
+      if (isValidSVG(value)) {
+        const svgElement = new DOMParser().parseFromString(value, 'text/xml').childNodes[0];
+        if (svgElement instanceof SVGElement) {
+          svgElement.setAttribute('width', '100%');
+          svgElement.setAttribute('height', '100%');
+          svgElement.style.position = 'absolute';
+        }
+        rootElement.appendChild(svgElement);
+      } else if (value) {
+        const errorElm = createErrorElm();
+        errorElm.style.position = 'absolute';
+        rootElement.appendChild(errorElm);
+      }
+
+      textarea.addEventListener('change', (e: Event) => {
+        const newValue = (e.target as HTMLTextAreaElement).value;
+        if (onChange) onChange({ key: 'content', value: newValue });
+      });
+      rootElement.appendChild(container);
+      textarea.setSelectionRange(value.length, value.length);
+      textarea.focus();
+    } else {
+      if (!value) return;
+      if (!isValidSVG(value)) {
+        rootElement.appendChild(createErrorElm());
+        return;
+      }
+      container.innerHTML = value;
+      const svgElement = container.childNodes[0];
+      if (svgElement instanceof SVGElement) {
+        svgElement.setAttribute('width', '100%');
+        svgElement.setAttribute('height', '100%');
+        rootElement.appendChild(container);
+      }
+    }
+  },
+  pdf: async (arg) => {
+    const { page, schema, value } = arg;
+    if (!value || !isValidSVG(value)) return;
+    const pageHeight = page.getHeight();
+    const { width, height, position } = convertForPdfLayoutProps({ schema, pageHeight });
+    const { x, y } = position;
+    await page.drawSvg(value, { x, y: y + height, width, height });
+  },
+  propPanel: {
+    schema: {},
+    defaultSchema: {
+      name: '',
+      type: 'svg',
+      content: defaultValue,
+      position: { x: 0, y: 0 },
+      width: 40,
+      height: 50,
+    },
+  },
+  icon: createSvgStr(Route),
+};
+
+export default svgSchema;

package/src/index.ts

@@ -0,0 +1,39 @@
+import multiVariableText from './multiVariableText/index.js';
+import text from './text/index.js';
+import image from './graphics/image.js';
+import svg from './graphics/svg.js';
+import barcodes from './barcodes/index.js';
+import line from './shapes/line.js';
+import table from './tables/index.js';
+import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
+import dateTime from './date/dateTime.js';
+import date from './date/date.js';
+import time from './date/time.js';
+import select from './select/index.js';
+import radioGroup from './radioGroup/index.js';
+import checkbox from './checkbox/index.js';
+
+const builtInPlugins = { Text: text };
+
+export {
+  builtInPlugins,
+  // schemas
+  text,
+  multiVariableText,
+  image,
+  svg,
+  table,
+  barcodes,
+  line,
+  rectangle,
+  ellipse,
+  dateTime,
+  date,
+  time,
+  select,
+  radioGroup,
+  checkbox,
+};
+
+// Export utility functions
+export { getDynamicHeightsForTable } from './tables/dynamicTemplate.js';

package/src/multiVariableText/helper.ts

@@ -0,0 +1,65 @@
+import { MultiVariableTextSchema } from './types.js';
+
+export const substituteVariables = (
+  text: string,
+  variablesIn: string | Record<string, string>,
+): string => {
+  if (!text) {
+    return '';
+  }
+
+  let substitutedText = text;
+
+  if (variablesIn) {
+    let variables: Record<string, string>;
+    try {
+      variables =
+        typeof variablesIn === 'string'
+          ? (JSON.parse(variablesIn || '{}') as Record<string, string>)
+          : variablesIn;
+    } catch {
+      throw new SyntaxError(`[@pdfme/schemas] MVT: invalid JSON string '${variablesIn as string}'`);
+    }
+
+    Object.keys(variables).forEach((variableName) => {
+      // handle special characters in variable name
+      const variableForRegex = variableName.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+      const regex = new RegExp('\\{' + variableForRegex + '\\}', 'g');
+      substitutedText = substitutedText.replace(regex, variables[variableName]);
+    });
+  }
+
+  // Remove any variables that were not substituted from inputs
+  substitutedText = substitutedText.replace(/{[^{}]+}/g, '');
+
+  return substitutedText;
+};
+
+export const validateVariables = (value: string, schema: MultiVariableTextSchema): boolean => {
+  if (schema.variables.length === 0) {
+    return true;
+  }
+
+  let values;
+  try {
+    values = value ? (JSON.parse(value) as Record<string, string>) : {};
+  } catch {
+    throw new SyntaxError(
+      `[@pdfme/generator] invalid JSON string '${value}' for variables in field ${schema.name}`,
+    );
+  }
+
+  for (const variable of schema.variables) {
+    if (!values[variable]) {
+      if (schema.required) {
+        throw new Error(
+          `[@pdfme/generator] variable ${variable} is missing for field ${schema.name}`,
+        );
+      }
+      // If not required, then simply don't render this field if an input is missing
+      return false;
+    }
+  }
+
+  return true;
+};

package/src/multiVariableText/index.ts

@@ -0,0 +1,16 @@
+import type { Plugin } from '@pdfme/common';
+import { pdfRender } from './pdfRender.js';
+import { propPanel } from './propPanel.js';
+import { uiRender } from './uiRender.js';
+import type { MultiVariableTextSchema } from './types.js';
+import { Type } from 'lucide';
+import { createSvgStr } from '../utils.js';
+
+const schema: Plugin<MultiVariableTextSchema> = {
+  pdf: pdfRender,
+  ui: uiRender,
+  propPanel,
+  icon: createSvgStr(Type),
+  uninterruptedEditMode: true,
+};
+export default schema;

package/src/multiVariableText/pdfRender.ts

@@ -0,0 +1,21 @@
+import { PDFRenderProps } from '@pdfme/common';
+import { MultiVariableTextSchema } from './types.js';
+import { pdfRender as parentPdfRender } from '../text/pdfRender.js';
+import { substituteVariables, validateVariables } from './helper.js';
+
+export const pdfRender = async (arg: PDFRenderProps<MultiVariableTextSchema>) => {
+  const { value, schema, ...rest } = arg;
+
+  if (!validateVariables(value, schema)) {
+    // Don't render if a required variable is missing
+    return;
+  }
+
+  const renderArgs = {
+    value: substituteVariables(schema.text || '', value),
+    schema,
+    ...rest,
+  };
+
+  await parentPdfRender(renderArgs);
+};