@pdfme/schemas 3.1.3 → 3.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/barcodes/constants.ts

@@ -15,5 +15,3 @@ export const BARCODE_TYPES = [
 export const DEFAULT_BARCODE_BG_COLOR = '#ffffff';
 
 export const DEFAULT_BARCODE_COLOR = '#000000';
-
-export const DEFAULT_OPACITY = 1;

package/src/barcodes/propPanel.ts

@@ -1,6 +1,7 @@
 import type { PropPanel } from '@pdfme/common';
 import type { BarcodeSchema } from './types';
-import { DEFAULT_BARCODE_COLOR, DEFAULT_BARCODE_BG_COLOR, DEFAULT_OPACITY } from './constants.js';
+import { DEFAULT_BARCODE_COLOR, DEFAULT_BARCODE_BG_COLOR } from './constants.js';
+import { DEFAULT_OPACITY, HEX_COLOR_PATTERN } from '../constants.js';
 
 const defaultColors = {
   backgroundColor: DEFAULT_BARCODE_BG_COLOR,
@@ -158,8 +159,28 @@ export const getPropPanelByBarcodeType = (barcodeType: string): PropPanel<Barcod
   return {
     schema: ({ i18n }) => {
       return {
-        barColor: { title: i18n('schemas.barcodes.barColor'), type: 'string', widget: 'color' },
-        backgroundColor: { title: i18n('schemas.bgColor'), type: 'string', widget: 'color' },
+        barColor: {
+          title: i18n('schemas.barcodes.barColor'),
+          type: 'string',
+          widget: 'color',
+          rules: [
+            {
+              pattern: HEX_COLOR_PATTERN,
+              message: 'Please enter a valid hex color code.',
+            },
+          ],
+        },
+        backgroundColor: {
+          title: i18n('schemas.bgColor'),
+          type: 'string',
+          widget: 'color',
+          rules: [
+            {
+              pattern: HEX_COLOR_PATTERN,
+              message: 'Please enter a valid hex color code.',
+            },
+          ],
+        },
         ...(barcodeHasText
           ? { textColor: { title: i18n('schemas.textColor'), type: 'string', widget: 'color' } }
           : {}),

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_OPACITY = 1;
+export const HEX_COLOR_PATTERN = '^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$';

package/src/image/propPanel.ts

@@ -1,6 +1,6 @@
 import { PropPanel } from '@pdfme/common';
 import type { ImageSchema } from './types';
-import { DEFAULT_OPACITY } from '../image/constants';
+import { DEFAULT_OPACITY } from '../constants.js';
 
 export const propPanel: PropPanel<ImageSchema> = {
   schema: {},

package/src/text/constants.ts

@@ -13,6 +13,7 @@ export const DEFAULT_VERTICAL_ALIGNMENT = VERTICAL_ALIGN_TOP;
 export const DEFAULT_LINE_HEIGHT = 1;
 export const DEFAULT_CHARACTER_SPACING = 0;
 export const DEFAULT_FONT_COLOR = '#000000';
+export const PLACEHOLDER_FONT_COLOR = '#A0A0A0';
 export const DYNAMIC_FIT_VERTICAL = 'vertical' as DYNAMIC_FONT_SIZE_FIT;
 export const DYNAMIC_FIT_HORIZONTAL = 'horizontal' as DYNAMIC_FONT_SIZE_FIT;
 export const DEFAULT_DYNAMIC_FIT = DYNAMIC_FIT_VERTICAL;
@@ -20,4 +21,3 @@ export const DEFAULT_DYNAMIC_MIN_FONT_SIZE = 4;
 
 export const DEFAULT_DYNAMIC_MAX_FONT_SIZE = 72;
 export const FONT_SIZE_ADJUSTMENT = 0.25;
-export const DEFAULT_OPACITY = 1;

package/src/text/helper.ts

@@ -106,11 +106,13 @@ const getFallbackFont = (font: Font) => {
   return font[fallbackFontName];
 };
 
-const fontKitFontCache: { [fontName: string]: FontKitFont } = {};
-export const getFontKitFont = async (textSchema: Schema, font: Font) => {
-  const fontName = (textSchema.fontName as string) || getFallbackFontName(font);
-  if (fontKitFontCache[fontName]) {
-    return fontKitFontCache[fontName];
+const getCacheKey = (fontName: string) => `getFontKitFont-${fontName}`;
+
+export const getFontKitFont = async (textSchema: TextSchema, font: Font, _cache: Map<any, any>) => {
+  const fontName = textSchema.fontName || getFallbackFontName(font);
+  const cacheKey = getCacheKey(fontName);
+  if (_cache.has(cacheKey)) {
+    return _cache.get(cacheKey) as fontkit.Font;
   }
 
   const currentFont =
@@ -125,7 +127,7 @@ export const getFontKitFont = async (textSchema: Schema, font: Font) => {
   const fontKitFont = fontkit.create(
     fontData instanceof Buffer ? fontData : Buffer.from(fontData as ArrayBuffer)
   );
-  fontKitFontCache[fontName] = fontKitFont;
+  _cache.set(cacheKey, fontKitFont);
 
   return fontKitFont;
 };
@@ -202,11 +204,13 @@ export const calculateDynamicFontSize = async ({
   font,
   value,
   startingFontSize,
+  _cache,
 }: {
   textSchema: TextSchema;
   font: Font;
   value: string;
   startingFontSize?: number | undefined;
+  _cache: Map<any, any>;
 }) => {
   const {
     fontSize: schemaFontSize,
@@ -221,7 +225,7 @@ export const calculateDynamicFontSize = async ({
   if (dynamicFontSizeSetting.max < dynamicFontSizeSetting.min) return fontSize;
 
   const characterSpacing = schemaCharacterSpacing ?? DEFAULT_CHARACTER_SPACING;
-  const fontKitFont = await getFontKitFont(textSchema, font);
+  const fontKitFont = await getFontKitFont(textSchema, font, _cache);
   const paragraphs = value.split('\n');
 
   let dynamicFontSize = fontSize;

package/src/text/pdfRender.ts

@@ -1,5 +1,12 @@
 import { PDFFont, PDFDocument, rgb } from '@pdfme/pdf-lib';
-import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName, mm2pt } from '@pdfme/common';
+import {
+  PDFRenderProps,
+  Font,
+  getDefaultFont,
+  getFallbackFontName,
+  mm2pt,
+  isHexValid,
+} from '@pdfme/common';
 import type { TextSchema, FontWidthCalcValues } from './types';
 import {
   VERTICAL_ALIGN_TOP,
@@ -38,6 +45,12 @@ const hex2rgb = (hex: string) => {
 
 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);
@@ -46,11 +59,14 @@ const hex2RgbColor = (hexString: string | undefined) => {
   return undefined;
 };
 
-const embedAndGetFontObjCache = new WeakMap();
-const embedAndGetFontObj = async (arg: { pdfDoc: PDFDocument; font: Font }) => {
-  const { pdfDoc, font } = arg;
-  if (embedAndGetFontObjCache.has(pdfDoc)) {
-    return embedAndGetFontObjCache.get(pdfDoc);
+const embedAndGetFontObj = async (arg: {
+  pdfDoc: PDFDocument;
+  font: Font;
+  _cache: Map<any, any>;
+}) => {
+  const { pdfDoc, font, _cache } = arg;
+  if (_cache.has(pdfDoc)) {
+    return _cache.get(pdfDoc) as { [key: string]: PDFFont };
   }
 
   const fontValues = await Promise.all(
@@ -70,7 +86,7 @@ const embedAndGetFontObj = async (arg: { pdfDoc: PDFDocument; font: Font }) => {
     {} as { [key: string]: PDFFont }
   );
 
-  embedAndGetFontObjCache.set(pdfDoc, fontObj);
+  _cache.set(pdfDoc, fontObj);
   return fontObj;
 };
 
@@ -78,13 +94,15 @@ const getFontProp = async ({
   value,
   font,
   schema,
+  _cache,
 }: {
   value: string;
   font: Font;
   schema: TextSchema;
+  _cache: Map<any, any>;
 }) => {
   const fontSize = schema.dynamicFontSize
-    ? await calculateDynamicFontSize({ textSchema: schema, font, value })
+    ? await calculateDynamicFontSize({ textSchema: schema, font, value, _cache })
     : schema.fontSize ?? DEFAULT_FONT_SIZE;
   const color = hex2RgbColor(schema.fontColor || DEFAULT_FONT_COLOR);
 
@@ -99,14 +117,14 @@ const getFontProp = async ({
 };
 
 export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
-  const { value, pdfDoc, pdfLib, page, options, schema } = arg;
+  const { value, pdfDoc, pdfLib, page, options, schema, _cache } = arg;
 
   const { font = getDefaultFont() } = options;
 
   const [pdfFontObj, fontKitFont, fontProp] = await Promise.all([
-    embedAndGetFontObj({ pdfDoc, font }),
-    getFontKitFont(schema, font),
-    getFontProp({ value, font, schema }),
+    embedAndGetFontObj({ pdfDoc, font, _cache }),
+    getFontKitFont(schema, font, _cache),
+    getFontProp({ value, font, schema, _cache }),
   ]);
 
   const { fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing } = fontProp;
@@ -126,7 +144,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
 
   if (schema.backgroundColor) {
-    const color = hex2RgbColor(schema.backgroundColor as string);
+    const color = hex2RgbColor(schema.backgroundColor);
     page.drawRectangle({ x, y, width, height, rotate, color });
   }
 

package/src/text/propPanel.ts

@@ -23,8 +23,8 @@ import {
   DEFAULT_DYNAMIC_MAX_FONT_SIZE,
   ALIGN_RIGHT,
   ALIGN_CENTER,
-  DEFAULT_OPACITY,
 } from './constants.js';
+import { DEFAULT_OPACITY, HEX_COLOR_PATTERN } from '../constants.js';
 
 const UseDynamicFontSize = (props: PropPanelWidgetProps) => {
   const { rootElement, changeSchemas, activeSchema, i18n } = props;
@@ -146,8 +146,28 @@ export const propPanel: PropPanel<TextSchema> = {
           },
         },
       },
-      fontColor: { title: i18n('schemas.textColor'), type: 'string', widget: 'color' },
-      backgroundColor: { title: i18n('schemas.bgColor'), type: 'string', widget: 'color' },
+      fontColor: {
+        title: i18n('schemas.textColor'),
+        type: 'string',
+        widget: 'color',
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: 'Please enter a valid hex color code.',
+          },
+        ],
+      },
+      backgroundColor: {
+        title: i18n('schemas.bgColor'),
+        type: 'string',
+        widget: 'color',
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: 'Please enter a valid hex color code.',
+          },
+        ],
+      },
     };
 
     return textSchema;

package/src/text/uiRender.ts

@@ -11,7 +11,7 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
-  DEFAULT_OPACITY,
+  PLACEHOLDER_FONT_COLOR,
 } from './constants.js';
 import {
   calculateDynamicFontSize,
@@ -19,6 +19,7 @@ import {
   getBrowserVerticalFontAdjustments,
 } from './helper.js';
 import { addAlphaToHex } from '../renderUtils.js';
+import { DEFAULT_OPACITY } from '../constants.js';
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {
@@ -59,20 +60,23 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     placeholder,
     options,
     theme,
+    _cache,
   } = arg;
   const font = options?.font || getDefaultFont();
 
   let dynamicFontSize: undefined | number = undefined;
+  const getCdfArg = (v: string) => ({
+    textSchema: schema,
+    font,
+    value: v,
+    startingFontSize: dynamicFontSize,
+    _cache,
+  });
   if (schema.dynamicFontSize && value) {
-    dynamicFontSize = await calculateDynamicFontSize({
-      textSchema: schema,
-      font,
-      value,
-      startingFontSize: dynamicFontSize,
-    });
+    dynamicFontSize = await calculateDynamicFontSize(getCdfArg(value));
   }
 
-  const fontKitFont = await getFontKitFont(schema, font);
+  const fontKitFont = await getFontKitFont(schema, font, _cache);
   // 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(
@@ -82,8 +86,8 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
   );
 
-  const topAdjustment = topAdj;
-  const bottomAdjustment = bottomAdj;
+  const topAdjustment = topAdj.toString();
+  const bottomAdjustment = bottomAdj.toString();
 
   const container = document.createElement('div');
 
@@ -102,13 +106,14 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
     width: '100%',
     height: '100%',
-    opacity: schema.opacity,
+    opacity: schema.opacity ?? DEFAULT_OPACITY,
   };
   Object.assign(container.style, containerStyle);
   rootElement.innerHTML = '';
   rootElement.appendChild(container);
 
-  const fontStyles: CSS.Properties = {
+  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`,
@@ -117,45 +122,77 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     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',
   };
+  const textBlock = document.createElement('div');
+  Object.assign(textBlock.style, textBlockStyle);
 
   if (mode === 'form' || mode === 'designer') {
-    const textarea = document.createElement('textarea');
-    const textareaStyle: CSS.Properties = {
-      padding: 0,
-      resize: 'none',
-      border: 'none',
-      outline: 'none',
-      paddingTop: topAdjustment + 'px',
-      backgroundColor: 'transparent',
-      width: '100%',
-      height: '100%',
-    };
-    Object.assign(textarea.style, textareaStyle, fontStyles);
-    textarea.rows = 1;
-    textarea.placeholder = placeholder || '';
-    textarea.tabIndex = tabIndex || 0;
-
-    textarea.addEventListener(
-      'change',
-      (e: Event) => onChange && onChange((e.target as HTMLTextAreaElement).value)
-    );
-    textarea.addEventListener('blur', () => stopEditing && stopEditing());
-    textarea.value = value;
-    container.appendChild(textarea);
+    textBlock.contentEditable = 'plaintext-only';
+    textBlock.tabIndex = tabIndex || 0;
+    textBlock.innerText = value;
+    textBlock.addEventListener('blur', (e: Event) => {
+      onChange && onChange((e.target as HTMLDivElement).innerText);
+      stopEditing && stopEditing();
+    });
+
+    if (schema.dynamicFontSize) {
+      textBlock.addEventListener('keyup', () => {
+        setTimeout(() => {
+          void (async () => {
+            if (!textBlock.textContent) return;
+            dynamicFontSize = await calculateDynamicFontSize(getCdfArg(textBlock.textContent));
+            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.toString() + 'px';
+            textBlock.style.marginBottom = newBottomAdj.toString() + 'px';
+          })();
+        }, 0);
+      });
+    }
+
+    if (placeholder && !value) {
+      textBlock.innerText = placeholder;
+      textBlock.style.color = PLACEHOLDER_FONT_COLOR;
+      if (schema.dynamicFontSize) {
+        const fontSize = await calculateDynamicFontSize(getCdfArg(placeholder));
+        textBlock.style.fontSize = `${fontSize}pt`;
+      }
+      textBlock.addEventListener('focus', () => {
+        if (textBlock.innerText === placeholder) {
+          textBlock.innerText = '';
+          textBlock.style.color = schema.fontColor ?? DEFAULT_FONT_COLOR;
+        }
+      });
+    }
+
+    container.appendChild(textBlock);
+
     if (mode === 'designer') {
-      textarea.setSelectionRange(value.length, value.length);
-      textarea.focus();
+      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();
+      range.selectNodeContents(textBlock);
+      range.collapse(false); // Collapse range to the end
+      selection?.removeAllRanges();
+      selection?.addRange(range);
     }
   } else {
-    const div = document.createElement('div');
-    const divStyle: CSS.Properties = {
-      ...fontStyles,
-      marginBottom: bottomAdjustment + 'px',
-      paddingTop: topAdjustment + 'px',
-    };
-    Object.assign(div.style, divStyle);
-    div.innerHTML = value
+    textBlock.innerHTML = value
       .split('')
       .map(
         (l: string, i: number) =>
@@ -165,6 +202,6 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
       )
       .join('');
 
-    container.appendChild(div);
+    container.appendChild(textBlock);
   }
 };

package/dist/cjs/src/image/constants.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_OPACITY = void 0;
-exports.DEFAULT_OPACITY = 1;
-//# sourceMappingURL=constants.js.map

package/dist/cjs/src/image/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/image/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,eAAe,GAAG,CAAC,CAAC"}

package/dist/cjs/src/image/helper.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=helper.js.map

package/dist/cjs/src/image/helper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../../src/image/helper.ts"],"names":[],"mappings":""}

package/dist/esm/src/image/constants.js

@@ -1,2 +0,0 @@
-export const DEFAULT_OPACITY = 1;
-//# sourceMappingURL=constants.js.map

package/dist/esm/src/image/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/image/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC"}

package/dist/esm/src/image/helper.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=helper.js.map

package/dist/esm/src/image/helper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../../src/image/helper.ts"],"names":[],"mappings":""}

package/dist/types/src/image/constants.d.ts

@@ -1 +0,0 @@
-export declare const DEFAULT_OPACITY = 1;

package/dist/types/src/image/helper.d.ts

@@ -1 +0,0 @@
-export {};

package/src/image/constants.ts

@@ -1 +0,0 @@
-export const DEFAULT_OPACITY = 1;

package/src/image/helper.ts

@@ -1 +0,0 @@
-export {};