@pdfme/ui 2.0.2 → 2.2.0

package/dist/types/class.d.ts

@@ -25,6 +25,7 @@ export declare abstract class BaseUIClass {
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;
@@ -34,6 +35,7 @@ export declare abstract class BaseUIClass {
             dynamicFontSize?: {
                 max: number;
                 min: number;
+                fit?: string | undefined;
             } | undefined;
         } | {
             type: "image";

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

@@ -11,6 +11,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;
@@ -20,6 +21,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             dynamicFontSize?: {
                 max: number;
                 min: number;
+                fit?: string | undefined;
             } | undefined;
         } | {
             type: "image";
@@ -59,6 +61,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;
@@ -68,6 +71,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             dynamicFontSize?: {
                 max: number;
                 min: number;
+                fit?: string | undefined;
             } | undefined;
         } | {
             type: "image";

package/dist/types/components/Paper.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, ReactNode } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
-declare const Paper: (porps: {
+declare const Paper: (props: {
     paperRefs: MutableRefObject<HTMLDivElement[]>;
     scale: number;
     size: Size;

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

@@ -4,6 +4,7 @@ export interface SchemaUIProps {
     schema: SchemaForUI;
     editable: boolean;
     onChange: (value: string) => void;
+    onStopEditing: () => void;
     tabIndex?: number;
     placeholder?: string;
 }

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

@@ -11,6 +11,7 @@ declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
         };
         rotate?: number | undefined;
         alignment?: "center" | "left" | "right" | undefined;
+        verticalAlignment?: "top" | "bottom" | "middle" | undefined;
         fontSize?: number | undefined;
         fontName?: string | undefined;
         fontColor?: string | undefined;
@@ -20,6 +21,7 @@ declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
         dynamicFontSize?: {
             max: number;
             min: number;
+            fit?: string | undefined;
         } | undefined;
     };
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/types/helper.d.ts

@@ -42,12 +42,14 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     lineHeight?: number | undefined;
     rotate?: number | undefined;
     alignment?: "center" | "left" | "right" | undefined;
+    verticalAlignment?: "top" | "bottom" | "middle" | undefined;
     fontName?: string | undefined;
     fontColor?: string | undefined;
     characterSpacing?: number | undefined;
     dynamicFontSize?: {
         max: number;
         min: number;
+        fit?: string | undefined;
     } | undefined;
 } | {
     type: "image";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -64,7 +64,7 @@
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "@pdfme/common": "^2.0.0"
+    "@pdfme/common": "^2.1.0"
   },
   "jest": {
     "setupFiles": [

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

@@ -39,6 +39,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         zIndex: 1,
         top,
         left,
+        padding: 2,
         height: 24,
         width: 24,
         cursor: 'pointer',
@@ -52,7 +53,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         justifyContent: 'center',
       }}
     >
-      <XMarkIcon width={10} height={10} />
+      <XMarkIcon style={{ pointerEvents: 'none' }} width={24} height={24} />
     </button>
   );
 };
@@ -195,14 +196,6 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     changeSchemas(flatten(arg));
   };
 
-  const currentlyEditingThisTextSchema = (target: EventTarget | null) => {
-    if (!target) return false;
-    if (target instanceof HTMLTextAreaElement) {
-      return activeElements.map((ae) => ae.id).includes(target.parentElement?.id || '');
-    }
-    return false;
-  };
-
   const onResize = ({ target, width, height, direction }: OnResize) => {
     if (!target) return;
     const s = target.style;
@@ -239,20 +232,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   };
 
   return (
-    <div
-      ref={ref}
-      onClick={(e) => {
-        e.stopPropagation();
-        if (!currentlyEditingThisTextSchema(e.target)) {
-          setEditing(false);
-        }
-        // For MacOS CMD+SHIFT+3/4 screenshots where the keydown event is never received, check mouse too
-        if (!e.shiftKey) {
-          setIsPressShiftKey(false);
-        }
-      }}
-      style={{ overflow: 'overlay' }}
-    >
+    <div ref={ref} style={{ overflow: 'overlay' }}>
       <Selecto
         container={paperRefs.current[pageCursor]}
         continueSelect={isPressShiftKey}
@@ -266,8 +246,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (paperRefs.current[pageCursor] === inputEvent.target) {
             onEdit([]);
           }
-
-          if (inputEvent.target.id === DELETE_BTN_ID) {
+          if (inputEvent.target?.id === DELETE_BTN_ID) {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}
@@ -280,8 +259,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (!isClick && removed.length > 0) {
             newActiveElements = activeElements.filter((ae) => !removed.includes(ae));
           }
-
           onEdit(newActiveElements);
+
+          if (newActiveElements != activeElements) {
+            setEditing(false);
+          }
+          // For MacOS CMD+SHIFT+3/4 screenshots where the keydown event is never received, check mouse too
+          if (!inputEvent.shiftKey) {
+            setIsPressShiftKey(false);
+          }
         }}
       />
       <Paper
@@ -338,9 +324,10 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             schema={schema}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
-            onChange={async (value) => {
+            onChange={(value) => {
               changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
             }}
+            onStopEditing={() => setEditing(false)}
             outline={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
             ref={inputRef}
           />

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

@@ -6,6 +6,13 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_VERTICAL_ALIGNMENT,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
 } from '@pdfme/common';
 import { FontContext } from '../../../../contexts';
 import { SidebarProps } from '..';
@@ -24,11 +31,14 @@ const NumberInputSet = (props: {
   width: string;
   label: string;
   value: number;
+  step?: number;
   minNumber?: number;
   maxNumber?: number;
+  disabled?: boolean;
+  style?: object;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
-  const { label, value, width, minNumber, maxNumber, onChange } = props;
+  const { label, step, value, width, minNumber, maxNumber, disabled, style, onChange } = props;
   const formattedLabel = label.replace(/\s/g, '');
 
   return (
@@ -37,10 +47,12 @@ const NumberInputSet = (props: {
       <input
         id={`input-${formattedLabel}`}
         name={`input-${formattedLabel}`}
-        style={inputStyle}
+        style={{ ...inputStyle, ...style }}
         onChange={onChange}
-        value={value}
+        value={isNaN(value) ? '' : value}
         type="number"
+        step={step ?? 1}
+        disabled={disabled}
         {...(minNumber && { min: minNumber })}
         {...(maxNumber && { max: maxNumber })}
       />
@@ -92,13 +104,14 @@ const SelectSet = (props: {
   label: string;
   value: string;
   options: string[];
+  width?: string;
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => {
-  const { label, value, options, onChange } = props;
+  const { label, value, options, width, onChange } = props;
   const formattedLabel = label.replace(/\s/g, '');
 
   return (
-    <div style={{ width: '45%' }}>
+    <div style={{ width: width ?? '45%' }}>
       <label htmlFor={`select-${formattedLabel}`}>{label}:</label>
       <select
         id={`select-${formattedLabel}`}
@@ -145,6 +158,8 @@ const TextPropEditor = (
 ) => {
   const { changeSchemas, activeSchema } = props;
   const alignments = ['left', 'center', 'right'];
+  const verticalAlignments = [VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM];
+  const dynamicFits = [DYNAMIC_FIT_HORIZONTAL, DYNAMIC_FIT_VERTICAL];
   const font = useContext(FontContext);
   const fallbackFontName = getFallbackFontName(font);
 
@@ -170,13 +185,22 @@ const TextPropEditor = (
         />
 
         <SelectSet
-          label={'Alignment'}
+          label={'Horizontal Align'}
           value={activeSchema.alignment ?? 'left'}
           options={alignments}
           onChange={(e) =>
             changeSchemas([{ key: 'alignment', value: e.target.value, schemaId: activeSchema.id }])
           }
         />
+
+        <SelectSet
+          label={'Vertical Align'}
+          value={activeSchema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT}
+          options={verticalAlignments}
+          onChange={(e) => {
+            changeSchemas([{ key: 'verticalAlignment', value: e.target.value, schemaId: activeSchema.id }]);
+          }}
+        />
       </div>
       <div
         style={{
@@ -189,26 +213,17 @@ const TextPropEditor = (
         <NumberInputSet
           width="30%"
           label={'FontSize(pt)'}
-          value={activeSchema.fontSize ?? DEFAULT_FONT_SIZE}
+          value={activeSchema.dynamicFontSize ? NaN : (activeSchema.fontSize ?? DEFAULT_FONT_SIZE)}
+          style={activeSchema.dynamicFontSize ? { background: '#ccc', cursor: 'not-allowed' } : {}}
+          disabled={!!activeSchema.dynamicFontSize}
           onChange={(e) => {
-            const currentFontSize = Number(e.target.value);
-            const dynamincFontSizeMinAdjust = activeSchema.dynamicFontSize && activeSchema.dynamicFontSize.min > currentFontSize;
-
-            changeSchemas([
-              { key: 'fontSize', value: currentFontSize, schemaId: activeSchema.id },
-              ...(dynamincFontSizeMinAdjust
-                ? [{
-                      key: 'dynamicFontSize.min',
-                      value: currentFontSize,
-                      schemaId: activeSchema.id,
-                    }]
-                : []),
-            ]);
+            changeSchemas([{ key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id }])
           }}
         />
         <NumberInputSet
           width="30%"
           label={'LineHeight(em)'}
+          step={0.1}
           value={activeSchema.lineHeight ?? DEFAULT_LINE_HEIGHT}
           onChange={(e) =>
             changeSchemas([
@@ -220,6 +235,7 @@ const TextPropEditor = (
         <NumberInputSet
           width="40%"
           label={'CharacterSpacing(pt)'}
+          step={0.1}
           value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
           onChange={async (e) => {
             const currentCharacterSpacing = Number(e.target.value);
@@ -257,26 +273,46 @@ const TextPropEditor = (
         {activeSchema.dynamicFontSize && (
           <>
             <NumberInputSet
-              width="45%"
+              width="30%"
               label={'FontSize Min(pt)'}
               value={activeSchema.dynamicFontSize.min ?? Number(activeSchema.fontSize)}
               minNumber={0}
-              maxNumber={activeSchema.fontSize}
+              style={
+                activeSchema.dynamicFontSize &&
+                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                  ? { background: 'rgb(200 0 0 / 30%)' }
+                  : {}
+              }
               onChange={(e) => {
                 changeSchemas([{ key: 'dynamicFontSize.min', value: Number(e.target.value), schemaId: activeSchema.id }])
-
               }}
             />
 
             <NumberInputSet
-              width="45%"
+              width="30%"
               label={'FontSize Max(pt)'}
               value={activeSchema.dynamicFontSize.max ?? Number(activeSchema.fontSize)}
-              minNumber={activeSchema.fontSize}
+              minNumber={0}
+              style={
+                activeSchema.dynamicFontSize &&
+                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                  ? { background: 'rgb(200 0 0 / 30%)' }
+                  : {}
+              }
               onChange={(e) => {
                 changeSchemas([{ key: 'dynamicFontSize.max', value: Number(e.target.value), schemaId: activeSchema.id }])
               }}
             />
+
+            <SelectSet
+              width="40%"
+              label={'Fit'}
+              value={activeSchema.dynamicFontSize.fit ?? DEFAULT_DYNAMIC_FIT}
+              options={dynamicFits}
+              onChange={(e) => {
+                changeSchemas([{ key: 'dynamicFontSize.fit', value: e.target.value, schemaId: activeSchema.id }])
+              }}
+            />
           </>
         )}
       </div>

package/src/components/Paper.tsx

@@ -3,7 +3,7 @@ import { SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
 import { FontContext } from '../contexts';
 import { ZOOM, RULER_HEIGHT } from '../constants';
 
-const Paper = (porps: {
+const Paper = (props: {
   paperRefs: MutableRefObject<HTMLDivElement[]>;
   scale: number;
   size: Size;
@@ -14,7 +14,7 @@ const Paper = (porps: {
   renderSchema: (arg: { index: number; schema: SchemaForUI }) => ReactNode;
 }) => {
   const { paperRefs, scale, size, schemasList, pageSizes, backgrounds, renderPaper, renderSchema } =
-    porps;
+    props;
   const font = useContext(FontContext);
 
   if (pageSizes.length !== backgrounds.length || pageSizes.length !== schemasList.length) {

package/src/components/Preview.tsx

@@ -100,8 +100,9 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
               key={schema.id}
               schema={Object.assign(schema, { data })}
               editable={editable}
-              placeholder={template.sampledata ? template.sampledata[0][key] : ''}
+              placeholder={template.sampledata?.[0]?.[key] ?? ''}
               tabIndex={index + 100}
+              onStopEditing={() => { }}
               onChange={(value) => handleChangeInput({ key, value })}
               outline={editable ? '1px dashed #4af' : 'transparent'}
             />

package/src/components/Schemas/BarcodeSchema.tsx

@@ -69,7 +69,7 @@ const BarcodePreview = (props: { schema: BarcodeSchema; value: string }) => {
 type Props = SchemaUIProps & { schema: BarcodeSchema };
 
 const BarcodeSchemaUI = (
-  { schema, editable, placeholder, tabIndex, onChange }: Props,
+  { schema, editable, placeholder, tabIndex, onChange, onStopEditing }: Props,
   ref: Ref<HTMLInputElement>
 ) => {
   const value = schema.data;
@@ -109,6 +109,7 @@ const BarcodeSchemaUI = (
           style={style}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          onBlur={onStopEditing}
         />
       ) : (
         <div style={style}>

package/src/components/Schemas/ImageSchema.tsx

@@ -8,7 +8,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 type Props = SchemaUIProps & { schema: ImageSchema };
 
 const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
-  const { editable, placeholder, tabIndex, schema, onChange } = props;
+  const { editable, placeholder, tabIndex, schema, onChange, onStopEditing } = props;
   const [fileName, setFileName] = useState<string>('');
   const hasData = Boolean(schema.data);
 
@@ -75,6 +75,7 @@ const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
           onChange={(event: ChangeEvent<HTMLInputElement>) =>
             readFiles(event.target.files, 'dataURL').then((result) => onChange(result as string))
           }
+          onBlur={onStopEditing}
           type="file"
           accept="image/jpeg, image/png"
         />

package/src/components/Schemas/SchemaUI.tsx

@@ -9,6 +9,7 @@ export interface SchemaUIProps {
   schema: SchemaForUI;
   editable: boolean;
   onChange: (value: string) => void;
+  onStopEditing: () => void;
   tabIndex?: number;
   placeholder?: string;
 }

package/src/components/Schemas/TextSchema.tsx

@@ -2,79 +2,168 @@ import React, { useContext, forwardRef, Ref, useState, useEffect } from 'react';
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_VERTICAL_ALIGNMENT,
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
   TextSchema,
   calculateDynamicFontSize,
   getFontKitFont,
-  getFontAlignmentValue,
+  getBrowserVerticalFontAdjustments,
 } from '@pdfme/common';
 import { SchemaUIProps } from './SchemaUI';
 import { ZOOM } from '../../constants';
 import { FontContext } from '../../contexts';
 
+const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
+  switch (verticalAlignmentValue) {
+    case VERTICAL_ALIGN_TOP:
+      return 'flex-start';
+    case VERTICAL_ALIGN_MIDDLE:
+      return 'center';
+    case VERTICAL_ALIGN_BOTTOM:
+      return 'flex-end';
+  }
+  return 'flex-start';
+};
+
 type Props = SchemaUIProps & { schema: TextSchema };
 
 const TextSchemaUI = (
-  { schema, editable, placeholder, tabIndex, onChange }: Props,
+  { schema, editable, placeholder, tabIndex, onChange, onStopEditing }: Props,
   ref: Ref<HTMLTextAreaElement>
 ) => {
   const font = useContext(FontContext);
   const [dynamicFontSize, setDynamicFontSize] = useState<number | undefined>(undefined);
-  const [fontAlignmentValue, setFontAlignmentValue] = useState<number>(0);
-
+  const [topAdjustment, setTopAdjustment] = useState<number>(0);
+  const [bottomAdjustment, setBottomAdjustment] = useState<number>(0);
 
   useEffect(() => {
     if (schema.dynamicFontSize && schema.data) {
-      calculateDynamicFontSize({ textSchema: schema, font, input: schema.data }).then(setDynamicFontSize)
+      calculateDynamicFontSize({
+        textSchema: schema,
+        font,
+        input: schema.data,
+        startingFontSize: dynamicFontSize,
+      }).then(setDynamicFontSize);
     } else {
       setDynamicFontSize(undefined);
     }
+  }, [
+    schema.data,
+    schema.width,
+    schema.height,
+    schema.dynamicFontSize?.min,
+    schema.dynamicFontSize?.max,
+    schema.dynamicFontSize?.fit,
+    schema.characterSpacing,
+    schema.lineHeight,
+    font
+  ]);
+
+  useEffect(() => {
     getFontKitFont(schema, font).then(fontKitFont => {
-      const fav = getFontAlignmentValue(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE);
-      setFontAlignmentValue(fav);
+      // 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
+      );
+      setTopAdjustment(topAdj);
+      setBottomAdjustment(bottomAdj);
     });
-  }, [schema.data, schema.width, schema.fontName, schema.fontSize, schema.dynamicFontSize, schema.dynamicFontSize?.max, schema.dynamicFontSize?.min, schema.characterSpacing, font]);
 
+    if (ref && 'current' in ref) {
+      const textarea = ref.current;
 
-  const style: React.CSSProperties = {
+      if (textarea) {
+        // Textareas cannot be vertically aligned, so we need to adjust the height of the textarea
+        // to exactly fit the height of it's content, whilst aligned within it's container.
+        // This gives the appearance of being vertically aligned.
+        textarea.style.height = 'auto'; // Reset the height to auto to ensure we get the correct height.
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      }
+    }
+  }, [
+    schema.data,
+    schema.width,
+    schema.height,
+    schema.fontName,
+    schema.fontSize,
+    schema.dynamicFontSize?.max,
+    schema.dynamicFontSize?.min,
+    schema.dynamicFontSize?.fit,
+    schema.characterSpacing,
+    schema.lineHeight,
+    schema.verticalAlignment,
+    font,
+    dynamicFontSize,
+    editable,
+  ]);
+
+  const containerStyle: React.CSSProperties = {
     position: 'absolute',
     top: 0,
     padding: 0,
-    height: fontAlignmentValue < 0 ? schema.height * ZOOM + Math.abs(fontAlignmentValue) : schema.height * ZOOM,
+    height: schema.height * ZOOM,
     width: schema.width * ZOOM,
     resize: 'none',
-    marginTop: fontAlignmentValue < 0 ? fontAlignmentValue : 0,
-    paddingTop: fontAlignmentValue >= 0 ? fontAlignmentValue : 0,
+    backgroundColor: schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
+    border: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
+  };
+
+  const textareaStyle: React.CSSProperties = {
+    padding: 0,
+    resize: 'none',
+    border: 'none',
+    outline: 'none',
+    paddingTop: topAdjustment,
+    background: 'none',
+  };
+
+  const fontStyles: React.CSSProperties = {
     fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
     fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
-    whiteSpace: 'pre-line',
+    whiteSpace: 'pre-wrap',
     wordBreak: 'break-word',
-    backgroundColor:
-      schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
-    border: 'none',
   };
 
   return editable ? (
-    <textarea
-      ref={ref}
-      placeholder={placeholder}
-      tabIndex={tabIndex}
-      style={style}
-      onChange={(e) => onChange(e.target.value)}
-      value={schema.data}
-    ></textarea>
+    <div style={containerStyle}>
+      <textarea
+        ref={ref}
+        placeholder={placeholder}
+        tabIndex={tabIndex}
+        style={{ ...textareaStyle, ...fontStyles }}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onStopEditing}
+        value={schema.data}
+      ></textarea>
+    </div>
   ) : (
-    <div style={{ ...style, height: schema.height * ZOOM, marginTop: 0, paddingTop: 0 }}>
-      <div style={{ marginTop: style.marginTop, paddingTop: style.paddingTop }}>
+    <div style={containerStyle}>
+      <div
+        style={{
+          ...fontStyles,
+          marginBottom: bottomAdjustment,
+          paddingTop: topAdjustment,
+        }}
+      >
         {/*  Set the letterSpacing of the last character to 0. */}
         {schema.data.split('').map((l, i) => (
-          <span key={i} style={{ letterSpacing: String(schema.data).length === i + 1 ? 0 : 'inherit', }} >
+          <span key={i} style={{ letterSpacing: String(schema.data).length === i + 1 ? 0 : 'inherit' }}>
             {l}
           </span>
         ))}

package/src/helper.ts

@@ -314,7 +314,7 @@ const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =
           })
           .map((e) => {
             const [key, value] = e;
-            const data = template.sampledata ? template.sampledata[0][key] : '';
+            const data = template.sampledata?.[0]?.[key] ?? '';
 
             return Object.assign(value, {
               key,