@bendyline/squisq-editor-react 1.2.0 → 1.2.2

package/src/PreviewControls.tsx

@@ -10,7 +10,7 @@
  * - PreviewPanel (the actual player, which reads the selected values)
  */
 
-import { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import { createContext, useContext, useState, useMemo, useEffect, useRef } from 'react';
 import type { ReactNode } from 'react';
 import type { DisplayMode, CaptionStyle } from '@bendyline/squisq-react';
 import type { ViewportPreset, ViewportConfig } from '@bendyline/squisq/schemas';
@@ -233,90 +233,132 @@ const selectStyle: React.CSSProperties = {
 
 // ── Toolbar Controls Component ───────────────────────────────────
 
+/** Hook to track whether the viewport is narrow. */
+function useIsNarrow(breakpoint = 600): boolean {
+  const [narrow, setNarrow] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth <= breakpoint,
+  );
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const handler = (e: MediaQueryListEvent) => setNarrow(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [breakpoint]);
+  return narrow;
+}
+
 /**
  * Inline preview controls rendered in the main toolbar row.
- * Reads from PreviewSettingsContext.
+ * On narrow viewports, collapses into a single settings button with a dropdown.
  */
 export function PreviewToolbarControls() {
   const s = usePreviewSettings();
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '6px',
-        flexWrap: 'wrap',
-        padding: '2px 0 2px 9px',
-      }}
-    >
-      <label style={labelStyle}>Format:</label>
-      <select
+  const isNarrow = useIsNarrow(768);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Close popover on outside click
+  useEffect(() => {
+    if (!popoverOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        setPopoverOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [popoverOpen]);
+
+  const controls = (
+    <>
+      <PreviewSelect
+        label="Format"
         value={s.activePreset}
-        onChange={(e) => s.setSelectedPreset(e.target.value as ViewportPreset)}
-        style={selectStyle}
-      >
-        {VIEWPORT_OPTIONS.map((o) => (
-          <option key={o.key} value={o.key}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-
-      <Divider />
-
-      <label style={labelStyle}>Mode:</label>
-      <select
+        options={VIEWPORT_OPTIONS}
+        onChange={(v) => s.setSelectedPreset(v as ViewportPreset)}
+        compact={isNarrow}
+      />
+      <PreviewSelect
+        label="Mode"
         value={s.activeDisplayMode}
-        onChange={(e) => s.setSelectedDisplayMode(e.target.value as DisplayMode)}
-        style={selectStyle}
-      >
-        {DISPLAY_MODE_OPTIONS.map((o) => (
-          <option key={o.key} value={o.key}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-
-      <Divider />
-
-      <label style={labelStyle}>Theme:</label>
-      <select
+        options={DISPLAY_MODE_OPTIONS}
+        onChange={(v) => s.setSelectedDisplayMode(v as DisplayMode)}
+        compact={isNarrow}
+      />
+      <PreviewSelect
+        label="Theme"
         value={s.activeThemeId}
-        onChange={(e) => s.setSelectedThemeId(e.target.value)}
-        style={selectStyle}
-      >
-        {THEME_OPTIONS.map((o) => (
-          <option key={o.key} value={o.key}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-
-      <Divider />
-
-      <label style={labelStyle}>Transform:</label>
-      <select
+        options={THEME_OPTIONS}
+        onChange={(v) => s.setSelectedThemeId(v)}
+        compact={isNarrow}
+      />
+      <PreviewSelect
+        label="Transform"
         value={s.activeTransformStyle}
-        onChange={(e) => s.setSelectedTransformStyle(e.target.value)}
-        style={selectStyle}
-      >
-        {TRANSFORM_STYLE_OPTIONS.map((o) => (
-          <option key={o.key} value={o.key}>
-            {o.label}
-          </option>
-        ))}
-      </select>
+        options={TRANSFORM_STYLE_OPTIONS}
+        onChange={(v) => s.setSelectedTransformStyle(v)}
+        compact={isNarrow}
+      />
+      <PreviewSelect
+        label="Captions"
+        value={s.activeCaptionStyle}
+        options={CAPTION_STYLE_OPTIONS}
+        onChange={(v) => s.setSelectedCaptionStyle(v as CaptionStyle)}
+        compact={isNarrow}
+      />
+    </>
+  );
 
-      <Divider />
+  if (isNarrow) {
+    return (
+      <div className="squisq-preview-controls-compact" ref={popoverRef}>
+        <button
+          className="squisq-toolbar-button"
+          onClick={() => setPopoverOpen((v) => !v)}
+          aria-label="Preview settings"
+          title="Preview settings"
+          aria-expanded={popoverOpen}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="8" cy="8" r="2.5" />
+            <path d="M13.5 8a5.5 5.5 0 01-.4 1.8l1.2 1.2-1.6 1.6-1.2-1.2A5.5 5.5 0 018 13.5a5.5 5.5 0 01-3.5-1.3L3.3 13.4 1.7 11.8l1.2-1.2A5.5 5.5 0 012.5 8c0-.6.1-1.2.4-1.8L1.7 5 3.3 3.4l1.2 1.2A5.5 5.5 0 018 2.5c1.3 0 2.5.5 3.5 1.3l1.2-1.2 1.6 1.6-1.2 1.2c.3.6.4 1.2.4 1.6z" />
+          </svg>
+        </button>
+        {popoverOpen && <div className="squisq-preview-controls-popover">{controls}</div>}
+      </div>
+    );
+  }
+
+  return <div className="squisq-preview-controls-inline">{controls}</div>;
+}
 
-      <label style={labelStyle}>Captions:</label>
-      <select
-        value={s.activeCaptionStyle}
-        onChange={(e) => s.setSelectedCaptionStyle(e.target.value as CaptionStyle)}
-        style={selectStyle}
-      >
-        {CAPTION_STYLE_OPTIONS.map((o) => (
+function PreviewSelect({
+  label,
+  value,
+  options,
+  onChange,
+  compact,
+}: {
+  label: string;
+  value: string;
+  options: { key: string; label: string }[];
+  onChange: (value: string) => void;
+  compact?: boolean;
+}) {
+  return (
+    <div className={`squisq-preview-control${compact ? ' squisq-preview-control--compact' : ''}`}>
+      <label style={labelStyle}>{label}:</label>
+      <select value={value} onChange={(e) => onChange(e.target.value)} style={selectStyle}>
+        {options.map((o) => (
           <option key={o.key} value={o.key}>
             {o.label}
           </option>
@@ -325,16 +367,3 @@ export function PreviewToolbarControls() {
     </div>
   );
 }
-
-function Divider() {
-  return (
-    <span
-      style={{
-        width: '1px',
-        height: '16px',
-        background: 'var(--squisq-border, #d1d5db)',
-        margin: '0 2px',
-      }}
-    />
-  );
-}

package/src/PreviewPanel.tsx

@@ -6,29 +6,20 @@
  *
  * The markdown-derived Doc (from markdownToDoc) contains hierarchical blocks
  * with template names, heading text, and body content — but no audio or
- * visual layers. This component bridges the gap by:
- *
- * 1. Flattening the block tree into a linear slide sequence
- * 2. Converting each block into a TemplateBlock-compatible object
- *    (mapping heading text → title, templateOverrides → template fields)
- * 3. Synthesizing a dummy audio segment so DocPlayer's timing works
- *    (the player enters fallback-timer mode when audio can't load)
- * 4. Passing the prepared Doc to DocPlayer for SVG-based rendering
+ * visual layers. This component bridges the gap by using buildPreviewDoc()
+ * to flatten blocks, convert them to TemplateBlock slides with interleaved
+ * images, and synthesize timing.
  */
 
 import { useState, useEffect } from 'react';
 import { DocPlayer, LinearDocView } from '@bendyline/squisq-react';
-import { flattenBlocks } from '@bendyline/squisq/doc';
-import { hasTemplate } from '@bendyline/squisq/doc';
-import { extractPlainText } from '@bendyline/squisq/markdown';
-import type { Block, Doc } from '@bendyline/squisq/schemas';
-import type { MarkdownBlockNode, MarkdownList, MarkdownNode } from '@bendyline/squisq/markdown';
-import { getChildren } from '@bendyline/squisq/markdown';
+import type { Doc } from '@bendyline/squisq/schemas';
 import { applyTransform } from '@bendyline/squisq/transform';
 import { resolveAudioMapping } from '@bendyline/squisq/doc';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import { useEditorContext } from './EditorContext';
 import { usePreviewSettings } from './PreviewControls';
+import { buildPreviewDoc } from './buildPreviewDoc';
 
 export interface PreviewPanelProps {
   /** Base path for resolving media URLs in DocPlayer */
@@ -39,325 +30,6 @@ export interface PreviewPanelProps {
   container?: ContentContainer | null;
 }
 
-// ── Helpers ────────────────────────────────────────────────────────
-
-/**
- * Extract plain text from an array of markdown block nodes.
- * Walks paragraphs, blockquotes, and list items to collect all text.
- */
-function extractBodyText(contents: MarkdownBlockNode[] | undefined): string {
-  if (!contents || contents.length === 0) return '';
-  const parts: string[] = [];
-  for (const node of contents) {
-    parts.push(extractPlainText(node));
-  }
-  return parts.join('\n').trim();
-}
-
-/**
- * Extract images from a block's markdown contents.
- * Walks the node tree recursively to find all MarkdownImage nodes.
- */
-function extractBlockImages(
-  contents: MarkdownBlockNode[] | undefined,
-): Array<{ src: string; alt: string }> {
-  if (!contents || contents.length === 0) return [];
-  const images: Array<{ src: string; alt: string }> = [];
-
-  function walk(node: MarkdownNode): void {
-    if ('type' in node && node.type === 'image' && 'url' in node) {
-      const img = node as { url: string; alt?: string };
-      if (img.url) {
-        images.push({ src: img.url, alt: img.alt ?? '' });
-      }
-    }
-    for (const child of getChildren(node)) {
-      walk(child);
-    }
-  }
-
-  for (const node of contents) {
-    walk(node);
-  }
-  return images;
-}
-
-/**
- * Collect all unique images from an entire Doc's block tree.
- * Walks nested children to find every image across all blocks.
- */
-function collectAllDocImages(blocks: Block[]): Array<{ src: string; alt: string }> {
-  const seen = new Set<string>();
-  const images: Array<{ src: string; alt: string }> = [];
-
-  function walkBlocks(blockList: Block[]): void {
-    for (const block of blockList) {
-      for (const img of extractBlockImages(block.contents)) {
-        if (!seen.has(img.src)) {
-          seen.add(img.src);
-          images.push(img);
-        }
-      }
-      if (block.children) {
-        walkBlocks(block.children);
-      }
-    }
-  }
-
-  walkBlocks(blocks);
-  return images;
-}
-
-/**
- * Extract list items from markdown body content.
- * Returns an array of plain text strings for each list item found.
- */
-function extractListItems(contents: MarkdownBlockNode[] | undefined): string[] {
-  if (!contents) return [];
-  const items: string[] = [];
-  for (const node of contents) {
-    if (node.type === 'list') {
-      for (const item of (node as MarkdownList).children) {
-        const text = extractPlainText(item).trim();
-        if (text) items.push(text);
-      }
-    }
-  }
-  return items;
-}
-
-/**
- * Provide sensible default fields for templates that require more than
- * just a `title`. This prevents crashes from undefined required fields
- * when the markdown annotations don't supply all template-specific values.
- */
-function getTemplateDefaults(
-  templateName: string,
-  headingText: string,
-  block: Block,
-): Record<string, unknown> {
-  const body = extractBodyText(block.contents);
-
-  switch (templateName) {
-    case 'statHighlight':
-      return {
-        stat: headingText,
-        description: body || headingText,
-      };
-
-    case 'quoteBlock':
-    case 'fullBleedQuote':
-    case 'pullQuote':
-      return {
-        quote: body || headingText,
-      };
-
-    case 'factCard':
-      return {
-        fact: headingText,
-        explanation: body || headingText,
-      };
-
-    case 'comparisonBar':
-      return {
-        leftLabel: 'A',
-        leftValue: 60,
-        rightLabel: 'B',
-        rightValue: 40,
-      };
-
-    case 'listBlock':
-      return {
-        items: extractListItems(block.contents) || ['Item 1', 'Item 2', 'Item 3'],
-      };
-
-    case 'definitionCard':
-      return {
-        term: headingText,
-        definition: body || headingText,
-      };
-
-    case 'dateEvent':
-      return {
-        date: headingText,
-        description: body || headingText,
-      };
-
-    default:
-      return {};
-  }
-}
-
-/**
- * Convert a markdown-derived Block into a TemplateBlock-compatible object.
- *
- * The block's heading text becomes `title` (works for sectionHeader,
- * titleBlock, factCard, etc.). Any templateOverrides from annotation
- * syntax `{[template key=value]}` are spread on top so template-specific
- * fields (stat, quote, description, …) are available.
- *
- * If the requested template doesn't exist in the registry, falls back
- * to `sectionHeader` to avoid "Unknown template" warnings.
- */
-function blockToSlide(block: Block, index: number): Record<string, unknown> {
-  const headingText = block.sourceHeading
-    ? extractPlainText(block.sourceHeading)
-    : block.title || block.id || `Slide ${index + 1}`;
-
-  // Validate template name — fall back to sectionHeader for unknowns
-  const requestedTemplate = block.template || 'sectionHeader';
-  const template = hasTemplate(requestedTemplate) ? requestedTemplate : 'sectionHeader';
-
-  // Get sensible defaults for templates that need more than just `title`
-  const defaults = getTemplateDefaults(template, headingText, block);
-
-  // Spread the block itself to pick up any template-specific fields
-  // placed directly on the block by applyTransform (e.g. stat, description,
-  // quote, colorScheme). These are not in templateOverrides — they live
-  // on the block object because the transform produces hybrid Block+Template
-  // objects via the timing allocator.
-  const {
-    id: _id,
-    startTime: _st,
-    duration: _d,
-    audioSegment: _as,
-    layers: _l,
-    transition: _tr,
-    template: _t,
-    title: _ti,
-    children: _c,
-    contents: _co,
-    sourceHeading: _sh,
-    templateOverrides: _to,
-    ...extraFields
-  } = block as unknown as Record<string, unknown>;
-
-  return {
-    id: block.id,
-    template,
-    duration: block.duration,
-    audioSegment: 0,
-    transition: index > 0 ? { type: 'fade', duration: 0.5 } : undefined,
-    // Provide heading text as title — consumed by sectionHeader, titleBlock, etc.
-    title: headingText,
-    // Template-specific defaults (safe fallbacks for required fields)
-    ...defaults,
-    // Template-specific fields from transform (stat, description, quote, etc.)
-    ...extraFields,
-    // Spread annotation overrides last so explicit values win
-    ...block.templateOverrides,
-  };
-}
-
-/** Ambient motions to rotate on image slides. */
-const IMAGE_MOTIONS: Array<'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight'> = [
-  'zoomIn',
-  'zoomOut',
-  'panLeft',
-  'panRight',
-];
-
-/**
- * Build a player-ready Doc from the markdown-derived Doc.
- *
- * Flattens hierarchical blocks, converts each to a TemplateBlock-compatible
- * slide, recalculates timing, and adds a synthetic audio segment.
- *
- * Images found in the markdown are used in two ways:
- * 1. Per-block: if a block has images, its first image becomes the background
- *    (via imageWithCaption template) or an accent image on text templates.
- * 2. Global: remaining images are interleaved as standalone image slides
- *    for visual variety.
- */
-function buildPreviewDoc(doc: Doc): Doc {
-  const flat = flattenBlocks(doc.blocks);
-
-  // Collect all images from the doc for global interleaving
-  const allImages = collectAllDocImages(doc.blocks);
-
-  // Track which images are used per-block so we can interleave the rest
-  const usedImageSrcs = new Set<string>();
-
-  // First pass: convert blocks to slides, using per-block images
-  const slides: Record<string, unknown>[] = [];
-  let motionIndex = 0;
-
-  for (let i = 0; i < flat.length; i++) {
-    const block = flat[i];
-    const blockImages = extractBlockImages(block.contents);
-    const slide = blockToSlide(block, i);
-
-    // If the block has images and is using the default sectionHeader template,
-    // upgrade it to imageWithCaption so the image becomes the slide background.
-    if (blockImages.length > 0 && slide.template === 'sectionHeader') {
-      const img = blockImages[0];
-      usedImageSrcs.add(img.src);
-      slide.template = 'imageWithCaption';
-      slide.imageSrc = img.src;
-      slide.imageAlt = img.alt;
-      slide.caption = slide.title as string;
-      slide.captionPosition = 'bottom';
-      slide.ambientMotion = IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length];
-    } else if (blockImages.length > 0) {
-      // For other templates, add the first image as an accent
-      const img = blockImages[0];
-      usedImageSrcs.add(img.src);
-      if (!slide.accentImage) {
-        slide.accentImage = {
-          src: img.src,
-          alt: img.alt,
-          position: 'left-strip',
-          ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length],
-        };
-      }
-    }
-
-    slides.push(slide);
-  }
-
-  // Second pass: interleave unused images as standalone imageWithCaption slides.
-  // Spread them evenly through the sequence for visual variety.
-  const unusedImages = allImages.filter((img) => !usedImageSrcs.has(img.src));
-  if (unusedImages.length > 0 && slides.length > 0) {
-    const interval = Math.max(2, Math.floor(slides.length / (unusedImages.length + 1)));
-    let insertOffset = 0;
-    for (let imgIdx = 0; imgIdx < unusedImages.length; imgIdx++) {
-      const insertAt = Math.min((imgIdx + 1) * interval + insertOffset, slides.length);
-      const img = unusedImages[imgIdx];
-      slides.splice(insertAt, 0, {
-        id: `img-interleave-${imgIdx}`,
-        template: 'imageWithCaption',
-        duration: 5,
-        audioSegment: 0,
-        imageSrc: img.src,
-        imageAlt: img.alt,
-        ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length],
-        transition: { type: 'fade', duration: 0.5 },
-      });
-      insertOffset++;
-    }
-  }
-
-  // Recalculate sequential timing
-  let t = 0;
-  for (const slide of slides) {
-    slide.startTime = t;
-    t += slide.duration as number;
-  }
-
-  return {
-    articleId: doc.articleId,
-    duration: t,
-    blocks: slides as unknown as Block[],
-    audio: {
-      // Synthetic segment — audio will fail to load and DocPlayer will use
-      // its fallback timer to advance currentTime via requestAnimationFrame.
-      segments: t > 0 ? [{ src: '', name: 'preview', duration: t, startTime: 0 }] : [],
-    },
-    ...(doc.captions ? { captions: doc.captions } : {}),
-  };
-}
-
 // ── Component ──────────────────────────────────────────────────────
 
 /**

package/src/RawEditor.tsx

@@ -12,7 +12,16 @@ import * as monaco from 'monaco-editor';
 import { useEditorContext } from './EditorContext';
 import { getAvailableTemplates } from '@bendyline/squisq/doc';
 
-// Use locally installed monaco-editor instead of CDN
+// Use locally installed monaco-editor instead of CDN.
+//
+// NOTE: By default this imports the full monaco-editor with all 80+ languages
+// and workers (~9MB). Consumers can dramatically reduce bundle size by aliasing
+// 'monaco-editor' to a slim entry in their bundler config. For example with Vite:
+//
+//   resolve: { alias: [{ find: /^monaco-editor$/, replacement: './monaco-slim.ts' }] }
+//
+// Where monaco-slim.ts re-exports 'monaco-editor/esm/vs/editor/editor.api' plus
+// only the language contributions needed (e.g. markdown, javascript, etc.).
 loader.config({ monaco });
 
 export interface RawEditorProps {

package/src/Toolbar.tsx

@@ -150,13 +150,28 @@ export function Toolbar({
   // Hidden file input for image picker
   const imageInputRef = useRef<HTMLInputElement>(null);
 
+  // ── Narrow-screen detection ──────────────────────────
+  const [isNarrow, setIsNarrow] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 768px)').matches,
+  );
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 768px)');
+    const handler = (e: MediaQueryListEvent) => setIsNarrow(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
   // ── Overflow detection ────────────────────────────────
   const actionsRef = useRef<HTMLDivElement>(null);
-  const [overflowIndex, setOverflowIndex] = useState<number | null>(null);
+  const [measuredOverflowIndex, setMeasuredOverflowIndex] = useState<number | null>(null);
   const [showOverflow, setShowOverflow] = useState(false);
   const overflowRef = useRef<HTMLDivElement>(null);
 
+  // On narrow screens, force all buttons into the overflow menu
+  const overflowIndex = isNarrow ? 0 : measuredOverflowIndex;
+
   useEffect(() => {
+    if (isNarrow) return; // Skip measurement on narrow — everything overflows
     const container = actionsRef.current;
     if (!container) return;
 
@@ -174,14 +189,14 @@ export function Toolbar({
           firstHidden = i;
         }
       });
-      setOverflowIndex(firstHidden);
+      setMeasuredOverflowIndex(firstHidden);
     };
 
     const ro = new ResizeObserver(measure);
     ro.observe(container);
     measure();
     return () => ro.disconnect();
-  }, [activeView]);
+  }, [activeView, isNarrow]);
 
   // Close overflow menu on outside click
   useEffect(() => {
@@ -538,8 +553,8 @@ export function Toolbar({
           </button>
         ))}
       </div>
-      {/* Formatting buttons — hidden in preview mode */}
-      {!isPreview && (
+      {/* Formatting buttons — hidden in preview mode and on narrow screens */}
+      {!isPreview && !isNarrow && (
         <div className="squisq-toolbar-actions" ref={actionsRef}>
           {groups.map((group, gi) => (
             <div key={group} className="squisq-toolbar-group">