@pdfme/schemas 3.2.3-dev.1 → 4.0.0-alpha.0

package/src/tables/uiRender.ts

@@ -0,0 +1,362 @@
+import type { UIRenderProps, Mode } from '@pdfme/common';
+import type { TableSchema, CellStyle, Styles } from './types.js';
+import { createSingleTable } from './tableHelper.js';
+import { getBody, getBodyWithRange } from './helper.js';
+import cell from './cell.js';
+import { px2mm } from '../utils';
+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 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[][];
+
+  // TODO Need to adjust the inner size when the outer border increases
+  // Want to have the same style as border-collapse: collapse; (overlapping borders should merge into one)
+  // This should apply to the table itself as well as the cells, which should behave similarly.
+  let rowOffsetY = offsetY;
+  rows.forEach((row, rowIndex) => {
+    const { cells, height, section } = row;
+    let colWidth = 0;
+    Object.values(cells).forEach((cell, colIndex) => {
+      const div = document.createElement('div');
+      div.style.position = 'absolute';
+      div.style.top = `${rowOffsetY}mm`;
+      div.style.left = `${colWidth}mm`;
+      div.style.width = `${cell.width}mm`;
+      div.style.height = `${cell.height}mm`;
+
+      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;
+            // TODO Calling onChange triggers re-rendering, causing the focus to be lost
+            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: colWidth, y: rowOffsetY },
+          width: cell.width,
+          height: cell.height,
+          ...convertToCellStyle(cell.styles),
+        },
+      });
+      colWidth += 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 = '';
+
+  rootElement.style.borderColor = schema.tableStyles.borderColor;
+  rootElement.style.borderWidth = String(schema.tableStyles.borderWidth) + 'mm';
+  rootElement.style.borderStyle = 'solid';
+  rootElement.style.boxSizing = 'border-box';
+
+  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();
+  }
+
+  if (mode !== 'form') {
+    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')
@@ -224,7 +227,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;
@@ -318,3 +321,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;
+};

package/src/text/index.ts

@@ -17,7 +17,6 @@ export const readOnlyText: Plugin<TextSchema> = {
       ...textSchema.propPanel.defaultSchema,
       type: 'readOnlyText',
       readOnly: true,
-      readOnlyValue: textSchema.propPanel.defaultValue,
     },
   },
 };

package/src/text/pdfRender.ts

@@ -1,5 +1,5 @@
 import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
-import type { TextSchema, FontWidthCalcValues } from './types';
+import type { TextSchema } from './types';
 import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName, mm2pt } from '@pdfme/common';
 import {
   VERTICAL_ALIGN_TOP,
@@ -17,8 +17,8 @@ import {
   heightOfFontAtSize,
   getFontDescentInPt,
   getFontKitFont,
-  getSplittedLines,
   widthOfTextAtSize,
+  splitTextToSize,
 } from './helper.js';
 import { convertForPdfLayoutProps, rotatePoint, hex2RgbColor } from '../utils.js';
 
@@ -87,7 +87,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
 
   const [pdfFontObj, fontKitFont, fontProp] = await Promise.all([
     embedAndGetFontObj({ pdfDoc, font, _cache }),
-    getFontKitFont(schema, font, _cache),
+    getFontKitFont(schema.fontName, font, _cache),
     getFontProp({ value, font, schema, _cache }),
   ]);
 
@@ -118,16 +118,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,9 @@ export const propPanel: PropPanel<TextSchema> = {
     return textSchema;
   },
   widgets: { UseDynamicFontSize },
-  defaultValue: 'Type Something...',
   defaultSchema: {
     type: 'text',
+    content: 'Type Something...',
     position: { x: 0, y: 0 },
     width: 45,
     height: 10,

package/src/text/uiRender.ts

@@ -18,7 +18,7 @@ import {
   getFontKitFont,
   getBrowserVerticalFontAdjustments,
 } from './helper.js';
-import { addAlphaToHex, isEditable } from '../utils.js';
+import { isEditable } from '../utils.js';
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {
@@ -32,10 +32,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>) => {
@@ -49,7 +48,6 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     tabIndex,
     placeholder,
     options,
-    theme,
     _cache,
   } = arg;
   const font = options?.font || getDefaultFont();
@@ -66,7 +64,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(
@@ -84,13 +82,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 = '';
@@ -122,7 +121,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();
     });
 
@@ -166,15 +165,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

@@ -159,3 +159,11 @@ export const createErrorElm = () => {
 
   return container;
 };
+
+export const px2mm = (px: number): number => {
+  // http://www.endmemo.com/sconvert/millimeterpixel.php
+  const ratio = 0.26458333333333;
+  return parseFloat(String(px)) * ratio;
+};
+
+export const cloneDeep = <T>(value: T): T => JSON.parse(JSON.stringify(value));