@pdfme/schemas 3.1.5 → 3.2.0-dev.1

package/src/graphics/image.ts

@@ -0,0 +1,207 @@
+import type { ChangeEvent } from 'react';
+import type { PDFImage } from '@pdfme/pdf-lib';
+import type { Plugin } from '@pdfme/common';
+import type { PDFRenderProps, Schema } from '@pdfme/common';
+import type * as CSS from 'csstype';
+import { Buffer } from 'buffer';
+import { UIRenderProps } from '@pdfme/common';
+import { convertForPdfLayoutProps, addAlphaToHex, isEditable, readFile } from '../utils.js';
+import { DEFAULT_OPACITY } from '../constants.js';
+import { imageSize } from './helper.js';
+
+const px2mm = (px: number): number => {
+  // http://www.endmemo.com/sconvert/millimeterpixel.php
+  const ratio = 0.26458333333333;
+  return parseFloat(String(px)) * ratio;
+};
+
+const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
+const fullSize = { width: '100%', height: '100%' };
+const defaultValue =
+  'data:image/png;base64,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';
+
+interface ImageSchema extends Schema {}
+
+const imageSchema: Plugin<ImageSchema> = {
+  pdf: async (arg: PDFRenderProps<ImageSchema>) => {
+    const { value, schema, pdfDoc, page, _cache } = arg;
+    if (!value || !value.startsWith('data:image/')) 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 dataUriPrefix = ';base64,';
+    const idx = value.indexOf(dataUriPrefix);
+    const imgBase64 = value.substring(idx + dataUriPrefix.length, value.length);
+    const dimension = imageSize(Buffer.from(imgBase64, 'base64'));
+
+    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;
+    page.drawImage(image, { x, y, rotate, width, height, opacity });
+  },
+  ui: (arg: UIRenderProps<ImageSchema>) => {
+    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', () => {
+        onChange && onChange('');
+      });
+      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) => onChange && onChange(result as string));
+      });
+      input.addEventListener('blur', () => stopEditing && stopEditing());
+      label.appendChild(input);
+    }
+  },
+  propPanel: {
+    schema: {},
+    defaultValue,
+    defaultSchema: {
+      type: 'image',
+      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,
+    },
+  },
+};
+
+export default imageSchema;
+
+export const readOnlyImage: Plugin<ImageSchema> = {
+  pdf: imageSchema.pdf,
+  ui: imageSchema.ui,
+  propPanel: {
+    ...imageSchema.propPanel,
+    defaultSchema: {
+      ...imageSchema.propPanel.defaultSchema,
+      type: 'readOnlyImage',
+      readOnly: true,
+      readOnlyValue: defaultValue,
+    },
+  },
+};

package/src/graphics/svg.ts

@@ -0,0 +1,98 @@
+import { Plugin, Schema } from '@pdfme/common';
+import { XMLValidator } from 'fast-xml-parser';
+import { convertForPdfLayoutProps, isEditable, addAlphaToHex, createErrorElm } from '../utils.js';
+
+const isValidSVG = (svgString: string) => XMLValidator.validate(svgString) === true;
+
+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>`;
+
+interface SVGSchema extends 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;
+        onChange && onChange(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: {},
+    defaultValue,
+    defaultSchema: {
+      type: 'svg',
+      position: { x: 0, y: 0 },
+      width: 40,
+      height: 40,
+    },
+  },
+};
+
+export default svgSchema;
+
+export const readOnlySvg: Plugin<SVGSchema> = {
+  pdf: svgSchema.pdf,
+  ui: svgSchema.ui,
+  propPanel: {
+    ...svgSchema.propPanel,
+    defaultSchema: {
+      ...svgSchema.propPanel.defaultSchema,
+      type: 'readOnlySvg',
+      readOnly: true,
+      readOnlyValue: defaultValue,
+    },
+  },
+};

package/src/index.ts

@@ -1,8 +1,25 @@
-import text from './text/index.js';
-import image from './image/index.js';
+import text, { readOnlyText } from './text/index.js';
+import image, { readOnlyImage } from './graphics/image.js';
+import svg, { readOnlySvg } from './graphics/svg.js';
 import barcodes from './barcodes/index.js';
-import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
+import line from './shapes/line.js';
+import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
+import { convertForPdfLayoutProps, rotatePoint } from './utils.js';
 
 const builtInPlugins = { Text: text };
 
-export { text, image, barcodes, builtInPlugins, convertForPdfLayoutProps, rotatePoint };
+export {
+  text,
+  readOnlyText,
+  image,
+  readOnlyImage,
+  svg,
+  readOnlySvg,
+  barcodes,
+  line,
+  rectangle,
+  ellipse,
+  builtInPlugins,
+  convertForPdfLayoutProps,
+  rotatePoint,
+};

package/src/shapes/line.ts

@@ -0,0 +1,67 @@
+import type { Schema, Plugin, PDFRenderProps, UIRenderProps } from '@pdfme/common';
+import { rotatePoint, convertForPdfLayoutProps, hex2RgbColor } from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+const DEFAULT_LINE_COLOR = '#000000';
+
+interface LineSchema extends Schema {
+  color: string;
+}
+
+const lineSchema: Plugin<LineSchema> = {
+  pdf: (arg: PDFRenderProps<LineSchema>) => {
+    const { page, schema } = arg;
+    const pageHeight = page.getHeight();
+    const {
+      width,
+      height,
+      rotate,
+      position: { x, y },
+      opacity,
+    } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
+    const pivot = { x: x + width / 2, y: y + height / 2 };
+    page.drawLine({
+      start: rotatePoint({ x, y: y + height / 2 }, pivot, rotate.angle),
+      end: rotatePoint({ x: x + width, y: y + height / 2 }, pivot, rotate.angle),
+      thickness: height,
+      color: hex2RgbColor(schema.color ?? DEFAULT_LINE_COLOR),
+      opacity: opacity,
+    });
+  },
+  ui: (arg: UIRenderProps<LineSchema>) => {
+    const { schema, rootElement } = arg;
+    const div = document.createElement('div');
+    div.style.backgroundColor = schema.color ?? DEFAULT_LINE_COLOR;
+    div.style.width = '100%';
+    div.style.height = '100%';
+    rootElement.appendChild(div);
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      color: {
+        title: i18n('schemas.color'),
+        type: 'string',
+        widget: 'color',
+        required: true,
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('hexColorPrompt'),
+          },
+        ],
+      },
+    }),
+    defaultValue: '',
+    defaultSchema: {
+      type: 'line',
+      position: { x: 0, y: 0 },
+      width: 50,
+      height: 1,
+      rotate: 0,
+      opacity: 1,
+      readOnly: true,
+      color: DEFAULT_LINE_COLOR,
+    },
+  },
+};
+export default lineSchema;

package/src/shapes/rectAndEllipse.ts

@@ -0,0 +1,110 @@
+import { Plugin, Schema, mm2pt } from '@pdfme/common';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { hex2RgbColor, convertForPdfLayoutProps } from '../utils.js';
+
+interface Shape extends Schema {
+  type: 'ellipse' | 'rectangle';
+  borderWidth: number;
+  borderColor: string;
+  color: string;
+}
+
+const shape: Plugin<Shape> = {
+  ui: (arg) => {
+    const { schema, rootElement } = arg;
+    const div = document.createElement('div');
+    div.style.width = '100%';
+    div.style.height = '100%';
+    div.style.boxSizing = 'border-box';
+    if (schema.type === 'ellipse') {
+      div.style.borderRadius = '50%';
+    }
+    div.style.borderWidth = `${schema.borderWidth ?? 0}mm`;
+    div.style.borderStyle = schema.borderWidth && schema.borderColor ? 'solid' : 'none';
+    div.style.borderColor = schema.borderColor ?? 'transparent';
+    div.style.backgroundColor = schema.color ?? 'transparent';
+
+    rootElement.appendChild(div);
+  },
+  pdf: (arg) => {
+    const { schema, page } = arg;
+    const pageHeight = page.getHeight();
+    const cArg = { schema, pageHeight };
+    const { position, width, height, rotate, opacity } = convertForPdfLayoutProps(cArg);
+    const {
+      position: { x: x4Ellipse, y: y4Ellipse },
+    } = convertForPdfLayoutProps({ ...cArg, applyRotateTranslate: false });
+    const borderWidth = schema.borderWidth ? mm2pt(schema.borderWidth) : 0;
+
+    const drawOptions = {
+      rotate,
+      borderWidth,
+      borderColor: hex2RgbColor(schema.borderColor),
+      color: hex2RgbColor(schema.color),
+      opacity,
+      borderOpacity: opacity,
+    };
+    if (schema.type === 'ellipse') {
+      page.drawEllipse({
+        x: x4Ellipse + width / 2,
+        y: y4Ellipse + height / 2,
+        xScale: width / 2 - borderWidth / 2,
+        yScale: height / 2 - borderWidth / 2,
+        ...drawOptions,
+      });
+    } else if (schema.type === 'rectangle') {
+      page.drawRectangle({
+        x: position.x + borderWidth / 2,
+        y: position.y + borderWidth / 2,
+        width: width - borderWidth,
+        height: height - borderWidth,
+        ...drawOptions,
+      });
+    }
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      borderWidth: {
+        title: i18n('schemas.borderWidth'),
+        type: 'number',
+        widget: 'inputNumber',
+        min: 0,
+        step: 1,
+      },
+      borderColor: {
+        title: i18n('schemas.borderColor'),
+        type: 'string',
+        widget: 'color',
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      },
+      color: {
+        title: i18n('schemas.color'),
+        type: 'string',
+        widget: 'color',
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      },
+    }),
+    defaultValue: '',
+    defaultSchema: {
+      type: 'rectangle',
+      position: { x: 0, y: 0 },
+      width: 62.5,
+      height: 37.5,
+      rotate: 0,
+      opacity: 1,
+      borderWidth: 5,
+      borderColor: '#000000',
+      color: '#ffffff',
+      readOnly: true,
+    },
+  },
+};
+
+const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
+  ...shape.propPanel,
+  defaultSchema: { ...shape.propPanel.defaultSchema, type },
+});
+
+export const rectangle = { ...shape, propPanel: getPropPanelSchema('rectangle') };
+
+export const ellipse = { ...shape, propPanel: getPropPanelSchema('ellipse') };

package/src/text/helper.ts

@@ -5,7 +5,6 @@ import {
   mm2pt,
   pt2mm,
   pt2px,
-  Schema,
   Font,
   getFallbackFontName,
   getDefaultFont,

package/src/text/index.ts

@@ -4,6 +4,20 @@ import { propPanel } from './propPanel.js';
 import { uiRender } from './uiRender.js';
 import type { TextSchema } from './types';
 
-const schema: Plugin<TextSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
+const textSchema: Plugin<TextSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
 
-export default schema;
+export default textSchema;
+
+export const readOnlyText: Plugin<TextSchema> = {
+  pdf: textSchema.pdf,
+  ui: textSchema.ui,
+  propPanel: {
+    ...textSchema.propPanel,
+    defaultSchema: {
+      ...textSchema.propPanel.defaultSchema,
+      type: 'readOnlyText',
+      readOnly: true,
+      readOnlyValue: textSchema.propPanel.defaultValue,
+    },
+  },
+};

package/src/text/pdfRender.ts

@@ -1,13 +1,6 @@
-import { PDFFont, PDFDocument, rgb } from '@pdfme/pdf-lib';
-import {
-  PDFRenderProps,
-  Font,
-  getDefaultFont,
-  getFallbackFontName,
-  mm2pt,
-  isHexValid,
-} from '@pdfme/common';
+import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
 import type { TextSchema, FontWidthCalcValues } from './types';
+import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName, mm2pt } from '@pdfme/common';
 import {
   VERTICAL_ALIGN_TOP,
   VERTICAL_ALIGN_MIDDLE,
@@ -27,37 +20,7 @@ import {
   getSplittedLines,
   widthOfTextAtSize,
 } from './helper.js';
-import { convertForPdfLayoutProps, rotatePoint } from '../renderUtils.js';
-
-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));
-};
-
-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;
-};
+import { convertForPdfLayoutProps, rotatePoint, hex2RgbColor } from '../utils.js';
 
 const embedAndGetFontObj = async (arg: {
   pdfDoc: PDFDocument;
@@ -118,6 +81,7 @@ const getFontProp = async ({
 
 export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const { value, pdfDoc, pdfLib, page, options, schema, _cache } = arg;
+  if (!value) return;
 
   const { font = getDefaultFont() } = options;
 
@@ -132,7 +96,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const fontName = (
     schema.fontName ? schema.fontName : getFallbackFontName(font)
   ) as keyof typeof pdfFontObj;
-  const pdfFontValue = pdfFontObj[fontName];
+  const pdfFontValue = pdfFontObj && pdfFontObj[fontName];
 
   const pageHeight = page.getHeight();
   const {
@@ -162,7 +126,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   };
 
   let lines: string[] = [];
-  value.split(/\r|\n|\r\n/g).forEach((line: string) => {
+  value.split(/\r\n|\r|\n/g).forEach((line: string) => {
     lines = lines.concat(getSplittedLines(line, fontWidthCalcValues));
   });
 

package/src/text/propPanel.ts

@@ -153,7 +153,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: 'Please enter a valid hex color code.',
+            message: i18n('hexColorPrompt'),
           },
         ],
       },
@@ -164,7 +164,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: 'Please enter a valid hex color code.',
+            message: i18n('hexColorPrompt'),
           },
         ],
       },