@bendyline/squisq-react 1.4.2 → 2.0.1

package/src/MarkdownRenderer.tsx

@@ -158,27 +158,12 @@ function renderInline(
 
       case 'htmlInline':
         if (ctx.htmlPolicy === 'strip') return null;
-        // Fast path: no <video>/<audio> in the subtree → use the original
-        // rawHtml passthrough (preserves arbitrary HTML for custom embeds).
-        if (
-          ctx.htmlPolicy === 'trusted' &&
-          !containsMediaTag(node.htmlChildren) &&
-          !containsDangerousTag(node.htmlChildren) &&
-          !hasDangerousRawHtml(node.rawHtml)
-        ) {
-          return (
-            <span
-              key={key}
-              className="squisq-md-html-inline"
-              dangerouslySetInnerHTML={{ __html: node.rawHtml }}
-            />
-          );
-        }
-        // Otherwise reconstruct the subtree as React so <video>/<audio>
-        // go through MediaContext-aware player components.
+        // Reconstruct every subtree as React. Besides routing media through
+        // MediaContext, this keeps event-handler attributes and unsafe URLs
+        // out of the DOM even when the caller selected `trusted` structure.
         return (
           <span key={key} className="squisq-md-html-inline">
-            {renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`)}
+            {renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx)}
           </span>
         );
 
@@ -292,27 +277,11 @@ function renderBlock(
 
     case 'htmlBlock':
       if (ctx.htmlPolicy === 'strip') return null;
-      // Fast path: no <video>/<audio> → preserve the existing rawHtml
-      // passthrough so arbitrary HTML embeds still survive verbatim.
-      if (
-        ctx.htmlPolicy === 'trusted' &&
-        !containsMediaTag(node.htmlChildren) &&
-        !containsDangerousTag(node.htmlChildren) &&
-        !hasDangerousRawHtml(node.rawHtml)
-      ) {
-        return (
-          <div
-            key={key}
-            className="squisq-md-html-block"
-            dangerouslySetInnerHTML={{ __html: node.rawHtml }}
-          />
-        );
-      }
-      // Otherwise reconstruct subtree as React so <video>/<audio>
-      // route through the player components and resolve via MediaContext.
+      // The structural walker is deliberately the only rendering path: raw
+      // HTML strings never bypass the tag, attribute, and URL policy below.
       return (
         <div key={key} className="squisq-md-html-block">
-          {renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`)}
+          {renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx)}
         </div>
       );
 
@@ -467,25 +436,13 @@ function MdImage({ src, alt, title }: { src: string; alt: string; title?: string
 
 // ── Raw-HTML walker (intercepts <video>/<audio>) ─────────────────
 
-/** True when the htmlElement subtree contains a tag we want to swap
- *  for a React component. Cheap recursive scan — lets us keep the
- *  `dangerouslySetInnerHTML` fast path for everything else. */
+/** Apply the caller's structural HTML policy before React reconstruction. */
 function resolveHtmlNodes(nodes: HtmlNode[], htmlPolicy: HtmlPolicy): HtmlNode[] {
   if (htmlPolicy === 'strip') return [];
   if (htmlPolicy === 'trusted') return nodes;
   return sanitizeHtmlNodes(nodes);
 }
 
-function containsMediaTag(nodes: HtmlNode[]): boolean {
-  for (const node of nodes) {
-    if (node.type !== 'htmlElement') continue;
-    const tagName = node.tagName.toLowerCase();
-    if (tagName === 'video' || tagName === 'audio') return true;
-    if (containsMediaTag(node.children)) return true;
-  }
-  return false;
-}
-
 /**
  * Tags that can escape their container and affect the whole host
  * document — global styling, script execution, external/resource loads,
@@ -510,41 +467,9 @@ const DANGEROUS_HTML_TAGS = new Set([
   'title',
 ]);
 
-/** True when the subtree contains any host-affecting tag (see
- *  {@link DANGEROUS_HTML_TAGS}). Mirrors {@link containsMediaTag}: keeps
- *  such content off the verbatim `dangerouslySetInnerHTML` fast path so
- *  it routes through the React reconstruction, which drops the tag. */
-function containsDangerousTag(nodes: HtmlNode[]): boolean {
-  for (const node of nodes) {
-    if (node.type !== 'htmlElement') continue;
-    if (DANGEROUS_HTML_TAGS.has(node.tagName.toLowerCase())) return true;
-    if (containsDangerousTag(node.children)) return true;
-  }
-  return false;
-}
-
-/**
- * Raw-string backstop for {@link DANGEROUS_HTML_TAGS}. The structural
- * {@link containsDangerousTag} check covers the normal case, but a block
- * parsed with `parseHtml: false` carries an empty `htmlChildren` while
- * `rawHtml` still holds the markup — so the verbatim fast path scans the
- * raw string too, guaranteeing a `<style>`/`<script>` can never be
- * injected into the host document by that path no matter how the node
- * was produced. The `\b` keeps `<styled-thing>` from matching `<style>`.
- */
-const DANGEROUS_RAW_HTML_RE =
-  /<\s*\/?\s*(?:base|embed|iframe|link|meta|object|script|style|title)\b/i;
-
-function hasDangerousRawHtml(rawHtml: string): boolean {
-  return DANGEROUS_RAW_HTML_RE.test(rawHtml);
-}
-
 /** A pragmatic shortlist of HTML attributes the raw-HTML walker
  *  passes through to React when reconstructing a non-media element.
- *  Anything outside this list is silently dropped — the media-tag
- *  fast path means most authors will never hit this code, so we
- *  keep the surface narrow to avoid React warnings about unknown
- *  attributes. */
+ *  Anything outside this list is silently dropped. */
 const PASSTHROUGH_ATTRS: Record<string, string> = {
   // common
   class: 'className',
@@ -564,7 +489,10 @@ const PASSTHROUGH_ATTRS: Record<string, string> = {
   rel: 'rel',
 };
 
-function reactPropsFromAttrs(attrs: Record<string, string>): Record<string, unknown> {
+function reactPropsFromAttrs(
+  attrs: Record<string, string>,
+  ctx: RenderCtx,
+): Record<string, unknown> {
   const out: Record<string, unknown> = {};
   for (const [name, value] of Object.entries(attrs)) {
     const propName = PASSTHROUGH_ATTRS[name];
@@ -576,26 +504,36 @@ function reactPropsFromAttrs(attrs: Record<string, string>): Record<string, unkn
       out['data-style'] = value;
       continue;
     }
+    if (propName === 'href') {
+      const href = sanitizeUrl(value, 'link', { extraLinkSchemes: ctx.linkSchemes });
+      if (href) out.href = href;
+      continue;
+    }
+    if (propName === 'src') {
+      const src = sanitizeUrl(value, 'media');
+      if (src) out.src = src;
+      continue;
+    }
     out[propName] = value;
   }
   return out;
 }
 
-function renderHtmlElement(el: HtmlElement, key: string): React.ReactNode {
+function renderHtmlElement(el: HtmlElement, key: string, ctx: RenderCtx): React.ReactNode {
   const tagName = el.tagName.toLowerCase();
-  // Final safety net: never reconstruct a host-affecting element (e.g. a
-  // <style> that would leak globally), whatever the policy. The fast path
-  // is gated by containsDangerousTag, so trusted content carrying these
-  // tags lands here — drop the tag and keep the rest of the subtree.
+  // Never reconstruct a host-affecting element (e.g. a <style> that would
+  // leak globally), whatever the policy.
   if (DANGEROUS_HTML_TAGS.has(tagName)) return null;
   if (tagName === 'video') {
+    const src = sanitizeUrl(el.attributes.src ?? '', 'media') ?? '';
+    const poster = sanitizeUrl(el.attributes.poster ?? '', 'media') ?? undefined;
     return (
       <InlineVideoPlayer
         key={key}
-        src={el.attributes.src ?? ''}
+        src={src}
         width={el.attributes.width}
         height={el.attributes.height}
-        poster={el.attributes.poster}
+        poster={poster}
         // The `controls` attribute is a boolean — present means true,
         // even if its value is an empty string.
         controls={'controls' in el.attributes}
@@ -610,10 +548,11 @@ function renderHtmlElement(el: HtmlElement, key: string): React.ReactNode {
     );
   }
   if (tagName === 'audio') {
+    const src = sanitizeUrl(el.attributes.src ?? '', 'media') ?? '';
     return (
       <InlineAudioPlayer
         key={key}
-        src={el.attributes.src ?? ''}
+        src={src}
         controls={'controls' in el.attributes}
         preload={
           el.attributes.preload === 'none' ||
@@ -627,23 +566,27 @@ function renderHtmlElement(el: HtmlElement, key: string): React.ReactNode {
   }
 
   const Tag = tagName as keyof JSX.IntrinsicElements;
-  const props = reactPropsFromAttrs(el.attributes);
+  const props = reactPropsFromAttrs(el.attributes, ctx);
   if (el.selfClosing) {
     return <Tag key={key} {...props} />;
   }
   return (
     <Tag key={key} {...props}>
-      {renderHtmlNodes(el.children, `${key}c`)}
+      {renderHtmlNodes(el.children, `${key}c`, ctx)}
     </Tag>
   );
 }
 
-function renderHtmlNodes(nodes: HtmlNode[], keyPrefix: string): React.ReactNode[] {
+function renderHtmlNodes(
+  nodes: HtmlNode[],
+  keyPrefix: string,
+  ctx: RenderCtx = DEFAULT_CTX,
+): React.ReactNode[] {
   return nodes.map((node, i) => {
     const key = `${keyPrefix}${i}`;
     switch (node.type) {
       case 'htmlElement':
-        return renderHtmlElement(node, key);
+        return renderHtmlElement(node, key, ctx);
       case 'htmlText':
         return <Fragment key={key}>{node.value}</Fragment>;
       case 'htmlComment':

package/src/MediaClipLayer.tsx

@@ -27,6 +27,8 @@ export interface MediaClipLayerProps {
   isPlaying: boolean;
   basePath: string;
   renderMode?: boolean;
+  /** Silence every scheduled clip during live playback. */
+  muted?: boolean;
 }
 
 export function MediaClipLayer({
@@ -35,6 +37,7 @@ export function MediaClipLayer({
   isPlaying,
   basePath,
   renderMode = false,
+  muted = false,
 }: MediaClipLayerProps) {
   const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
   if (renderClips.length === 0) return null;
@@ -49,6 +52,7 @@ export function MediaClipLayer({
           isPlaying={isPlaying}
           basePath={basePath}
           renderMode={renderMode}
+          muted={muted}
         />
       ))}
     </div>
@@ -62,6 +66,7 @@ interface MediaClipElementProps {
   isPlaying: boolean;
   basePath: string;
   renderMode: boolean;
+  muted: boolean;
 }
 
 function MediaClipElement({
@@ -71,6 +76,7 @@ function MediaClipElement({
   isPlaying,
   basePath,
   renderMode,
+  muted,
 }: MediaClipElementProps) {
   const ref = useRef<HTMLMediaElement | null>(null);
   const src = useMediaUrl(clip.src, basePath);
@@ -96,7 +102,7 @@ function MediaClipElement({
     } else {
       el.pause();
     }
-  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart]);
+  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart, src]);
 
   const isVideo = clip.kind === 'video';
   const common = {
@@ -130,6 +136,10 @@ function MediaClipElement({
   }
 
   return (
-    <audio {...common} muted={renderMode} style={{ position: 'absolute', width: 0, height: 0 }} />
+    <audio
+      {...common}
+      muted={renderMode || muted}
+      style={{ position: 'absolute', width: 0, height: 0 }}
+    />
   );
 }

package/src/__tests__/BlockRenderer.test.tsx

@@ -1,15 +1,8 @@
 import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import { BlockRenderer, VIEWPORT } from '../BlockRenderer';
+import { BlockRenderer } from '../BlockRenderer';
 import type { Block } from '@bendyline/squisq/schemas';
 
-describe('VIEWPORT constant', () => {
-  it('has correct 1080p dimensions', () => {
-    expect(VIEWPORT.width).toBe(1920);
-    expect(VIEWPORT.height).toBe(1080);
-  });
-});
-
 describe('BlockRenderer', () => {
   const minimalBlock: Block = {
     id: 'test-block',
@@ -48,6 +41,63 @@ describe('BlockRenderer', () => {
     expect(svg?.getAttribute('viewBox')).toBe('0 0 1080 1920');
   });
 
+  it('pans dominant cover images across portrait frames without adding zoom', () => {
+    const portraitHero: Block = {
+      ...minimalBlock,
+      layers: [
+        {
+          type: 'image',
+          id: 'portrait-hero',
+          content: { src: 'wide-hero.jpg', alt: 'Wide hero', fit: 'cover' },
+          position: { x: 0, y: 0, width: '100%', height: '100%' },
+          animation: { type: 'slowZoom', duration: 9, direction: 'in' },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <BlockRenderer
+        block={portraitHero}
+        blockTime={0}
+        basePath="/test"
+        viewport={{ width: 1080, height: 1920 }}
+      />,
+    );
+
+    const layer = container.querySelector('[data-layer-id="portrait-hero"]');
+    const image = layer?.querySelector('img');
+    expect(layer?.getAttribute('data-image-framing')).toBe('portrait-pan');
+    expect(image?.classList.contains('squisq-image--portrait-pan-right')).toBe(true);
+    expect(layer?.classList.contains('anim-slowZoom-in')).toBe(false);
+    expect(image?.style.objectFit).toBe('cover');
+    expect(image?.style.getPropertyValue('--portrait-pan-duration')).toBe('9s');
+  });
+
+  it('keeps smaller portrait cover tiles static', () => {
+    const portraitTile: Block = {
+      ...minimalBlock,
+      layers: [
+        {
+          type: 'image',
+          id: 'portrait-tile',
+          content: { src: 'tile.jpg', alt: 'Tile', fit: 'cover' },
+          position: { x: '5%', y: '5%', width: '42%', height: '42%' },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <BlockRenderer
+        block={portraitTile}
+        blockTime={0}
+        basePath="/test"
+        viewport={{ width: 1080, height: 1920 }}
+      />,
+    );
+
+    expect(container.querySelector('[data-image-framing="portrait-pan"]')).toBeNull();
+  });
+
   it('renders text layers', () => {
     const blockWithText: Block = {
       id: 'text-block',
@@ -102,4 +152,84 @@ describe('BlockRenderer', () => {
     const rect = container.querySelector('rect');
     expect(rect).toBeTruthy();
   });
+
+  it('namespaces SVG definitions per renderer instance', () => {
+    const { container } = render(
+      <>
+        <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />
+        <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />
+      </>,
+    );
+    const ids = Array.from(container.querySelectorAll('clipPath')).map((node) => node.id);
+    expect(ids).toHaveLength(2);
+    expect(new Set(ids).size).toBe(2);
+  });
+
+  it('renders transitions and layer animations by default', () => {
+    const animatedBlock: Block = {
+      ...minimalBlock,
+      transition: { type: 'fade', duration: 0.5 },
+      layers: [
+        {
+          type: 'text',
+          id: 'animated-title',
+          content: { text: 'Animated', style: { fontSize: 48, color: '#fff' } },
+          position: { x: 100, y: 100 },
+          animation: { type: 'fadeIn', duration: 1 },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <BlockRenderer block={animatedBlock} blockTime={0} basePath="/test" isEntering />,
+    );
+
+    expect(container.querySelector('svg')?.classList.contains('transition-fade-enter')).toBe(true);
+    expect(
+      container
+        .querySelector('[data-layer-id="animated-title"]')
+        ?.classList.contains('anim-fadeIn'),
+    ).toBe(true);
+  });
+
+  it('suppresses transitions and every layer animation without mutating the block', () => {
+    const animatedBlock: Block = {
+      ...minimalBlock,
+      transition: { type: 'fade', duration: 0.5 },
+      layers: [
+        {
+          type: 'text',
+          id: 'animated-title',
+          content: { text: 'Static', style: { fontSize: 48, color: '#fff' } },
+          position: { x: 100, y: 100 },
+          animation: { type: 'fadeIn', duration: 1 },
+        },
+        {
+          type: 'image',
+          id: 'animated-hero',
+          content: { src: 'hero.jpg', alt: 'Hero', fit: 'cover' },
+          position: { x: 0, y: 0, width: '100%', height: '100%' },
+          animation: { type: 'slowZoom', duration: 5 },
+        },
+      ],
+    };
+    const originalAnimations = animatedBlock.layers?.map((layer) => layer.animation);
+
+    const { container } = render(
+      <BlockRenderer
+        block={animatedBlock}
+        blockTime={0}
+        basePath="/test"
+        isEntering
+        animationsEnabled={false}
+        viewport={{ width: 1080, height: 1920 }}
+      />,
+    );
+
+    expect(container.querySelector('svg')?.className.baseVal).not.toContain('transition-');
+    expect(container.querySelector('[class*="anim-"]')).toBeNull();
+    expect(container.querySelector('[data-image-framing="portrait-pan"]')).toBeNull();
+    expect(animatedBlock.transition).toEqual({ type: 'fade', duration: 0.5 });
+    expect(animatedBlock.layers?.map((layer) => layer.animation)).toEqual(originalAnimations);
+  });
 });

package/src/__tests__/DocControlsSlideshow.test.tsx

@@ -1,8 +1,14 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/react';
 import { DocControlsSlideshow } from '../DocControlsSlideshow';
 import type { PlaybackState, SlideNavActions } from '../types';
 
+const slides = [
+  { id: 'intro', label: '1', summary: 'Introduction' },
+  { id: 'results', label: '2', summary: 'Key results' },
+  { id: 'next', label: '3', summary: 'What comes next' },
+];
+
 function makeState(overrides: Partial<PlaybackState> = {}): PlaybackState {
   return {
     isPlaying: false,
@@ -49,6 +55,93 @@ describe('DocControlsSlideshow', () => {
     expect(getByTestId('slide-counter').textContent).toBe('5 / 12');
   });
 
+  it('opens an upward slide picker with block summaries', () => {
+    const { getByTestId, getByRole } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 1, totalBlocks: slides.length })}
+        slideNav={makeSlideNav()}
+        slides={slides}
+      />,
+    );
+
+    fireEvent.click(getByTestId('slide-counter'));
+
+    const picker = getByRole('menu', { name: 'Choose a slide' });
+    expect(picker.style.bottom).toBe('calc(100% + 8px)');
+    expect(getByTestId('slide-picker-item-0').textContent).toContain('1Introduction');
+    expect(getByTestId('slide-picker-item-1').textContent).toContain('2Key results');
+    expect(getByTestId('slide-picker-item-1').getAttribute('aria-current')).toBe('true');
+  });
+
+  it('uses the available player height above the toolbar', () => {
+    const { getByTestId } = render(
+      <div className="doc-player">
+        <DocControlsSlideshow
+          state={makeState({ currentBlockIndex: 1, totalBlocks: slides.length })}
+          slideNav={makeSlideNav()}
+          slides={slides}
+        />
+      </div>,
+    );
+    const controls = getByTestId('slideshow-controls');
+    const player = controls.parentElement as HTMLElement;
+    const rect = (top: number, height: number) =>
+      ({
+        x: 0,
+        y: top,
+        top,
+        right: 640,
+        bottom: top + height,
+        left: 0,
+        width: 640,
+        height,
+        toJSON: () => ({}),
+      }) as DOMRect;
+    const playerBounds = vi.spyOn(player, 'getBoundingClientRect').mockReturnValue(rect(0, 480));
+    const controlsBounds = vi
+      .spyOn(controls, 'getBoundingClientRect')
+      .mockReturnValue(rect(420, 40));
+
+    fireEvent.click(getByTestId('slide-counter'));
+
+    expect(getByTestId('slide-picker').style.maxHeight).toBe('396px');
+    playerBounds.mockRestore();
+    controlsBounds.mockRestore();
+  });
+
+  it('navigates directly to a selected slide and closes the picker', () => {
+    let selectedIndex = -1;
+    const { getByTestId, queryByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 0, totalBlocks: slides.length })}
+        slideNav={makeSlideNav({ goToSlide: (index) => (selectedIndex = index) })}
+        slides={slides}
+      />,
+    );
+
+    fireEvent.click(getByTestId('slide-counter'));
+    fireEvent.click(getByTestId('slide-picker-item-2'));
+
+    expect(selectedIndex).toBe(2);
+    expect(queryByTestId('slide-picker')).toBeNull();
+  });
+
+  it('closes the slide picker with Escape', () => {
+    const { getByTestId, queryByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 0, totalBlocks: slides.length })}
+        slideNav={makeSlideNav()}
+        slides={slides}
+      />,
+    );
+
+    fireEvent.click(getByTestId('slide-counter'));
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(queryByTestId('slide-picker')).toBeNull();
+    expect(document.activeElement).toBe(getByTestId('slide-counter'));
+  });
+
   it('disables prev button on first slide', () => {
     const { getByTestId } = render(
       <DocControlsSlideshow