@pdfme/schemas 0.0.0

package/src/multiVariableText/propPanel.ts

@@ -0,0 +1,160 @@
+import { propPanel as parentPropPanel } from '../text/propPanel.js';
+import { PropPanel, PropPanelWidgetProps } from '@pdfme/common';
+import { MultiVariableTextSchema } from './types.js';
+
+const mapDynamicVariables = (props: PropPanelWidgetProps) => {
+  const { rootElement, changeSchemas, activeSchema, i18n, options } = props;
+
+  const mvtSchema = activeSchema as unknown as MultiVariableTextSchema;
+  const text = mvtSchema.text || '';
+  const variables = JSON.parse(mvtSchema.content || '{}') as Record<string, string>;
+  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';
+
+    // Use safe string concatenation for innerHTML
+    const typingInstructions = i18n('schemas.mvt.typingInstructions');
+    const sampleField = i18n('schemas.mvt.sampleField');
+    para.innerHTML =
+      typingInstructions +
+      ` <code style="color:${safeColorValue}; font-weight:bold;">{` +
+      sampleField +
+      '}</code>';
+    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 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 (!(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 (!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.js';
+
+export interface MultiVariableTextSchema extends TextSchema {
+  text: string;
+  variables: string[];
+}

package/src/multiVariableText/uiRender.ts

@@ -0,0 +1,170 @@
+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';
+
+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 = '';
+  }
+
+  const variables: Record<string, string> = value
+    ? (JSON.parse(value) as Record<string, string>) || {}
+    : {};
+  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++) {
+    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;
+          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);
+    }
+  }
+};
+
+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/radioGroup/index.ts

@@ -0,0 +1,115 @@
+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/select/index.ts

@@ -0,0 +1,204 @@
+import type * as CSS from 'csstype';
+import { propPanel as parentPropPanel } from '../text/propPanel.js';
+import { Plugin, PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
+import text from '../text/index.js';
+import { TextSchema } from '../text/types.js';
+import { ChevronDown } from 'lucide';
+import { createSvgStr } from '../utils.js';
+
+const selectIcon = createSvgStr(ChevronDown);
+
+interface Select extends TextSchema {
+  options: string[];
+}
+
+const addOptions = (props: PropPanelWidgetProps) => {
+  const { rootElement, changeSchemas, activeSchema, i18n } = props;
+
+  rootElement.style.width = '100%';
+
+  const selectSchema = activeSchema as SchemaForUI & Select;
+  const currentOptions = selectSchema.options ? [...selectSchema.options] : [];
+
+  const inputStyle = {
+    width: '100%',
+    padding: '6.25px 11px',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+  };
+
+  const buttonStyle = { border: 'none', borderRadius: '4px', cursor: 'pointer' };
+
+  const updateSchemas = () => {
+    changeSchemas([
+      { key: 'options', value: currentOptions, schemaId: activeSchema.id },
+      { key: 'content', value: currentOptions[0] || '', schemaId: activeSchema.id },
+    ]);
+  };
+
+  const formContainer = document.createElement('div');
+  Object.assign(formContainer.style, {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '10px',
+  });
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.placeholder = i18n('schemas.select.optionPlaceholder');
+  Object.assign(input.style, inputStyle, { marginRight: '10px' });
+
+  const addButton = document.createElement('button');
+  addButton.textContent = '+';
+  Object.assign(addButton.style, buttonStyle, {
+    width: '25px',
+    height: '25px',
+    padding: '4px 8px',
+  });
+
+  addButton.addEventListener('click', () => {
+    const newValue = input.value.trim();
+    if (newValue) {
+      currentOptions.push(newValue);
+      updateSchemas();
+      renderOptions();
+      input.value = '';
+    }
+  });
+
+  formContainer.appendChild(input);
+  formContainer.appendChild(addButton);
+
+  const optionsList = document.createElement('ul');
+  Object.assign(optionsList.style, { listStyle: 'none', padding: '0' });
+
+  const renderOptions = () => {
+    optionsList.innerHTML = '';
+    currentOptions.forEach((option, index) => {
+      const li = document.createElement('li');
+      Object.assign(li.style, { display: 'flex', alignItems: 'center', marginBottom: '5px' });
+
+      const optionInput = document.createElement('input');
+      optionInput.type = 'text';
+      optionInput.value = option;
+      Object.assign(optionInput.style, inputStyle, { marginRight: '10px' });
+
+      optionInput.addEventListener('change', () => {
+        currentOptions[index] = optionInput.value;
+        updateSchemas();
+      });
+
+      const removeButton = document.createElement('button');
+      removeButton.textContent = 'x';
+      Object.assign(removeButton.style, buttonStyle, { padding: '4px 8px' });
+
+      removeButton.addEventListener('click', () => {
+        currentOptions.splice(index, 1);
+        updateSchemas();
+        renderOptions();
+      });
+
+      li.appendChild(optionInput);
+      li.appendChild(removeButton);
+      optionsList.appendChild(li);
+    });
+  };
+
+  rootElement.appendChild(formContainer);
+  rootElement.appendChild(optionsList);
+
+  renderOptions();
+};
+
+const schema: Plugin<Select> = {
+  ui: async (arg) => {
+    const { schema, value, onChange, rootElement, mode } = arg;
+    await text.ui(Object.assign(arg, { mode: 'viewer' }));
+
+    if (mode !== 'viewer' && !(mode === 'form' && schema.readOnly)) {
+      const buttonWidth = 30;
+      const selectButton = document.createElement('button');
+      selectButton.innerHTML = selectIcon;
+      const selectButtonStyle: CSS.Properties = {
+        position: 'absolute',
+        zIndex: -1,
+        right: `-${buttonWidth}px`,
+        top: '0',
+        padding: '0',
+        margin: '0',
+        cursor: 'pointer',
+        height: `${buttonWidth}px`,
+        width: `${buttonWidth}px`,
+      };
+      Object.assign(selectButton.style, selectButtonStyle);
+
+      rootElement.appendChild(selectButton);
+
+      const selectElement = document.createElement('select');
+      const selectElementStyle: CSS.Properties = {
+        opacity: '0',
+        position: 'absolute',
+        width: `calc(100% + ${buttonWidth}px)`,
+        height: '100%',
+        top: '0',
+        left: '0',
+        appearance: 'initial',
+      };
+      Object.assign(selectElement.style, selectElementStyle);
+      selectElement.value = value;
+
+      selectElement.addEventListener('change', (e) => {
+        if (onChange && e.target instanceof HTMLSelectElement) {
+          if (onChange) onChange({ key: 'content', value: e.target.value });
+        }
+      });
+
+      // Ensure schema.options is an array before mapping
+      const options = Array.isArray(schema.options) ? schema.options : [];
+      selectElement.innerHTML = options
+        .map(
+          (option) =>
+            `<option value="${option}" ${option === value ? 'selected' : ''}>${option}</option>`,
+        )
+        .join('');
+      rootElement.appendChild(selectElement);
+    }
+  },
+  pdf: text.pdf,
+  propPanel: {
+    ...text.propPanel,
+    widgets: { ...parentPropPanel.widgets, addOptions },
+    schema: (propPanelProps: Omit<PropPanelWidgetProps, 'rootElement'>) => {
+      if (typeof parentPropPanel.schema !== 'function') {
+        throw Error('Oops, is text schema no longer a function?');
+      }
+
+      // Safely call the parent schema function with proper type checking
+      const parentSchema = parentPropPanel.schema(propPanelProps);
+
+      // Create a type-safe return object
+      return {
+        ...parentSchema,
+        '-------': { type: 'void', widget: 'Divider' },
+
+        optionsContainer: {
+          title: (propPanelProps as PropPanelWidgetProps).i18n('schemas.select.options'),
+          type: 'string',
+          widget: 'Card',
+          span: 24,
+          properties: { options: { widget: 'addOptions', span: 24 } },
+        },
+      };
+    },
+    defaultSchema: {
+      ...(text.propPanel.defaultSchema as TextSchema),
+      type: 'select',
+      content: 'option1',
+      options: ['option1', 'option2'],
+    },
+  },
+  icon: selectIcon,
+};
+
+export default schema;