@pdfme/schemas 2.2.1 → 3.0.0-beta.2

package/src/barcodes/propPanel.ts

@@ -13,7 +13,14 @@ const default40x20 = { width: 40, height: 20 };
 const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[] = [
   {
     defaultValue: 'https://pdfme.com/',
-    defaultSchema: { type: 'qrcode', position, ...defaultColors, width: 30, height: 30 },
+    defaultSchema: {
+      type: 'qrcode',
+      position,
+      ...defaultColors,
+      width: 30,
+      height: 30,
+      rotate: 0,
+    },
   },
   {
     defaultValue: '6540123789-A-K-Z',
@@ -24,6 +31,7 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultTextColors,
       width: 80,
       height: 7.2,
+      rotate: 0,
     },
   },
   {
@@ -35,6 +43,7 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultTextColors,
       ...default40x20,
       height: 16,
+      rotate: 0,
     },
   },
   {
@@ -45,6 +54,7 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultColors,
       ...defaultTextColors,
       ...default40x20,
+      rotate: 0,
     },
   },
   {
@@ -65,6 +75,7 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultColors,
       ...defaultTextColors,
       ...default40x20,
+      rotate: 0,
     },
   },
   {
@@ -75,6 +86,7 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultColors,
       ...defaultTextColors,
       ...default40x20,
+      rotate: 0,
     },
   },
   {
@@ -86,6 +98,7 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultTextColors,
       ...default40x20,
       height: 12,
+      rotate: 0,
     },
   },
   {
@@ -97,6 +110,7 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultTextColors,
       ...default40x20,
       height: 16,
+      rotate: 0,
     },
   },
   {
@@ -107,11 +121,19 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
       ...defaultColors,
       ...defaultTextColors,
       ...default40x20,
+      rotate: 0,
     },
   },
   {
     defaultValue: '(01)03453120000011(17)191125(10)ABCD1234',
-    defaultSchema: { type: 'gs1datamatrix', position, ...defaultColors, width: 30, height: 30 },
+    defaultSchema: {
+      type: 'gs1datamatrix',
+      position,
+      ...defaultColors,
+      width: 30,
+      height: 30,
+      rotate: 0,
+    },
   },
 ];
 
@@ -127,7 +149,7 @@ export const getPropPanelByBarcodeType = (barcodeType: string): PropPanel<Barcod
   };
   const defaults = barcodeDefaults.find(({ defaultSchema }) => defaultSchema.type === barcodeType);
 
-  if (!defaults) throw new Error(`No default for barcode type ${barcodeType}`);
+  if (!defaults) throw new Error(`[@pdfme/schemas] No default for barcode type ${barcodeType}`);
 
   return { propPanelSchema: schema, ...defaults };
 };

package/src/barcodes/uiRender.ts

@@ -72,8 +72,8 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
   };
   Object.assign(container.style, containerStyle);
   rootElement.appendChild(container);
-  const isForm = mode === 'form';
-  if (isForm) {
+  const editable = mode === 'form' || mode === 'designer';
+  if (editable) {
     const input = document.createElement('input');
     const inputStyle: CSS.Properties = {
       ...fullSize,
@@ -81,7 +81,7 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
       textAlign: 'center',
       fontSize: '1rem',
       color: '#000',
-      backgroundColor: isForm || value ? 'rgb(242 244 255 / 75%)' : 'none',
+      backgroundColor: editable || value ? 'rgb(242 244 255 / 75%)' : 'none',
       border: 'none',
       display: 'flex',
       alignItems: 'center',
@@ -99,17 +99,20 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
       stopEditing && stopEditing();
     });
     container.appendChild(input);
-    input.setSelectionRange(value.length, value.length);
-    input.focus();
+    if (mode === 'designer') {
+      input.setSelectionRange(value.length, value.length);
+      input.focus();
+    }
   }
 
   if (!value) return;
   try {
-    if (!validateBarcodeInput(schema.type, value)) throw new Error('Invalid barcode input');
+    if (!validateBarcodeInput(schema.type, value))
+      throw new Error('[@pdfme/schemas] Invalid barcode input');
     const imgElm = await createBarcodeImageElm(schema, value);
     container.appendChild(imgElm);
   } catch (err) {
-    console.error(err);
+    console.error(`[@pdfme/ui] ${err}`);
     const errorBarcodeElm = createErrorBarcodeElm();
     container.appendChild(errorBarcodeElm);
   }

package/src/image/pdfRender.ts

@@ -1,18 +1,10 @@
 import type { PDFRenderProps } from '@pdfme/common';
 import type { ImageSchema } from './types';
-import { calcX, calcY, convertSchemaDimensionsToPt, getCacheKey } from '../renderUtils';
+import { getCacheKey, convertForPdfLayoutProps } from '../renderUtils';
 
 export const pdfRender = async (arg: PDFRenderProps<ImageSchema>) => {
   const { value, schema, pdfDoc, page, _cache } = arg;
 
-  const { width, height, rotate } = convertSchemaDimensionsToPt(schema);
-  const opt = {
-    x: calcX(schema.position.x, 'left', width, width),
-    y: calcY(schema.position.y, page.getHeight(), height),
-    rotate,
-    width,
-    height,
-  };
   const inputImageCacheKey = getCacheKey(schema, value);
   let image = _cache.get(inputImageCacheKey);
   if (!image) {
@@ -20,5 +12,14 @@ export const pdfRender = async (arg: PDFRenderProps<ImageSchema>) => {
     image = await (isPng ? pdfDoc.embedPng(value) : pdfDoc.embedJpg(value));
     _cache.set(inputImageCacheKey, image);
   }
-  page.drawImage(image, opt);
+
+  const pageHeight = page.getHeight();
+  const {
+    width,
+    height,
+    rotate,
+    position: { x, y },
+  } = convertForPdfLayoutProps({ schema, pageHeight });
+
+  page.drawImage(image, { x, y, rotate, width, height });
 };

package/src/image/propPanel.ts

@@ -4,5 +4,13 @@ export const propPanel: PropPanel<ImageSchema> = {
   propPanelSchema: {},
   defaultValue:
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAALuAQMAAADL0wGJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURbzAw+rv8fKruy0AAAPoSURBVHja7dwxbtwwEEBRCkKwRQodYftcYk+ROkcJz5NTsEuZK/AIKlIQAUEnke0VqQ0pA5zxWvFnZcD2s0CNuENxPOZBc0QDDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD/+P8bkxvnTzzjTG0M2b5rh08rHNT518aPOnTt63+aGTd23edPJ2h//ax+/oO6Gzx6c78+cuPu7x01vmwx5/6uLnO/PjO+b/rGifvtWH3VnT9vmh/e3eqx/bc9d79af2YwEPDw8P/6r8r1GVt5VcUoZPtXxGhp9rGYEM72vbEBne1hJ5Gb6ayIvwqZppi/CxmgqL8KGaTIrwc3WDfATeV/ffIryr7r+PwNvq/vsIfH17D5/qbw/gb/mLKp/OqnycFPj14yqcJPm4vfp5VJ0cP6jyzqjy9rr2q/Dr4qzBp3V5E1wxp/V3rl8LXn32qF6fAY31Psv2NXi/5lQaH+Vuzak0eLsmPRppVPa3FPiU3QiFFDZmD4FCAh6yxV+Bn7O9isLmx2d/TGHr5rI7obDxtFkcKWyb89M2+U1/sX7Kv7Io8gaxFy5l2D/faRk++3x6PgsalV52+fwUW4j/+eGhDPuneyH/otHmp9jyfHHMLM6n4phZnI/FObA4H4qDWnF+Lo46xXlflG+I864o3xDnbVG+Ic6X9RXSfCrrK6T5WBZASPOhrFCQ5ufyjF+a92XdkjTvyrolad6WdUvS/KawSI7/sQn7JfDl+O+bsF8CX44fN2FvHnNnIT4Nm7BfAl+ON5uwXwJfjA/LCuk2BXvCvN0U7InxflmAtxV1gvx0U2N3luPtdZOlwj/FoR5vbuq85Pi48F6LD0scOk3+sq1cleP9ohlNfkpq/N9pGaMuH7T4ZVqGWYt/nBavyxstftblfaVIWJU/y72yODCfzJH5oMvPh+adLm+PzCdzZD5U/61ClT9Lnvyo8e7QvFHlE3ydj0zOu5ucickhcpgcJofJedUVk8j5b/nGgIeHh4d/I3x/RwLlhgfNH3DavSwGXf7YjT76uqCEQ/P37p9z7uKVmwspd17S7hul3PXK6fbsmnvWhO6GZlMnn3ri8gXN5GzHnX0B35ydj91814CHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHl+d/A9cKjmiL040TAAAAAElFTkSuQmCC',
-  defaultSchema: { type: 'image', position: { x: 0, y: 0 }, width: 40, height: 40 },
+  defaultSchema: {
+    type: 'image',
+    position: { x: 0, y: 0 },
+    width: 40,
+    height: 40,
+    // If the value of "rotate" is set to undefined or not set at all, rotation will be disabled in the UI.
+    // Check this document: https://pdfme.com//docs/custom-schemas#learning-how-to-create-from-pdfmeschemas-code
+    rotate: 0,
+  },
 };

package/src/image/uiRender.ts

@@ -16,7 +16,7 @@ const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer>
     };
 
     fileReader.onerror = (e) => {
-      reject(new Error('File reading failed'));
+      reject(new Error('[@pdfme/schemas] File reading failed'));
     };
 
     let file: File | null = null;
@@ -29,13 +29,13 @@ const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer>
     if (file) {
       fileReader.readAsDataURL(file);
     } else {
-      reject(new Error('No files provided'));
+      reject(new Error('[@pdfme/schemas] No files provided'));
     }
   });
 
 export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema } = arg;
-  const isForm = mode === 'form';
+  const editable = mode === 'form' || mode === 'designer';
 
   const size = { width: schema.width * ZOOM, height: schema.height * ZOOM };
 
@@ -47,7 +47,7 @@ export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   };
   Object.assign(container.style, containerStyle);
   container.addEventListener('click', (e) => {
-    if (isForm) {
+    if (editable) {
       e.stopPropagation();
     }
   });
@@ -63,7 +63,7 @@ export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   }
 
   // remove button
-  if (value && isForm) {
+  if (value && editable) {
     const button = document.createElement('button');
     button.textContent = 'x';
     const buttonStyle: CSS.Properties = {
@@ -90,14 +90,14 @@ export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   }
 
   // file input
-  if (!value && isForm) {
+  if (!value && editable) {
     const label = document.createElement('label');
     const labelStyle: CSS.Properties = {
       ...fullSize,
-      display: isForm ? 'flex' : 'none',
+      display: editable ? 'flex' : 'none',
       position: 'absolute',
       top: 0,
-      backgroundColor: isForm || value ? 'rgb(242 244 255 / 75%)' : 'none',
+      backgroundColor: editable || value ? 'rgb(242 244 255 / 50%)' : 'none',
       cursor: 'pointer',
     };
     Object.assign(label.style, labelStyle);

package/src/index.ts

@@ -1,7 +1,5 @@
-import textSchema from './text';
-import imageSchema from './image';
-import barcodesSchemaObj from './barcodes';
+import text from './text';
+import image from './image';
+import barcodes from './barcodes';
 
-export const text = textSchema;
-export const image = imageSchema;
-export const barcodes = barcodesSchemaObj;
+export { text, image, barcodes };

package/src/renderUtils.ts

@@ -1,74 +1,64 @@
-import { PDFPage, degrees, rgb } from '@pdfme/pdf-lib';
+import { degrees, degreesToRadians } from '@pdfme/pdf-lib';
 import { Schema, mm2pt } from '@pdfme/common';
 
-const hex2rgb = (hex: string) => {
-  if (hex.slice(0, 1) === '#') hex = hex.slice(1);
-  if (hex.length === 3)
-    hex =
-      hex.slice(0, 1) +
-      hex.slice(0, 1) +
-      hex.slice(1, 2) +
-      hex.slice(1, 2) +
-      hex.slice(2, 3) +
-      hex.slice(2, 3);
-
-  return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => parseInt(str, 16));
-};
-
-export const hex2RgbColor = (hexString: string | undefined) => {
-  if (hexString) {
-    const [r, g, b] = hex2rgb(hexString);
-
-    return rgb(r / 255, g / 255, b / 255);
-  }
+export const convertForPdfLayoutProps = ({
+  schema,
+  pageHeight,
+  applyRotateTranslate = true,
+}: {
+  schema: Schema;
+  pageHeight: number;
+  applyRotateTranslate?: boolean;
+}) => {
+  const { width: mmWidth, height: mmHeight, position, rotate } = schema;
+  const { x: mmX, y: mmY } = position;
 
-  // eslint-disable-next-line no-undefined
-  return undefined;
-};
+  const rotateDegrees = rotate ? -rotate : 0;
+  const width = mm2pt(mmWidth);
+  const height = mm2pt(mmHeight);
+  let x = mm2pt(mmX);
+  // PDF coordinate system is from bottom left, UI is top left, so we need to flip the y axis
+  let y = pageHeight - mm2pt(mmY) - height;
 
-export const calcX = (
-  x: number,
-  alignment: 'left' | 'center' | 'right',
-  boxWidth: number,
-  textWidth: number
-) => {
-  let addition = 0;
-  if (alignment === 'center') {
-    addition = (boxWidth - textWidth) / 2;
-  } else if (alignment === 'right') {
-    addition = boxWidth - textWidth;
+  if (rotateDegrees && applyRotateTranslate) {
+    // If rotating we must pivot around the same point as the UI performs its rotation.
+    // The UI performs rotation around the objects center point (the pivot point below),
+    // pdflib rotates around the bottom left corner of the object.
+    // We must therefore adjust the X and Y by rotating the bottom left corner by this pivot point.
+    const pivotPoint = { x: x + width / 2, y: pageHeight - mm2pt(mmY) - height / 2 };
+    const rotatedPoint = rotatePoint({ x, y }, pivotPoint, rotateDegrees);
+    x = rotatedPoint.x;
+    y = rotatedPoint.y;
   }
 
-  return mm2pt(x) + addition;
+  return {
+    position: {
+      x: x,
+      y: y,
+    },
+    height: height,
+    width: width,
+    rotate: degrees(rotateDegrees),
+  };
 };
 
-export const calcY = (y: number, pageHeight: number, itemHeight: number) =>
-  pageHeight - mm2pt(y) - itemHeight;
-
-export const renderBackgroundColor = (arg: {
-  schema: Schema;
-  page: PDFPage;
-  pageHeight: number;
-}) => {
-  const { schema, page, pageHeight } = arg;
-  if (!schema.backgroundColor) return;
-  const { width, height } = convertSchemaDimensionsToPt(schema);
-  const color = hex2RgbColor(schema.backgroundColor as string);
-  page.drawRectangle({
-    x: calcX(schema.position.x, 'left', width, width),
-    y: calcY(schema.position.y, pageHeight, height),
-    width,
-    height,
-    color,
-  });
-};
+export const rotatePoint = (
+  point: { x: number; y: number },
+  pivot: { x: number; y: number },
+  angleDegrees: number
+): { x: number; y: number } => {
+  const angleRadians = degreesToRadians(angleDegrees);
 
-export const convertSchemaDimensionsToPt = (schema: Schema) => {
-  const width = mm2pt(schema.width);
-  const height = mm2pt(schema.height);
-  const rotate = degrees(schema.rotate ? schema.rotate : 0);
+  const x =
+    Math.cos(angleRadians) * (point.x - pivot.x) -
+    Math.sin(angleRadians) * (point.y - pivot.y) +
+    pivot.x;
+  const y =
+    Math.sin(angleRadians) * (point.x - pivot.x) +
+    Math.cos(angleRadians) * (point.y - pivot.y) +
+    pivot.y;
 
-  return { width, height, rotate };
+  return { x, y };
 };
 
 export const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;

package/src/text/pdfRender.ts

@@ -1,5 +1,5 @@
-import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
-import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName } from '@pdfme/common';
+import { PDFFont, PDFDocument, rgb } from '@pdfme/pdf-lib';
+import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName, mm2pt } from '@pdfme/common';
 import type { TextSchema, FontWidthCalcValues } from './types';
 import {
   VERTICAL_ALIGN_TOP,
@@ -20,13 +20,31 @@ import {
   getSplittedLines,
   widthOfTextAtSize,
 } from './helper';
-import {
-  hex2RgbColor,
-  calcX,
-  calcY,
-  renderBackgroundColor,
-  convertSchemaDimensionsToPt,
-} from '../renderUtils';
+import { convertForPdfLayoutProps, rotatePoint } from '../renderUtils';
+
+const hex2rgb = (hex: string) => {
+  if (hex.slice(0, 1) === '#') hex = hex.slice(1);
+  if (hex.length === 3)
+    hex =
+      hex.slice(0, 1) +
+      hex.slice(0, 1) +
+      hex.slice(1, 2) +
+      hex.slice(1, 2) +
+      hex.slice(2, 3) +
+      hex.slice(2, 3);
+
+  return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => parseInt(str, 16));
+};
+
+const hex2RgbColor = (hexString: string | undefined) => {
+  if (hexString) {
+    const [r, g, b] = hex2rgb(hexString);
+
+    return rgb(r / 255, g / 255, b / 255);
+  }
+
+  return undefined;
+};
 
 const embedAndGetFontObjCache = new WeakMap();
 const embedAndGetFontObj = async (arg: { pdfDoc: PDFDocument; font: Font }) => {
@@ -99,9 +117,17 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const pdfFontValue = pdfFontObj[fontName];
 
   const pageHeight = page.getHeight();
-  renderBackgroundColor({ schema, page, pageHeight });
-
-  const { width, height, rotate } = convertSchemaDimensionsToPt(schema);
+  const {
+    width,
+    height,
+    rotate,
+    position: { x, y },
+  } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
+
+  if (schema.backgroundColor) {
+    const color = hex2RgbColor(schema.backgroundColor as string);
+    page.drawRectangle({ x, y, width, height, rotate, color });
+  }
 
   page.pushOperators(pdfLib.setCharacterSpacing(characterSpacing ?? DEFAULT_CHARACTER_SPACING));
 
@@ -117,7 +143,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   };
 
   let lines: string[] = [];
-  value.split(/\r|\n|\r\n/g).forEach((line) => {
+  value.split(/\r|\n|\r\n/g).forEach((line: string) => {
     lines = lines.concat(getSplittedLines(line, fontWidthCalcValues));
   });
 
@@ -136,13 +162,32 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
     }
   }
 
+  const pivotPoint = { x: x + width / 2, y: pageHeight - mm2pt(schema.position.y) - height / 2 };
+
   lines.forEach((line, rowIndex) => {
     const textWidth = widthOfTextAtSize(line, fontKitFont, fontSize, characterSpacing);
     const rowYOffset = lineHeight * fontSize * rowIndex;
 
+    let xLine = x;
+    if (alignment === 'center') {
+      xLine += (width - textWidth) / 2;
+    } else if (alignment === 'right') {
+      xLine += width - textWidth;
+    }
+
+    let yLine = pageHeight - mm2pt(schema.position.y) - yOffset - rowYOffset;
+
+    if (rotate.angle !== 0) {
+      // As we draw each line individually from different points, we must translate each lines position
+      // relative to the UI rotation pivot point. see comments in convertForPdfLayoutProps() for more info.
+      const rotatedPoint = rotatePoint({ x: xLine, y: yLine }, pivotPoint, rotate.angle);
+      xLine = rotatedPoint.x;
+      yLine = rotatedPoint.y;
+    }
+
     page.drawText(line, {
-      x: calcX(schema.position.x, alignment, width, textWidth),
-      y: calcY(schema.position.y, pageHeight, yOffset) - rowYOffset,
+      x: xLine,
+      y: yLine,
       rotate,
       size: fontSize,
       color,

package/src/text/propPanel.ts

@@ -63,8 +63,16 @@ export const propPanel: PropPanel<TextSchema> = {
         widget: 'select',
         default: fallbackFontName,
         props: { options: fontNames.map((name) => ({ label: name, value: name })) },
-        span: 8,
+        span: 12,
+      },
+      fontSize: {
+        title: 'Size',
+        type: 'number',
+        widget: 'inputNumber',
+        span: 6,
+        disabled: enableDynamicFont,
       },
+      characterSpacing: { title: 'Spacing', type: 'number', widget: 'inputNumber', span: 6 },
       alignment: {
         title: 'Text Align',
         type: 'string',
@@ -91,15 +99,7 @@ export const propPanel: PropPanel<TextSchema> = {
         },
         span: 8,
       },
-      fontSize: {
-        title: 'Font Size',
-        type: 'number',
-        widget: 'inputNumber',
-        span: 8,
-        disabled: enableDynamicFont,
-      },
       lineHeight: { title: 'Line Height', type: 'number', widget: 'inputNumber', span: 8 },
-      characterSpacing: { title: 'Char Spc', type: 'number', widget: 'inputNumber', span: 8 },
       useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false },
       dynamicFontSize: {
         type: 'object',
@@ -135,6 +135,9 @@ export const propPanel: PropPanel<TextSchema> = {
     position: { x: 0, y: 0 },
     width: 45,
     height: 10,
+    // If the value of "rotate" is set to undefined or not set at all, rotation will be disabled in the UI.
+    // Check this document: https://pdfme.com//docs/custom-schemas#learning-how-to-create-from-pdfmeschemas-code
+    rotate: 0,
     alignment: DEFAULT_ALIGNMENT,
     verticalAlignment: DEFAULT_VERTICAL_ALIGNMENT,
     fontSize: DEFAULT_FONT_SIZE,

package/src/text/uiRender.ts

@@ -30,6 +30,20 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   return 'flex-start';
 };
 
+const getBackgroundColor = (
+  mode: 'form' | 'viewer' | 'designer',
+  value: string,
+  schema: Schema
+) => {
+  if ((mode === 'form' || mode === 'designer') && value && schema.backgroundColor) {
+    return schema.backgroundColor as string;
+  } else if (mode === 'viewer') {
+    return (schema.backgroundColor as string) ?? 'transparent';
+  } else {
+    return 'rgb(242 244 255 / 75%)';
+  }
+};
+
 export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const {
     value,
@@ -68,15 +82,6 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const bottomAdjustment = bottomAdj;
 
   const container = document.createElement('div');
-  function getBackgroundColor(mode: 'form' | 'viewer', value: string, schema: Schema) {
-    if (mode === 'form' && value && schema.backgroundColor) {
-      return schema.backgroundColor as string;
-    } else if (mode === 'viewer') {
-      return (schema.backgroundColor as string) ?? 'transparent';
-    } else {
-      return 'rgb(242 244 255 / 75%)';
-    }
-  }
 
   const containerStyle: CSS.Properties = {
     padding: 0,
@@ -104,7 +109,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     wordBreak: 'break-word',
   };
 
-  if (mode === 'form') {
+  if (mode === 'form' || mode === 'designer') {
     const textarea = document.createElement('textarea');
     const textareaStyle: CSS.Properties = {
       padding: 0,
@@ -128,8 +133,10 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     textarea.addEventListener('blur', () => stopEditing && stopEditing());
     textarea.value = value;
     container.appendChild(textarea);
-    textarea.setSelectionRange(value.length, value.length);
-    textarea.focus();
+    if (mode === 'designer') {
+      textarea.setSelectionRange(value.length, value.length);
+      textarea.focus();
+    }
   } else {
     const div = document.createElement('div');
     const divStyle: CSS.Properties = {