@pdfme/schemas 4.1.0 → 4.1.1-dev.2

package/src/text/uiRender.ts

@@ -1,5 +1,5 @@
 import type * as CSS from 'csstype';
-import { UIRenderProps, Schema, getDefaultFont } from '@pdfme/common';
+import { UIRenderProps, getDefaultFont } from '@pdfme/common';
 import type { TextSchema } from './types';
 import {
   DEFAULT_FONT_SIZE,
@@ -21,28 +21,10 @@ import {
 } from './helper.js';
 import { isEditable } from '../utils.js';
 
-const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
-  switch (verticalAlignmentValue) {
-    case VERTICAL_ALIGN_TOP:
-      return 'flex-start';
-    case VERTICAL_ALIGN_MIDDLE:
-      return 'center';
-    case VERTICAL_ALIGN_BOTTOM:
-      return 'flex-end';
-  }
-  return 'flex-start';
-};
-
-const getBackgroundColor = (value: string, schema: Schema) => {
-  if (!value || !schema.backgroundColor) return 'transparent';
-  return schema.backgroundColor as string;
-};
-
 export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const {
     value,
     schema,
-    rootElement,
     mode,
     onChange,
     stopEditing,
@@ -51,28 +33,120 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     options,
     _cache,
   } = arg;
+  const usePlaceholder = isEditable(mode, schema) && placeholder && !value;
+
+  const textBlock = await buildStyledTextContainer(arg, usePlaceholder ? placeholder : value);
+
+  if (!isEditable(mode, schema)) {
+    // Read-only mode
+    textBlock.innerHTML = value
+        .split('')
+        .map(
+            (l: string, i: number) =>
+                `<span style="letter-spacing:${
+                    String(value).length === i + 1 ? 0 : 'inherit'
+                };">${l}</span>`
+        )
+        .join('');
+    return;
+  }
+
+  makeElementPlainTextContentEditable(textBlock);
+  textBlock.tabIndex = tabIndex || 0;
+  textBlock.innerText = value;
+  textBlock.addEventListener('blur', (e: Event) => {
+    onChange && onChange({ key: 'content', value: (e.target as HTMLDivElement).innerText });
+    stopEditing && stopEditing();
+  });
+
+  if (schema.dynamicFontSize) {
+    let dynamicFontSize: undefined | number = undefined;
+    const font = options?.font || getDefaultFont();
+    const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
+
+    textBlock.addEventListener('keyup', () => {
+      setTimeout(() => {
+        void (async () => {
+          if (!textBlock.textContent) return;
+          dynamicFontSize = await calculateDynamicFontSize({
+            textSchema: schema,
+            font,
+            value: textBlock.textContent,
+            startingFontSize: dynamicFontSize,
+            _cache,
+          });
+          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}px`;
+          textBlock.style.marginBottom = `${newBottomAdj}px`;
+        })();
+      }, 0);
+    });
+  }
+
+  if (usePlaceholder) {
+    textBlock.style.color = PLACEHOLDER_FONT_COLOR;
+    textBlock.addEventListener('focus', () => {
+      if (textBlock.innerText === placeholder) {
+        textBlock.innerText = '';
+        textBlock.style.color = schema.fontColor ?? DEFAULT_FONT_COLOR;
+      }
+    });
+  }
+
+  if (mode === 'designer') {
+    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();
+      if (selection && range) {
+        range.selectNodeContents(textBlock);
+        range.collapse(false); // Collapse range to the end
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    });
+  }
+};
+
+export const buildStyledTextContainer = async (arg: UIRenderProps<TextSchema>, value: string) => {
+  const {
+    schema,
+    rootElement,
+    mode,
+    options,
+    _cache,
+  } = arg;
   const font = options?.font || getDefaultFont();
 
   let dynamicFontSize: undefined | number = undefined;
-  const getCdfArg = (v: string) => ({
-    textSchema: schema,
-    font,
-    value: v,
-    startingFontSize: dynamicFontSize,
-    _cache,
-  });
+
   if (schema.dynamicFontSize && value) {
-    dynamicFontSize = await calculateDynamicFontSize(getCdfArg(value));
+    dynamicFontSize = await calculateDynamicFontSize({
+      textSchema: schema,
+      font,
+      value,
+      startingFontSize: dynamicFontSize,
+      _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(
-    fontKitFont,
-    dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
-    schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
-    schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
+      fontKitFont,
+      dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
+      schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
+      schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
   );
 
   const topAdjustment = topAdj.toString();
@@ -120,100 +194,58 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     backgroundColor: 'transparent',
     textDecoration: textDecorations.join(' '),
   };
+
   const textBlock = document.createElement('div');
+  textBlock.id = 'text-' + schema.id;
   Object.assign(textBlock.style, textBlockStyle);
 
-  if (isEditable(mode, schema)) {
-    if (!isFirefox()) {
-      textBlock.contentEditable = 'plaintext-only';
-    } else {
-      textBlock.contentEditable = 'true';
-      textBlock.addEventListener('keydown', (e: KeyboardEvent) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          document.execCommand('insertLineBreak', false, undefined);
-        }
-      });
-
-      textBlock.addEventListener('paste', (e: ClipboardEvent) => {
-        e.preventDefault();
-        const paste = e.clipboardData?.getData('text');
-        const selection = window.getSelection();
-        if (!selection?.rangeCount) return;
-        selection.deleteFromDocument();
-        selection.getRangeAt(0).insertNode(document.createTextNode(paste || ''));
-        selection.collapseToEnd();
-      });
-    }
-    textBlock.tabIndex = tabIndex || 0;
-    textBlock.innerText = value;
-    textBlock.addEventListener('blur', (e: Event) => {
-      onChange && onChange({ key: 'content', value: (e.target as HTMLDivElement).innerText });
-      stopEditing && stopEditing();
-    });
+  container.appendChild(textBlock);
 
-    if (schema.dynamicFontSize) {
-      textBlock.addEventListener('keyup', () => {
-        setTimeout(() => {
-          void (async () => {
-            if (!textBlock.textContent) return;
-            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}px`;
-            textBlock.style.marginBottom = `${newBottomAdj}px`;
-          })();
-        }, 0);
-      });
-    }
+  return textBlock;
+};
 
-    if (placeholder && !value) {
-      textBlock.innerText = placeholder;
-      textBlock.style.color = PLACEHOLDER_FONT_COLOR;
-      if (schema.dynamicFontSize) {
-        const fontSize = await calculateDynamicFontSize(getCdfArg(placeholder));
-        textBlock.style.fontSize = `${fontSize}pt`;
-      }
-      textBlock.addEventListener('focus', () => {
-        if (textBlock.innerText === placeholder) {
-          textBlock.innerText = '';
-          textBlock.style.color = schema.fontColor ?? DEFAULT_FONT_COLOR;
-        }
-      });
+/**
+ * Firefox doesn't support 'plaintext-only' contentEditable mode, which we want to avoid mark-up.
+ * This function adds a workaround for Firefox to make the contentEditable element behave like 'plaintext-only'.
+ */
+export const makeElementPlainTextContentEditable = (element: HTMLElement) => {
+  if (!isFirefox()) {
+    element.contentEditable = 'plaintext-only';
+    return;
+  }
+
+  element.contentEditable = 'true';
+  element.addEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      document.execCommand('insertLineBreak', false, undefined);
     }
+  });
 
-    container.appendChild(textBlock);
+  element.addEventListener('paste', (e: ClipboardEvent) => {
+    e.preventDefault();
+    const paste = e.clipboardData?.getData('text');
+    const selection = window.getSelection();
+    if (!selection?.rangeCount) return;
+    selection.deleteFromDocument();
+    selection.getRangeAt(0).insertNode(document.createTextNode(paste || ''));
+    selection.collapseToEnd();
+  });
+}
 
-    if (mode === 'designer') {
-      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
-      .split('')
-      .map(
-        (l: string, i: number) =>
-          `<span style="letter-spacing:${
-            String(value).length === i + 1 ? 0 : 'inherit'
-          };">${l}</span>`
-      )
-      .join('');
-
-    container.appendChild(textBlock);
+const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
+  switch (verticalAlignmentValue) {
+    case VERTICAL_ALIGN_TOP:
+      return 'flex-start';
+    case VERTICAL_ALIGN_MIDDLE:
+      return 'center';
+    case VERTICAL_ALIGN_BOTTOM:
+      return 'flex-end';
   }
+  return 'flex-start';
+};
+
+const getBackgroundColor = (value: string, schema: TextSchema) => {
+  if (!value || !schema.backgroundColor) return 'transparent';
+  return schema.backgroundColor as string;
 };