@pdfme/schemas 3.4.3 → 4.0.0-dev.3

package/src/tables/uiRender.ts

@@ -0,0 +1,393 @@
+import type { UIRenderProps, Mode } from '@pdfme/common';
+import type { TableSchema, CellStyle, Styles } from './types.js';
+import { px2mm } from '@pdfme/common';
+import { createSingleTable } from './tableHelper.js';
+import { getBody, getBodyWithRange } from './helper.js';
+import cell from './cell.js';
+import { Row } from './classes';
+
+type RowType = InstanceType<typeof Row>;
+
+const cellUiRender = cell.ui;
+
+const convertToCellStyle = (styles: Styles): CellStyle => ({
+  fontName: styles.fontName,
+  alignment: styles.alignment,
+  verticalAlignment: styles.verticalAlignment,
+  fontSize: styles.fontSize,
+  lineHeight: styles.lineHeight,
+  characterSpacing: styles.characterSpacing,
+  backgroundColor: styles.backgroundColor,
+  // ---
+  fontColor: styles.textColor,
+  borderColor: styles.lineColor,
+  borderWidth: styles.lineWidth,
+  padding: styles.cellPadding,
+});
+
+const calcResizedHeadWidthPercentages = (arg: {
+  currentHeadWidthPercentages: number[];
+  currentHeadWidths: number[];
+  changedHeadWidth: number;
+  changedHeadIndex: number;
+}) => {
+  const { currentHeadWidthPercentages, currentHeadWidths, changedHeadWidth, changedHeadIndex } =
+    arg;
+  const headWidthPercentages = [...currentHeadWidthPercentages];
+  const totalWidth = currentHeadWidths.reduce((a, b) => a + b, 0);
+  const changedWidthPercentage = (changedHeadWidth / totalWidth) * 100;
+  const originalNextWidthPercentage = headWidthPercentages[changedHeadIndex + 1] ?? 0;
+  const adjustment = headWidthPercentages[changedHeadIndex] - changedWidthPercentage;
+  headWidthPercentages[changedHeadIndex] = changedWidthPercentage;
+  if (changedHeadIndex + 1 < headWidthPercentages.length) {
+    headWidthPercentages[changedHeadIndex + 1] = originalNextWidthPercentage + adjustment;
+  }
+  return headWidthPercentages;
+};
+
+const setBorder = (
+  div: HTMLDivElement,
+  borderPosition: 'Top' | 'Left' | 'Right' | 'Bottom',
+  arg: UIRenderProps<TableSchema>
+) => {
+  div.style[`border${borderPosition}`] = `${String(arg.schema.tableStyles.borderWidth)}mm solid ${
+    arg.schema.tableStyles.borderColor
+  }`;
+};
+
+const drawBorder = (
+  div: HTMLDivElement,
+  row: RowType,
+  colIndex: number,
+  rowIndex: number,
+  rowsLength: number,
+  arg: UIRenderProps<TableSchema>
+) => {
+  const isFirstColumn = colIndex === 0;
+  const isLastColumn = colIndex === Object.values(row.cells).length - 1;
+  const isLastRow = rowIndex === rowsLength - 1;
+
+  if (row.section === 'head') {
+    setBorder(div, 'Top', arg);
+    if (isFirstColumn) setBorder(div, 'Left', arg);
+    if (isLastColumn) setBorder(div, 'Right', arg);
+    if ((JSON.parse(arg.value || '[]') as string[][]).length === 0) {
+      setBorder(div, 'Bottom', arg);
+    }
+  } else if (row.section === 'body') {
+    if (!arg.schema.showHead && rowIndex === 0) {
+      setBorder(div, 'Top', arg);
+    }
+    if (isFirstColumn) setBorder(div, 'Left', arg);
+    if (isLastColumn) setBorder(div, 'Right', arg);
+    if (isLastRow) setBorder(div, 'Bottom', arg);
+  }
+};
+
+const renderRowUi = (args: {
+  rows: RowType[];
+  arg: UIRenderProps<TableSchema>;
+  editingPosition: { rowIndex: number; colIndex: number };
+  onChangeEditingPosition: (position: { rowIndex: number; colIndex: number }) => void;
+  offsetY?: number;
+}) => {
+  const { rows, arg, onChangeEditingPosition, offsetY = 0, editingPosition } = args;
+  const value = JSON.parse(arg.value || '[]') as string[][];
+
+  let rowOffsetY = offsetY;
+  rows.forEach((row, rowIndex) => {
+    const { cells, height, section } = row;
+    let colOffsetX = 0;
+    Object.values(cells).forEach((cell, colIndex) => {
+      const div = document.createElement('div');
+      div.style.position = 'absolute';
+      div.style.top = `${rowOffsetY}mm`;
+      div.style.left = `${colOffsetX}mm`;
+      div.style.width = `${cell.width}mm`;
+      div.style.height = `${cell.height}mm`;
+      div.style.boxSizing = 'border-box';
+
+      drawBorder(div, row, colIndex, rowIndex, rows.length, arg);
+
+      div.style.cursor =
+        arg.mode === 'designer' || (arg.mode === 'form' && section === 'body') ? 'text' : 'default';
+
+      div.addEventListener('click', () => {
+        if (arg.mode === 'viewer') return;
+        onChangeEditingPosition({ rowIndex, colIndex });
+      });
+      arg.rootElement.appendChild(div);
+      const isEditing =
+        editingPosition.rowIndex === rowIndex && editingPosition.colIndex === colIndex;
+      let mode: Mode = 'viewer';
+      if (arg.mode === 'form') {
+        mode = section === 'body' && isEditing ? 'designer' : 'viewer';
+      } else if (arg.mode === 'designer') {
+        mode = isEditing ? 'designer' : 'form';
+      }
+
+      void cellUiRender({
+        ...arg,
+        stopEditing: () => {
+          if (arg.mode === 'form') {
+            resetEditingPosition();
+          }
+        },
+        mode,
+        onChange: (v) => {
+          if (!arg.onChange) return;
+          const newValue = (Array.isArray(v) ? v[0].value : v.value) as string;
+          if (section === 'body') {
+            const startRange = arg.schema.__bodyRange?.start ?? 0;
+            value[rowIndex + startRange][colIndex] = newValue;
+            arg.onChange({ key: 'content', value: JSON.stringify(value) });
+          } else {
+            const newHead = [...arg.schema.head];
+            newHead[colIndex] = newValue;
+            arg.onChange({ key: 'head', value: newHead });
+          }
+        },
+        value: cell.raw,
+        placeholder: '',
+        rootElement: div,
+        schema: {
+          type: 'cell',
+          content: cell.raw,
+          position: { x: colOffsetX, y: rowOffsetY },
+          width: cell.width,
+          height: cell.height,
+          ...convertToCellStyle(cell.styles),
+        },
+      });
+      colOffsetX += cell.width;
+    });
+    rowOffsetY += height;
+  });
+};
+
+const headEditingPosition = { rowIndex: -1, colIndex: -1 };
+const bodyEditingPosition = { rowIndex: -1, colIndex: -1 };
+const resetEditingPosition = () => {
+  headEditingPosition.rowIndex = -1;
+  headEditingPosition.colIndex = -1;
+  bodyEditingPosition.rowIndex = -1;
+  bodyEditingPosition.colIndex = -1;
+};
+
+export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
+  const { rootElement, onChange, schema, value, mode } = arg;
+  const body = getBody(value);
+  const bodyWidthRange = getBodyWithRange(value, schema.__bodyRange);
+  const table = await createSingleTable(bodyWidthRange, arg);
+
+  rootElement.innerHTML = '';
+
+  const handleChangeEditingPosition = (
+    newPosition: { rowIndex: number; colIndex: number },
+    editingPosition: { rowIndex: number; colIndex: number }
+  ) => {
+    resetEditingPosition();
+    editingPosition.rowIndex = newPosition.rowIndex;
+    editingPosition.colIndex = newPosition.colIndex;
+    void uiRender(arg);
+  };
+
+  if (schema.showHead) {
+    renderRowUi({
+      rows: table.head,
+      arg,
+      editingPosition: headEditingPosition,
+      onChangeEditingPosition: (p) => handleChangeEditingPosition(p, headEditingPosition),
+    });
+  }
+
+  const offsetY = schema.showHead ? table.getHeadHeight() : 0;
+  renderRowUi({
+    rows: table.body,
+    arg,
+    editingPosition: bodyEditingPosition,
+    onChangeEditingPosition: (p) => {
+      handleChangeEditingPosition(p, bodyEditingPosition);
+    },
+    offsetY,
+  });
+
+  if (mode === 'form' && onChange) {
+    if (
+      schema.__bodyRange?.end === undefined ||
+      schema.__bodyRange.end >= (JSON.parse(value || '[]') as string[][]).length
+    ) {
+      const addRowButton = document.createElement('button');
+      addRowButton.style.width = '30px';
+      addRowButton.style.height = '30px';
+      addRowButton.style.position = 'absolute';
+      addRowButton.style.top = `${table.getHeight()}mm`;
+      addRowButton.style.left = 'calc(50% - 15px)';
+      addRowButton.innerText = '+';
+      addRowButton.onclick = () => {
+        const newRow = Array(schema.head.length).fill('') as string[];
+        onChange({ key: 'content', value: JSON.stringify(body.concat([newRow])) });
+      };
+      rootElement.appendChild(addRowButton);
+    }
+
+    let offsetY = schema.showHead ? table.getHeadHeight() : 0;
+    table.body.forEach((row, i) => {
+      offsetY = offsetY + row.height;
+      const removeRowButton = document.createElement('button');
+      removeRowButton.style.width = '30px';
+      removeRowButton.style.height = '30px';
+      removeRowButton.style.position = 'absolute';
+      removeRowButton.style.top = `${offsetY - px2mm(30)}mm`;
+      removeRowButton.style.right = '-30px';
+      removeRowButton.innerText = '-';
+      removeRowButton.onclick = () => {
+        const newTableBody = body.filter((_, j) => j !== i + (schema.__bodyRange?.start ?? 0));
+        onChange({ key: 'content', value: JSON.stringify(newTableBody) });
+      };
+      rootElement.appendChild(removeRowButton);
+    });
+  }
+
+  if (mode === 'designer' && onChange) {
+    const addColumnButton = document.createElement('button');
+    addColumnButton.style.width = '30px';
+    addColumnButton.style.height = '30px';
+    addColumnButton.style.position = 'absolute';
+    addColumnButton.style.top = `${table.getHeadHeight() - px2mm(30)}mm`;
+    addColumnButton.style.right = '-30px';
+    addColumnButton.innerText = '+';
+    addColumnButton.onclick = (e) => {
+      e.preventDefault();
+      const newColumnWidthPercentage = 25;
+      const totalCurrentWidth = schema.headWidthPercentages.reduce((acc, width) => acc + width, 0);
+      const scalingRatio = (100 - newColumnWidthPercentage) / totalCurrentWidth;
+      const scaledWidths = schema.headWidthPercentages.map((width) => width * scalingRatio);
+      onChange([
+        { key: 'head', value: schema.head.concat(`Head ${schema.head.length + 1}`) },
+        { key: 'headWidthPercentages', value: scaledWidths.concat(newColumnWidthPercentage) },
+        {
+          key: 'content',
+          value: JSON.stringify(bodyWidthRange.map((row, i) => row.concat(`Row ${i + 1}`))),
+        },
+      ]);
+    };
+    rootElement.appendChild(addColumnButton);
+
+    let offsetX = 0;
+    table.columns.forEach((column, i) => {
+      offsetX = offsetX + column.width;
+      const removeColumnButton = document.createElement('button');
+      removeColumnButton.style.width = '30px';
+      removeColumnButton.style.height = '30px';
+      removeColumnButton.style.position = 'absolute';
+      removeColumnButton.style.top = '-30px';
+      removeColumnButton.style.left = `${offsetX - px2mm(30)}mm`;
+      removeColumnButton.innerText = '-';
+      removeColumnButton.onclick = (e) => {
+        e.preventDefault();
+        const totalWidthMinusRemoved = schema.headWidthPercentages.reduce(
+          (sum, width, j) => (j !== i ? sum + width : sum),
+          0
+        );
+
+        // TODO Should also remove the deleted columnStyles when deleting
+        onChange([
+          { key: 'head', value: schema.head.filter((_, j) => j !== i) },
+          {
+            key: 'headWidthPercentages',
+            value: schema.headWidthPercentages
+              .filter((_, j) => j !== i)
+              .map((width) => (width / totalWidthMinusRemoved) * 100),
+          },
+          {
+            key: 'content',
+            value: JSON.stringify(bodyWidthRange.map((row) => row.filter((_, j) => j !== i))),
+          },
+        ]);
+      };
+      rootElement.appendChild(removeColumnButton);
+
+      if (i === table.columns.length - 1) return;
+
+      const dragHandle = document.createElement('div');
+      const lineWidth = 5;
+      dragHandle.style.width = `${lineWidth}px`;
+      dragHandle.style.height = '100%';
+      dragHandle.style.backgroundColor = '#eee';
+      dragHandle.style.opacity = '0.5';
+      dragHandle.style.cursor = 'col-resize';
+      dragHandle.style.position = 'absolute';
+      dragHandle.style.zIndex = '10';
+      dragHandle.style.left = `${offsetX - px2mm(lineWidth) / 2}mm`;
+      dragHandle.style.top = '0';
+      const setColor = (e: MouseEvent) => {
+        const handle = e.target as HTMLDivElement;
+        handle.style.backgroundColor = '#2196f3';
+      };
+      const resetColor = (e: MouseEvent) => {
+        const handle = e.target as HTMLDivElement;
+        handle.style.backgroundColor = '#eee';
+      };
+      dragHandle.addEventListener('mouseover', setColor);
+      dragHandle.addEventListener('mouseout', resetColor);
+
+      const prevColumnLeft = offsetX - column.width;
+      const nextColumnRight = offsetX - px2mm(lineWidth) + table.columns[i + 1].width;
+
+      dragHandle.addEventListener('mousedown', (e) => {
+        resetEditingPosition();
+        const handle = e.target as HTMLDivElement;
+        dragHandle.removeEventListener('mouseover', setColor);
+        dragHandle.removeEventListener('mouseout', resetColor);
+
+        let move = 0;
+        const mouseMove = (e: MouseEvent) => {
+          // TODO There is an issue where newLeft gets displaced with drag & drop
+          let moveX = e.movementX;
+          const currentLeft = Number(handle.style.left.replace('mm', ''));
+          let newLeft = currentLeft + moveX;
+          if (newLeft < prevColumnLeft) {
+            newLeft = prevColumnLeft;
+            moveX = newLeft - currentLeft;
+          }
+          if (newLeft >= nextColumnRight) {
+            newLeft = nextColumnRight;
+            moveX = newLeft - currentLeft;
+          }
+          handle.style.left = `${newLeft}mm`;
+          move += moveX;
+        };
+        rootElement.addEventListener('mousemove', mouseMove);
+
+        const commitResize = () => {
+          if (move !== 0) {
+            const newHeadWidthPercentages = calcResizedHeadWidthPercentages({
+              currentHeadWidthPercentages: schema.headWidthPercentages,
+              currentHeadWidths: table.columns.map((column) => column.width),
+              changedHeadWidth: table.columns[i].width + move,
+              changedHeadIndex: i,
+            });
+            onChange({ key: 'headWidthPercentages', value: newHeadWidthPercentages });
+          }
+          move = 0;
+          dragHandle.addEventListener('mouseover', setColor);
+          dragHandle.addEventListener('mouseout', resetColor);
+          rootElement.removeEventListener('mousemove', mouseMove);
+          rootElement.removeEventListener('mouseup', commitResize);
+        };
+        rootElement.addEventListener('mouseup', commitResize);
+      });
+      rootElement.appendChild(dragHandle);
+    });
+  }
+
+  if (mode === 'viewer') {
+    resetEditingPosition();
+  }
+
+  const tableHeight = schema.showHead ? table.getHeight() : table.getBodyHeight();
+  if (schema.height !== tableHeight && onChange) {
+    onChange({ key: 'height', value: tableHeight });
+  }
+};

package/src/text/helper.ts

@@ -107,15 +107,18 @@ const getFallbackFont = (font: Font) => {
 
 const getCacheKey = (fontName: string) => `getFontKitFont-${fontName}`;
 
-export const getFontKitFont = async (textSchema: TextSchema, font: Font, _cache: Map<any, any>) => {
-  const fontName = textSchema.fontName || getFallbackFontName(font);
-  const cacheKey = getCacheKey(fontName);
+export const getFontKitFont = async (
+  fontName: string | undefined,
+  font: Font,
+  _cache: Map<any, any>
+) => {
+  const fntNm = fontName || getFallbackFontName(font);
+  const cacheKey = getCacheKey(fntNm);
   if (_cache.has(cacheKey)) {
     return _cache.get(cacheKey) as fontkit.Font;
   }
 
-  const currentFont =
-    font[fontName] || getFallbackFont(font) || getDefaultFont()[DEFAULT_FONT_NAME];
+  const currentFont = font[fntNm] || getFallbackFont(font) || getDefaultFont()[DEFAULT_FONT_NAME];
   let fontData = currentFont.data;
   if (typeof fontData === 'string') {
     fontData = fontData.startsWith('http')
@@ -244,7 +247,7 @@ export const calculateDynamicFontSize = async ({
   if (dynamicFontSizeSetting.max < dynamicFontSizeSetting.min) return fontSize;
 
   const characterSpacing = schemaCharacterSpacing ?? DEFAULT_CHARACTER_SPACING;
-  const fontKitFont = await getFontKitFont(textSchema, font, _cache);
+  const fontKitFont = await getFontKitFont(textSchema.fontName, font, _cache);
   const paragraphs = value.split('\n');
 
   let dynamicFontSize = fontSize;
@@ -339,4 +342,24 @@ export const calculateDynamicFontSize = async ({
   return dynamicFontSize;
 };
 
+export const splitTextToSize = (arg: {
+  value: string;
+  characterSpacing: number;
+  boxWidthInPt: number;
+  fontSize: number;
+  fontKitFont: fontkit.Font;
+}) => {
+  const { value, characterSpacing, fontSize, fontKitFont, boxWidthInPt } = arg;
+  const fontWidthCalcValues: FontWidthCalcValues = {
+    font: fontKitFont,
+    fontSize,
+    characterSpacing,
+    boxWidthInPt,
+  };
+  let lines: string[] = [];
+  value.split(/\r\n|\r|\n|\f|\u000B/g).forEach((line: string) => {
+    lines = lines.concat(getSplittedLines(line, fontWidthCalcValues));
+  });
+  return lines;
+};
 export const isFirefox = () => navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

package/src/text/index.ts

@@ -16,8 +16,8 @@ export const readOnlyText: Plugin<TextSchema> = {
     defaultSchema: {
       ...textSchema.propPanel.defaultSchema,
       type: 'readOnlyText',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
       readOnly: true,
-      readOnlyValue: textSchema.propPanel.defaultValue,
     },
   },
 };

package/src/text/pdfRender.ts

@@ -1,12 +1,12 @@
 import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
-import type { TextSchema, FontWidthCalcValues } from './types';
+import type { TextSchema } from './types';
 import {
   PDFRenderProps,
+  ColorType,
   Font,
   getDefaultFont,
   getFallbackFontName,
   mm2pt,
-  ColorType,
 } from '@pdfme/common';
 import {
   VERTICAL_ALIGN_TOP,
@@ -24,8 +24,8 @@ import {
   heightOfFontAtSize,
   getFontDescentInPt,
   getFontKitFont,
-  getSplittedLines,
   widthOfTextAtSize,
+  splitTextToSize,
 } from './helper.js';
 import { convertForPdfLayoutProps, rotatePoint, hex2PrintingColor } from '../utils.js';
 
@@ -96,8 +96,8 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
 
   const [pdfFontObj, fontKitFont, fontProp] = await Promise.all([
     embedAndGetFontObj({ pdfDoc, font, _cache }),
-    getFontKitFont(schema, font, _cache),
-    getFontProp({ value, font, schema, _cache, colorType }),
+    getFontKitFont(schema.fontName, font, _cache),
+    getFontProp({ value, font, schema, _cache }),
   ]);
 
   const { fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing } = fontProp;
@@ -127,16 +127,12 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const descent = getFontDescentInPt(fontKitFont, fontSize);
   const halfLineHeightAdjustment = lineHeight === 0 ? 0 : ((lineHeight - 1) * fontSize) / 2;
 
-  const fontWidthCalcValues: FontWidthCalcValues = {
-    font: fontKitFont,
-    fontSize,
+  const lines = splitTextToSize({
+    value,
     characterSpacing,
+    fontSize,
+    fontKitFont,
     boxWidthInPt: width,
-  };
-
-  let lines: string[] = [];
-  value.split(/\r\n|\r|\n|\f|\u000B/g).forEach((line: string) => {
-    lines = lines.concat(getSplittedLines(line, fontWidthCalcValues));
   });
 
   // Text lines are rendered from the bottom upwards, we need to adjust the position down

package/src/text/propPanel.ts

@@ -72,12 +72,14 @@ export const propPanel: PropPanel<TextSchema> = {
         widget: 'inputNumber',
         span: 6,
         disabled: enableDynamicFont,
+        props: { min: 0 },
       },
       characterSpacing: {
         title: i18n('schemas.text.spacing'),
         type: 'number',
         widget: 'inputNumber',
         span: 6,
+        props: { min: 0 },
       },
       alignment: {
         title: i18n('schemas.text.textAlign'),
@@ -109,9 +111,7 @@ export const propPanel: PropPanel<TextSchema> = {
         title: i18n('schemas.text.lineHeight'),
         type: 'number',
         widget: 'inputNumber',
-        props: {
-          step: 0.1,
-        },
+        props: { step: 0.1, min: 0 },
         span: 8,
       },
       useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 },
@@ -125,12 +125,14 @@ export const propPanel: PropPanel<TextSchema> = {
             type: 'number',
             widget: 'inputNumber',
             hidden: !enableDynamicFont,
+            props: { min: 0 },
           },
           max: {
             title: i18n('schemas.text.max'),
             type: 'number',
             widget: 'inputNumber',
             hidden: !enableDynamicFont,
+            props: { min: 0 },
           },
           fit: {
             title: i18n('schemas.text.fit'),
@@ -173,9 +175,10 @@ export const propPanel: PropPanel<TextSchema> = {
     return textSchema;
   },
   widgets: { UseDynamicFontSize },
-  defaultValue: 'Type Something...',
   defaultSchema: {
     type: 'text',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>',
+    content: 'Type Something...',
     position: { x: 0, y: 0 },
     width: 45,
     height: 10,

package/src/text/uiRender.ts

@@ -19,7 +19,7 @@ import {
   getBrowserVerticalFontAdjustments,
   isFirefox,
 } from './helper.js';
-import { addAlphaToHex, isEditable } from '../utils.js';
+import { isEditable } from '../utils.js';
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {
@@ -33,10 +33,9 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   return 'flex-start';
 };
 
-const getBackgroundColor = (value: string, schema: Schema, defaultBackgroundColor: string) => {
-  if (!value) return 'transparent';
-  if (schema.backgroundColor) return schema.backgroundColor as string;
-  return defaultBackgroundColor;
+const getBackgroundColor = (value: string, schema: Schema) => {
+  if (!value || !schema.backgroundColor) return 'transparent';
+  return schema.backgroundColor as string;
 };
 
 export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
@@ -50,7 +49,6 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     tabIndex,
     placeholder,
     options,
-    theme,
     _cache,
   } = arg;
   const font = options?.font || getDefaultFont();
@@ -67,7 +65,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     dynamicFontSize = await calculateDynamicFontSize(getCdfArg(value));
   }
 
-  const fontKitFont = await getFontKitFont(schema, font, _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(
@@ -85,13 +83,14 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const containerStyle: CSS.Properties = {
     padding: 0,
     resize: 'none',
-    backgroundColor: getBackgroundColor(value, schema, addAlphaToHex(theme.colorPrimaryBg, 30)),
+    backgroundColor: getBackgroundColor(value, schema),
     border: 'none',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
     width: '100%',
     height: '100%',
+    cursor: isEditable(mode, schema) ? 'text' : 'default',
   };
   Object.assign(container.style, containerStyle);
   rootElement.innerHTML = '';
@@ -143,7 +142,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     textBlock.tabIndex = tabIndex || 0;
     textBlock.innerText = value;
     textBlock.addEventListener('blur', (e: Event) => {
-      onChange && onChange((e.target as HTMLDivElement).innerText);
+      onChange && onChange({ key: 'content', value: (e.target as HTMLDivElement).innerText });
       stopEditing && stopEditing();
     });
 
@@ -187,15 +186,16 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     container.appendChild(textBlock);
 
     if (mode === 'designer') {
-      textBlock.focus();
-
-      // Set the focus to the end of the editable element when you focus, as we would for a textarea
-      const selection = window.getSelection();
-      const range = document.createRange();
-      range.selectNodeContents(textBlock);
-      range.collapse(false); // Collapse range to the end
-      selection?.removeAllRanges();
-      selection?.addRange(range);
+      setTimeout(() => {
+        textBlock.focus();
+        // Set the focus to the end of the editable element when you focus, as we would for a textarea
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(textBlock);
+        range.collapse(false); // Collapse range to the end
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      });
     }
   } else {
     textBlock.innerHTML = value

package/src/utils.ts

@@ -203,3 +203,4 @@ export const createErrorElm = () => {
 
   return container;
 };
+export const cloneDeep = <T>(value: T): T => JSON.parse(JSON.stringify(value));