@erxes/api-shared 0.0.0-stage → 3.2.19-2

package/src/core-modules/email-content/blocksToHtml.ts

@@ -0,0 +1,551 @@
+/**
+ * The shape this renderer reads off a block. Structural on purpose: the
+ * editor's own types live in a frontend package, and nothing here needs them.
+ */
+export type TEmailBlock = {
+  id?: string;
+  type?: string;
+  props?: Record<string, any>;
+  content?: any;
+  children?: TEmailBlock[];
+};
+
+export const COLORS_DEFAULT = {
+  gray: { text: '#9b9a97', background: '#ebeced' },
+  brown: { text: '#64473a', background: '#e9e5e3' },
+  red: { text: '#e03e3e', background: '#fbe4e4' },
+  orange: { text: '#d9730d', background: '#f6e9d9' },
+  yellow: { text: '#dfab01', background: '#fbf3db' },
+  green: { text: '#4d6461', background: '#ddedea' },
+  blue: { text: '#0b6e99', background: '#ddebf1' },
+  purple: { text: '#6940a5', background: '#eae4f2' },
+  pink: { text: '#ad1a72', background: '#f4dfeb' },
+} as const;
+
+type ColorConfig = Record<string, { text: string; background: string }>;
+
+export interface TBlocksToHtmlConfig {
+  colors?: ColorConfig;
+  baseFont?: string;
+  baseFontSize?: string;
+  baseLineHeight?: string;
+  baseColor?: string;
+  maxWidth?: number;
+  resolveImageUrl?: (url: string) => string;
+  wrapper?: {
+    email?: boolean;
+    unsubscribeUrl?: string;
+    postalAddress?: string;
+  };
+}
+
+const DEFAULTS = {
+  baseFont:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  baseFontSize: '16px',
+  baseLineHeight: '1.6',
+  baseColor: '#000000',
+  maxWidth: 600,
+};
+
+const getColor = (
+  colorName: string,
+  type: 'text' | 'background',
+  config?: TBlocksToHtmlConfig,
+): string => {
+  const colors: ColorConfig = config?.colors || COLORS_DEFAULT;
+  const color = colors[colorName]?.[type];
+
+  if (!color) {
+    console.warn(`Color not found: ${colorName}.${type}`);
+    return type === 'text' ? '#000000' : 'transparent';
+  }
+
+  return color;
+};
+
+export const escapeHtml = (text: string): string => {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+};
+
+const stylesToCss = (styles?: Record<string, any>, config?: TBlocksToHtmlConfig): string => {
+  if (!styles) return '';
+
+  const cssProps: string[] = [];
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (!value || value === 'default') continue;
+
+    switch (key) {
+      case 'bold':
+        cssProps.push('font-weight: bold');
+        break;
+      case 'italic':
+        cssProps.push('font-style: italic');
+        break;
+      case 'underline':
+        cssProps.push('text-decoration: underline');
+        break;
+      case 'strikethrough':
+      case 'strike':
+        cssProps.push('text-decoration: line-through');
+        break;
+      case 'code':
+        cssProps.push('font-family: Courier, monospace');
+        cssProps.push('background-color: #f4f4f4');
+        cssProps.push('padding: 2px 4px');
+        cssProps.push('border-radius: 3px');
+        cssProps.push('font-size: 90%');
+        break;
+      case 'textColor':
+        if (value !== 'default') {
+          cssProps.push(`color: ${getColor(value, 'text', config)}`);
+        }
+        break;
+      case 'backgroundColor':
+        if (value !== 'default') {
+          cssProps.push(
+            `background-color: ${getColor(value, 'background', config)}`,
+          );
+        }
+        break;
+      case 'textAlignment':
+        cssProps.push(`text-align: ${value}`);
+        break;
+    }
+  }
+
+  return cssProps.join('; ');
+};
+
+const renderInlineContent = (content: any[], config?: TBlocksToHtmlConfig): string => {
+  if (!Array.isArray(content) || content.length === 0) return '';
+
+  return content
+    .map((item) => {
+      const { type, text, styles, href, content: nestedContent } = item;
+
+      // Handle links - email-safe with full inline styles
+      if (type === 'link') {
+        const children = renderInlineContent(nestedContent || [], config);
+        const linkStyles = 'color: #0066cc; text-decoration: underline';
+        return `<a href="${escapeHtml(
+          href || '#',
+        )}" style="${linkStyles}">${children}</a>`;
+      }
+
+      if (type === 'rawHtml') {
+        return item.props?.html || '';
+      }
+
+      // A field chip carries no text of its own; it becomes the placeholder
+      // the sender fills per recipient.
+      if (type === 'attribute') {
+        const value = item.props?.value || item.props?.name || '';
+
+        return value ? `{{ ${value} }}` : '';
+      }
+
+      const escapedText = escapeHtml(text || '')
+        .replace(/\n/g, '<br />')
+        .replace(/ {2,}/g, (spaces) => '&nbsp;'.repeat(spaces.length));
+      const cssStyle = stylesToCss(styles, config);
+
+      if (cssStyle) {
+        return `<span style="${cssStyle}">${escapedText}</span>`;
+      }
+
+      return escapedText;
+    })
+    .join('');
+};
+
+const getBaseStyles = (config?: TBlocksToHtmlConfig) => {
+  return {
+    p: `margin: 0 0 16px 0; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }; font-size: ${
+      config?.baseFontSize || DEFAULTS.baseFontSize
+    }; line-height: ${
+      config?.baseLineHeight || DEFAULTS.baseLineHeight
+    }; color: ${config?.baseColor || DEFAULTS.baseColor}`,
+    h1: `margin: 24px 0 16px 0; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }; font-size: 32px; font-weight: bold; line-height: 1.2; color: ${
+      config?.baseColor || DEFAULTS.baseColor
+    }`,
+    h2: `margin: 20px 0 12px 0; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }; font-size: 24px; font-weight: bold; line-height: 1.3; color: ${
+      config?.baseColor || DEFAULTS.baseColor
+    }`,
+    h3: `margin: 16px 0 8px 0; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }; font-size: 20px; font-weight: bold; line-height: 1.4; color: ${
+      config?.baseColor || DEFAULTS.baseColor
+    }`,
+    ul: `margin: 0 0 16px 0; padding: 0 0 0 24px; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }`,
+    ol: `margin: 0 0 16px 0; padding: 0 0 0 24px; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }`,
+    li: `margin: 0 0 8px 0; font-size: ${
+      config?.baseFontSize || DEFAULTS.baseFontSize
+    }; line-height: ${config?.baseLineHeight || DEFAULTS.baseLineHeight}`,
+    blockquote: `margin: 16px 0; padding: 8px 16px; border-left: 4px solid #ddd; background-color: #f9f9f9; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }; font-style: italic`,
+    table: `border-collapse: collapse; width: 100%; margin: 16px 0; font-family: ${
+      config?.baseFont || DEFAULTS.baseFont
+    }`,
+    pre: `margin: 16px 0; padding: 16px; background-color: #f4f4f4; border: 1px solid #ddd; border-radius: 4px; overflow-x: auto; font-family: Courier, monospace; font-size: 14px; line-height: 1.5`,
+  };
+};
+
+const mergeStyles = (baseStyle: string, customStyle?: string): string => {
+  if (!customStyle) return baseStyle;
+  return `${baseStyle}; ${customStyle}`;
+};
+
+const resolveSrc = (url: string, config?: TBlocksToHtmlConfig): string =>
+  config?.resolveImageUrl ? config.resolveImageUrl(url) : url;
+
+const renderBlock = (block: TEmailBlock, config?: TBlocksToHtmlConfig): string => {
+  const { type, props, content } = block as any;
+  const baseStyles = getBaseStyles(config);
+  const customStyle = stylesToCss(props, config);
+
+  switch (type) {
+    case 'paragraph': {
+      const html = renderInlineContent(content || [], config);
+      if (!html.trim()) return '<p style="' + baseStyles.p + '">&nbsp;</p>';
+      return `<p style="${mergeStyles(baseStyles.p, customStyle)}">${html}</p>`;
+    }
+
+    case 'heading': {
+      const level = Math.min(Math.max(props?.level || 1, 1), 3);
+      const html = renderInlineContent(content || [], config);
+      const headingStyle = baseStyles[`h${level}` as 'h1' | 'h2' | 'h3'];
+      return `<h${level} style="${mergeStyles(
+        headingStyle,
+        customStyle,
+      )}">${html}</h${level}>`;
+    }
+
+    case 'bulletListItem': {
+      const html = renderInlineContent(content || [], config);
+      return `<li style="${mergeStyles(
+        baseStyles.li,
+        customStyle,
+      )}">${html}</li>`;
+    }
+
+    case 'numberedListItem': {
+      const html = renderInlineContent(content || [], config);
+      return `<li style="${mergeStyles(
+        baseStyles.li,
+        customStyle,
+      )}">${html}</li>`;
+    }
+
+    case 'checkListItem': {
+      const html = renderInlineContent(content || [], config);
+      const checked = props?.checked;
+      const checkbox = checked ? '☑' : '☐';
+      return `<div style="${mergeStyles(
+        baseStyles.p,
+        customStyle,
+      )}">${checkbox} ${html}</div>`;
+    }
+
+    case 'codeBlock': {
+      const code =
+        content?.map((c: any) => escapeHtml(c.text || '')).join('\n') || '';
+      return `<pre style="${mergeStyles(
+        baseStyles.pre,
+        customStyle,
+      )}"><code>${code}</code></pre>`;
+    }
+
+    case 'image': {
+      const { url, caption, name, previewWidth } = props || {};
+
+      if (!url) {
+        return '';
+      }
+
+      const width = Math.min(previewWidth || 600, 600);
+      const imgStyle = `max-width: 100%; height: auto; display: block; margin: 0`;
+      const src = resolveSrc(url, config);
+
+      let html = `<div style="margin: 16px 0;">
+        <img src="${escapeHtml(src)}" alt="${escapeHtml(
+          name || '',
+        )}" width="${width}" style="${imgStyle}" />`;
+
+      if (caption) {
+        html += `<div style="margin-top: 8px; font-size: 14px; color: #666; font-style: italic;">${escapeHtml(
+          caption,
+        )}</div>`;
+      }
+
+      html += `</div>`;
+      return html;
+    }
+
+    case 'documentPlaceholder': {
+      const { documentId } = props || {};
+
+      if (!documentId) {
+        return '';
+      }
+
+      return `<div class="erxes-document-placeholder" data-document-id="${escapeHtml(
+        documentId,
+      )}">{{ document.${escapeHtml(documentId)} }}</div>`;
+    }
+    case 'gallery': {
+      let images: { url?: string; caption?: string }[] = [];
+      try {
+        const parsed = JSON.parse(props?.images || '[]');
+        images = Array.isArray(parsed) ? parsed : [];
+      } catch {
+        images = [];
+      }
+
+      images = images.filter((img) => img?.url);
+      if (images.length === 0) return '';
+
+      const columns = Math.max(2, Math.min(4, parseInt(props?.columns) || 3));
+      const cellWidth = `${Math.floor(100 / columns)}%`;
+      const imgStyle = `width: 100%; height: auto; display: block; border: 0`;
+
+      const rows: string[] = [];
+      const cellList = images.map((img) => {
+        const src = resolveSrc(img.url || '', config);
+        let cell = `<img src="${escapeHtml(src)}" alt="${escapeHtml(
+          img.caption || '',
+        )}" style="${imgStyle}" />`;
+
+        if (img.caption) {
+          cell += `<div style="margin-top: 4px; font-size: 12px; color: #666; font-style: italic;">${escapeHtml(
+            img.caption,
+          )}</div>`;
+        }
+
+        return `<td valign="top" width="${cellWidth}" style="padding: 4px; vertical-align: top;">${cell}</td>`;
+      });
+
+      for (let r = 0; r < cellList.length; r += columns) {
+        rows.push(`<tr>${cellList.slice(r, r + columns).join('')}</tr>`);
+      }
+
+      return `<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin: 16px 0;"><tbody>${rows.join(
+        '',
+      )}</tbody></table>`;
+    }
+
+    case 'table': {
+      const { rows, columnWidths } = content || {};
+      if (!rows || !Array.isArray(rows)) return '';
+
+      const widths: number[] = (columnWidths || []).map(
+        (columnWidth: unknown) => Number(columnWidth) || 0,
+      );
+
+      const totalWidth = widths.reduce((sum, width) => sum + width, 0);
+
+      const colgroup =
+        totalWidth > 0 && widths.every((width) => width > 0)
+          ? `<colgroup>${widths
+              .map(
+                (width) =>
+                  `<col style="width: ${
+                    Math.round((width / totalWidth) * 10000) / 100
+                  }%" />`,
+              )
+              .join('')}</colgroup>`
+          : '';
+
+      const tableRows = rows
+        .map((row: any, rowIndex: number) => {
+          const cells = (row.cells || [])
+            .map((cell: any) => {
+              const cellData = Array.isArray(cell) ? { content: cell } : cell;
+
+              const cellContent = renderInlineContent(
+                cellData?.content || [],
+                config,
+              );
+
+              const colspan = Number(cellData?.props?.colspan) || 1;
+              const rowspan = Number(cellData?.props?.rowspan) || 1;
+
+              const spanAttrs = `${colspan > 1 ? ` colspan="${colspan}"` : ''}${
+                rowspan > 1 ? ` rowspan="${rowspan}"` : ''
+              }`;
+
+              const cellStyle = `padding: 8px; border: 1px solid #ddd; ${
+                rowIndex === 0
+                  ? 'font-weight: bold; background-color: #f4f4f4;'
+                  : ''
+              }`;
+
+              return `<td${spanAttrs} style="${cellStyle}">${
+                cellContent || '&nbsp;'
+              }</td>`;
+            })
+            .join('');
+          return `<tr>${cells}</tr>`;
+        })
+        .join('');
+
+      return `<table style="${mergeStyles(baseStyles.table, customStyle)}">
+        ${colgroup}<tbody>${tableRows}</tbody>
+      </table>`;
+    }
+
+    case 'quote': {
+      const html = renderInlineContent(content || [], config);
+      return `<blockquote style="${mergeStyles(
+        baseStyles.blockquote,
+        customStyle,
+      )}">${html}</blockquote>`;
+    }
+
+    case 'rawHtml': {
+      return props?.html || '';
+    }
+
+    default: {
+      const html = renderInlineContent(content || [], config);
+      return html ? `<p style="${baseStyles.p}">${html}</p>` : '';
+    }
+  }
+};
+
+const groupListBlocks = (
+  blocks: TEmailBlock[],
+  config?: TBlocksToHtmlConfig,
+): string => {
+  const result: string[] = [];
+  const baseStyles = getBaseStyles(config);
+  let i = 0;
+
+  while (i < blocks.length) {
+    const block = blocks[i] as any;
+
+    if (block.type === 'bulletListItem') {
+      const items: string[] = [];
+      while (
+        i < blocks.length &&
+        (blocks[i] as any).type === 'bulletListItem'
+      ) {
+        items.push(renderBlock(blocks[i], config));
+        i++;
+      }
+      result.push(`<ul style="${baseStyles.ul}">${items.join('')}</ul>`);
+      continue;
+    }
+
+    if (block.type === 'numberedListItem') {
+      const items: string[] = [];
+      while (
+        i < blocks.length &&
+        (blocks[i] as any).type === 'numberedListItem'
+      ) {
+        items.push(renderBlock(blocks[i], config));
+        i++;
+      }
+      result.push(`<ol style="${baseStyles.ol}">${items.join('')}</ol>`);
+      continue;
+    }
+
+    result.push(renderBlock(block, config));
+    i++;
+  }
+
+  return result.join('\n');
+};
+
+export const blocksToHtml = (
+  blocks: TEmailBlock[] | string,
+  config?: TBlocksToHtmlConfig,
+): string => {
+  const { wrapper } = config || {};
+
+  try {
+    const parsedBlocks =
+      typeof blocks === 'string' ? JSON.parse(blocks) : blocks;
+
+    if (!Array.isArray(parsedBlocks) || parsedBlocks.length === 0) {
+      return '';
+    }
+
+    if (wrapper?.email) {
+      return emailHtmlWrapper(groupListBlocks(parsedBlocks, config), config);
+    }
+
+    return groupListBlocks(parsedBlocks, config);
+  } catch (error) {
+    console.error('Error converting blocks to HTML:', error);
+    return '';
+  }
+};
+
+export const emailHtmlWrapper = (html: string, config?: TBlocksToHtmlConfig) => {
+  const maxWidth = Math.min(config?.maxWidth || DEFAULTS.maxWidth, 600);
+  const unsubscribeUrl = config?.wrapper?.unsubscribeUrl;
+  const postalAddress = config?.wrapper?.postalAddress;
+
+  const unsubscribeRow = unsubscribeUrl
+    ? `<tr>
+        <td style="padding: 10px; color: #ccc; text-align: center; font-size: 12px; border-top: 1px solid #f0f0f0;">
+          You are receiving this email because you have signed up for our services.
+          <br />
+          <a style="text-decoration: underline; color: #ccc;" rel="noopener" target="_blank" href="${unsubscribeUrl}">Unsubscribe</a>
+        </td>
+      </tr>`
+    : '';
+
+  const postalAddressRow = postalAddress
+    ? `<tr>
+        <td style="padding: 0 10px 10px; color: #ccc; text-align: center; font-size: 12px;">
+          ${postalAddress}
+        </td>
+      </tr>`
+    : '';
+
+  return `
+    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+    <html xmlns="http://www.w3.org/1999/xhtml">
+      <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+      </head>
+      <body style="margin: 0; padding: 0;">
+        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f4f4f4;">
+          <tr>
+            <td align="center" style="padding: 20px 0;">
+              <table border="0" cellpadding="0" cellspacing="0" width="${maxWidth}" style="background-color: #ffffff;">
+                <tr>
+                  <td style="padding: 20px;">
+                    ${html}
+                  </td>
+                </tr>
+                ${unsubscribeRow}
+                ${postalAddressRow}
+              </table>
+            </td>
+          </tr>
+        </table>
+      </body>
+    </html>
+  `;
+};

package/src/core-modules/email-content/constants.ts

@@ -0,0 +1,4 @@
+export const EMAIL_CONTENT_FORMATS = {
+  BLOCKS: 'blocks',
+  MAILY: 'maily',
+} as const;

package/src/core-modules/email-content/emailFooter.ts

@@ -0,0 +1,17 @@
+export const appendUnsubscribeFooter = (
+  html: string,
+  {
+    unsubscribeUrl,
+    postalAddress,
+  }: { unsubscribeUrl: string; postalAddress?: string },
+): string => {
+  const footer = `<table role="presentation" width="100%" style="max-width:600px;margin:0 auto;"><tr><td style="padding:24px 24px 0 24px;text-align:center;font-size:12px;line-height:18px;color:#8898aa;">${
+    postalAddress ? `${postalAddress}<br/>` : ''
+  }You are receiving this email because you have signed up for our services.<br/><a href="${unsubscribeUrl}" style="color:#8898aa;text-decoration:underline;" rel="noopener" target="_blank">Unsubscribe</a></td></tr></table>`;
+
+  if (html.includes('</body>')) {
+    return html.replace('</body>', `${footer}</body>`);
+  }
+
+  return `${html}${footer}`;
+};

package/src/core-modules/email-content/expandRepeatRows.test.ts

@@ -0,0 +1,36 @@
+import { expandRepeatRows } from './expandRepeatRows';
+
+const TABLE =
+  '<table><tr><th>Name</th><th>Qty</th></tr>' +
+  '<tr><td>{{ trigger.productsData.$.name }}</td><td>{{ trigger.productsData.$.quantity }}</td></tr>' +
+  '</table><p>{{ trigger.name }}</p>';
+
+describe('expandRepeatRows', () => {
+  it('writes the row once per item with the item index', async () => {
+    const html = await expandRepeatRows(TABLE, async () => 2);
+
+    expect(html).toBe(
+      '<table><tr><th>Name</th><th>Qty</th></tr>' +
+        '<tr><td>{{ trigger.productsData.0.name }}</td><td>{{ trigger.productsData.0.quantity }}</td></tr>' +
+        '<tr><td>{{ trigger.productsData.1.name }}</td><td>{{ trigger.productsData.1.quantity }}</td></tr>' +
+        '</table><p>{{ trigger.name }}</p>',
+    );
+  });
+
+  it('drops the row for an empty list and asks each list once', async () => {
+    const countOf = jest.fn(async () => 0);
+    const html = await expandRepeatRows(TABLE + TABLE, countOf);
+
+    expect(html).not.toContain('productsData');
+    expect(countOf).toHaveBeenCalledTimes(1);
+    expect(countOf).toHaveBeenCalledWith('trigger.productsData');
+  });
+
+  it('leaves html without item placeholders untouched', async () => {
+    const countOf = jest.fn(async () => 3);
+    const html = '<table><tr><td>{{ trigger.name }}</td></tr></table>';
+
+    expect(await expandRepeatRows(html, countOf)).toBe(html);
+    expect(countOf).not.toHaveBeenCalled();
+  });
+});

package/src/core-modules/email-content/expandRepeatRows.ts

@@ -0,0 +1,59 @@
+/** A table row: cells never hold another table in what the editors write. */
+const ROW = /<tr\b[^>]*>[\s\S]*?<\/tr>/gi;
+
+/** `{{ list.$.field }}`: one field of each item in `list`. */
+const ITEM_PLACEHOLDER = /\{\{\s*([^{}|]+?)\.\$\.[^{}]*?\}\}/;
+
+/** How many items a list holds, asked as `list.$count`. */
+export type TRepeatCounter = (listPath: string) => Promise<number>;
+
+const itemsOf = async (
+  listPath: string,
+  countOf: TRepeatCounter,
+  counts: Map<string, number>,
+) => {
+  if (!counts.has(listPath)) {
+    counts.set(listPath, Math.max(0, Math.floor((await countOf(listPath)) || 0)));
+  }
+
+  return counts.get(listPath) || 0;
+};
+
+/**
+ * A row whose cells read `{{ list.$.field }}` is written once per item of the
+ * list, `$` becoming the item's index, so the usual placeholder pass fills
+ * each copy from its own item. An empty list leaves no row.
+ */
+export const expandRepeatRows = async (
+  html: string | undefined,
+  countOf: TRepeatCounter,
+): Promise<string> => {
+  if (!html || !html.includes('.$.')) {
+    return html || '';
+  }
+
+  const counts = new Map<string, number>();
+  const rows = [...html.matchAll(ROW)];
+  let expanded = '';
+  let cursor = 0;
+
+  for (const match of rows) {
+    const row = match[0];
+    const listPath = row.match(ITEM_PLACEHOLDER)?.[1]?.trim();
+
+    if (!listPath) {
+      continue;
+    }
+
+    const count = await itemsOf(listPath, countOf, counts);
+    const marker = `${listPath}.$.`;
+
+    expanded += html.slice(cursor, match.index);
+    expanded += Array.from({ length: count }, (_, index) =>
+      row.split(marker).join(`${listPath}.${index}.`),
+    ).join('');
+    cursor = (match.index || 0) + row.length;
+  }
+
+  return expanded + html.slice(cursor);
+};

package/src/core-modules/email-content/index.ts

@@ -0,0 +1,8 @@
+export * from './blocksToHtml';
+export * from './constants';
+export * from './emailFooter';
+export * from './expandRepeatRows';
+export * from './renderEmailContent';
+export * from './replacePlaceholders';
+export * from './types';
+export * from './unresolvedPlaceholders';