@pdfme/schemas 3.1.5-dev.6 → 3.1.5-dev.8

package/dist/esm/src/text/uiRender.js

@@ -1,8 +1,7 @@
 import { getDefaultFont } from '@pdfme/common';
 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, PLACEHOLDER_FONT_COLOR, } from './constants.js';
 import { calculateDynamicFontSize, getFontKitFont, getBrowserVerticalFontAdjustments, } from './helper.js';
-import { addAlphaToHex } from '../renderUtils.js';
-import { DEFAULT_OPACITY } from '../constants.js';
+import { addAlphaToHex, isEditable } from '../renderUtils.js';
 const mapVerticalAlignToFlex = (verticalAlignmentValue) => {
     switch (verticalAlignmentValue) {
         case VERTICAL_ALIGN_TOP:
@@ -14,16 +13,12 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue) => {
     }
     return 'flex-start';
 };
-const getBackgroundColor = (mode, value, schema, defaultBackgroundColor) => {
-    if ((mode === 'form' || mode === 'designer') && value && schema.backgroundColor) {
+const getBackgroundColor = (value, schema, defaultBackgroundColor) => {
+    if (!value)
+        return 'transparent';
+    if (schema.backgroundColor)
         return schema.backgroundColor;
-    }
-    else if (mode === 'viewer') {
-        return schema.backgroundColor ?? 'transparent';
-    }
-    else {
-        return defaultBackgroundColor;
-    }
+    return defaultBackgroundColor;
 };
 export const uiRender = async (arg) => {
     const { value, schema, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, options, theme, _cache, } = arg;
@@ -49,14 +44,13 @@ export const uiRender = async (arg) => {
     const containerStyle = {
         padding: 0,
         resize: 'none',
-        backgroundColor: getBackgroundColor(mode, value, schema, addAlphaToHex(theme.colorPrimaryBg, 30)),
+        backgroundColor: getBackgroundColor(value, schema, addAlphaToHex(theme.colorPrimaryBg, 30)),
         border: 'none',
         display: 'flex',
         flexDirection: 'column',
         justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
         width: '100%',
         height: '100%',
-        opacity: schema.opacity ?? DEFAULT_OPACITY,
     };
     Object.assign(container.style, containerStyle);
     rootElement.innerHTML = '';
@@ -75,13 +69,13 @@ export const uiRender = async (arg) => {
         resize: 'none',
         border: 'none',
         outline: 'none',
-        marginBottom: bottomAdjustment + 'px',
-        paddingTop: topAdjustment + 'px',
+        marginBottom: `${bottomAdjustment}px`,
+        paddingTop: `${topAdjustment}px`,
         backgroundColor: 'transparent',
     };
     const textBlock = document.createElement('div');
     Object.assign(textBlock.style, textBlockStyle);
-    if (mode === 'form' || mode === 'designer') {
+    if (isEditable(mode)) {
         textBlock.contentEditable = 'plaintext-only';
         textBlock.tabIndex = tabIndex || 0;
         textBlock.innerText = value;
@@ -98,8 +92,8 @@ export const uiRender = async (arg) => {
                         dynamicFontSize = await calculateDynamicFontSize(getCdfArg(textBlock.textContent));
                         textBlock.style.fontSize = `${dynamicFontSize}pt`;
                         const { topAdj: newTopAdj, bottomAdj: newBottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE, schema.lineHeight ?? DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
-                        textBlock.style.paddingTop = newTopAdj.toString() + 'px';
-                        textBlock.style.marginBottom = newBottomAdj.toString() + 'px';
+                        textBlock.style.paddingTop = `${newTopAdj}px`;
+                        textBlock.style.marginBottom = `${newBottomAdj}px`;
                     })();
                 }, 0);
             });

package/dist/esm/src/text/uiRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"uiRender.js","sourceRoot":"","sources":["../../../../src/text/uiRender.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"uiRender.js","sourceRoot":"","sources":["../../../../src/text/uiRender.ts"],"names":[],"mappings":"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"}

package/dist/types/src/index.d.ts

@@ -1,8 +1,9 @@
 import text from './text/index.js';
 import image from './image/index.js';
 import barcodes from './barcodes/index.js';
+import line from './line/index.js';
 import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
 declare const builtInPlugins: {
     Text: import("@pdfme/common").Plugin<import("./text/types.js").TextSchema>;
 };
-export { text, image, barcodes, builtInPlugins, convertForPdfLayoutProps, rotatePoint };
+export { text, image, barcodes, line, builtInPlugins, convertForPdfLayoutProps, rotatePoint };

package/dist/types/src/line/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_LINE_COLOR = "#000000";

package/dist/types/src/line/index.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from '@pdfme/common';
+import type { LineSchema } from './types.js';
+declare const schema: Plugin<LineSchema>;
+export default schema;

package/dist/types/src/line/pdfRender.d.ts

@@ -0,0 +1,3 @@
+import type { PDFRenderProps } from '@pdfme/common';
+import type { LineSchema } from './types';
+export declare const pdfRender: (arg: PDFRenderProps<LineSchema>) => void;

package/dist/types/src/line/propPanel.d.ts

@@ -0,0 +1,3 @@
+import { PropPanel } from '@pdfme/common';
+import type { LineSchema } from './types';
+export declare const propPanel: PropPanel<LineSchema>;

package/dist/types/src/line/types.d.ts

@@ -0,0 +1,4 @@
+import { Schema } from '@pdfme/common';
+export interface LineSchema extends Schema {
+    color: string;
+}

package/dist/types/src/line/uiRender.d.ts

@@ -0,0 +1,3 @@
+import type { LineSchema } from './types';
+import { UIRenderProps } from '@pdfme/common';
+export declare const uiRender: (arg: UIRenderProps<LineSchema>) => void;

package/dist/types/src/renderUtils.d.ts

@@ -1,4 +1,4 @@
-import { Schema } from '@pdfme/common';
+import { Schema, Mode } from '@pdfme/common';
 export declare const convertForPdfLayoutProps: ({ schema, pageHeight, applyRotateTranslate, }: {
     schema: Schema;
     pageHeight: number;
@@ -24,3 +24,5 @@ export declare const rotatePoint: (point: {
     y: number;
 };
 export declare const addAlphaToHex: (hex: string, alphaPercentage: number) => string;
+export declare const isEditable: (mode: Mode) => boolean;
+export declare const hex2RgbColor: (hexString: string | undefined) => import("@pdfme/pdf-lib").RGB | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "3.1.5-dev.6",
+  "version": "3.1.5-dev.8",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/barcodes/propPanel.ts

@@ -157,35 +157,33 @@ export const getPropPanelByBarcodeType = (barcodeType: string): PropPanel<Barcod
   if (!defaults) throw new Error(`[@pdfme/schemas] No default for barcode type ${barcodeType}`);
 
   return {
-    schema: ({ i18n }) => {
-      return {
-        barColor: {
-          title: i18n('schemas.barcodes.barColor'),
-          type: 'string',
-          widget: 'color',
-          rules: [
-            {
-              pattern: HEX_COLOR_PATTERN,
-              message: 'Please enter a valid hex color code.',
-            },
-          ],
-        },
-        backgroundColor: {
-          title: i18n('schemas.bgColor'),
-          type: 'string',
-          widget: 'color',
-          rules: [
-            {
-              pattern: HEX_COLOR_PATTERN,
-              message: 'Please enter a valid hex color code.',
-            },
-          ],
-        },
-        ...(barcodeHasText
-          ? { textColor: { title: i18n('schemas.textColor'), type: 'string', widget: 'color' } }
-          : {}),
-      };
-    },
+    schema: ({ i18n }) => ({
+      barColor: {
+        title: i18n('schemas.barcodes.barColor'),
+        type: 'string',
+        widget: 'color',
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('hexColorPrompt'),
+          },
+        ],
+      },
+      backgroundColor: {
+        title: i18n('schemas.bgColor'),
+        type: 'string',
+        widget: 'color',
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('hexColorPrompt'),
+          },
+        ],
+      },
+      ...(barcodeHasText
+        ? { textColor: { title: i18n('schemas.textColor'), type: 'string', widget: 'color' } }
+        : {}),
+    }),
     ...defaults,
   };
 };

package/src/barcodes/uiRender.ts

@@ -2,7 +2,7 @@ import type * as CSS from 'csstype';
 import { UIRenderProps } from '@pdfme/common';
 import type { BarcodeSchema } from './types';
 import { validateBarcodeInput, createBarCode } from './helper.js';
-import { addAlphaToHex } from '../renderUtils.js';
+import { addAlphaToHex, isEditable } from '../renderUtils.js';
 
 const fullSize = { width: '100%', height: '100%' };
 
@@ -71,11 +71,10 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
     alignItems: 'center',
     justifyContent: 'center',
     fontFamily: "'Open Sans', sans-serif",
-    opacity: schema.opacity,
   };
   Object.assign(container.style, containerStyle);
   rootElement.appendChild(container);
-  const editable = mode === 'form' || mode === 'designer';
+  const editable = isEditable(mode);
   if (editable) {
     const input = document.createElement('input');
     const inputStyle: CSS.Properties = {
@@ -102,10 +101,8 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
       stopEditing && stopEditing();
     });
     container.appendChild(input);
-    if (mode === 'designer') {
-      input.setSelectionRange(value.length, value.length);
-      input.focus();
-    }
+    input.setSelectionRange(value.length, value.length);
+    input.focus();
   }
 
   if (!value) return;

package/src/image/pdfRender.ts

@@ -6,6 +6,7 @@ const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
 
 export const pdfRender = async (arg: PDFRenderProps<ImageSchema>) => {
   const { value, schema, pdfDoc, page, _cache } = arg;
+  if (!value || !value.startsWith('data:image/')) return;
 
   const inputImageCacheKey = getCacheKey(schema, value);
   let image = _cache.get(inputImageCacheKey);

package/src/image/uiRender.ts

@@ -2,7 +2,7 @@ import type { ChangeEvent } from 'react';
 import type * as CSS from 'csstype';
 import type { ImageSchema } from './types';
 import { UIRenderProps, ZOOM } from '@pdfme/common';
-import { addAlphaToHex } from '../renderUtils.js';
+import { addAlphaToHex, isEditable } from '../renderUtils.js';
 
 const fullSize = { width: '100%', height: '100%' };
 
@@ -37,16 +37,16 @@ const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer>
 export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema, theme } =
     arg;
-  const editable = mode === 'form' || mode === 'designer';
+  const editable = isEditable(mode);
 
   const size = { width: schema.width * ZOOM, height: schema.height * ZOOM };
 
   const container = document.createElement('div');
+  const backgroundStyle = placeholder ? `url(${placeholder})` : 'none';
   const containerStyle: CSS.Properties = {
     ...fullSize,
-    backgroundImage: value ? 'none' : `url(${placeholder})`,
+    backgroundImage: value ? 'none' : backgroundStyle,
     backgroundSize: `${size.width}px ${size.height}px`,
-    opacity: schema.opacity,
   };
   Object.assign(container.style, containerStyle);
   container.addEventListener('click', (e) => {

package/src/index.ts

@@ -1,8 +1,9 @@
 import text from './text/index.js';
 import image from './image/index.js';
 import barcodes from './barcodes/index.js';
+import line from './line/index.js';
 import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
 
 const builtInPlugins = { Text: text };
 
-export { text, image, barcodes, builtInPlugins, convertForPdfLayoutProps, rotatePoint };
+export { text, image, barcodes, line, builtInPlugins, convertForPdfLayoutProps, rotatePoint };

package/src/line/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LINE_COLOR = '#000000';

package/src/line/index.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from '@pdfme/common';
+import { pdfRender } from './pdfRender.js';
+import { propPanel } from './propPanel.js';
+import { uiRender } from './uiRender.js';
+import type { LineSchema } from './types.js';
+
+const schema: Plugin<LineSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
+export default schema;

package/src/line/pdfRender.ts

@@ -0,0 +1,24 @@
+import type { PDFRenderProps } from '@pdfme/common';
+import type { LineSchema } from './types';
+import { rotatePoint, convertForPdfLayoutProps, hex2RgbColor } from '../renderUtils.js';
+import { DEFAULT_LINE_COLOR } from './constants.js';
+
+export const pdfRender = (arg: PDFRenderProps<LineSchema>) => {
+  const { page, schema } = arg;
+  const pageHeight = page.getHeight();
+  const {
+    width,
+    height,
+    rotate,
+    position: { x, y },
+    opacity,
+  } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
+  const pivot = { x: x + width / 2, y: y + height / 2 };
+  page.drawLine({
+    start: rotatePoint({ x, y: y + height / 2 }, pivot, rotate.angle),
+    end: rotatePoint({ x: x + width, y: y + height / 2 }, pivot, rotate.angle),
+    thickness: height,
+    color: hex2RgbColor(schema.color ?? DEFAULT_LINE_COLOR),
+    opacity: opacity,
+  });
+};

package/src/line/propPanel.ts

@@ -0,0 +1,34 @@
+import { PropPanel } from '@pdfme/common';
+import type { LineSchema } from './types';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { DEFAULT_LINE_COLOR } from './constants.js';
+
+export const propPanel: PropPanel<LineSchema> = {
+  schema: ({ i18n }) => {
+    return {
+      color: {
+        title: i18n('schemas.line.color'),
+        type: 'string',
+        widget: 'color',
+        required: true,
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('hexColorPrompt'),
+          },
+        ],
+      },
+    };
+  },
+  defaultValue: '',
+  defaultSchema: {
+    type: 'line',
+    position: { x: 0, y: 0 },
+    width: 50,
+    height: 1,
+    rotate: 0,
+    opacity: 1,
+    readOnly: true,
+    color: DEFAULT_LINE_COLOR,
+  },
+};

package/src/line/types.ts

@@ -0,0 +1,5 @@
+import { Schema } from '@pdfme/common';
+
+export interface LineSchema extends Schema {
+  color: string;
+}

package/src/line/uiRender.ts

@@ -0,0 +1,12 @@
+import type { LineSchema } from './types';
+import { UIRenderProps } from '@pdfme/common';
+import { DEFAULT_LINE_COLOR } from './constants.js';
+
+export const uiRender = (arg: UIRenderProps<LineSchema>) => {
+  const { schema, rootElement } = arg;
+  const div = document.createElement('div');
+  div.style.backgroundColor = schema.color ?? DEFAULT_LINE_COLOR;
+  div.style.width = '100%';
+  div.style.height = '100%';
+  rootElement.appendChild(div);
+};

package/src/renderUtils.ts

@@ -1,5 +1,5 @@
-import { degrees, degreesToRadians } from '@pdfme/pdf-lib';
-import { Schema, mm2pt } from '@pdfme/common';
+import { degrees, degreesToRadians, rgb } from '@pdfme/pdf-lib';
+import { Schema, mm2pt, Mode, isHexValid } from '@pdfme/common';
 
 export const convertForPdfLayoutProps = ({
   schema,
@@ -71,3 +71,35 @@ export const addAlphaToHex = (hex: string, alphaPercentage: number) => {
   if (alphaHex.length === 1) alphaHex = '0' + alphaHex;
   return hex + alphaHex;
 };
+
+export const isEditable = (mode: Mode) => mode === 'form' || mode === 'designer';
+
+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 isValid = isHexValid(hexString);
+
+    if (!isValid) {
+      throw new Error(`Invalid hex color value ${hexString}`);
+    }
+
+    const [r, g, b] = hex2rgb(hexString);
+
+    return rgb(r / 255, g / 255, b / 255);
+  }
+
+  return undefined;
+};

package/src/text/index.ts

@@ -5,5 +5,4 @@ import { uiRender } from './uiRender.js';
 import type { TextSchema } from './types';
 
 const schema: Plugin<TextSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
-
 export default schema;

package/src/text/pdfRender.ts

@@ -1,12 +1,5 @@
-import { PDFFont, PDFDocument, rgb } from '@pdfme/pdf-lib';
-import {
-  PDFRenderProps,
-  Font,
-  getDefaultFont,
-  getFallbackFontName,
-  mm2pt,
-  isHexValid,
-} from '@pdfme/common';
+import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
+import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName, mm2pt } from '@pdfme/common';
 import type { TextSchema, FontWidthCalcValues } from './types';
 import {
   VERTICAL_ALIGN_TOP,
@@ -27,37 +20,7 @@ import {
   getSplittedLines,
   widthOfTextAtSize,
 } from './helper.js';
-import { convertForPdfLayoutProps, rotatePoint } from '../renderUtils.js';
-
-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 isValid = isHexValid(hexString);
-
-    if (!isValid) {
-      throw new Error(`Invalid hex color value ${hexString}`);
-    }
-
-    const [r, g, b] = hex2rgb(hexString);
-
-    return rgb(r / 255, g / 255, b / 255);
-  }
-
-  return undefined;
-};
+import { convertForPdfLayoutProps, rotatePoint, hex2RgbColor } from '../renderUtils.js';
 
 const embedAndGetFontObj = async (arg: {
   pdfDoc: PDFDocument;
@@ -118,6 +81,7 @@ const getFontProp = async ({
 
 export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const { value, pdfDoc, pdfLib, page, options, schema, _cache } = arg;
+  if (!value) return;
 
   const { font = getDefaultFont() } = options;
 
@@ -132,7 +96,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const fontName = (
     schema.fontName ? schema.fontName : getFallbackFontName(font)
   ) as keyof typeof pdfFontObj;
-  const pdfFontValue = pdfFontObj[fontName];
+  const pdfFontValue = pdfFontObj && pdfFontObj[fontName];
 
   const pageHeight = page.getHeight();
   const {

package/src/text/propPanel.ts

@@ -153,7 +153,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: 'Please enter a valid hex color code.',
+            message: i18n('hexColorPrompt'),
           },
         ],
       },
@@ -164,7 +164,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: 'Please enter a valid hex color code.',
+            message: i18n('hexColorPrompt'),
           },
         ],
       },

package/src/text/uiRender.ts

@@ -18,8 +18,7 @@ import {
   getFontKitFont,
   getBrowserVerticalFontAdjustments,
 } from './helper.js';
-import { addAlphaToHex } from '../renderUtils.js';
-import { DEFAULT_OPACITY } from '../constants.js';
+import { addAlphaToHex, isEditable } from '../renderUtils.js';
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {
@@ -33,19 +32,10 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   return 'flex-start';
 };
 
-const getBackgroundColor = (
-  mode: 'form' | 'viewer' | 'designer',
-  value: string,
-  schema: Schema,
-  defaultBackgroundColor: string
-) => {
-  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 defaultBackgroundColor;
-  }
+const getBackgroundColor = (value: string, schema: Schema, defaultBackgroundColor: string) => {
+  if (!value) return 'transparent';
+  if (schema.backgroundColor) return schema.backgroundColor as string;
+  return defaultBackgroundColor;
 };
 
 export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
@@ -94,19 +84,13 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const containerStyle: CSS.Properties = {
     padding: 0,
     resize: 'none',
-    backgroundColor: getBackgroundColor(
-      mode,
-      value,
-      schema,
-      addAlphaToHex(theme.colorPrimaryBg, 30)
-    ),
+    backgroundColor: getBackgroundColor(value, schema, addAlphaToHex(theme.colorPrimaryBg, 30)),
     border: 'none',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
     width: '100%',
     height: '100%',
-    opacity: schema.opacity ?? DEFAULT_OPACITY,
   };
   Object.assign(container.style, containerStyle);
   rootElement.innerHTML = '';
@@ -126,14 +110,14 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     resize: 'none',
     border: 'none',
     outline: 'none',
-    marginBottom: bottomAdjustment + 'px',
-    paddingTop: topAdjustment + 'px',
+    marginBottom: `${bottomAdjustment}px`,
+    paddingTop: `${topAdjustment}px`,
     backgroundColor: 'transparent',
   };
   const textBlock = document.createElement('div');
   Object.assign(textBlock.style, textBlockStyle);
 
-  if (mode === 'form' || mode === 'designer') {
+  if (isEditable(mode)) {
     textBlock.contentEditable = 'plaintext-only';
     textBlock.tabIndex = tabIndex || 0;
     textBlock.innerText = value;
@@ -157,8 +141,8 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
                 schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
                 schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
               );
-            textBlock.style.paddingTop = newTopAdj.toString() + 'px';
-            textBlock.style.marginBottom = newBottomAdj.toString() + 'px';
+            textBlock.style.paddingTop = `${newTopAdj}px`;
+            textBlock.style.marginBottom = `${newBottomAdj}px`;
           })();
         }, 0);
       });