@pdfme/schemas 4.1.1 → 4.2.1-dev.1

package/src/multiVariableText/uiRender.ts

@@ -0,0 +1,161 @@
+import { UIRenderProps } from '@pdfme/common';
+import { MultiVariableTextSchema } from './types';
+import {
+  uiRender as parentUiRender,
+  buildStyledTextContainer,
+  makeElementPlainTextContentEditable
+} from '../text/uiRender';
+import { isEditable } from '../utils';
+import { substituteVariables } from './helper';
+
+export const uiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
+  const { value, schema, rootElement, mode, onChange, ...rest } = arg;
+
+  let text = schema.text;
+  let numVariables = schema.variables.length;
+
+  if (mode === 'form' && numVariables > 0) {
+    await formUiRender(arg);
+    return;
+  }
+
+  await parentUiRender({
+    value: isEditable(mode, schema) ? text : substituteVariables(text, value),
+    schema,
+    mode: mode == 'form' ? 'viewer' : mode, // if no variables for form it's just a viewer
+    rootElement,
+    onChange: (arg: { key: string; value: any; } | { key: string; value: any; }[]) => {
+      if (!Array.isArray(arg)) {
+        onChange && onChange({key: 'text', value: arg.value});
+      } else {
+        throw new Error('onChange is not an array, the parent text plugin has changed...');
+      }
+    },
+    ...rest,
+  });
+
+  const textBlock = rootElement.querySelector('#text-' + schema.id) as HTMLDivElement;
+  if (!textBlock) {
+    throw new Error('Text block not found. Ensure the text block has an id of "text-" + schema.id');
+  }
+
+  if (mode === 'designer') {
+    textBlock.addEventListener('keyup', (event: KeyboardEvent) => {
+      text = textBlock.textContent || '';
+      if (keyPressShouldBeChecked(event)) {
+        const newNumVariables = countUniqueVariableNames(text);
+        if (numVariables !== newNumVariables) {
+          // If variables were modified during this keypress, we trigger a change
+          if (onChange) {
+            onChange({key: 'text', value: text});
+          }
+          numVariables = newNumVariables;
+        }
+      }
+    });
+  }
+};
+
+const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
+  const {
+    value,
+    schema,
+    rootElement,
+    onChange,
+    stopEditing,
+    theme,
+  } = arg;
+  const rawText = schema.text;
+
+  if (rootElement.parentElement) {
+    // remove the outline for the whole schema, we'll apply outlines on each individual variable field instead
+    rootElement.parentElement.style.outline = '';
+  }
+
+  const variables: Record<string, string> = JSON.parse(value) || {}
+  const variableIndices = getVariableIndices(rawText);
+  const substitutedText = substituteVariables(rawText, variables);
+
+  const textBlock = await buildStyledTextContainer(arg, substitutedText);
+
+  // Construct content-editable spans for each variable within the string
+  let inVarString = false;
+
+  for (let i = 0; i < rawText.length; i++) {
+    if (variableIndices[i]) {
+      inVarString = true;
+      let span = document.createElement('span');
+      span.style.outline = `${theme.colorPrimary} dashed 1px`;
+      makeElementPlainTextContentEditable(span)
+      span.textContent = variables[variableIndices[i]];
+      span.addEventListener('blur', (e: Event) => {
+        const newValue = (e.target as HTMLSpanElement).textContent || '';
+        if (newValue !== variables[variableIndices[i]]) {
+          variables[variableIndices[i]] = newValue;
+          onChange && onChange({ key: 'content', value: JSON.stringify(variables) });
+          stopEditing && stopEditing();
+        }
+      });
+      textBlock.appendChild(span);
+    } else if (inVarString) {
+      if (rawText[i] === '}') {
+        inVarString = false;
+      }
+    } else {
+      let span = document.createElement('span');
+      span.style.letterSpacing = rawText.length === i + 1 ? '0' : 'inherit';
+      span.textContent = rawText[i];
+      textBlock.appendChild(span);
+    }
+  }
+}
+
+const getVariableIndices = (content: string) => {
+  const regex = /\{([^}]+)}/g;
+  const indices = [];
+  let match;
+
+  while ((match = regex.exec(content)) !== null) {
+    indices[match.index] = match[1];
+  }
+
+  return indices;
+};
+
+const countUniqueVariableNames = (content: string) => {
+  const regex = /\{([^}]+)}/g;
+  const uniqueMatchesSet = new Set();
+  let match;
+
+  while ((match = regex.exec(content)) !== null) {
+    uniqueMatchesSet.add(match[1]);
+  }
+
+  return uniqueMatchesSet.size;
+};
+
+/**
+ * An optimisation to try to minimise jank while typing.
+ * Only check whether variables were modified based on certain key presses.
+ * Regex would otherwise be performed on every key press (which isn't terrible, but this code helps).
+ */
+const keyPressShouldBeChecked = (event: KeyboardEvent) => {
+  if (event.key == "ArrowUp" || event.key == "ArrowDown" || event.key == "ArrowLeft" || event.key == "ArrowRight") {
+    return false;
+  }
+
+  const selection = window.getSelection();
+  const contenteditable = event.target as HTMLDivElement;
+
+  const isCursorAtEnd = selection?.focusOffset === contenteditable?.textContent?.length;
+  if (isCursorAtEnd) {
+    return event.key === '}' || event.key === 'Backspace' || event.key === 'Delete';
+  }
+
+  const isCursorAtStart = selection?.anchorOffset === 0;
+  if (isCursorAtStart) {
+    return event.key === '{' || event.key === 'Backspace' || event.key === 'Delete';
+  }
+
+  return true;
+}

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).textContent });
+    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;
 };