@pdfme/schemas 4.1.0 → 4.1.1-dev.2

package/src/multiVariableText/helper.ts

@@ -0,0 +1,18 @@
+export const substituteVariables = (text: string, variablesIn: string | Record<string, string>): string => {
+  if (!text || !variablesIn) {
+    return text;
+  }
+
+  let substitutedText = text;
+
+  const variables: Record<string, string> = (typeof variablesIn === "string") ? JSON.parse(variablesIn) || {} : variablesIn;
+
+  Object.keys(variables).forEach((variableName) => {
+    // handle special characters in variable name
+    const variableForRegex = variableName.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+    const regex = new RegExp('{' + variableForRegex + '}', 'g');
+    substitutedText = substitutedText.replace(regex, variables[variableName]);
+  });
+
+  return substitutedText;
+};

package/src/multiVariableText/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 { MultiVariableTextSchema } from './types';
+
+const schema: Plugin<MultiVariableTextSchema> = { pdf: pdfRender, ui: uiRender, propPanel, uninterruptedEditMode: true };
+export default schema;

package/src/multiVariableText/pdfRender.ts

@@ -0,0 +1,16 @@
+import { PDFRenderProps } from '@pdfme/common';
+import { MultiVariableTextSchema } from './types';
+import { pdfRender as parentPdfRender } from '../text/pdfRender';
+import { substituteVariables } from './helper';
+
+export const pdfRender = async (arg: PDFRenderProps<MultiVariableTextSchema>) => {
+  const { value, schema, ...rest } = arg;
+
+  const renderArgs = {
+    value:  substituteVariables(schema.text || '', value),
+    schema,
+    ...rest,
+  };
+
+  await parentPdfRender(renderArgs);
+};

package/src/multiVariableText/propPanel.ts

@@ -0,0 +1,139 @@
+import { propPanel as parentPropPanel } from '../text/propPanel';
+import { PropPanel, PropPanelWidgetProps } from '@pdfme/common';
+import { MultiVariableTextSchema } from './types';
+
+const mapDynamicVariables = (props: PropPanelWidgetProps) => {
+  const { rootElement, changeSchemas, activeSchema, i18n, options } = props;
+
+  const mvtSchema = (activeSchema as any);
+  const text = mvtSchema.text || '';
+  const variables = JSON.parse(mvtSchema.content) || {};
+  const variablesChanged = updateVariablesFromText(text, variables);
+  const varNames = Object.keys(variables);
+
+  if (variablesChanged) {
+    changeSchemas([
+      { key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id },
+      { key: 'variables', value: varNames, schemaId: activeSchema.id }
+    ]);
+  }
+
+  const placeholderRowEl = document.getElementById('placeholder-dynamic-var')?.closest('.ant-form-item') as HTMLElement;
+  if (!placeholderRowEl) {
+    throw new Error('Failed to find Ant form placeholder row to create dynamic variables inputs.');
+  }
+  placeholderRowEl.style.display = 'none';
+
+  // The wrapping form element has a display:flex which limits the width of the form fields, removing.
+  (rootElement.parentElement as HTMLElement).style.display = 'block';
+
+  if (varNames.length > 0) {
+    for (let variableName of varNames) {
+      const varRow = placeholderRowEl.cloneNode(true) as HTMLElement;
+
+      const textarea = varRow.querySelector('textarea') as HTMLTextAreaElement;
+      textarea.id = 'dynamic-var-' + variableName;
+      textarea.value = variables[variableName];
+      textarea.addEventListener('change', (e: Event) => {
+        variables[variableName] = (e.target as HTMLTextAreaElement).value;
+        changeSchemas([{ key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id }]);
+      });
+
+      const label = varRow.querySelector('label') as HTMLLabelElement
+      label.innerText = variableName;
+
+      varRow.style.display = 'block';
+      rootElement.appendChild(varRow);
+    }
+  } else {
+    const para = document.createElement('p');
+    para.innerHTML = i18n('schemas.mvt.typingInstructions')
+        + ` <code style="color:${options?.theme?.token?.colorPrimary || "#168fe3"}; font-weight:bold;">{`
+        + i18n('schemas.mvt.sampleField')
+        + '}</code>';
+    rootElement.appendChild(para);
+  }
+};
+
+export const propPanel: PropPanel<MultiVariableTextSchema> = {
+  schema: (propPanelProps: Omit<PropPanelWidgetProps, 'rootElement'>) => {
+    if (typeof parentPropPanel.schema !== 'function') {
+      throw Error('Oops, is text schema no longer a function?');
+    }
+    return {
+      ...parentPropPanel.schema(propPanelProps),
+      '-------': { type: 'void', widget: 'Divider' },
+      dynamicVarContainer: {
+        title: propPanelProps.i18n('schemas.mvt.variablesSampleData'),
+        type: 'string',
+        widget: 'Card',
+        span: 24,
+        properties: {
+          dynamicVariables: {
+            type: 'object',
+            widget: 'mapDynamicVariables',
+            bind: false,
+            span: 24
+          },
+          placeholderDynamicVar: {
+            title: 'Placeholder Dynamic Variable',
+            type: 'string',
+            format: 'textarea',
+            props: {
+              id: 'placeholder-dynamic-var',
+              autoSize: {
+                minRows: 2,
+                maxRows: 5,
+              },
+            },
+            span: 24,
+          },
+        }
+      },
+
+    };
+  },
+  widgets: { ...parentPropPanel.widgets, mapDynamicVariables },
+  defaultSchema: {
+    ...parentPropPanel.defaultSchema,
+    type: 'multiVariableText',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
+    text: 'Type something...',
+    content: '{}',
+    variables: [],
+  },
+};
+
+
+const updateVariablesFromText = (text: string, variables: any): boolean => {
+  const regex = /\{([^{}]+)}/g;
+  const matches = text.match(regex);
+  let changed = false;
+
+  if (matches) {
+    // Add any new variables
+    for (const match of matches) {
+      const variableName = match.replace('{', '').replace('}', '');
+      if (!variables[variableName]) {
+        // NOTE: We upper case the variable name as the default value
+        variables[variableName] = variableName.toUpperCase();
+        changed = true;
+      }
+    }
+    // Remove any that no longer exist
+    Object.keys(variables).forEach((variableName) => {
+      if (!matches.includes('{' + variableName + '}')) {
+        delete variables[variableName];
+        changed = true;
+      }
+    });
+  } else {
+    // No matches at all, so clear all variables
+    Object.keys(variables).forEach((variableName) => {
+      delete variables[variableName];
+      changed = true;
+    });
+  }
+
+  return changed;
+}

package/src/multiVariableText/types.ts

@@ -0,0 +1,6 @@
+import type { TextSchema } from '../text/types';
+
+export interface MultiVariableTextSchema extends TextSchema {
+  text: string;
+  variables: string[];
+}

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).innerText;
+        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/tables/tableHelper.ts

@@ -270,7 +270,7 @@ function parseInput(schema: TableSchema, body: string[][]): TableInput {
 
 export function createSingleTable(body: string[][], args: CreateTableArgs) {
   const { options, _cache, basePdf } = args;
-  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Blank PDF is not supported');
+  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Custom PDF is not supported');
 
   const input = parseInput(args.schema as TableSchema, body);
 
@@ -286,7 +286,7 @@ export function createSingleTable(body: string[][], args: CreateTableArgs) {
 export async function createMultiTables(body: string[][], args: CreateTableArgs): Promise<Table[]> {
   const { basePdf, schema } = args;
 
-  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Blank PDF is not supported');
+  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Custom PDF is not supported');
   const pageHeight = basePdf.height;
   const paddingBottom = basePdf.padding[2];
   const paddingTop = basePdf.padding[0];

package/src/text/extraFormatter.ts

@@ -72,6 +72,6 @@ export function getExtraFormatterSchema(
     title: i18n('schemas.text.format'),
     widget: 'ButtonGroup',
     buttons,
-    span: 16,
+    span: 17,
   };
 }

package/src/text/propPanel.ts

@@ -83,7 +83,7 @@ export const propPanel: PropPanel<TextSchema> = {
         type: 'number',
         widget: 'inputNumber',
         props: { step: 0.1, min: 0 },
-        span: 8,
+        span: 7,
       },
       useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 },
       dynamicFontSize: {