@pdfme/ui 1.1.10 → 1.2.0

package/dist/types/class.d.ts

@@ -26,6 +26,10 @@ export declare abstract class BaseUIClass {
             fontName?: string | undefined;
             fontColor?: string | undefined;
             characterSpacing?: number | undefined;
+            dynamicFontSize?: {
+                max: number;
+                min: number;
+            } | undefined;
             type: "text";
             height: number;
             width: number;

package/dist/types/components/Designer/Sidebar/index.d.ts

@@ -12,7 +12,10 @@ export declare type SidebarProps = {
     onEditEnd: () => void;
     changeSchemas: (objs: {
         key: string;
-        value: string | number;
+        value: undefined | string | number | {
+            min: number;
+            max: number;
+        };
         schemaId: string;
     }[]) => void;
     addSchema: () => void;

package/dist/types/components/Designer/index.d.ts

@@ -6,7 +6,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             subset?: boolean | undefined;
             data: string | ArrayBuffer | Uint8Array;
         }> | undefined;
-        lang?: "en" | "ja" | undefined;
+        lang?: "en" | "ja" | "ar" | undefined;
     } | undefined;
     template: {
         columns?: string[] | undefined;
@@ -20,6 +20,10 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             fontName?: string | undefined;
             fontColor?: string | undefined;
             characterSpacing?: number | undefined;
+            dynamicFontSize?: {
+                max: number;
+                min: number;
+            } | undefined;
             type: "text";
             height: number;
             width: number;
@@ -64,6 +68,10 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             fontName?: string | undefined;
             fontColor?: string | undefined;
             characterSpacing?: number | undefined;
+            dynamicFontSize?: {
+                max: number;
+                min: number;
+            } | undefined;
             type: "text";
             height: number;
             width: number;

package/dist/types/components/Schemas/SchemaUI.d.ts

@@ -8,7 +8,7 @@ export interface SchemaUIProps {
     placeholder?: string;
 }
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
-    border: string;
+    outline: string;
     onChangeHoveringSchemaId?: ((id: string | null) => void) | undefined;
 } & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 export default _default;

package/dist/types/components/Schemas/TextSchema.d.ts

@@ -10,6 +10,10 @@ declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
         fontName?: string | undefined;
         fontColor?: string | undefined;
         characterSpacing?: number | undefined;
+        dynamicFontSize?: {
+            max: number;
+            min: number;
+        } | undefined;
         type: "text";
         height: number;
         width: number;

package/dist/types/helper.d.ts

@@ -35,6 +35,10 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     fontName?: string | undefined;
     fontColor?: string | undefined;
     characterSpacing?: number | undefined;
+    dynamicFontSize?: {
+        max: number;
+        min: number;
+    } | undefined;
     type: "text";
     data: string;
     key: string;

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import Designer from './Designer';
 import Form from './Form';
 import Viewer from './Viewer';
-import { BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput } from '@pdfme/common';
+import { BLANK_PDF, DEFAULT_FONT_VALUE, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput } from '@pdfme/common';
 import type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps } from '@pdfme/common';
-export { Designer, Viewer, Form, BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, };
+export { Designer, Viewer, Form, BLANK_PDF, DEFAULT_FONT_VALUE, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, };
 export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -41,7 +41,7 @@
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
     "@heroicons/react": "^2.0.13",
-    "@pdfme/common": "^1.0.0",
+    "@pdfme/common": "file:../common",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",
@@ -68,6 +68,9 @@
     "setupFiles": [
       "jest-canvas-mock"
     ],
+    "setupFilesAfterEnv": [
+      "./__tests__/test-helpers.js"
+    ],
     "moduleNameMapper": {
       "\\.(png)$": "<rootDir>/../../assetsTransformer.js"
     },

package/src/components/Designer/Main/Guides.tsx

@@ -14,6 +14,7 @@ const _Guides = ({
 }) => (
   <>
     <div
+      className="ruler-container"
       style={{
         width: RULER_HEIGHT,
         height: RULER_HEIGHT,

package/src/components/Designer/Main/index.tsx

@@ -6,6 +6,7 @@ import React, {
   useEffect,
   forwardRef,
   useCallback,
+  useContext,
 } from 'react';
 import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
@@ -19,6 +20,7 @@ import Selecto from './Selecto';
 import Moveable from './Moveable';
 import Guides from './Guides';
 import Mask from './Mask';
+import { FontContext } from '../../../contexts';
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
@@ -97,6 +99,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const verticalGuides = useRef<GuidesInterface[]>([]);
   const horizontalGuides = useRef<GuidesInterface[]>([]);
   const moveable = useRef<any>(null);
+  const font = useContext(FontContext);
 
   const [isPressShiftKey, setIsPressShiftKey] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -162,7 +165,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     changeSchemas(flatten(arg));
   };
 
-  const onResizeEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
+  const onResizeEnd = async ({ target }: { target: HTMLElement | SVGElement }) => {
     const { id, style } = target;
     const { width, height, top, left } = style;
     changeSchemas([
@@ -171,6 +174,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
       { key: 'position.y', value: fmt(top), schemaId: id },
       { key: 'position.x', value: fmt(left), schemaId: id },
     ]);
+
+    const targetSchema = schemasList[pageCursor].find((schema) => schema.id === id);
+
+    if (!targetSchema) return;
+
+    targetSchema.width = fmt(width);
+    targetSchema.height = fmt(height);
+    targetSchema.position.y = fmt(top);
+    targetSchema.position.x = fmt(left);
   };
 
   const onResizeEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
@@ -312,8 +324,10 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             schema={schema}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
-            onChange={(value) => changeSchemas([{ key: 'data', value, schemaId: schema.id }])}
-            border={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
+            onChange={async (value) => {
+              changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
+            }}
+            outline={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
             ref={inputRef}
           />
         )}

package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { readFiles } from '../../../../helper';
-import { I18nContext } from '../../../../contexts';
+import { FontContext, I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
@@ -10,6 +10,7 @@ const ExampleInputEditor = (
 ) => {
   const { changeSchemas, activeSchema } = props;
   const i18n = useContext(I18nContext);
+  const fontData = useContext(FontContext);
 
   return (
     <div>
@@ -64,9 +65,9 @@ const ExampleInputEditor = (
       ) : (
         <textarea
           rows={6}
-          onChange={(e) =>
-            changeSchemas([{ key: 'data', value: e.target.value, schemaId: activeSchema.id }])
-          }
+          onChange={async (e) => {
+            changeSchemas([{ key: 'data', value: e.target.value, schemaId: activeSchema.id }]);
+          }}
           style={{
             width: '100%',
             border: '1px solid #767676',

package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx

@@ -1,7 +1,8 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { round } from '../../../../helper';
 import { SidebarProps } from '../index';
+import { FontContext } from '../../../../contexts';
 
 const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
@@ -37,6 +38,7 @@ const PositionAndSizeEditor = (
     activeSchema: SchemaForUI;
   }
 ) => {
+  const font = useContext(FontContext);
   const { changeSchemas, schemas, activeSchema, activeElements, pageSize } = props;
 
   const align = (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
@@ -184,7 +186,7 @@ const PositionAndSizeEditor = (
   ];
 
   return (
-    <div>
+    <section>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
         {layoutBtns.map((b) => (
           <button key={b.id} title={b.id} onClick={b.action} style={buttonStyle}>
@@ -228,8 +230,12 @@ const PositionAndSizeEditor = (
       </div>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div style={inputSetStyle}>
-          <label style={{ width: 17 }}>W</label>
+          <label htmlFor="input-width" style={{ width: 17 }}>
+            W
+          </label>
           <input
+            id="input-width"
+            name="input-width"
             style={inputStyle}
             type="number"
             onChange={(e) => {
@@ -243,8 +249,12 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
         <div style={inputSetStyle}>
-          <label style={{ width: 17 }}>H</label>
+          <label htmlFor="input-height" style={{ width: 17 }}>
+            H
+          </label>
           <input
+            id="input-height"
+            name="input-height"
             style={inputStyle}
             type="number"
             onChange={(e) => {
@@ -258,7 +268,7 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
       </div>
-    </div>
+    </section>
   );
 };
 

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -24,14 +24,26 @@ const NumberInputSet = (props: {
   width: string;
   label: string;
   value: number;
+  minNumber?: number;
+  maxNumber?: number;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
-  const { label, value, width, onChange } = props;
+  const { label, value, width, minNumber, maxNumber, onChange } = props;
+  const formattedLabel = label.replace(/\s/g, '');
 
   return (
     <div style={{ width }}>
-      <label>{label}</label>
-      <input style={inputStyle} onChange={onChange} value={value} type="number" />
+      <label htmlFor={`input-${formattedLabel}`}>{label}</label>
+      <input
+        id={`input-${formattedLabel}`}
+        name={`input-${formattedLabel}`}
+        style={inputStyle}
+        onChange={onChange}
+        value={value}
+        type="number"
+        {...(minNumber && { min: minNumber })}
+        {...(maxNumber && { max: maxNumber })}
+      />
     </div>
   );
 };
@@ -43,12 +55,20 @@ const ColorInputSet = (props: {
   onClear: () => void;
 }) => {
   const { label, value, onChange, onClear } = props;
+  const formattedLabel = label.replace(/\s/g, '');
 
   return (
     <div style={{ width: '45%' }}>
-      <label>{label}</label>
+      <label htmlFor={`input-${formattedLabel}`}>{label}</label>
       <div style={{ display: 'flex' }}>
-        <input onChange={onChange} value={value || '#ffffff'} type="color" style={inputStyle} />
+        <input
+          id={`input-${formattedLabel}`}
+          name={`input-${formattedLabel}`}
+          onChange={onChange}
+          value={value || '#ffffff'}
+          type="color"
+          style={inputStyle}
+        />
         <button
           onClick={onClear}
           style={{
@@ -75,11 +95,18 @@ const SelectSet = (props: {
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => {
   const { label, value, options, onChange } = props;
+  const formattedLabel = label.replace(/\s/g, '');
 
   return (
     <div style={{ width: '45%' }}>
-      <label>{label}:</label>
-      <select style={selectStyle} onChange={onChange} value={value}>
+      <label htmlFor={`select-${formattedLabel}`}>{label}:</label>
+      <select
+        id={`select-${formattedLabel}`}
+        name={`select-${formattedLabel}`}
+        style={selectStyle}
+        onChange={onChange}
+        value={value}
+      >
         {options.map((o) => (
           <option key={o} value={o}>
             {o}
@@ -90,6 +117,29 @@ const SelectSet = (props: {
   );
 };
 
+const CheckboxSet = (props: {
+  width: string;
+  label: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  checked: boolean | undefined;
+}) => {
+  const { width, label, onChange, checked } = props;
+
+  return (
+    <label
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '5px',
+        width: `${width}`,
+      }}
+    >
+      <input type="checkbox" checked={checked} onChange={onChange} />
+      {label}
+    </label>
+  );
+};
+
 const TextPropEditor = (
   props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
 ) => {
@@ -101,7 +151,7 @@ const TextPropEditor = (
   if (activeSchema.type !== 'text') return <></>;
 
   return (
-    <div style={{ fontSize: '0.7rem' }}>
+    <section style={{ fontSize: '0.7rem' }}>
       <div
         style={{
           display: 'flex',
@@ -115,7 +165,9 @@ const TextPropEditor = (
           value={activeSchema.fontName ?? fallbackFontName}
           options={Object.keys(font)}
           onChange={(e) => {
-            changeSchemas([{ key: 'fontName', value: e.target.value, schemaId: activeSchema.id }]);
+            changeSchemas([
+              { key: 'fontName', value: e.target.value, schemaId: activeSchema.id, },
+            ]);
           }}
         />
 
@@ -140,11 +192,12 @@ const TextPropEditor = (
           width="30%"
           label={'FontSize(pt)'}
           value={activeSchema.fontSize ?? DEFAULT_FONT_SIZE}
-          onChange={(e) =>
+          onChange={(e) => {
+            const currentFontSize = Number(e.target.value);
             changeSchemas([
-              { key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id },
-            ])
-          }
+              { key: 'fontSize', value: currentFontSize, schemaId: activeSchema.id, },
+            ]);
+          }}
         />
         <NumberInputSet
           width="30%"
@@ -161,12 +214,64 @@ const TextPropEditor = (
           width="40%"
           label={'CharacterSpacing(pt)'}
           value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
-          onChange={(e) =>
+          onChange={async (e) => {
+            const currentCharacterSpacing = Number(e.target.value);
             changeSchemas([
-              { key: 'characterSpacing', value: Number(e.target.value), schemaId: activeSchema.id },
-            ])
-          }
+              { key: 'characterSpacing', value: currentCharacterSpacing, schemaId: activeSchema.id, },
+            ]);
+          }}
+        />
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: '0.25rem',
+        }}
+      >
+        <CheckboxSet
+          width="100%"
+          label="Use dynamic font size"
+          checked={Boolean(activeSchema.dynamicFontSize)}
+          onChange={(e) => {
+            changeSchemas([
+              {
+                key: 'dynamicFontSize', value: e.target.checked ? {
+                  min: activeSchema.fontSize || DEFAULT_FONT_SIZE,
+                  max: activeSchema.fontSize || DEFAULT_FONT_SIZE,
+                } : undefined, schemaId: activeSchema.id,
+              },
+            ]);
+          }}
         />
+
+        {activeSchema.dynamicFontSize && (
+          <>
+            <NumberInputSet
+              width="45%"
+              label={'FontSize Min(pt)'}
+              value={activeSchema.dynamicFontSize.min ?? Number(activeSchema.fontSize)}
+              minNumber={0}
+              maxNumber={activeSchema.fontSize}
+              onChange={(e) => {
+                changeSchemas([{ key: 'dynamicFontSize.min', value: Number(e.target.value), schemaId: activeSchema.id }])
+
+              }}
+            />
+
+            <NumberInputSet
+              width="45%"
+              label={'FontSize Max(pt)'}
+              value={activeSchema.dynamicFontSize.max ?? Number(activeSchema.fontSize)}
+              minNumber={activeSchema.fontSize}
+              onChange={(e) => {
+                changeSchemas([{ key: 'dynamicFontSize.max', value: Number(e.target.value), schemaId: activeSchema.id }])
+              }}
+            />
+          </>
+        )}
       </div>
       <div
         style={{
@@ -202,7 +307,7 @@ const TextPropEditor = (
           }
         />
       </div>
-    </div>
+    </section>
   );
 };
 

package/src/components/Designer/Sidebar/ListView/index.tsx

@@ -38,6 +38,7 @@ const ListView = (
         </span>
       </div>
       <Divider />
+
       {isBulkUpdateFieldNamesMode ? (
         <div>
           <textarea

package/src/components/Designer/Sidebar/index.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useContext } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
-import { I18nContext } from '../../../contexts';
+import { I18nContext, FontContext } from '../../../contexts';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import ListView from './ListView/index';
 import DetailView from './DetailView/index';
+import { getFallbackFontName } from '@pdfme/common';
 
 export type SidebarProps = {
   height: number;
@@ -17,7 +18,14 @@ export type SidebarProps = {
   onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
   onEdit: (id: string) => void;
   onEditEnd: () => void;
-  changeSchemas: (objs: { key: string; value: string | number; schemaId: string }[]) => void;
+  changeSchemas: (
+    objs: {
+      key: string; value: undefined | string | number | {
+        min: number;
+        max: number;
+      }; schemaId: string
+    }[]
+  ) => void;
   addSchema: () => void;
 };
 
@@ -25,10 +33,20 @@ const Sidebar = (props: SidebarProps) => {
   const { height, size, activeElements, schemas, addSchema } = props;
 
   const i18n = useContext(I18nContext);
+  const fonts = useContext(FontContext);
+  const fallbackFont = getFallbackFontName(fonts);
   const [open, setOpen] = useState(true);
 
   const getActiveSchemas = () => {
     const ids = activeElements.map((ae) => ae.id);
+    const activeSchema = schemas.find((s) => ids.includes(s.id));
+
+    if (activeSchema?.type === 'text') {
+      if (!activeSchema.fontName) {
+        activeSchema.fontName = fallbackFont;
+      }
+    }
+
     return schemas.filter((s) => ids.includes(s.id));
   };
 

package/src/components/Designer/index.tsx

@@ -90,7 +90,7 @@ const TemplateEditor = ({
   );
 
   const changeSchemas = useCallback(
-    (objs: { key: string; value: string | number; schemaId: string }[]) => {
+    (objs: { key: string; value: undefined | string | number | { min: number, max: number }; schemaId: string }[]) => {
       const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
         const tgt = acc.find((s) => s.id === schemaId)!;
         // Assign to reference

package/src/components/Preview.tsx

@@ -103,7 +103,7 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
               placeholder={template.sampledata ? template.sampledata[0][key] : ''}
               tabIndex={index + 100}
               onChange={(value) => handleChangeInput({ key, value })}
-              border={editable ? '1px dashed #4af' : 'transparent'}
+              outline={editable ? '1px dashed #4af' : 'transparent'}
             />
           );
         }}

package/src/components/Schemas/SchemaUI.tsx

@@ -14,13 +14,13 @@ export interface SchemaUIProps {
 }
 
 type Props = SchemaUIProps & {
-  border: string;
+  outline: string;
   onChangeHoveringSchemaId?: (id: string | null) => void;
 };
 
 const Wrapper = ({
   children,
-  border,
+  outline,
   onChangeHoveringSchemaId,
   schema,
 }: Props & { children: ReactNode }) => (
@@ -37,7 +37,7 @@ const Wrapper = ({
       width: schema.width * ZOOM,
       top: schema.position.y * ZOOM,
       left: schema.position.x * ZOOM,
-      border,
+      outline,
     }}
   >
     {children}

package/src/components/Schemas/TextSchema.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref } from 'react';
+import React, { useContext, forwardRef, Ref, useState, useEffect } from 'react';
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
@@ -6,9 +6,12 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
   TextSchema,
+  calculateDynamicFontSize,
 } from '@pdfme/common';
 import { SchemaUIProps } from './SchemaUI';
 import { ZOOM } from '../../constants';
+import { FontContext } from '../../contexts';
+
 
 type Props = SchemaUIProps & { schema: TextSchema };
 
@@ -16,20 +19,30 @@ const TextSchemaUI = (
   { schema, editable, placeholder, tabIndex, onChange }: Props,
   ref: Ref<HTMLTextAreaElement>
 ) => {
+  const font = useContext(FontContext);
+
+
+  const [dynamicFontSize, setDynamicFontSize] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (schema.dynamicFontSize && schema.data) {
+      calculateDynamicFontSize({ textSchema: schema, font, input: schema.data }).then(setDynamicFontSize)
+    }
+  }, [schema.data, schema.width, schema.fontName, schema.dynamicFontSize, schema.dynamicFontSize?.max, schema.dynamicFontSize?.min, schema.characterSpacing, font]);
+
   const style: React.CSSProperties = {
     padding: 0,
     resize: 'none',
     position: 'absolute',
     fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
     height: schema.height * ZOOM,
-    // Increase the width by 1 point. (0.75 pixels)
-    width: (schema.width + (schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING) * 0.75) * ZOOM,
+    width: schema.width * ZOOM,
     textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
-    fontSize: `${schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
+    fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     whiteSpace: 'pre-line',
-    wordBreak: 'break-all',
+    wordBreak: 'break-word',
     border: 'none',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
     backgroundColor: