@pdfme/schemas 5.3.3 → 5.3.4-dev.2

package/src/multiVariableText/uiRender.ts

@@ -1,4 +1,4 @@
-import { UIRenderProps } from '@pdfme/common';
+import { getDefaultFont, UIRenderProps } from '@pdfme/common';
 import { MultiVariableTextSchema } from './types';
 import {
   uiRender as parentUiRender,
@@ -6,6 +6,7 @@ import {
   makeElementPlainTextContentEditable
 } from '../text/uiRender';
 import { isEditable } from '../utils';
+import { getFontKitFont } from '../text/helper';
 import { substituteVariables } from './helper';
 
 export const uiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
@@ -65,6 +66,8 @@ const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
     onChange,
     stopEditing,
     theme,
+    _cache,
+    options,
   } = arg;
   const rawText = schema.text;
 
@@ -76,8 +79,10 @@ const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
   const variables: Record<string, string> = JSON.parse(value) || {}
   const variableIndices = getVariableIndices(rawText);
   const substitutedText = substituteVariables(rawText, variables);
+  const font = options?.font || getDefaultFont();
+  const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
 
-  const textBlock = await buildStyledTextContainer(arg, substitutedText);
+  const textBlock = buildStyledTextContainer(arg, fontKitFont, substitutedText);
 
   // Construct content-editable spans for each variable within the string
   let inVarString = false;

package/src/shapes/rectAndEllipse.ts

@@ -1,6 +1,7 @@
 import { Plugin, Schema, mm2pt } from '@pdfme/common';
 import { HEX_COLOR_PATTERN } from '../constants.js';
 import { hex2PrintingColor, convertForPdfLayoutProps, createSvgStr } from '../utils.js';
+import { toRadians } from '@pdfme/pdf-lib';
 import { Circle, Square } from 'lucide';
 
 interface ShapeSchema extends Schema {
@@ -57,8 +58,8 @@ const shape: Plugin<ShapeSchema> = {
       });
     } else if (schema.type === 'rectangle') {
       page.drawRectangle({
-        x: position.x + borderWidth / 2,
-        y: position.y + borderWidth / 2,
+        x: position.x + borderWidth * ((1 - Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * (Math.PI ** 2),
+        y: position.y + borderWidth * ((1 + Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * (Math.PI ** 2),
         width: width - borderWidth,
         height: height - borderWidth,
         ...drawOptions,

package/src/tables/propPanel.ts

@@ -43,7 +43,7 @@ export const propPanel: PropPanel<TableSchema> = {
             type: 'string',
             widget: 'color',
             props: {
-              disabledAlpha: true
+              disabledAlpha: true,
             },
             rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
           },

package/src/tables/types.ts

@@ -43,7 +43,7 @@ export interface Styles {
   textColor: string;
   lineHeight: number;
   characterSpacing: number;
-  alignment: 'left' | 'center' | 'right';
+  alignment: 'left' | 'center' | 'right' | 'justify';
   verticalAlignment: 'top' | 'middle' | 'bottom';
   fontSize: number;
   cellPadding: Spacing;

package/src/text/constants.ts

@@ -5,6 +5,7 @@ export const DEFAULT_FONT_SIZE = 13;
 export const ALIGN_LEFT = 'left' as ALIGNMENT;
 export const ALIGN_CENTER = 'center' as ALIGNMENT;
 export const ALIGN_RIGHT = 'right' as ALIGNMENT;
+export const ALIGN_JUSTIFY = 'justify' as ALIGNMENT;
 export const DEFAULT_ALIGNMENT = ALIGN_LEFT;
 export const VERTICAL_ALIGN_TOP = 'top' as VERTICAL_ALIGNMENT;
 export const VERTICAL_ALIGN_MIDDLE = 'middle' as VERTICAL_ALIGNMENT;
@@ -21,3 +22,83 @@ 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 LINE_START_FORBIDDEN_CHARS = [
+  // 句読点
+  '、',
+  '。',
+  ',',
+  '.',
+
+  // 閉じカッコ類
+  '」',
+  '』',
+  ')',
+  '}',
+  '】',
+  '>',
+  '≫',
+  ']',
+
+  // 記号
+  '・',
+  'ー',
+  '―',
+  '-',
+
+  // 約物
+  '!',
+  '！',
+  '?',
+  '？',
+  ':',
+  '：',
+  ';',
+  '；',
+  '/',
+  '／',
+
+  // 繰り返し記号
+  'ゝ',
+  '々',
+  '〃',
+
+  // 拗音・促音（小書きのかな）
+  'ぁ',
+  'ぃ',
+  'ぅ',
+  'ぇ',
+  'ぉ',
+  'っ',
+  'ゃ',
+  'ゅ',
+  'ょ',
+  'ァ',
+  'ィ',
+  'ゥ',
+  'ェ',
+  'ォ',
+  'ッ',
+  'ャ',
+  'ュ',
+  'ョ',
+];
+
+export const LINE_END_FORBIDDEN_CHARS = [
+  // 始め括弧類
+  '「',
+  '『',
+  '（',
+  '｛',
+  '【',
+  '＜',
+  '≪',
+  '［',
+  '〘',
+  '〖',
+  '〝',
+  '‘',
+  '“',
+  '｟',
+  '«',
+];

package/src/text/extraFormatter.ts

@@ -3,6 +3,7 @@ import {
   TextAlignCenterIcon,
   TextAlignLeftIcon,
   TextAlignRightIcon,
+  TextAlignJustifyIcon,
   TextStrikethroughIcon,
   TextUnderlineIcon,
   TextVerticalAlignBottomIcon,
@@ -16,6 +17,7 @@ import {
   DEFAULT_VERTICAL_ALIGNMENT,
   VERTICAL_ALIGN_BOTTOM,
   VERTICAL_ALIGN_MIDDLE,
+  ALIGN_JUSTIFY,
 } from './constants';
 
 export enum Formatter {
@@ -52,6 +54,7 @@ export function getExtraFormatterSchema(i18n: (key: keyof Dict | string) => stri
     { key: Formatter.ALIGNMENT, icon: TextAlignLeftIcon, type: 'select', value: DEFAULT_ALIGNMENT },
     { key: Formatter.ALIGNMENT, icon: TextAlignCenterIcon, type: 'select', value: ALIGN_CENTER },
     { key: Formatter.ALIGNMENT, icon: TextAlignRightIcon, type: 'select', value: ALIGN_RIGHT },
+    { key: Formatter.ALIGNMENT, icon: TextAlignJustifyIcon, type: 'select', value: ALIGN_JUSTIFY },
     {
       key: Formatter.VERTICAL_ALIGNMENT,
       icon: TextVerticalAlignTopIcon,
@@ -75,6 +78,6 @@ export function getExtraFormatterSchema(i18n: (key: keyof Dict | string) => stri
     title: i18n('schemas.text.format'),
     widget: 'ButtonGroup',
     buttons,
-    span: 17,
+    span: 24,
   };
 }

package/src/text/helper.ts

@@ -21,6 +21,8 @@ import {
   DYNAMIC_FIT_HORIZONTAL,
   DYNAMIC_FIT_VERTICAL,
   VERTICAL_ALIGN_TOP,
+  LINE_END_FORBIDDEN_CHARS,
+  LINE_START_FORBIDDEN_CHARS,
 } from './constants.js';
 
 export const getBrowserVerticalFontAdjustments = (
@@ -163,9 +165,9 @@ const getOverPosition = (textLine: string, calcValues: FontWidthCalcValues) => {
  * However, this might need to be revisited for broader language support.
  */
 const isLineBreakableChar = (char: string) => {
-  const lineBreakableChars = [' ', '-', "\u2014", "\u2013"];
+  const lineBreakableChars = [' ', '-', '\u2014', '\u2013'];
   return lineBreakableChars.includes(char);
-}
+};
 
 /**
  * Gets the position of the split. Splits the exceeding line at
@@ -183,7 +185,7 @@ const getSplitPosition = (textLine: string, calcValues: FontWidthCalcValues) =>
   let overPosTmp = overPos - 1;
   while (overPosTmp >= 0) {
     if (isLineBreakableChar(textLine[overPosTmp])) {
-      return overPosTmp+1;
+      return overPosTmp + 1;
     }
     overPosTmp--;
   }
@@ -221,18 +223,16 @@ export const getSplittedLines = (textLine: string, calcValues: FontWidthCalcValu
  * Calculating space usage involves splitting lines where they exceed
  * the box width based on the proposed size.
  */
-export const calculateDynamicFontSize = async ({
+export const calculateDynamicFontSize = ({
   textSchema,
-  font,
+  fontKitFont,
   value,
   startingFontSize,
-  _cache,
 }: {
   textSchema: TextSchema;
-  font: Font;
+  fontKitFont: FontKitFont;
   value: string;
   startingFontSize?: number | undefined;
-  _cache: Map<any, any>;
 }) => {
   const {
     fontSize: schemaFontSize,
@@ -247,7 +247,6 @@ export const calculateDynamicFontSize = async ({
   if (dynamicFontSizeSetting.max < dynamicFontSizeSetting.min) return fontSize;
 
   const characterSpacing = schemaCharacterSpacing ?? DEFAULT_CHARACTER_SPACING;
-  const fontKitFont = await getFontKitFont(textSchema.fontName, font, _cache);
   const paragraphs = value.split('\n');
 
   let dynamicFontSize = fontSize;
@@ -268,16 +267,22 @@ export const calculateDynamicFontSize = async ({
     const otherRowHeightInMm = pt2mm(size * lineHeight);
 
     paragraphs.forEach((paragraph, paraIndex) => {
-      const lines = getSplittedLines(paragraph, {
+      const lines = getSplittedLinesBySegmenter(paragraph, {
         font: fontKitFont,
         fontSize: size,
         characterSpacing,
         boxWidthInPt,
       });
+
       lines.forEach((line, lineIndex) => {
         if (dynamicFontFit === DYNAMIC_FIT_VERTICAL) {
           // For vertical fit we want to consider the width of text lines where we detect a split
-          const textWidth = widthOfTextAtSize(line, fontKitFont, size, characterSpacing);
+          const textWidth = widthOfTextAtSize(
+            line.replace('\n', ''),
+            fontKitFont,
+            size,
+            characterSpacing
+          );
           const textWidthInMm = pt2mm(textWidth);
           totalWidthInMm = Math.max(totalWidthInMm, textWidthInMm);
         }
@@ -358,8 +363,175 @@ export const splitTextToSize = (arg: {
   };
   let lines: string[] = [];
   value.split(/\r\n|\r|\n|\f|\u000B/g).forEach((line: string) => {
-    lines = lines.concat(getSplittedLines(line, fontWidthCalcValues));
+    lines = lines.concat(getSplittedLinesBySegmenter(line, fontWidthCalcValues));
   });
   return lines;
 };
 export const isFirefox = () => navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+const getSplittedLinesBySegmenter = (line: string, calcValues: FontWidthCalcValues): string[] => {
+  // nothing to process but need to keep this for new lines.
+  if (line.trim() === '') {
+    return [''];
+  }
+
+  const { font, fontSize, characterSpacing, boxWidthInPt } = calcValues;
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'word' });
+  const iterator = segmenter.segment(line.trimEnd())[Symbol.iterator]();
+
+  let lines: string[] = [];
+  let lineCounter: number = 0;
+  let currentTextSize: number = 0;
+
+  while (true) {
+    const chunk = iterator.next();
+    if (chunk.done) break;
+    const segment = chunk.value.segment;
+    const textWidth = widthOfTextAtSize(segment, font, fontSize, characterSpacing);
+    if (currentTextSize + textWidth <= boxWidthInPt) {
+      // the size of boxWidth is large enough to add the segment
+      if (lines[lineCounter]) {
+        lines[lineCounter] += segment;
+        currentTextSize += textWidth + characterSpacing;
+      } else {
+        lines[lineCounter] = segment;
+        currentTextSize = textWidth + characterSpacing;
+      }
+    } else if (segment.trim() === '') {
+      // a segment can be consist of multiple spaces like '     '
+      // if they overflow the box, treat them as a line break and move to the next line
+      lines[++lineCounter] = '';
+      currentTextSize = 0;
+    } else if (textWidth <= boxWidthInPt) {
+      // the segment is small enough to be added to the next line
+      lines[++lineCounter] = segment;
+      currentTextSize = textWidth + characterSpacing;
+    } else {
+      // the segment is too large to fit in the boxWidth, we wrap the segment
+      for (const char of segment) {
+        const size = widthOfTextAtSize(char, font, fontSize, characterSpacing);
+        if (currentTextSize + size <= boxWidthInPt) {
+          if (lines[lineCounter]) {
+            lines[lineCounter] += char;
+            currentTextSize += size + characterSpacing;
+          } else {
+            lines[lineCounter] = char;
+            currentTextSize = size + characterSpacing;
+          }
+        } else {
+          lines[++lineCounter] = char;
+          currentTextSize = size + characterSpacing;
+        }
+      }
+    }
+  }
+
+  if (lines.some(containsJapanese)) {
+    return adjustEndOfLine(filterEndJP(filterStartJP(lines)));
+  } else {
+    return adjustEndOfLine(lines);
+  }
+};
+
+// add a newline if the line is the end of the paragraph
+const adjustEndOfLine = (lines: string[]): string[] => {
+  return lines.map((line, index) => {
+    if (index === lines.length - 1) {
+      return line.trimEnd() + '\n';
+    } else {
+      return line.trimEnd();
+    }
+  });
+};
+
+function containsJapanese(text: string): boolean {
+  return /[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/u.test(text);
+}
+//
+// 日本語禁則処理
+//
+// https://www.morisawa.co.jp/blogs/MVP/8760
+//
+// 行頭禁則
+export const filterStartJP = (lines: string[]): string[] => {
+  const filtered: string[] = [];
+  let charToAppend: string | null = null;
+
+  lines
+    .slice()
+    .reverse()
+    .forEach((line) => {
+      if (line.trim().length === 0) {
+        filtered.push('');
+      } else {
+        const charAtStart: string = line.charAt(0);
+        if (LINE_START_FORBIDDEN_CHARS.includes(charAtStart)) {
+          if (line.trim().length === 1) {
+            filtered.push(line);
+            charToAppend = null;
+          } else {
+            if (charToAppend) {
+              filtered.push(line.slice(1) + charToAppend);
+            } else {
+              filtered.push(line.slice(1));
+            }
+            charToAppend = charAtStart;
+          }
+        } else {
+          if (charToAppend) {
+            filtered.push(line + charToAppend);
+            charToAppend = null;
+          } else {
+            filtered.push(line);
+          }
+        }
+      }
+    });
+
+  if (charToAppend) {
+    return [charToAppend + filtered.slice(0, 1)[0], ...filtered.slice(1)].reverse();
+  } else {
+    return filtered.reverse();
+  }
+};
+
+// 行末禁則
+export const filterEndJP = (lines: string[]): string[] => {
+  const filtered: string[] = [];
+  let charToPrepend: string | null = null;
+
+  lines.forEach((line) => {
+    if (line.trim().length === 0) {
+      filtered.push('');
+    } else {
+      const chartAtEnd = line.slice(-1);
+
+      if (LINE_END_FORBIDDEN_CHARS.includes(chartAtEnd)) {
+        if (line.trim().length === 1) {
+          filtered.push(line);
+          charToPrepend = null;
+        } else {
+          if (charToPrepend) {
+            filtered.push(charToPrepend + line.slice(0, -1));
+          } else {
+            filtered.push(line.slice(0, -1));
+          }
+          charToPrepend = chartAtEnd;
+        }
+      } else {
+        if (charToPrepend) {
+          filtered.push(charToPrepend + line);
+          charToPrepend = null;
+        } else {
+          filtered.push(line);
+        }
+      }
+    }
+  });
+
+  if (charToPrepend) {
+    return [...filtered.slice(0, -1), filtered.slice(-1)[0] + charToPrepend];
+  } else {
+    return filtered;
+  }
+};

package/src/text/icons/index.ts

@@ -6,6 +6,7 @@ import {
   AlignRight,
   ArrowUpToLine,
   ArrowDownToLine,
+  AlignJustify,
 } from 'lucide';
 import { createSvgStr } from '../../utils.js';
 
@@ -19,6 +20,8 @@ export const TextAlignCenterIcon = createSvgStr(AlignCenter);
 
 export const TextAlignRightIcon = createSvgStr(AlignRight);
 
+export const TextAlignJustifyIcon = createSvgStr(AlignJustify);
+
 export const TextVerticalAlignTopIcon = createSvgStr(ArrowUpToLine);
 
 // svg icons are material icons from https://www.xicons.org

package/src/text/pdfRender.ts

@@ -1,4 +1,5 @@
 import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
+import type { Font as FontKitFont } from 'fontkit';
 import type { TextSchema } from './types';
 import {
   PDFRenderProps,
@@ -60,21 +61,19 @@ const embedAndGetFontObj = async (arg: {
   return fontObj;
 };
 
-const getFontProp = async ({
+const getFontProp = ({
   value,
-  font,
+  fontKitFont,
   schema,
   colorType,
-  _cache,
 }: {
   value: string;
-  font: Font;
+  fontKitFont: FontKitFont;
   colorType?: ColorType;
   schema: TextSchema;
-  _cache: Map<any, any>;
 }) => {
   const fontSize = schema.dynamicFontSize
-    ? await calculateDynamicFontSize({ textSchema: schema, font, value, _cache })
+    ? calculateDynamicFontSize({ textSchema: schema, fontKitFont, value })
     : schema.fontSize ?? DEFAULT_FONT_SIZE;
   const color = hex2PrintingColor(schema.fontColor || DEFAULT_FONT_COLOR, colorType);
 
@@ -94,11 +93,11 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
 
   const { font = getDefaultFont(), colorType } = options;
 
-  const [pdfFontObj, fontKitFont, fontProp] = await Promise.all([
+  const [pdfFontObj, fontKitFont] = await Promise.all([
     embedAndGetFontObj({ pdfDoc, font, _cache }),
     getFontKitFont(schema.fontName, font, _cache),
-    getFontProp({ value, font, schema, _cache, colorType }),
   ]);
+  const fontProp = getFontProp({ value, fontKitFont, schema, colorType });
 
   const { fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing } = fontProp;
 
@@ -121,8 +120,6 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
     page.drawRectangle({ x, y, width, height, rotate, color });
   }
 
-  page.pushOperators(pdfLib.setCharacterSpacing(characterSpacing ?? DEFAULT_CHARACTER_SPACING));
-
   const firstLineTextHeight = heightOfFontAtSize(fontKitFont, fontSize);
   const descent = getFontDescentInPt(fontKitFont, fontSize);
   const halfLineHeightAdjustment = lineHeight === 0 ? 0 : ((lineHeight - 1) * fontSize) / 2;
@@ -151,12 +148,20 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   }
 
   const pivotPoint = { x: x + width / 2, y: pageHeight - mm2pt(schema.position.y) - height / 2 };
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 
   lines.forEach((line, rowIndex) => {
-    const textWidth = widthOfTextAtSize(line, fontKitFont, fontSize, characterSpacing);
+    const trimmed = line.replace('\n', '');
+    const textWidth = widthOfTextAtSize(trimmed, fontKitFont, fontSize, characterSpacing);
     const textHeight = heightOfFontAtSize(fontKitFont, fontSize);
     const rowYOffset = lineHeight * fontSize * rowIndex;
 
+    // Adobe Acrobat Reader shows an error if `drawText` is called with an empty text
+    if (line === '') {
+      // return; // this also works
+      line = '\r\n';
+    }
+
     let xLine = x;
     if (alignment === 'center') {
       xLine += (width - textWidth) / 2;
@@ -168,7 +173,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
 
     // draw strikethrough
     if (schema.strikethrough && textWidth > 0) {
-      const _x = xLine + textWidth + 1
+      const _x = xLine + textWidth + 1;
       const _y = yLine + textHeight / 3;
       page.drawLine({
         start: rotatePoint({ x: xLine, y: _y }, pivotPoint, rotate.angle),
@@ -181,7 +186,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
 
     // draw underline
     if (schema.underline && textWidth > 0) {
-      const _x = xLine + textWidth + 1
+      const _x = xLine + textWidth + 1;
       const _y = yLine - textHeight / 12;
       page.drawLine({
         start: rotatePoint({ x: xLine, y: _y }, pivotPoint, rotate.angle),
@@ -200,7 +205,16 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
       yLine = rotatedPoint.y;
     }
 
-    page.drawText(line, {
+    let spacing = characterSpacing;
+    if (alignment === 'justify' && line.slice(-1) !== '\n') {
+      // if alignment is `justify` but the end of line is not newline, then adjust the spacing
+      const iterator = segmenter.segment(trimmed)[Symbol.iterator]();
+      const len = Array.from(iterator).length;
+      spacing += (width - textWidth) / len;
+    }
+    page.pushOperators(pdfLib.setCharacterSpacing(spacing));
+
+    page.drawText(trimmed, {
       x: xLine,
       y: yLine,
       rotate,

package/src/text/propPanel.ts

@@ -87,7 +87,7 @@ export const propPanel: PropPanel<TextSchema> = {
         type: 'number',
         widget: 'inputNumber',
         props: { step: 0.1, min: 0 },
-        span: 7,
+        span: 8,
       },
       useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 },
       dynamicFontSize: {
@@ -128,7 +128,7 @@ export const propPanel: PropPanel<TextSchema> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         rules: [
           {
@@ -142,7 +142,7 @@ export const propPanel: PropPanel<TextSchema> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         rules: [
           {

package/src/text/types.ts

@@ -1,7 +1,7 @@
 import type { Schema } from '@pdfme/common';
 import type { Font as FontKitFont } from 'fontkit';
 
-export type ALIGNMENT = 'left' | 'center' | 'right';
+export type ALIGNMENT = 'left' | 'center' | 'right' | 'justify';
 export type VERTICAL_ALIGNMENT = 'top' | 'middle' | 'bottom';
 export type DYNAMIC_FONT_SIZE_FIT = 'horizontal' | 'vertical';
 

package/src/text/uiRender.ts

@@ -69,10 +69,8 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     return text;
   };
   const font = options?.font || getDefaultFont();
-  const [fontKitFont, textBlock] = await Promise.all([
-    getFontKitFont(schema.fontName, font, _cache),
-    buildStyledTextContainer(arg, usePlaceholder ? placeholder : value),
-  ]);
+  const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
+  const textBlock = buildStyledTextContainer(arg, fontKitFont, usePlaceholder ? placeholder : value);
 
   const processedText = replaceUnsupportedChars(value, fontKitFont);
 
@@ -100,19 +98,16 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
 
   if (schema.dynamicFontSize) {
     let dynamicFontSize: undefined | number = undefined;
-    const font = options?.font || getDefaultFont();
-    const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
 
     textBlock.addEventListener('keyup', () => {
       setTimeout(() => {
         void (async () => {
           if (!textBlock.textContent) return;
-          dynamicFontSize = await calculateDynamicFontSize({
+          dynamicFontSize = calculateDynamicFontSize({
             textSchema: schema,
-            font,
+            fontKitFont,
             value: getText(textBlock),
             startingFontSize: dynamicFontSize,
-            _cache,
           });
           textBlock.style.fontSize = `${dynamicFontSize}pt`;
 
@@ -155,23 +150,21 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   }
 };
 
-export const buildStyledTextContainer = async (arg: UIRenderProps<TextSchema>, value: string) => {
+export const buildStyledTextContainer = (arg: UIRenderProps<TextSchema>, fontKitFont: FontKitFont, value: string) => {
   const { schema, rootElement, mode, options, _cache } = arg;
   const font = options?.font || getDefaultFont();
 
   let dynamicFontSize: undefined | number = undefined;
 
   if (schema.dynamicFontSize && value) {
-    dynamicFontSize = await calculateDynamicFontSize({
+    dynamicFontSize = calculateDynamicFontSize({
       textSchema: schema,
-      font,
+      fontKitFont,
       value,
       startingFontSize: dynamicFontSize,
-      _cache,
     });
   }
 
-  const fontKitFont = await getFontKitFont(schema.fontName, 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(