@pdfme/schemas 6.0.3 → 6.0.5-dev.1

package/src/multiVariableText/index.ts

@@ -1,16 +0,0 @@
-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.js';
-import { Type } from 'lucide';
-import { createSvgStr } from '../utils.js';
-
-const schema: Plugin<MultiVariableTextSchema> = {
-  pdf: pdfRender,
-  ui: uiRender,
-  propPanel,
-  icon: createSvgStr(Type),
-  uninterruptedEditMode: true,
-};
-export default schema;

package/src/multiVariableText/pdfRender.ts

@@ -1,21 +0,0 @@
-import { PDFRenderProps } from '@pdfme/common';
-import { MultiVariableTextSchema } from './types.js';
-import { pdfRender as parentPdfRender } from '../text/pdfRender.js';
-import { substituteVariables, validateVariables } from './helper.js';
-
-export const pdfRender = async (arg: PDFRenderProps<MultiVariableTextSchema>) => {
-  const { value, schema, ...rest } = arg;
-
-  if (!validateVariables(value, schema)) {
-    // Don't render if a required variable is missing
-    return;
-  }
-
-  const renderArgs = {
-    value: substituteVariables(schema.text || '', value),
-    schema,
-    ...rest,
-  };
-
-  await parentPdfRender(renderArgs);
-};

package/src/multiVariableText/propPanel.ts

@@ -1,169 +0,0 @@
-import { propPanel as parentPropPanel } from '../text/propPanel.js';
-import { PropPanel, PropPanelWidgetProps } from '@pdfme/common';
-import { MultiVariableTextSchema } from './types.js';
-import { getVariableNames } from './variables.js';
-
-const mapDynamicVariables = (props: PropPanelWidgetProps) => {
-  const { rootElement, changeSchemas, activeSchema, i18n, options } = props;
-
-  const mvtSchema = activeSchema as unknown as MultiVariableTextSchema;
-  const text = mvtSchema.text || '';
-  let variables: Record<string, string> = {};
-  try {
-    const parsed = JSON.parse(mvtSchema.content || '{}');
-    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-      variables = parsed as Record<string, string>;
-    }
-  } catch {
-    // content is not valid JSON (e.g. a plain string value) — start fresh
-  }
-  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 },
-      { key: 'readOnly', value: varNames.length === 0, 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) => {
-        if (variableName in variables) {
-          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');
-    // Extract color value to avoid unsafe property access
-    const colorValue = options?.theme?.token?.colorPrimary || '#168fe3';
-    const isValidColor =
-      /^#[0-9A-F]{6}$/i.test(colorValue) ||
-      /^(rgb|hsl)a?\(\s*([+-]?\d+%?\s*,\s*){2,3}[+-]?\d+%?\s*\)$/i.test(colorValue);
-    const safeColorValue = isValidColor ? colorValue : '#168fe3';
-
-    const typingInstructions = i18n('schemas.mvt.typingInstructions');
-    const sampleField = i18n('schemas.mvt.sampleField');
-    para.appendChild(document.createTextNode(typingInstructions + ' '));
-    const codeEl = document.createElement('code');
-    codeEl.style.color = safeColorValue;
-    codeEl.style.fontWeight = 'bold';
-    codeEl.textContent = `{${sampleField}}`;
-    para.appendChild(codeEl);
-    rootElement.appendChild(para);
-  }
-};
-
-export const propPanel: PropPanel<MultiVariableTextSchema> = {
-  schema: (propPanelProps: Omit<PropPanelWidgetProps, 'rootElement'>) => {
-    if (typeof parentPropPanel.schema !== 'function') {
-      throw new Error('Oops, is text schema no longer a function?');
-    }
-    // Safely call schema function with proper type handling
-    const parentSchema =
-      typeof parentPropPanel.schema === 'function' ? parentPropPanel.schema(propPanelProps) : {};
-    return {
-      ...parentSchema,
-      '-------': { type: 'void', widget: 'Divider' },
-      dynamicVarContainer: {
-        title: 'Variables Sample Data',
-        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,
-    readOnly: false,
-    type: 'multiVariableText',
-    text: 'Add text here using {} for variables ',
-    width: 50,
-    height: 15,
-    content: '{}',
-    variables: [],
-  },
-};
-
-const updateVariablesFromText = (text: string, variables: Record<string, string>): boolean => {
-  const matches = getVariableNames(text);
-  let changed = false;
-
-  if (matches.length > 0) {
-    const uniqueMatches = new Set(matches);
-
-    // Add any new variables
-    for (const variableName of uniqueMatches) {
-      if (!(variableName in variables)) {
-        // 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 (!uniqueMatches.has(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/uiRender.ts

@@ -1,157 +0,0 @@
-import { getDefaultFont, UIRenderProps } from '@pdfme/common';
-import { MultiVariableTextSchema } from './types.js';
-import {
-  uiRender as parentUiRender,
-  buildStyledTextContainer,
-  makeElementPlainTextContentEditable,
-} from '../text/uiRender.js';
-import { isEditable } from '../utils.js';
-import { getFontKitFont } from '../text/helper.js';
-import { substituteVariables } from './helper.js';
-import { countUniqueVariableNames, getVariableIndices } from './variables.js';
-
-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: unknown } | { key: string; value: unknown }[]) => {
-      if (!Array.isArray(arg)) {
-        if (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-' + String(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, _cache, options } = 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 = '';
-  }
-
-  let variables: Record<string, string> = {};
-  if (value) {
-    try {
-      const parsed = JSON.parse(value);
-      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-        variables = parsed as Record<string, string>;
-      }
-    } catch {
-      // value is not valid JSON — use empty variables
-    }
-  }
-  const variableIndices = getVariableIndices(rawText);
-  const substitutedText = substituteVariables(rawText, variables);
-  const font = options?.font || getDefaultFont();
-  const fontKitFont = await getFontKitFont(
-    schema.fontName,
-    font,
-    _cache as Map<string, import('fontkit').Font>,
-  );
-
-  const textBlock = buildStyledTextContainer(arg, fontKitFont, substitutedText);
-
-  // Construct content-editable spans for each variable within the string
-  let inVarString = false;
-
-  for (let i = 0; i < rawText.length; i++) {
-    const variableName = variableIndices.get(i);
-
-    if (variableName) {
-      inVarString = true;
-      let span = document.createElement('span');
-      span.style.outline = `${theme.colorPrimary} dashed 1px`;
-      makeElementPlainTextContentEditable(span);
-      span.textContent = variables[variableName];
-      span.addEventListener('blur', (e: Event) => {
-        const newValue = (e.target as HTMLSpanElement).textContent || '';
-        if (newValue !== variables[variableName]) {
-          variables[variableName] = newValue;
-          if (onChange) onChange({ key: 'content', value: JSON.stringify(variables) });
-          if (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);
-    }
-  }
-};
-
-/**
- * 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/multiVariableText/variables.ts

@@ -1,63 +0,0 @@
-export type VariableMatch = {
-  name: string;
-  startIndex: number;
-  endIndex: number;
-};
-
-export type VariableIndices = Map<number, string>;
-
-export const visitVariables = (
-  content: string,
-  visitor: (match: VariableMatch) => void,
-): void => {
-  let startIndex = -1;
-
-  for (let i = 0; i < content.length; i++) {
-    const char = content[i];
-
-    if (char === '{') {
-      // Restart from the latest opener so malformed input behaves like /{([^{}]+)}/g
-      // without requiring backtracking.
-      startIndex = i;
-      continue;
-    }
-
-    if (char === '}' && startIndex !== -1) {
-      const name = content.slice(startIndex + 1, i);
-      if (name.length > 0) {
-        visitor({ name, startIndex, endIndex: i });
-      }
-      startIndex = -1;
-    }
-  }
-};
-
-export const getVariableIndices = (content: string): VariableIndices => {
-  const indices: VariableIndices = new Map();
-
-  visitVariables(content, ({ name, startIndex }) => {
-    indices.set(startIndex, name);
-  });
-
-  return indices;
-};
-
-export const countUniqueVariableNames = (content: string): number => {
-  const variableNames = new Set<string>();
-
-  visitVariables(content, ({ name }) => {
-    variableNames.add(name);
-  });
-
-  return variableNames.size;
-};
-
-export const getVariableNames = (content: string): string[] => {
-  const variableNames: string[] = [];
-
-  visitVariables(content, ({ name }) => {
-    variableNames.push(name);
-  });
-
-  return variableNames;
-};

package/src/radioGroup/index.ts

@@ -1,115 +0,0 @@
-import { Plugin, Schema } from '@pdfme/common';
-import { Circle, CircleDot } from 'lucide';
-import svg from '../graphics/svg.js';
-import { isEditable, createSvgStr } from '../utils.js';
-import { HEX_COLOR_PATTERN } from '../constants.js';
-
-const defaultStroke = 'currentColor';
-
-const getCheckedIcon = (stroke = defaultStroke) => createSvgStr(CircleDot, { stroke });
-const getUncheckedIcon = (stroke = defaultStroke) => createSvgStr(Circle, { stroke });
-
-interface RadioGroup extends Schema {
-  group: string;
-  color: string;
-}
-
-const getIcon = ({ value, color }: { value: string; color: string }) =>
-  value === 'true' ? getCheckedIcon(color) : getUncheckedIcon(color);
-
-const eventEmitter = new EventTarget();
-
-interface RadioButtonState {
-  value: string;
-  onChange: (arg: { key: string; value: string }) => void;
-}
-
-const radioButtonStates = new Map<string, RadioButtonState>();
-const eventListeners = new Map<string, EventListener>();
-
-const schema: Plugin<RadioGroup> = {
-  ui: (arg) => {
-    const { schema, value, onChange, rootElement, mode } = arg;
-    const container = document.createElement('div');
-    container.style.width = '100%';
-    container.style.height = '100%';
-
-    if (onChange) {
-      radioButtonStates.set(schema.name, { value, onChange });
-    }
-
-    const oldListener = eventListeners.get(schema.name);
-    if (oldListener) {
-      eventEmitter.removeEventListener(`group-${schema.group}`, oldListener);
-    }
-
-    const handleGroupEvent = (event: Event) => {
-      const customEvent = event as CustomEvent<string>;
-      const selectedSchemaName = customEvent.detail;
-      if (selectedSchemaName !== schema.name) {
-        const radioButtonState = radioButtonStates.get(schema.name);
-        if (!radioButtonState) return;
-        if (radioButtonState.value === 'true') {
-          radioButtonState.onChange({ key: 'content', value: 'false' });
-        }
-      }
-    };
-
-    eventListeners.set(schema.name, handleGroupEvent);
-    eventEmitter.addEventListener(`group-${schema.group}`, handleGroupEvent);
-
-    if (isEditable(mode, schema)) {
-      container.addEventListener('click', () => {
-        if (value !== 'true' && onChange) {
-          onChange({ key: 'content', value: 'true' });
-          radioButtonStates.set(schema.name, { value: 'true', onChange });
-          eventEmitter.dispatchEvent(
-            new CustomEvent(`group-${schema.group}`, { detail: schema.name }),
-          );
-        }
-      });
-    }
-
-    void svg.ui({
-      ...arg,
-      rootElement: container,
-      mode: 'viewer',
-      value: getIcon({ value, color: schema.color }),
-    });
-
-    rootElement.appendChild(container);
-  },
-  pdf: (arg) =>
-    svg.pdf(Object.assign(arg, { value: getIcon({ value: arg.value, color: arg.schema.color }) })),
-  propPanel: {
-    schema: ({ i18n }) => ({
-      color: {
-        title: i18n('schemas.color'),
-        type: 'string',
-        widget: 'color',
-        props: {
-          disabledAlpha: true,
-        },
-        required: true,
-        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
-      },
-      group: {
-        title: i18n('schemas.radioGroup.groupName'),
-        type: 'string',
-      },
-    }),
-    defaultSchema: {
-      name: '',
-      type: 'radioGroup',
-      content: 'false',
-      position: { x: 0, y: 0 },
-      width: 8,
-      height: 8,
-      group: 'MyGroup',
-      color: '#000000',
-    },
-  },
-  icon: getCheckedIcon(),
-};
-
-export default schema;

package/src/sanitize.ts

@@ -1,50 +0,0 @@
-import DOMPurify from 'dompurify';
-
-export const sanitizeSVG = (svgString: string): string => {
-  return DOMPurify.sanitize(svgString, {
-    USE_PROFILES: { svg: true, svgFilters: true },
-    FORBID_TAGS: [
-      'script',
-      'foreignObject',
-      'use',
-      'embed',
-      'iframe',
-      'object',
-      'link',
-      'style',
-      'animate',
-      'animateMotion',
-      'animateTransform',
-      'set',
-    ],
-    FORBID_ATTR: [
-      'onload',
-      'onerror',
-      'onclick',
-      'onmouseover',
-      'onmouseout',
-      'onmousedown',
-      'onmouseup',
-      'onfocus',
-      'onblur',
-      'onchange',
-      'onsubmit',
-      'onreset',
-      'onselect',
-      'onabort',
-      'oninput',
-      'onkeydown',
-      'onkeypress',
-      'onkeyup',
-      'onbegin',
-      'onend',
-      'onrepeat',
-      'href',
-      'xlink:href',
-      'src',
-      'action',
-      'formaction',
-    ],
-    KEEP_CONTENT: false,
-  });
-};