@bendyline/squisq-editor-react 1.4.0 → 1.5.0

package/src/PlainHtmlPreview.tsx

@@ -0,0 +1,211 @@
+/**
+ * PlainHtmlPreview
+ *
+ * Live WYSIWYG preview of the plain-HTML export. Renders the result of
+ * `markdownDocToPlainHtml` inside a sandboxed `<iframe srcDoc>` so the
+ * exported document's inline `<style>` block can't leak into the host
+ * page — and so the preview looks identical to what users get when they
+ * open the downloaded `.html`.
+ *
+ * Image handling: relative `<img src>` references in the markdown can't
+ * load directly from inside the iframe (there's no real document
+ * origin). When a `mediaProvider` is supplied, this component walks the
+ * parsed markdown for image refs, resolves each through
+ * `mediaProvider.resolveUrl()` (which returns a cached blob URL), and
+ * passes the resolved map to the renderer so the iframe gets blob URLs
+ * it can fetch.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import type { CSSProperties } from 'react';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import type { MarkdownDocument, HtmlNode } from '@bendyline/squisq/markdown';
+import type { MediaProvider, Theme } from '@bendyline/squisq/schemas';
+import { markdownDocToPlainHtml } from '@bendyline/squisq-formats/html';
+import { normalizeMalformedAssetUrl } from './utils/normalizeMalformedAssetUrl';
+import { collectInlineFontAwesomeCss } from './utils/collectInlineFontAwesomeCss';
+
+export interface PlainHtmlPreviewProps {
+  /** Raw markdown source. */
+  markdown: string;
+  /** Document title — populates the iframe's `<title>`. */
+  title?: string;
+  /**
+   * Pre-resolved image substitutions (export-time use). Takes precedence
+   * over live `mediaProvider` resolution for any URL it contains.
+   */
+  images?: Map<string, string>;
+  /**
+   * When passed, relative image URLs in the markdown are resolved live
+   * via this provider. Skip for static previews where `images` already
+   * contains everything.
+   */
+  mediaProvider?: MediaProvider | null;
+  /** Token that, when changed, forces re-resolution of media URLs.
+   *  Mirrors the `mediaRevision` bump the editor uses after an image
+   *  edit so saves show up in the preview without remount. */
+  mediaRevision?: number;
+  /**
+   * Squisq theme to apply. When set, the iframe loads any Google-
+   * hosted fonts the theme uses and the rendered HTML adopts the
+   * theme's colors and typography.
+   */
+  theme?: Theme;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const IFRAME_STYLE: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  border: 'none',
+  background: '#fff',
+  display: 'block',
+};
+
+export function PlainHtmlPreview({
+  markdown,
+  title,
+  images,
+  mediaProvider,
+  mediaRevision,
+  theme,
+  className,
+  style,
+}: PlainHtmlPreviewProps) {
+  const mdDoc = useMemo<MarkdownDocument>(() => parseMarkdown(markdown), [markdown]);
+
+  // Resolve any relative image URLs the doc references. Blob URLs are
+  // cheap once cached, so re-resolving on every keystroke is fine —
+  // `resolveUrl` is memoized inside the provider.
+  const [resolvedImages, setResolvedImages] = useState<Map<string, string> | null>(null);
+
+  useEffect(() => {
+    if (!mediaProvider) {
+      setResolvedImages(null);
+      return;
+    }
+    let cancelled = false;
+    const refs = Array.from(collectImageRefs(mdDoc));
+    Promise.all(
+      refs.map(async (ref) => {
+        // Word-style imports may have `http://<doc>_files/foo.png` —
+        // recover the relative path so the workspace provider resolves
+        // it, otherwise the iframe tries to fetch a nonsense hostname.
+        const recovered = normalizeMalformedAssetUrl(ref);
+        if (!recovered && isExternal(ref)) return [ref, ref] as const;
+        const lookup = recovered ?? ref;
+        try {
+          const url = await mediaProvider.resolveUrl(lookup);
+          return [ref, url] as const;
+        } catch {
+          return [ref, ref] as const;
+        }
+      }),
+    ).then((pairs) => {
+      if (cancelled) return;
+      const next = new Map<string, string>(pairs);
+      setResolvedImages(next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [mdDoc, mediaProvider, mediaRevision]);
+
+  const mergedImages = useMemo(() => {
+    if (!resolvedImages && !images) return undefined;
+    const merged = new Map<string, string>();
+    if (resolvedImages) for (const [k, v] of resolvedImages) merged.set(k, v);
+    if (images) for (const [k, v] of images) merged.set(k, v);
+    return merged;
+  }, [resolvedImages, images]);
+
+  // Gather FontAwesome @font-face + utility rules from the host page's
+  // own stylesheets so the iframe doesn't have to depend on a cross-
+  // origin CDN fetch (which sandbox / tracking-prevention can silently
+  // drop, leaving the icons invisible). The host (editor-react) already
+  // bundles FA, so the rules are guaranteed to be present and the font
+  // URLs inside them resolve to same-origin assets the iframe can
+  // fetch under `allow-same-origin`.
+  const iconsCss = useMemo(() => collectInlineFontAwesomeCss(), []);
+
+  const html = useMemo(
+    () => markdownDocToPlainHtml(mdDoc, { title, images: mergedImages, theme, iconsCss }),
+    [mdDoc, title, mergedImages, theme, iconsCss],
+  );
+
+  return (
+    <iframe
+      className={className}
+      data-testid="plain-html-preview"
+      title={title ?? 'HTML preview'}
+      srcDoc={html}
+      // `allow-same-origin` is required so the iframe can fetch blob:
+      // URLs created by the host's media provider. We intentionally do
+      // NOT include `allow-scripts` — the rendered HTML is plain-output
+      // markup with no JS, and refusing scripts hardens against
+      // accidental `<script>` content in user markdown.
+      sandbox="allow-same-origin"
+      style={{ ...IFRAME_STYLE, ...style }}
+    />
+  );
+}
+
+// ── Image collection ───────────────────────────────────────────────
+
+function isExternal(url: string): boolean {
+  return (
+    !url ||
+    url.startsWith('data:') ||
+    url.startsWith('blob:') ||
+    url.startsWith('http://') ||
+    url.startsWith('https://') ||
+    url.startsWith('//')
+  );
+}
+
+/**
+ * Collect every image URL referenced anywhere in the doc — markdown
+ * `image` nodes plus any `<img src>` inside raw HTML blocks/inlines
+ * (the WYSIWYG editor emits the HTML form for resized images).
+ */
+function collectImageRefs(doc: MarkdownDocument): Set<string> {
+  const refs = new Set<string>();
+
+  function visitHtml(nodes: HtmlNode[]): void {
+    for (const n of nodes) {
+      if (n.type !== 'htmlElement') continue;
+      const tag = n.tagName.toLowerCase();
+      // <img>, <video>, and <audio> all reference media via `src`.
+      // The export pipeline rewrites whichever map entries exist, so
+      // collecting them under the same set is enough — `ctx.images`
+      // is generic media despite the historical name.
+      if (tag === 'img' || tag === 'video' || tag === 'audio' || tag === 'source') {
+        const src = n.attributes.src;
+        if (typeof src === 'string' && src) refs.add(src);
+      }
+      if (tag === 'video' || tag === 'audio') {
+        const poster = n.attributes.poster;
+        if (typeof poster === 'string' && poster) refs.add(poster);
+      }
+      visitHtml(n.children);
+    }
+  }
+
+  function visit(node: unknown): void {
+    if (!node || typeof node !== 'object') return;
+    const n = node as Record<string, unknown>;
+    if (n.type === 'image' && typeof n.url === 'string' && n.url) {
+      refs.add(n.url);
+    }
+    if ((n.type === 'htmlBlock' || n.type === 'htmlInline') && Array.isArray(n.htmlChildren)) {
+      visitHtml(n.htmlChildren as HtmlNode[]);
+    }
+    if (Array.isArray(n.children)) {
+      for (const child of n.children) visit(child);
+    }
+  }
+
+  for (const child of doc.children) visit(child);
+  return refs;
+}

package/src/PreviewControls.tsx

@@ -10,14 +10,25 @@
  * - PreviewPanel (the actual player, which reads the selected values)
  */
 
-import { createContext, useContext, useState, useMemo, useEffect, useRef } from 'react';
+import {
+  createContext,
+  useCallback,
+  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';
 import { VIEWPORT_PRESETS, getThemeSummaries, resolveTheme } from '@bendyline/squisq/schemas';
 import type { Theme } from '@bendyline/squisq/schemas';
+import { ThemePicker } from './ThemePicker';
 import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
 import type { Doc } from '@bendyline/squisq/schemas';
+import { setFrontmatterValues } from '@bendyline/squisq/markdown';
+import { useEditorContext } from './EditorContext';
 
 // ── Context ──────────────────────────────────────────────────────
 
@@ -44,6 +55,16 @@ export function usePreviewSettings(): PreviewSettings {
   return ctx;
 }
 
+/**
+ * Like {@link usePreviewSettings} but returns `null` when no provider is
+ * mounted. For consumers (e.g. WysiwygEditor) that want to react to the
+ * active theme when available without forcing every test harness to
+ * wrap them in a PreviewSettingsProvider.
+ */
+export function usePreviewSettingsOptional(): PreviewSettings | null {
+  return useContext(PreviewSettingsContext);
+}
+
 // ── Frontmatter resolvers ────────────────────────────────────────
 
 function resolveRenderAs(value: unknown): ViewportPreset | null {
@@ -68,9 +89,10 @@ function resolveRenderAs(value: unknown): ViewportPreset | null {
 function resolveDisplayMode(value: unknown): DisplayMode | null {
   if (typeof value !== 'string') return null;
   const v = value.trim().toLowerCase();
-  if (v === 'video' || v === 'slideshow' || v === 'linear') return v;
+  if (v === 'video' || v === 'slideshow' || v === 'linear' || v === 'page') return v;
   if (v === 'slides' || v === 'presentation' || v === 'deck') return 'slideshow';
-  if (v === 'document' || v === 'scroll' || v === 'page') return 'linear';
+  if (v === 'document' || v === 'scroll') return 'linear';
+  if (v === 'html' || v === 'plain' || v === 'reader') return 'page';
   return null;
 }
 
@@ -109,10 +131,50 @@ function resolveFrontmatterCaptionStyle(value: unknown): CaptionStyle | null {
 export interface PreviewSettingsProviderProps {
   doc: Doc | null;
   children: ReactNode;
+  /**
+   * Optional Theme to use for the preview, regardless of `Doc.themeId` or
+   * the user's theme dropdown selection. Used by the theme customizer to
+   * preview an in-progress theme without mutating the document. When
+   * present, `activeTheme` is this value and `activeThemeId` is its `id`.
+   */
+  themeOverride?: Theme | null;
+}
+
+/** Frontmatter keys we read/write for preview settings. The squisq-prefixed
+ *  keys are the canonical names; the legacy keys are still read so existing
+ *  documents keep working. Persistence (writes) uses only the squisq names. */
+const FM_KEYS = {
+  theme: { canonical: 'squisq-theme', legacy: 'theme' as const },
+  transform: { canonical: 'squisq-transform', legacy: 'transform-style' as const },
+  captions: { canonical: 'squisq-captions', legacy: 'caption-style' as const },
+} as const;
+
+function readFrontmatterKey(
+  fm: Record<string, unknown> | undefined,
+  canonical: string,
+  legacy: string,
+): unknown {
+  if (!fm) return undefined;
+  return Object.prototype.hasOwnProperty.call(fm, canonical) ? fm[canonical] : fm[legacy];
 }
 
-export function PreviewSettingsProvider({ doc, children }: PreviewSettingsProviderProps) {
+export function PreviewSettingsProvider({
+  doc,
+  children,
+  themeOverride,
+}: PreviewSettingsProviderProps) {
   const frontmatter = doc?.frontmatter;
+  const { markdownSource, setMarkdownSource } = useEditorContext();
+
+  const persistFrontmatter = useCallback(
+    (updates: Record<string, string | null>) => {
+      const next = setFrontmatterValues(markdownSource, updates);
+      if (next !== markdownSource) {
+        setMarkdownSource(next);
+      }
+    },
+    [markdownSource, setMarkdownSource],
+  );
 
   // Viewport
   const fmPreset = useMemo(
@@ -130,30 +192,69 @@ export function PreviewSettingsProvider({ doc, children }: PreviewSettingsProvid
   useEffect(() => setSelectedDisplayMode(null), [fmMode]);
   const activeDisplayMode = selectedDisplayMode ?? fmMode ?? 'video';
 
-  // Theme
-  const fmTheme = useMemo(() => resolveFrontmatterTheme(frontmatter?.['theme']), [frontmatter]);
+  // Theme — persisted to `squisq-theme` (legacy `theme` still read for compat)
+  const fmTheme = useMemo(
+    () =>
+      resolveFrontmatterTheme(
+        readFrontmatterKey(frontmatter, FM_KEYS.theme.canonical, FM_KEYS.theme.legacy),
+      ),
+    [frontmatter],
+  );
   const [selectedThemeId, setSelectedThemeId] = useState<string | null>(null);
   useEffect(() => setSelectedThemeId(null), [fmTheme]);
-  const activeThemeId = selectedThemeId ?? fmTheme ?? 'standard';
-  const activeTheme = useMemo(() => resolveTheme(activeThemeId), [activeThemeId]);
+  const resolvedThemeId = selectedThemeId ?? fmTheme ?? 'standard';
+  const resolvedTheme = useMemo(() => resolveTheme(resolvedThemeId), [resolvedThemeId]);
+  // themeOverride wins over both dropdown selection and frontmatter
+  const activeThemeId = themeOverride?.id ?? resolvedThemeId;
+  const activeTheme = themeOverride ?? resolvedTheme;
+  const handleSetThemeId = useCallback(
+    (id: string | null) => {
+      setSelectedThemeId(id);
+      if (id !== null) persistFrontmatter({ [FM_KEYS.theme.canonical]: id });
+    },
+    [persistFrontmatter],
+  );
 
-  // Transform
+  // Transform — persisted to `squisq-transform` (legacy `transform-style` read for compat)
   const fmTransform = useMemo(
-    () => resolveFrontmatterTransform(frontmatter?.['transform-style']),
+    () =>
+      resolveFrontmatterTransform(
+        readFrontmatterKey(frontmatter, FM_KEYS.transform.canonical, FM_KEYS.transform.legacy),
+      ),
     [frontmatter],
   );
   const [selectedTransformStyle, setSelectedTransformStyle] = useState<string | null>(null);
   useEffect(() => setSelectedTransformStyle(null), [fmTransform]);
   const activeTransformStyle = selectedTransformStyle ?? fmTransform ?? '';
+  const handleSetTransformStyle = useCallback(
+    (id: string | null) => {
+      setSelectedTransformStyle(id);
+      if (id !== null) {
+        // Empty string = "None" — remove the key rather than writing a blank value.
+        persistFrontmatter({ [FM_KEYS.transform.canonical]: id === '' ? null : id });
+      }
+    },
+    [persistFrontmatter],
+  );
 
-  // Caption style
+  // Caption style — persisted to `squisq-captions` (legacy `caption-style` read for compat)
   const fmCaption = useMemo(
-    () => resolveFrontmatterCaptionStyle(frontmatter?.['caption-style']),
+    () =>
+      resolveFrontmatterCaptionStyle(
+        readFrontmatterKey(frontmatter, FM_KEYS.captions.canonical, FM_KEYS.captions.legacy),
+      ),
     [frontmatter],
   );
   const [selectedCaptionStyle, setSelectedCaptionStyle] = useState<CaptionStyle | null>(null);
   useEffect(() => setSelectedCaptionStyle(null), [fmCaption]);
   const activeCaptionStyle = selectedCaptionStyle ?? fmCaption ?? 'standard';
+  const handleSetCaptionStyle = useCallback(
+    (style: CaptionStyle | null) => {
+      setSelectedCaptionStyle(style);
+      if (style !== null) persistFrontmatter({ [FM_KEYS.captions.canonical]: style });
+    },
+    [persistFrontmatter],
+  );
 
   const value = useMemo<PreviewSettings>(
     () => ({
@@ -163,12 +264,12 @@ export function PreviewSettingsProvider({ doc, children }: PreviewSettingsProvid
       activeDisplayMode,
       setSelectedDisplayMode,
       activeThemeId,
-      setSelectedThemeId,
+      setSelectedThemeId: handleSetThemeId,
       activeTheme,
       activeTransformStyle,
-      setSelectedTransformStyle,
+      setSelectedTransformStyle: handleSetTransformStyle,
       activeCaptionStyle,
-      setSelectedCaptionStyle,
+      setSelectedCaptionStyle: handleSetCaptionStyle,
     }),
     [
       activePreset,
@@ -178,6 +279,9 @@ export function PreviewSettingsProvider({ doc, children }: PreviewSettingsProvid
       activeTheme,
       activeTransformStyle,
       activeCaptionStyle,
+      handleSetThemeId,
+      handleSetTransformStyle,
+      handleSetCaptionStyle,
     ],
   );
 
@@ -199,10 +303,9 @@ const DISPLAY_MODE_OPTIONS: { key: DisplayMode; label: string }[] = [
   { key: 'video', label: 'Video' },
   { key: 'slideshow', label: 'Slideshow' },
   { key: 'linear', label: 'Document' },
+  { key: 'page', label: 'Page' },
 ];
 
-const THEME_OPTIONS = getThemeSummaries().map((s) => ({ key: s.id, label: s.name }));
-
 const TRANSFORM_STYLE_OPTIONS = [
   { key: '', label: 'None' },
   ...getTransformStyleSummaries().map((s) => ({ key: s.id, label: s.name })),
@@ -285,13 +388,16 @@ export function PreviewToolbarControls() {
         onChange={(v) => s.setSelectedDisplayMode(v as DisplayMode)}
         compact={isNarrow}
       />
-      <PreviewSelect
-        label="Theme"
-        value={s.activeThemeId}
-        options={THEME_OPTIONS}
-        onChange={(v) => s.setSelectedThemeId(v)}
-        compact={isNarrow}
-      />
+      <div
+        className={`squisq-preview-control${isNarrow ? ' squisq-preview-control--compact' : ''}`}
+      >
+        <label style={labelStyle}>Theme:</label>
+        <ThemePicker
+          value={s.activeThemeId}
+          onChange={(v) => s.setSelectedThemeId(v)}
+          ariaLabel="Theme"
+        />
+      </div>
       <PreviewSelect
         label="Transform"
         value={s.activeTransformStyle}

package/src/PreviewPanel.tsx

@@ -2,17 +2,14 @@
  * PreviewPanel
  *
  * Renders a live preview of the current markdown document as a slideshow
- * using the DocPlayer component from @bendyline/squisq-react.
- *
- * 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 using buildPreviewDoc()
- * to flatten blocks, convert them to TemplateBlock slides with interleaved
- * images, and synthesize timing.
+ * using the DocPlayer component from @bendyline/squisq-react. The
+ * markdown → player-Doc conversion is delegated to the shared
+ * `buildPreviewDoc` helper so live preview and the export pipeline stay
+ * in sync.
  */
 
 import { useState, useEffect } from 'react';
-import { DocPlayer, LinearDocView } from '@bendyline/squisq-react';
+import { DocPlayer, LinearDocView, useMediaProvider } from '@bendyline/squisq-react';
 import type { Doc } from '@bendyline/squisq/schemas';
 import { applyTransform } from '@bendyline/squisq/transform';
 import { resolveAudioMapping } from '@bendyline/squisq/doc';
@@ -20,14 +17,19 @@ import type { ContentContainer } from '@bendyline/squisq/storage';
 import { useEditorContext } from './EditorContext';
 import { usePreviewSettings } from './PreviewControls';
 import { buildPreviewDoc } from './buildPreviewDoc';
+import { PlainHtmlPreview } from './PlainHtmlPreview';
 
 export interface PreviewPanelProps {
   /** Base path for resolving media URLs in DocPlayer */
   basePath?: string;
   /** Additional class name for the container */
   className?: string;
-  /** Optional ContentContainer for audio mapping (MP3 discovery + timing.json) */
-  container?: ContentContainer | null;
+  /**
+   * Workspace-scoped `ContentContainer` (the folder holding the doc and
+   * its siblings). Used here for audio mapping — MP3 discovery and
+   * `timing.json` reading.
+   */
+  workspaceContainer?: ContentContainer | null;
 }
 
 // ── Component ──────────────────────────────────────────────────────
@@ -37,8 +39,9 @@ export interface PreviewPanelProps {
  * or document view. Controls (viewport, mode, theme, transform, captions)
  * are rendered in the main toolbar via PreviewToolbarControls.
  */
-export function PreviewPanel({ basePath = '/', className, container }: PreviewPanelProps) {
-  const { doc, parseError, isParsing } = useEditorContext();
+export function PreviewPanel({ basePath = '/', className, workspaceContainer }: PreviewPanelProps) {
+  const { doc, parseError, isParsing, markdownSource, mediaRevision } = useEditorContext();
+  const mediaProvider = useMediaProvider();
   const {
     activeViewport,
     activeDisplayMode,
@@ -69,10 +72,10 @@ export function PreviewPanel({ basePath = '/', className, container }: PreviewPa
       sourceDoc = result.doc;
     }
 
-    // If we have a container, try to resolve audio mapping before building preview
-    if (container) {
+    // If we have a workspace container, try to resolve audio mapping before building preview
+    if (workspaceContainer) {
       let cancelled = false;
-      resolveAudioMapping(sourceDoc, container).then((audioDoc) => {
+      resolveAudioMapping(sourceDoc, workspaceContainer).then((audioDoc) => {
         if (!cancelled) {
           setPreviewDoc(buildPreviewDoc(audioDoc));
         }
@@ -85,7 +88,7 @@ export function PreviewPanel({ basePath = '/', className, container }: PreviewPa
     }
 
     setPreviewDoc(buildPreviewDoc(sourceDoc));
-  }, [doc, activeTransformStyle, container]);
+  }, [doc, activeTransformStyle, workspaceContainer]);
 
   // Status overlays for non-ready states
   if (isParsing) {
@@ -105,7 +108,10 @@ export function PreviewPanel({ basePath = '/', className, container }: PreviewPa
     );
   }
 
-  if (!previewDoc) {
+  // Page mode renders directly from markdown — it doesn't depend on the
+  // parsed Doc tree or the player preview build, so let it fall through
+  // even when those aren't ready yet.
+  if (!previewDoc && activeDisplayMode !== 'page') {
     return (
       <div className={`squisq-preview-status ${className || ''}`} data-testid="preview-panel">
         <p>No content to preview. Start typing in the editor.</p>
@@ -113,6 +119,9 @@ export function PreviewPanel({ basePath = '/', className, container }: PreviewPa
     );
   }
 
+  const fillsContainer =
+    activeDisplayMode === 'linear' || activeDisplayMode === 'page' ? 'stretch' : 'center';
+
   return (
     <div
       className={`squisq-preview-container ${className || ''}`}
@@ -126,19 +135,27 @@ export function PreviewPanel({ basePath = '/', className, container }: PreviewPa
         background: 'var(--squisq-bg, #f5f5f5)',
       }}
     >
-      {/* Player / Document view */}
+      {/* Player / Document / Page view */}
       <div
         className="squisq-preview-player"
         style={{
           flex: 1,
           display: 'flex',
-          alignItems: activeDisplayMode === 'linear' ? 'stretch' : 'center',
+          alignItems: fillsContainer,
           justifyContent: 'center',
           overflow: 'hidden',
           minHeight: 0,
         }}
       >
-        {activeDisplayMode === 'linear' ? (
+        {activeDisplayMode === 'page' ? (
+          <PlainHtmlPreview
+            markdown={markdownSource}
+            title={(doc?.frontmatter?.title as string | undefined) ?? undefined}
+            mediaProvider={mediaProvider}
+            mediaRevision={mediaRevision}
+            theme={activeTheme}
+          />
+        ) : activeDisplayMode === 'linear' ? (
           <LinearDocView
             doc={doc!}
             basePath={basePath}
@@ -147,7 +164,7 @@ export function PreviewPanel({ basePath = '/', className, container }: PreviewPa
           />
         ) : (
           <DocPlayer
-            script={previewDoc}
+            script={previewDoc!}
             basePath={basePath}
             showControls
             muted