@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/templateContentPreviewResolver.ts

@@ -1,360 +0,0 @@
-import type {
-  Block,
-  CustomTemplateDefinition,
-  DocBlock,
-  MediaProvider,
-  Theme,
-  ViewportConfig,
-} from '@bendyline/squisq/schemas';
-import {
-  deriveTemplateInputs,
-  extractBodyPlainText,
-  extractBlockquoteText,
-  extractImages,
-  extractListItems,
-  extractTableFromContents,
-  materializeBlockLayers,
-  type MaterializeBlockLayersOptions,
-} from '@bendyline/squisq/doc';
-import { extractPlainText } from '@bendyline/squisq/markdown';
-
-export interface TemplatePreviewSource {
-  block: Block;
-  theme: Theme;
-  viewport: ViewportConfig;
-  basePath?: string;
-  mediaProvider?: MediaProvider | null;
-  customTemplates?: readonly CustomTemplateDefinition[];
-}
-
-export interface TemplatePreviewResult {
-  visual: Block | null;
-  warning?: string;
-}
-
-const NUMBER_RE =
-  /(?:[$\u20ac\u00a3\u00a5]\s?\d+(?:[.,]\d+)*(?:\s?(?:[MBK]|million|billion|thousand))?|\d+(?:[.,]\d+)*\s?(?:%|\u2030|x|\u00d7|[MBK]|million|billion|thousand|percent|years?|days?|hours?)|\d{3,}(?:[.,]\d+)*)/i;
-
-const DATE_RE =
-  /\b(?:\d{4}-\d{2}-\d{2}|\d{1,2}\/\d{1,2}\/\d{2,4}|Q[1-4]\s+\d{4}|\d{4}s|(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Sept|Oct|Nov|Dec)[a-z]*\.?\s+\d{1,2},?\s+\d{4}|\d{1,2}\s+(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Sept|Oct|Nov|Dec)[a-z]*\.?\s+\d{4})\b/i;
-
-const AUDIO_VIDEO_SOURCE_RE =
-  /\.(?:aac|flac|m4a|m4v|mkv|mov|mp3|mp4|oga|ogg|ogv|opus|wav|webm)(?:$|[?#\s"'<>),])/i;
-const AUDIO_VIDEO_TAG_RE = /<\/?(?:audio|source|video)\b/i;
-const AUDIO_VIDEO_MIME_RE = /^(?:audio|video)\//i;
-
-export function resolveTemplateContentPreview(
-  templateName: string,
-  source: TemplatePreviewSource,
-): Block | null {
-  return resolveTemplateContentPreviewResult(templateName, source).visual;
-}
-
-export function resolveTemplateContentPreviewResult(
-  templateName: string,
-  source: TemplatePreviewSource,
-): TemplatePreviewResult {
-  const { block, theme, viewport } = source;
-  const headingText = getHeadingText(block);
-  const bodyText = extractBodyPlainText(block.contents);
-  const sameTemplate = block.template === templateName;
-  const existingInputs =
-    sameTemplate &&
-    ((block.templateData && Object.keys(block.templateData).length > 0) ||
-      (block.templateOverrides && Object.keys(block.templateOverrides).length > 0));
-  const { inputs, warning } = buildTemplatePreviewInputs(
-    templateName,
-    block,
-    headingText,
-    bodyText,
-  );
-
-  if (!inputs && !existingInputs) return { visual: null, warning };
-
-  const candidate: Block = {
-    ...block,
-    id: `template-preview-${block.id}-${templateName}`,
-    template: templateName,
-    title: headingText || block.title || templateName,
-    duration: 1,
-    audioSegment: 0,
-    layers: undefined,
-    templateData: sameTemplate ? block.templateData : undefined,
-    templateOverrides: sameTemplate ? block.templateOverrides : undefined,
-    ...(inputs ?? {}),
-  };
-
-  const ctx: MaterializeBlockLayersOptions = {
-    blockIndex: 0,
-    totalBlocks: 1,
-    theme,
-    viewport,
-    customTemplates: source.customTemplates,
-  };
-
-  try {
-    const materialized = materializeBlockLayers(candidate as unknown as DocBlock, ctx);
-    const { layers } = materialized;
-    if (layers.length === 0) return { visual: null, warning };
-    return {
-      visual: { ...candidate, layers },
-      warning: warning ?? materialized.diagnostic?.message,
-    };
-  } catch {
-    return { visual: null, warning };
-  }
-}
-
-function buildTemplatePreviewInputs(
-  templateName: string,
-  block: Block,
-  headingText: string,
-  bodyText: string,
-): { inputs: Record<string, unknown> | null; warning?: string } {
-  const contents = block.contents;
-  const text = [headingText, bodyText].filter(Boolean).join('\n');
-
-  switch (templateName) {
-    case 'title':
-      return {
-        inputs: text
-          ? {
-              title: headingText || firstLine(bodyText) || 'Untitled',
-              ...(headingText && bodyText ? { subtitle: bodyText } : {}),
-            }
-          : null,
-      };
-    case 'sectionHeader': {
-      if (!text) return { inputs: null };
-      const image = extractImages(contents, 1)[0];
-      return {
-        inputs: {
-          title: headingText || firstLine(bodyText) || 'Untitled',
-          ...(image
-            ? {
-                imageSrc: image.src,
-                imageAlt: image.alt || headingText,
-              }
-            : {}),
-        },
-      };
-    }
-    case 'statHighlight':
-      if (!NUMBER_RE.test(text)) {
-        return { inputs: null, warning: 'No stat found in this block' };
-      }
-      return {
-        inputs: deriveTemplateInputs(templateName, headingText, contents, { placeholders: false }),
-      };
-    case 'quote':
-    case 'fullBleedQuote': {
-      const quoteText = extractBlockquoteText(contents) || bodyText;
-      return {
-        inputs: quoteText
-          ? deriveTemplateInputs(templateName, headingText, contents, { placeholders: false })
-          : null,
-      };
-    }
-    case 'pullQuote':
-      return {
-        inputs: derivePullQuoteInputs(block, headingText, bodyText),
-        ...(extractImages(contents, 1).length === 0
-          ? { warning: 'No image found in this block' }
-          : {}),
-      };
-    case 'factCard':
-    case 'definitionCard':
-      return {
-        inputs:
-          headingText && bodyText
-            ? deriveTemplateInputs(templateName, headingText, contents, { placeholders: false })
-            : null,
-      };
-    case 'twoColumn':
-      return { inputs: deriveTwoColumnInputs(block, headingText, bodyText) };
-    case 'dateEvent':
-      if (!DATE_RE.test(text)) {
-        return { inputs: null, warning: 'No date found in this block' };
-      }
-      return {
-        inputs: deriveTemplateInputs(templateName, headingText, contents, { placeholders: false }),
-      };
-    case 'comparisonBar': {
-      const comparisonInputs = deriveComparisonInputs(block);
-      return {
-        inputs: comparisonInputs,
-        ...(comparisonInputs ? {} : { warning: 'No stat found in this block' }),
-      };
-    }
-    case 'imageWithCaption':
-    case 'leftFeature':
-    case 'rightFeature':
-    case 'photoGrid': {
-      const imageCount = extractImages(contents, templateName === 'photoGrid' ? 2 : 1).length;
-      const needsMoreImages = templateName === 'photoGrid' ? imageCount < 2 : imageCount === 0;
-      return {
-        inputs: needsMoreImages
-          ? null
-          : deriveTemplateInputs(templateName, headingText, contents, { placeholders: false }),
-        ...(needsMoreImages ? { warning: 'No image found in this block' } : {}),
-      };
-    }
-    case 'map':
-      return { inputs: null };
-    case 'videoWithCaption':
-    case 'videoPullQuote':
-      return {
-        inputs: null,
-        ...(hasAudioVideoMedia(contents) ? {} : { warning: 'No audio/video found in this block' }),
-      };
-    case 'diagram':
-    case 'layout':
-    case 'drawing':
-      return {
-        inputs: block.children && block.children.length > 0 ? { title: headingText } : null,
-      };
-    default:
-      return {
-        inputs: deriveTemplateInputs(templateName, headingText, contents, { placeholders: false }),
-      };
-  }
-}
-
-function derivePullQuoteInputs(
-  block: Block,
-  headingText: string,
-  bodyText: string,
-): Record<string, unknown> | null {
-  const image = extractImages(block.contents, 1)[0];
-  const text = extractBlockquoteText(block.contents) || bodyText || headingText;
-  if (!image || !text) return null;
-  return {
-    text,
-    backgroundImage: {
-      src: image.src,
-      alt: image.alt || headingText,
-    },
-  };
-}
-
-function deriveTwoColumnInputs(
-  block: Block,
-  headingText: string,
-  bodyText: string,
-): Record<string, unknown> | null {
-  const items = extractListItems(block.contents);
-  if (items.length >= 2) {
-    return {
-      ...(headingText ? { header: headingText } : {}),
-      left: { label: trimPreviewText(items[0]) },
-      right: { label: trimPreviewText(items[1]) },
-    };
-  }
-
-  const chunks = bodyText
-    .split(/\n{2,}|\n|(?<=[.!?])\s+/)
-    .map((part) => part.trim())
-    .filter(Boolean);
-  if (headingText && chunks.length >= 1) {
-    return {
-      left: { label: trimPreviewText(headingText) },
-      right: { label: trimPreviewText(chunks[0]) },
-    };
-  }
-  if (chunks.length >= 2) {
-    return {
-      left: { label: trimPreviewText(chunks[0]) },
-      right: { label: trimPreviewText(chunks[1]) },
-    };
-  }
-  return null;
-}
-
-function deriveComparisonInputs(block: Block): Record<string, unknown> | null {
-  const table = extractTableFromContents(block.contents);
-  if (table) {
-    const values = table.rows
-      .map((row) => ({
-        label: row[0] || 'Value',
-        value: parseNumericValue(row.slice(1).join(' ')),
-      }))
-      .filter((row): row is { label: string; value: number } => row.value !== null);
-    if (values.length >= 2) {
-      return {
-        leftLabel: trimPreviewText(values[0].label, 24),
-        leftValue: values[0].value,
-        rightLabel: trimPreviewText(values[1].label, 24),
-        rightValue: values[1].value,
-      };
-    }
-  }
-
-  const bodyText = extractBodyPlainText(block.contents);
-  const matches = Array.from(bodyText.matchAll(new RegExp(NUMBER_RE.source, 'gi')))
-    .map((match) => parseNumericValue(match[0]))
-    .filter((value): value is number => value !== null);
-  if (matches.length < 2) return null;
-
-  return {
-    leftLabel: 'A',
-    leftValue: matches[0],
-    rightLabel: 'B',
-    rightValue: matches[1],
-  };
-}
-
-function parseNumericValue(raw: string): number | null {
-  const normalized = raw
-    .replace(/[$\u20ac\u00a3\u00a5,%\u2030]/g, '')
-    .replace(/,/g, '')
-    .trim();
-  const match = normalized.match(/-?\d+(?:\.\d+)?/);
-  if (!match) return null;
-  const value = Number.parseFloat(match[0]);
-  return Number.isFinite(value) ? value : null;
-}
-
-function hasAudioVideoMedia(value: unknown): boolean {
-  if (typeof value === 'string') {
-    return (
-      AUDIO_VIDEO_TAG_RE.test(value) ||
-      AUDIO_VIDEO_SOURCE_RE.test(value) ||
-      AUDIO_VIDEO_MIME_RE.test(value)
-    );
-  }
-  if (Array.isArray(value)) return value.some(hasAudioVideoMedia);
-  if (!value || typeof value !== 'object') return false;
-
-  const record = value as Record<string, unknown>;
-  const tagName = typeof record.tagName === 'string' ? record.tagName.toLowerCase() : '';
-  if (tagName === 'audio' || tagName === 'video') return true;
-  if (record.type === 'audio' || record.type === 'video') return true;
-
-  const attributes = record.attributes;
-  if (attributes && typeof attributes === 'object') {
-    const attrs = attributes as Record<string, unknown>;
-    if (hasAudioVideoMedia(attrs.src) || hasAudioVideoMedia(attrs.type)) return true;
-  }
-
-  return Object.values(record).some(hasAudioVideoMedia);
-}
-
-function getHeadingText(block: Block): string {
-  if (block.sourceHeading) return extractPlainText(block.sourceHeading).trim();
-  return (block.title ?? block.id ?? '').trim();
-}
-
-function firstLine(value: string): string {
-  return (
-    value
-      .split(/\r?\n/)
-      .map((line) => line.trim())
-      .find(Boolean) ?? ''
-  );
-}
-
-function trimPreviewText(value: string, max = 72): string {
-  const normalized = value.replace(/\s+/g, ' ').trim();
-  if (normalized.length <= max) return normalized;
-  return `${normalized.slice(0, max - 1).trimEnd()}...`;
-}