@pdfme/schemas 4.2.4 → 4.2.5-dev.3

package/src/multiVariableText/propPanel.ts

@@ -97,7 +97,9 @@ export const propPanel: PropPanel<MultiVariableTextSchema> = {
   defaultSchema: {
     ...parentPropPanel.defaultSchema,
     type: 'multiVariableText',
-    text: 'Type something...',
+    text: 'Add text here using {} for variables ',
+    width: 50,
+    height: 15,
     content: '{}',
     variables: [],
   },
@@ -113,7 +115,7 @@ const updateVariablesFromText = (text: string, variables: any): boolean => {
     // Add any new variables
     for (const match of matches) {
       const variableName = match.replace('{', '').replace('}', '');
-      if (!variables[variableName]) {
+      if (!(variableName in variables)) {
         // NOTE: We upper case the variable name as the default value
         variables[variableName] = variableName.toUpperCase();
         changed = true;

package/src/shapes/line.ts

@@ -45,7 +45,7 @@ const lineSchema: Plugin<LineSchema> = {
         type: 'string',
         widget: 'color',
         required: true,
-        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
       },
     }),
     defaultSchema: {

package/src/shapes/rectAndEllipse.ts

@@ -77,13 +77,13 @@ const shape: Plugin<ShapeSchema> = {
         title: i18n('schemas.borderColor'),
         type: 'string',
         widget: 'color',
-        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
       },
       color: {
         title: i18n('schemas.color'),
         type: 'string',
         widget: 'color',
-        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
       },
     }),
     defaultSchema: {

package/src/tables/helper.ts

@@ -110,19 +110,19 @@ export const getCellPropPanelSchema = (arg: {
       title: i18n('schemas.textColor'),
       type: 'string',
       widget: 'color',
-      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
     },
     borderColor: {
       title: i18n('schemas.borderColor'),
       type: 'string',
       widget: 'color',
-      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
     },
     backgroundColor: {
       title: i18n('schemas.backgroundColor'),
       type: 'string',
       widget: 'color',
-      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
     },
     ...(isBody
       ? {
@@ -130,7 +130,7 @@ export const getCellPropPanelSchema = (arg: {
             title: i18n('schemas.table.alternateBackgroundColor'),
             type: 'string',
             widget: 'color',
-            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
           },
         }
       : {}),

package/src/tables/propPanel.ts

@@ -33,7 +33,7 @@ export const propPanel: PropPanel<TableSchema> = {
             title: i18n('schemas.borderColor'),
             type: 'string',
             widget: 'color',
-            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
           },
         },
       },

package/src/text/pdfRender.ts

@@ -97,7 +97,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const [pdfFontObj, fontKitFont, fontProp] = await Promise.all([
     embedAndGetFontObj({ pdfDoc, font, _cache }),
     getFontKitFont(schema.fontName, font, _cache),
-    getFontProp({ value, font, schema, _cache }),
+    getFontProp({ value, font, schema, _cache, colorType }),
   ]);
 
   const { fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing } = fontProp;

package/src/text/propPanel.ts

@@ -39,9 +39,12 @@ const UseDynamicFontSize = (props: PropPanelWidgetProps) => {
     changeSchemas([{ key: 'dynamicFontSize', value: val, schemaId: activeSchema.id }]);
   };
   const label = document.createElement('label');
-  label.innerText = i18n('schemas.text.dynamicFontSize') || '';
+  const span = document.createElement('span');
+  span.innerText = i18n('schemas.text.dynamicFontSize') || '';
+  span.style.cssText = 'margin-left: 0.5rem';
   label.style.cssText = 'display: flex; width: 100%;';
   label.appendChild(checkbox);
+  label.appendChild(span);
   rootElement.appendChild(label);
 };
 
@@ -126,7 +129,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: i18n('hexColorPrompt'),
+            message: i18n('validation.hexColor'),
           },
         ],
       },
@@ -137,7 +140,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: i18n('hexColorPrompt'),
+            message: i18n('validation.hexColor'),
           },
         ],
       },

package/src/text/uiRender.ts

@@ -1,4 +1,5 @@
 import type * as CSS from 'csstype';
+import type { Font as FontKitFont } from 'fontkit';
 import { UIRenderProps, getDefaultFont } from '@pdfme/common';
 import type { TextSchema } from './types';
 import {
@@ -21,41 +22,79 @@ import {
 } 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 { 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, textBlock] = await Promise.all([
+    getFontKitFont(schema.fontName, font, _cache),
+    buildStyledTextContainer(arg, usePlaceholder ? placeholder : value),
+  ]);
 
-  const textBlock = await buildStyledTextContainer(arg, usePlaceholder ? placeholder : value);
+  const processedText = replaceUnsupportedChars(value, fontKitFont);
 
   if (!isEditable(mode, schema)) {
     // Read-only mode
-    textBlock.innerHTML = value
-        .split('')
-        .map(
-            (l: string, i: number) =>
-                `<span style="letter-spacing:${
-                    String(value).length === i + 1 ? 0 : 'inherit'
-                };">${l}</span>`
-        )
-        .join('');
+    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 = value;
+  textBlock.innerText = mode === 'designer' ? value : processedText;
   textBlock.addEventListener('blur', (e: Event) => {
-    onChange && onChange({ key: 'content', value: (e.target as HTMLDivElement).textContent });
+    onChange && onChange({ key: 'content', value: getText(e.target as HTMLDivElement) });
     stopEditing && stopEditing();
   });
 
@@ -71,19 +110,18 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
           dynamicFontSize = await calculateDynamicFontSize({
             textSchema: schema,
             font,
-            value: textBlock.textContent,
+            value: getText(textBlock),
             startingFontSize: dynamicFontSize,
             _cache,
           });
           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
-            );
+          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`;
         })();
@@ -118,13 +156,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
 };
 
 export const buildStyledTextContainer = async (arg: UIRenderProps<TextSchema>, value: string) => {
-  const {
-    schema,
-    rootElement,
-    mode,
-    options,
-    _cache,
-  } = arg;
+  const { schema, rootElement, mode, options, _cache } = arg;
   const font = options?.font || getDefaultFont();
 
   let dynamicFontSize: undefined | number = undefined;
@@ -143,10 +175,10 @@ export const buildStyledTextContainer = async (arg: UIRenderProps<TextSchema>, v
   // 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
+    fontKitFont,
+    dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
+    schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
+    schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
   );
 
   const topAdjustment = topAdj.toString();
@@ -231,7 +263,7 @@ export const makeElementPlainTextContentEditable = (element: HTMLElement) => {
     selection.getRangeAt(0).insertNode(document.createTextNode(paste || ''));
     selection.collapseToEnd();
   });
-}
+};
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {