@pdfme/schemas 6.0.3 → 6.0.5-dev.1

package/src/text/uiRender.ts

@@ -1,292 +0,0 @@
-import type * as CSS from 'csstype';
-import type { Font as FontKitFont } from 'fontkit';
-import { UIRenderProps, getDefaultFont } from '@pdfme/common';
-import type { TextSchema } from './types.js';
-import {
-  DEFAULT_FONT_SIZE,
-  DEFAULT_ALIGNMENT,
-  VERTICAL_ALIGN_TOP,
-  VERTICAL_ALIGN_MIDDLE,
-  VERTICAL_ALIGN_BOTTOM,
-  DEFAULT_VERTICAL_ALIGNMENT,
-  DEFAULT_LINE_HEIGHT,
-  DEFAULT_CHARACTER_SPACING,
-  DEFAULT_FONT_COLOR,
-  PLACEHOLDER_FONT_COLOR,
-} from './constants.js';
-import {
-  calculateDynamicFontSize,
-  getFontKitFont,
-  getBrowserVerticalFontAdjustments,
-  isFirefox,
-} from './helper.js';
-import { isEditable } from '../utils.js';
-
-const replaceUnsupportedChars = (text: string, fontKitFont: FontKitFont): string => {
-  const charSupportCache: { [char: string]: boolean } = {};
-
-  const isCharSupported = (char: string): boolean => {
-    if (char in charSupportCache) {
-      return charSupportCache[char];
-    }
-    const isSupported = fontKitFont.hasGlyphForCodePoint(char.codePointAt(0) || 0);
-    charSupportCache[char] = isSupported;
-    return isSupported;
-  };
-
-  const segments = text.split(/(\r\n|\n|\r)/);
-
-  return segments
-    .map((segment) => {
-      if (/\r\n|\n|\r/.test(segment)) {
-        return segment;
-      }
-
-      return segment
-        .split('')
-        .map((char) => {
-          if (/\s/.test(char) || char.charCodeAt(0) < 32) {
-            return char;
-          }
-
-          return isCharSupported(char) ? char : '〿';
-        })
-        .join('');
-    })
-    .join('');
-};
-
-export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
-  const { value, schema, mode, onChange, stopEditing, tabIndex, placeholder, options, _cache } =
-    arg;
-  const usePlaceholder = isEditable(mode, schema) && placeholder && !value;
-  const getText = (element: HTMLDivElement) => {
-    let text = element.innerText;
-    if (text.endsWith('\n')) {
-      // contenteditable adds additional newline char retrieved with innerText
-      text = text.slice(0, -1);
-    }
-    return text;
-  };
-  const font = options?.font || getDefaultFont();
-  const fontKitFont = await getFontKitFont(
-    schema.fontName,
-    font,
-    _cache as Map<string, import('fontkit').Font>,
-  );
-  const textBlock = buildStyledTextContainer(
-    arg,
-    fontKitFont,
-    usePlaceholder ? placeholder : value,
-  );
-
-  const processedText = replaceUnsupportedChars(value, fontKitFont);
-
-  if (!isEditable(mode, schema)) {
-    // Read-only mode
-    textBlock.innerHTML = processedText
-      .split('')
-      .map((l, i) => {
-        const escaped = l
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;');
-        return `<span style="letter-spacing:${
-          String(value).length === i + 1 ? 0 : 'inherit'
-        };">${escaped}</span>`;
-      })
-      .join('');
-    return;
-  }
-
-  makeElementPlainTextContentEditable(textBlock);
-  textBlock.tabIndex = tabIndex || 0;
-  textBlock.innerText = mode === 'designer' ? value : processedText;
-  textBlock.addEventListener('blur', (e: Event) => {
-    if (onChange) onChange({ key: 'content', value: getText(e.target as HTMLDivElement) });
-    if (stopEditing) stopEditing();
-  });
-
-  if (schema.dynamicFontSize) {
-    let dynamicFontSize: undefined | number = undefined;
-
-    textBlock.addEventListener('keyup', () => {
-      setTimeout(() => {
-        // Use a regular function instead of an async one since we don't need await
-        (() => {
-          if (!textBlock.textContent) return;
-          dynamicFontSize = calculateDynamicFontSize({
-            textSchema: schema,
-            fontKitFont,
-            value: getText(textBlock),
-            startingFontSize: dynamicFontSize,
-          });
-          textBlock.style.fontSize = `${dynamicFontSize}pt`;
-
-          const { topAdj: newTopAdj, bottomAdj: newBottomAdj } = getBrowserVerticalFontAdjustments(
-            fontKitFont,
-            dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
-            schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
-            schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT,
-          );
-          textBlock.style.paddingTop = `${newTopAdj}px`;
-          textBlock.style.marginBottom = `${newBottomAdj}px`;
-        })();
-      }, 0);
-    });
-  }
-
-  if (usePlaceholder) {
-    textBlock.style.color = PLACEHOLDER_FONT_COLOR;
-    textBlock.addEventListener('focus', () => {
-      if (textBlock.innerText === placeholder) {
-        textBlock.innerText = '';
-        textBlock.style.color = schema.fontColor ?? DEFAULT_FONT_COLOR;
-      }
-    });
-  }
-
-  if (mode === 'designer') {
-    setTimeout(() => {
-      textBlock.focus();
-      // Set the focus to the end of the editable element when you focus, as we would for a textarea
-      const selection = window.getSelection();
-      const range = document.createRange();
-      if (selection && range) {
-        range.selectNodeContents(textBlock);
-        range.collapse(false); // Collapse range to the end
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    });
-  }
-};
-
-export const buildStyledTextContainer = (
-  arg: UIRenderProps<TextSchema>,
-  fontKitFont: FontKitFont,
-  value: string,
-) => {
-  const { schema, rootElement, mode } = arg;
-
-  let dynamicFontSize: undefined | number = undefined;
-
-  if (schema.dynamicFontSize && value) {
-    dynamicFontSize = calculateDynamicFontSize({
-      textSchema: schema,
-      fontKitFont,
-      value,
-      startingFontSize: dynamicFontSize,
-    });
-  }
-
-  // Depending on vertical alignment, we need to move the top or bottom of the font to keep
-  // it within it's defined box and align it with the generated pdf.
-  const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(
-    fontKitFont,
-    dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
-    schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
-    schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT,
-  );
-
-  const topAdjustment = topAdj.toString();
-  const bottomAdjustment = bottomAdj.toString();
-
-  const container = document.createElement('div');
-
-  const containerStyle: CSS.Properties = {
-    padding: 0,
-    resize: 'none',
-    backgroundColor: getBackgroundColor(value, schema),
-    border: 'none',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
-    width: '100%',
-    height: '100%',
-    cursor: isEditable(mode, schema) ? 'text' : 'default',
-  };
-  Object.assign(container.style, containerStyle);
-  rootElement.innerHTML = '';
-  rootElement.appendChild(container);
-
-  // text decoration
-  const textDecorations = [];
-  if (schema.strikethrough) textDecorations.push('line-through');
-  if (schema.underline) textDecorations.push('underline');
-
-  const textBlockStyle: CSS.Properties = {
-    // Font formatting styles
-    fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
-    color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
-    fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
-    letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
-    lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
-    textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
-    // Block layout styles
-    resize: 'none',
-    border: 'none',
-    outline: 'none',
-    marginBottom: `${bottomAdjustment}px`,
-    paddingTop: `${topAdjustment}px`,
-    backgroundColor: 'transparent',
-    textDecoration: textDecorations.join(' '),
-  };
-
-  const textBlock = document.createElement('div');
-  textBlock.id = 'text-' + String(schema.id);
-  Object.assign(textBlock.style, textBlockStyle);
-
-  container.appendChild(textBlock);
-
-  return textBlock;
-};
-
-/**
- * Firefox doesn't support 'plaintext-only' contentEditable mode, which we want to avoid mark-up.
- * This function adds a workaround for Firefox to make the contentEditable element behave like 'plaintext-only'.
- */
-export const makeElementPlainTextContentEditable = (element: HTMLElement) => {
-  if (!isFirefox()) {
-    element.contentEditable = 'plaintext-only';
-    return;
-  }
-
-  element.contentEditable = 'true';
-  element.addEventListener('keydown', (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      document.execCommand('insertLineBreak', false, undefined);
-    }
-  });
-
-  element.addEventListener('paste', (e: ClipboardEvent) => {
-    e.preventDefault();
-    const paste = e.clipboardData?.getData('text');
-    const selection = window.getSelection();
-    if (!selection?.rangeCount) return;
-    selection.deleteFromDocument();
-    selection.getRangeAt(0).insertNode(document.createTextNode(paste || ''));
-    selection.collapseToEnd();
-  });
-};
-
-export const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
-  switch (verticalAlignmentValue) {
-    case VERTICAL_ALIGN_TOP:
-      return 'flex-start';
-    case VERTICAL_ALIGN_MIDDLE:
-      return 'center';
-    case VERTICAL_ALIGN_BOTTOM:
-      return 'flex-end';
-  }
-  return 'flex-start';
-};
-
-const getBackgroundColor = (value: string, schema: { backgroundColor?: string }) => {
-  if (!value || !schema.backgroundColor) return 'transparent';
-  return schema.backgroundColor;
-};

package/src/utils.ts

@@ -1,354 +0,0 @@
-import type * as CSS from 'csstype';
-import { cmyk, degrees, degreesToRadians, rgb, Color } from '@pdfme/pdf-lib';
-import { Schema, mm2pt, Mode, isHexValid, ColorType } from '@pdfme/common';
-import { IconNode } from 'lucide';
-import { getDynamicHeightsForTable as _getDynamicHeightsForTable } from './tables/dynamicTemplate.js';
-export const convertForPdfLayoutProps = ({
-  schema,
-  pageHeight,
-  applyRotateTranslate = true,
-}: {
-  schema: Schema;
-  pageHeight: number;
-  applyRotateTranslate?: boolean;
-}) => {
-  const { width: mmWidth, height: mmHeight, position, rotate, opacity } = schema;
-  const { x: mmX, y: mmY } = position;
-
-  const rotateDegrees = rotate ? -rotate : 0;
-  const width = mm2pt(mmWidth);
-  const height = mm2pt(mmHeight);
-  let x = mm2pt(mmX);
-  // PDF coordinate system is from bottom left, UI is top left, so we need to flip the y axis
-  let y = pageHeight - mm2pt(mmY) - height;
-
-  if (rotateDegrees && applyRotateTranslate) {
-    // If rotating we must pivot around the same point as the UI performs its rotation.
-    // The UI performs rotation around the objects center point (the pivot point below),
-    // pdflib rotates around the bottom left corner of the object.
-    // We must therefore adjust the X and Y by rotating the bottom left corner by this pivot point.
-    const pivotPoint = { x: x + width / 2, y: pageHeight - mm2pt(mmY) - height / 2 };
-    const rotatedPoint = rotatePoint({ x, y }, pivotPoint, rotateDegrees);
-    x = rotatedPoint.x;
-    y = rotatedPoint.y;
-  }
-
-  return {
-    position: { x, y },
-    height: height,
-    width: width,
-    rotate: degrees(rotateDegrees),
-    opacity,
-  };
-};
-
-export const rotatePoint = (
-  point: { x: number; y: number },
-  pivot: { x: number; y: number },
-  angleDegrees: number,
-): { x: number; y: number } => {
-  const angleRadians = degreesToRadians(angleDegrees);
-
-  const x =
-    Math.cos(angleRadians) * (point.x - pivot.x) -
-    Math.sin(angleRadians) * (point.y - pivot.y) +
-    pivot.x;
-  const y =
-    Math.sin(angleRadians) * (point.x - pivot.x) +
-    Math.cos(angleRadians) * (point.y - pivot.y) +
-    pivot.y;
-
-  return { x, y };
-};
-
-export const getDynamicHeightsForTable = _getDynamicHeightsForTable;
-
-// ----------------------------------------
-
-export const addAlphaToHex = (hex: string, alphaPercentage: number) => {
-  if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i.test(hex)) {
-    throw new Error('Invalid HEX color code');
-  }
-  const alphaValue = Math.round((alphaPercentage / 100) * 255);
-  let alphaHex = alphaValue.toString(16);
-  if (alphaHex.length === 1) alphaHex = '0' + alphaHex;
-  return hex + alphaHex;
-};
-
-export const isEditable = (mode: Mode, schema: Schema) =>
-  mode === 'designer' || (mode === 'form' && schema.readOnly !== true);
-
-const hex2rgb = (hex: string) => {
-  if (hex.slice(0, 1) === '#') hex = hex.slice(1);
-  if (hex.length === 3)
-    hex =
-      hex.slice(0, 1) +
-      hex.slice(0, 1) +
-      hex.slice(1, 2) +
-      hex.slice(1, 2) +
-      hex.slice(2, 3) +
-      hex.slice(2, 3);
-
-  return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => parseInt(str, 16));
-};
-
-export const hex2RgbColor = (hexString: string | undefined) => {
-  if (hexString) {
-    const isValid = isHexValid(hexString);
-
-    if (!isValid) {
-      throw new Error(`Invalid hex color value ${hexString}`);
-    }
-
-    const [r, g, b] = hex2rgb(hexString);
-
-    return rgb(r / 255, g / 255, b / 255);
-  }
-
-  return undefined;
-};
-
-const hex2CmykColor = (hexString: string | undefined) => {
-  if (hexString) {
-    const isValid = isHexValid(hexString);
-
-    if (!isValid) {
-      throw new Error(`Invalid hex color value ${hexString}`);
-    }
-
-    // Remove the # if it's present
-    hexString = hexString.replace('#', '');
-
-    // Extract the hexadecimal color code and the opacity
-    const hexColor = hexString.substring(0, 6);
-    const opacityColor = hexString.substring(6, 8);
-    const opacity = opacityColor ? parseInt(opacityColor, 16) / 255 : 1;
-
-    // Convert the hex values to decimal
-    let r = parseInt(hexColor.substring(0, 2), 16) / 255;
-    let g = parseInt(hexColor.substring(2, 4), 16) / 255;
-    let b = parseInt(hexColor.substring(4, 6), 16) / 255;
-
-    // Apply the opacity
-    r = r * opacity + (1 - opacity);
-    g = g * opacity + (1 - opacity);
-    b = b * opacity + (1 - opacity);
-
-    // Calculate the CMYK values
-    const k = 1 - Math.max(r, g, b);
-    const c = r === 0 ? 0 : (1 - r - k) / (1 - k);
-    const m = g === 0 ? 0 : (1 - g - k) / (1 - k);
-    const y = b === 0 ? 0 : (1 - b - k) / (1 - k);
-
-    return cmyk(c, m, y, k);
-  }
-
-  return undefined;
-};
-
-export const hex2PrintingColor = (color?: string | Color, colorType?: ColorType) => {
-  // if color is already CMYK, RGB or Grayscale, does not required to convert
-  if (typeof color === 'object') return color;
-  return colorType?.toLowerCase() == 'cmyk' ? hex2CmykColor(color) : hex2RgbColor(color);
-};
-
-export const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer> =>
-  new Promise((resolve, reject) => {
-    const fileReader = new FileReader();
-
-    fileReader.onload = (e) => {
-      if (e.target?.result) {
-        resolve(e.target.result);
-      }
-    };
-
-    fileReader.onerror = () => {
-      reject(new Error('[@pdfme/schemas] File reading failed'));
-    };
-
-    let file: File | null = null;
-    if (input instanceof FileList && input.length > 0) {
-      file = input[0];
-    } else if (input instanceof File) {
-      file = input;
-    }
-
-    if (file) {
-      fileReader.readAsDataURL(file);
-    } else {
-      reject(new Error('[@pdfme/schemas] No files provided'));
-    }
-  });
-
-export const createErrorElm = () => {
-  const container = document.createElement('div');
-  const containerStyle: CSS.Properties = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-  };
-  Object.assign(container.style, containerStyle);
-
-  const span = document.createElement('span');
-  const spanStyle: CSS.Properties = {
-    color: 'white',
-    background: 'red',
-    padding: '0.25rem',
-    fontSize: '12pt',
-    fontWeight: 'bold',
-    borderRadius: '2px',
-    fontFamily: "'Open Sans', sans-serif",
-  };
-  Object.assign(span.style, spanStyle);
-
-  span.textContent = 'ERROR';
-  container.appendChild(span);
-
-  return container;
-};
-
-export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): string => {
-  // 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 escapeHtmlText(String(icon));
-  }
-
-  // Create default SVG attributes
-  const svgAttrs = {
-    xmlns: 'http://www.w3.org/2000/svg',
-    width: '24',
-    height: '24',
-    viewBox: '0 0 24 24',
-    fill: 'none',
-    stroke: 'currentColor',
-    'stroke-width': '2',
-    'stroke-linecap': 'round',
-    'stroke-linejoin': 'round',
-    ...attrs,
-  };
-  const svgAttrString = toSafeAttributeString(svgAttrs);
-
-  // Helper function to process a single element
-  const processElement = (element: unknown): string => {
-    if (!Array.isArray(element)) {
-      return escapeHtmlText(String(element));
-    }
-
-    const [tag, attributes = {}, children = []] = element as [
-      unknown,
-      Record<string, string>,
-      unknown[],
-    ];
-    const tagName = toSafeTagName(tag);
-    const attrString = toSafeAttributeString(attributes);
-
-    // Process children recursively
-    let childrenString = '';
-
-    if (Array.isArray(children) && children.length > 0) {
-      childrenString = children.map((child) => processElement(child)).join('');
-    }
-
-    // Return properly formatted element string
-    if (childrenString) {
-      return `<${String(tagName)}${attrString ? ' ' + String(attrString) : ''}>${childrenString}</${String(tagName)}>`;
-    } else {
-      // Self-closing tag for empty children
-      return `<${String(tagName)}${attrString ? ' ' + String(attrString) : ''}/>`;
-    }
-  };
-
-  // Process all elements and join them
-  const elementsString = Array.isArray(icon)
-    ? icon.map((element) => processElement(element)).join('')
-    : processElement(icon);
-
-  // Return the complete SVG string
-  return `<svg ${svgAttrString}>${elementsString}</svg>`;
-};

package/tsconfig.build.json

@@ -1,14 +0,0 @@
-{
-  "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,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "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" }]
-}