@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/src/styles/index.css

@@ -5,6 +5,7 @@
 
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 @import './editor.css';
+@import './code-context.css';
 @import './folder-view.css';
 @import '../jsonEditor/json-editor.css';
 @import '../imageEditor/image-editor.css';

package/src/templateContentPreviewResolver.ts

@@ -0,0 +1,353 @@
+import type {
+  Block,
+  DocBlock,
+  MediaProvider,
+  Theme,
+  ViewportConfig,
+} from '@bendyline/squisq/schemas';
+import {
+  deriveTemplateInputs,
+  extractBodyPlainText,
+  extractBlockquoteText,
+  extractImages,
+  extractListItems,
+  extractTableFromContents,
+  getLayers,
+  type RenderContext,
+} from '@bendyline/squisq/doc';
+import { extractPlainText } from '@bendyline/squisq/markdown';
+
+export interface TemplatePreviewSource {
+  block: Block;
+  theme: Theme;
+  viewport: ViewportConfig;
+  basePath?: string;
+  mediaProvider?: MediaProvider | null;
+}
+
+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: RenderContext = {
+    blockIndex: 0,
+    totalBlocks: 1,
+    theme,
+    viewport,
+  };
+
+  try {
+    const layers = getLayers(candidate as unknown as DocBlock, ctx);
+    if (layers.length === 0) return { visual: null, warning };
+    return { visual: { ...candidate, layers } };
+  } 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()}...`;
+}

package/src/tiptapBridge.ts

@@ -85,12 +85,28 @@ export function markdownToTiptap(markdown: string): string {
   let listType: 'ul' | 'ol' | 'task' = 'ul';
   let inTable = false;
   let tableLines: string[] = [];
+  let pendingBlankLines = 0;
+
+  const flushPendingBlankParagraphs = () => {
+    if (pendingBlankLines === 0) return;
+    const emptyParagraphs =
+      outputBlocks.length === 0 ? pendingBlankLines : Math.max(0, pendingBlankLines - 1);
+    for (let i = 0; i < emptyParagraphs; i++) {
+      outputBlocks.push('<p></p>');
+    }
+    pendingBlankLines = 0;
+  };
+
+  const pushBlock = (block: string) => {
+    flushPendingBlankParagraphs();
+    outputBlocks.push(block);
+  };
 
   const flushList = () => {
     if (inList && listItems.length > 0) {
       const tag = listType === 'ol' ? 'ol' : 'ul';
       const attr = listType === 'task' ? ' data-type="taskList"' : '';
-      outputBlocks.push(`<${tag}${attr}>${listItems.join('')}</${tag}>`);
+      pushBlock(`<${tag}${attr}>${listItems.join('')}</${tag}>`);
       listItems = [];
       inList = false;
     }
@@ -111,7 +127,7 @@ export function markdownToTiptap(markdown: string): string {
     if (tableLines.length < 2 || !isSeparator) {
       // Not a valid table — render accumulated lines as paragraphs
       for (const tl of tableLines) {
-        outputBlocks.push(`<p>${inlineToHtml(tl)}</p>`);
+        pushBlock(`<p>${inlineToHtml(tl)}</p>`);
       }
       inTable = false;
       tableLines = [];
@@ -146,7 +162,7 @@ export function markdownToTiptap(markdown: string): string {
       })
       .join('');
 
-    outputBlocks.push(`<table><thead><tr>${thHtml}</tr></thead><tbody>${bodyHtml}</tbody></table>`);
+    pushBlock(`<table><thead><tr>${thHtml}</tr></thead><tbody>${bodyHtml}</tbody></table>`);
 
     inTable = false;
     tableLines = [];
@@ -159,15 +175,14 @@ export function markdownToTiptap(markdown: string): string {
     if (line.startsWith('```')) {
       if (!inCodeBlock) {
         flushList();
+        flushPendingBlankParagraphs();
         inCodeBlock = true;
         codeBlockLang = line.slice(3).trim();
         codeBlockLines = [];
         continue;
       } else {
         const langAttr = codeBlockLang ? ` class="language-${escapeHtml(codeBlockLang)}"` : '';
-        outputBlocks.push(
-          `<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`,
-        );
+        pushBlock(`<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`);
         inCodeBlock = false;
         codeBlockLang = '';
         codeBlockLines = [];
@@ -188,9 +203,12 @@ export function markdownToTiptap(markdown: string): string {
     // Blank line flushes list
     if (line.trim() === '') {
       flushList();
+      pendingBlankLines++;
       continue;
     }
 
+    flushPendingBlankParagraphs();
+
     // Headings
     const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
     if (headingMatch) {
@@ -233,8 +251,11 @@ export function markdownToTiptap(markdown: string): string {
         // tokens are stored raw — quotes included — so tiptapToMarkdown
         // can re-join them into the annotation verbatim.
         const tokens = tokenizeAttrTokens(templateInner);
-        attrs += ` data-template="${escapeHtml(tokens[0] ?? '')}"`;
-        const params = tokens.slice(1).filter((t) => t.includes('='));
+        const firstIsParam = tokens.length > 0 && tokens[0].indexOf('=') > 0;
+        if (!firstIsParam && tokens[0]) {
+          attrs += ` data-template="${escapeHtml(tokens[0])}"`;
+        }
+        const params = tokens.slice(firstIsParam ? 0 : 1).filter((t) => t.includes('='));
         if (params.length > 0) {
           attrs += ` data-template-params="${escapeHtml(params.join(' '))}"`;
         }
@@ -243,21 +264,21 @@ export function markdownToTiptap(markdown: string): string {
         attrs += ` data-block-attrs="${escapeHtml(pandocInner)}"`;
       }
 
-      outputBlocks.push(`<h${level}${attrs}>${inlineToHtml(text)}</h${level}>`);
+      pushBlock(`<h${level}${attrs}>${inlineToHtml(text)}</h${level}>`);
       continue;
     }
 
     // Thematic break
     if (/^(---|\*\*\*|___)(\s*)$/.test(line.trim())) {
       flushList();
-      outputBlocks.push('<hr>');
+      pushBlock('<hr>');
       continue;
     }
 
     // Blockquote
     if (line.startsWith('> ')) {
       flushList();
-      outputBlocks.push(`<blockquote><p>${inlineToHtml(line.slice(2))}</p></blockquote>`);
+      pushBlock(`<blockquote><p>${inlineToHtml(line.slice(2))}</p></blockquote>`);
       continue;
     }
 
@@ -325,7 +346,7 @@ export function markdownToTiptap(markdown: string): string {
       flushList();
       const alt = escapeHtml(standaloneImageMatch[1] ?? '');
       const src = escapeHtml(standaloneImageMatch[2] ?? '');
-      outputBlocks.push(`<img alt="${alt}" src="${src}">`);
+      pushBlock(`<img alt="${alt}" src="${src}">`);
       continue;
     }
 
@@ -337,7 +358,7 @@ export function markdownToTiptap(markdown: string): string {
     const trimmed = line.trim();
     if (/^<img\b[^>]*>$/i.test(trimmed)) {
       flushList();
-      outputBlocks.push(trimmed);
+      pushBlock(trimmed);
       continue;
     }
 
@@ -348,24 +369,23 @@ export function markdownToTiptap(markdown: string): string {
     // picks up the tag attributes (`src`, `controls`, …).
     if (/^<(?:video|audio)\b[^>]*>(?:[\s\S]*?<\/(?:video|audio)>)?$/i.test(trimmed)) {
       flushList();
-      outputBlocks.push(trimmed);
+      pushBlock(trimmed);
       continue;
     }
 
     // Regular paragraph
     flushList();
-    outputBlocks.push(`<p>${inlineToHtml(line)}</p>`);
+    pushBlock(`<p>${inlineToHtml(line)}</p>`);
   }
 
   // Close any remaining open blocks
   if (inCodeBlock) {
     const langAttr = codeBlockLang ? ` class="language-${escapeHtml(codeBlockLang)}"` : '';
-    outputBlocks.push(
-      `<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`,
-    );
+    pushBlock(`<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`);
   }
   flushList();
   flushTable();
+  flushPendingBlankParagraphs();
 
   return outputBlocks.join('') || '<p></p>';
 }
@@ -392,10 +412,11 @@ export function tiptapToMarkdown(html: string): string {
       let text = htmlToInline(headingMatch[3]);
 
       // Re-inject heading annotations from data attributes. Canonical
-      // emit order: Pandoc `{#…}` first, then squisq `{[…]}` template
-      // annotation (matches blockToMdast in core/markdown/convert.ts).
+      // emit order: Pandoc `{#…}` first, then squisq `{[…]}` annotation
+      // (matches blockToMdast in core/markdown/convert.ts).
       const blockAttrsMatch = attrs.match(/data-block-attrs="([^"]*)"/);
       const tmplMatch = attrs.match(/data-template="([^"]+)"/);
+      const paramsMatch = attrs.match(/data-template-params="([^"]+)"/);
       if (tmplMatch) {
         // Strip an accidental trailing copy of the template label that an
         // earlier broken build briefly rendered as real text inside the
@@ -409,11 +430,10 @@ export function tiptapToMarkdown(html: string): string {
         const inner = unescapeHtml(blockAttrsMatch[1]);
         text += ` {${inner}}`;
       }
-      if (tmplMatch) {
-        let annotation = tmplMatch[1];
-        const paramsMatch = attrs.match(/data-template-params="([^"]+)"/);
+      if (tmplMatch || paramsMatch) {
+        let annotation = tmplMatch ? tmplMatch[1] : '';
         if (paramsMatch) {
-          annotation += ' ' + unescapeHtml(paramsMatch[1]);
+          annotation += (annotation ? ' ' : '') + unescapeHtml(paramsMatch[1]);
         }
         text += ` {[${annotation}]}`;
       }
@@ -575,6 +595,8 @@ export function tiptapToMarkdown(html: string): string {
       if (text.trim()) {
         lines.push(text);
         lines.push('');
+      } else {
+        lines.push('');
       }
       remaining = remaining.slice(pMatch[0].length);
       continue;
@@ -633,13 +655,7 @@ export function tiptapToMarkdown(html: string): string {
     remaining = remaining.slice(1);
   }
 
-  // Clean up trailing blank lines
-  return (
-    lines
-      .join('\n')
-      .replace(/\n{3,}/g, '\n\n')
-      .trim() + '\n'
-  );
+  return lines.join('\n');
 }
 
 /**
@@ -793,6 +809,7 @@ function unescapeHtml(text: string): string {
     .replace(/&lt;/g, '<')
     .replace(/&gt;/g, '>')
     .replace(/&quot;/g, '"')
+    .replace(/&nbsp;|&#160;|&#xA0;/gi, '\u00a0')
     .replace(/&amp;/g, '&');
 }
 
@@ -869,7 +886,7 @@ function inlineToHtml(text: string): string {
   // eslint-disable-next-line no-control-regex
   result = result.replace(/\u0000PH(\d+)\u0000/g, (_m, idx) => placeholders[Number(idx)] ?? '');
 
-  return result;
+  return preserveLeadingSpaces(result);
 }
 
 /** Convert inline HTML back to markdown */
@@ -929,5 +946,15 @@ function htmlToInline(html: string): string {
   // Strip remaining tags
   result = result.replace(RE_STRIP_TAGS, '');
 
-  return unescapeHtml(result);
+  return restoreLeadingSpaces(unescapeHtml(result));
+}
+
+function preserveLeadingSpaces(html: string): string {
+  return html.replace(/^ +/, (spaces) => '&nbsp;'.repeat(spaces.length));
+}
+
+function restoreLeadingSpaces(text: string): string {
+  return text.replace(/(^|\n)(\u00a0+)/g, (_match, prefix: string, spaces: string) => {
+    return prefix + ' '.repeat(spaces.length);
+  });
 }