@pdfme/schemas 0.0.0

package/src/text/uiRender.ts

@@ -0,0 +1,288 @@
+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) =>
+          `<span style="letter-spacing:${
+            String(value).length === i + 1 ? 0 : 'inherit'
+          };">${l}</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

@@ -0,0 +1,281 @@
+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
+
+  // Handle non-array input
+  if (!Array.isArray(icon)) {
+    return 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 || {}),
+  };
+
+  // Format SVG attributes string
+  const svgAttrString = Object.entries(svgAttrs)
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
+
+  // Helper function to process a single element
+  const processElement = (element: unknown): string => {
+    if (!Array.isArray(element)) {
+      return String(element);
+    }
+
+    const [tag, attributes = {}, children = []] = element as [
+      unknown,
+      Record<string, string>,
+      unknown[],
+    ];
+    const tagName = String(tag);
+
+    // Format attributes string
+    const attrString = Object.entries(attributes)
+      .map(([key, value]) => `${key}="${value}"`)
+      .join(' ');
+
+    // 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.cjs.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "./dist/cjs",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "skipLibCheck": true
+  }
+}

package/tsconfig.esm.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "outDir": "./dist/esm",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "skipLibCheck": true
+  }
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.esm",
+  "compilerOptions": {
+    "outDir": "./dist",
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "./dist/node",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "skipLibCheck": true
+  }
+}