@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/PreviewPanel.tsx

@@ -8,8 +8,11 @@
  * in sync.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 import { DocPlayer, LinearDocView, useMediaProvider } from '@bendyline/squisq-react';
+import type { AudioController, PlaybackState } from '@bendyline/squisq-react';
 import type { Doc } from '@bendyline/squisq/schemas';
 import { applyTransform } from '@bendyline/squisq/transform';
 import { resolveAudioMapping } from '@bendyline/squisq/doc';
@@ -17,7 +20,10 @@ import type { ContentContainer } from '@bendyline/squisq/storage';
 import { useEditorContext } from './EditorContext';
 import { usePreviewSettings } from './PreviewControls';
 import { buildPreviewDoc } from './buildPreviewDoc';
+import { buildDocumentPreviewMarkdown } from './buildDocumentPreviewMarkdown';
 import { PlainHtmlPreview } from './PlainHtmlPreview';
+import { TeleprompterView } from './teleprompter/TeleprompterView';
+import { usePresentationModeOptional } from './presentation/PresentationMode';
 
 export interface PreviewPanelProps {
   /** Base path for resolving media URLs in DocPlayer */
@@ -40,8 +46,19 @@ export interface PreviewPanelProps {
  * are rendered in the main toolbar via PreviewToolbarControls.
  */
 export function PreviewPanel({ basePath = '/', className, workspaceContainer }: PreviewPanelProps) {
-  const { doc, parseError, isParsing, markdownSource, mediaRevision } = useEditorContext();
+  const {
+    doc,
+    parseError,
+    isParsing,
+    markdownSource,
+    mediaRevision,
+    setMarkdownSource,
+    bumpMediaRevision,
+    allowRecording,
+    colorScheme,
+  } = useEditorContext();
   const mediaProvider = useMediaProvider();
+  const presentation = usePresentationModeOptional();
   const {
     activeViewport,
     activeDisplayMode,
@@ -51,6 +68,13 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     activeCaptionsEnabled,
     activeCoverSlide,
   } = usePreviewSettings();
+  const mainSurfaceRef = useRef<HTMLDivElement>(null);
+  const popupSurfaceRef = useRef<HTMLDivElement>(null);
+  const [playbackState, setPlaybackState] = useState<PlaybackState | null>(null);
+
+  const handlePlaybackStateChange = useCallback((next: PlaybackState) => {
+    setPlaybackState(next);
+  }, []);
 
   // Build the player-ready Doc whenever the parsed doc changes.
   // Transform runs on the ORIGINAL doc (which has block.contents with
@@ -60,40 +84,174 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
   // Audio mapping is async (reads container files), so we use a two-phase
   // approach: first build the base doc synchronously, then resolve audio
   // in an effect and update the state.
-  const [previewDoc, setPreviewDoc] = useState<Doc | null>(null);
+  const [previewProjection, setPreviewProjection] = useState<{
+    /** Transformed content model shared by Page and Document. */
+    contentDoc: Doc;
+    /** Flattened/timed player model shared by Slideshow and Video. */
+    playerDoc: Doc;
+  } | null>(null);
 
   useEffect(() => {
     if (!doc || !doc.blocks.length) {
-      setPreviewDoc(null);
+      setPreviewProjection(null);
       return;
     }
 
-    let sourceDoc = doc;
-    if (activeTransformStyle) {
-      const result = applyTransform(doc, activeTransformStyle);
-      sourceDoc = result.doc;
-    }
+    // Audio resolution runs BEFORE the transform: a document-anchored
+    // narration take re-times the SOURCE blocks, and the transform's
+    // provenance (`sourceStartTime` in seconds) is derived from those
+    // times — so summarized slides land where the words are spoken.
+    const build = (sourceDoc: Doc) => {
+      const contentDoc = activeTransformStyle
+        ? applyTransform(sourceDoc, activeTransformStyle).doc
+        : sourceDoc;
+      return { contentDoc, playerDoc: buildPreviewDoc(contentDoc) };
+    };
 
-    // If we have a workspace container, try to resolve audio mapping before building preview
     if (workspaceContainer) {
       let cancelled = false;
-      resolveAudioMapping(sourceDoc, workspaceContainer).then((audioDoc) => {
-        if (!cancelled) {
-          setPreviewDoc(buildPreviewDoc(audioDoc));
-        }
-      });
+      resolveAudioMapping(doc, workspaceContainer).then(
+        (audioDoc) => {
+          if (!cancelled) setPreviewProjection(build(audioDoc));
+        },
+        () => {
+          // The synchronous preview below remains valid when optional audio
+          // discovery fails; consume the rejection rather than leaking it.
+        },
+      );
       // Set an immediate preview without audio while mapping resolves
-      setPreviewDoc(buildPreviewDoc(sourceDoc));
+      setPreviewProjection(build(doc));
       return () => {
         cancelled = true;
       };
     }
 
-    setPreviewDoc(buildPreviewDoc(sourceDoc));
+    setPreviewProjection(build(doc));
   }, [doc, activeTransformStyle, workspaceContainer]);
 
-  // Status overlays for non-ready states
-  if (isParsing) {
+  const previewDoc = previewProjection?.playerDoc ?? null;
+  const contentDoc = previewProjection?.contentDoc ?? null;
+
+  // The popup owns no clock, audio, or transport. It follows the primary
+  // player's published state while all actions remain inert, keeping the
+  // opener the single source of truth.
+  const followerAudioController = useMemo<AudioController | null>(() => {
+    if (!playbackState || !previewDoc) return null;
+    const noOp = () => Promise.resolve();
+    return {
+      currentTime: playbackState.currentTime,
+      isPlaying: playbackState.isPlaying,
+      currentSegment: playbackState.currentSegmentIndex,
+      totalDuration: playbackState.totalDuration,
+      isEnded:
+        playbackState.totalDuration > 0 && playbackState.currentTime >= playbackState.totalDuration,
+      isReady: true,
+      isAvailable: true,
+      play: noOp,
+      pause: noOp,
+      toggle: noOp,
+      seekTo: noOp,
+      skipToSegment: noOp,
+      restart: noOp,
+    };
+  }, [playbackState, previewDoc]);
+
+  const documentMarkdown = useMemo(
+    () =>
+      activeTransformStyle && contentDoc
+        ? buildDocumentPreviewMarkdown(contentDoc)
+        : markdownSource,
+    [activeTransformStyle, contentDoc, markdownSource],
+  );
+
+  // The public DisplayMode values predate the current labels: raw `page`
+  // is the plain Document preview, while raw `linear` is the styled Page view.
+  const isDocumentMode = activeDisplayMode === 'page';
+  const isPageMode = activeDisplayMode === 'linear';
+  const isNarrateMode = activeDisplayMode === 'narrate';
+
+  useEffect(() => {
+    if (presentation?.activeTarget === 'window') return;
+    setPlaybackState(null);
+  }, [presentation?.activeTarget]);
+
+  // Page and Document have no playback clock, so mirror their normalized
+  // scroll position instead. The popup remains pointer-inert: the editor view
+  // is the controller and the audience window follows it.
+  useEffect(() => {
+    if (presentation?.activeTarget !== 'window' || !presentation.popupRoot) return;
+    const mainRoot = mainSurfaceRef.current;
+    const followerRoot = popupSurfaceRef.current;
+    if (!mainRoot || !followerRoot) return;
+
+    if (isPageMode) {
+      const source = mainRoot.querySelector<HTMLElement>('.squisq-linear');
+      const follower = followerRoot.querySelector<HTMLElement>('.squisq-linear');
+      if (!source || !follower) return;
+      const sync = () => {
+        const sourceRange = Math.max(1, source.scrollHeight - source.clientHeight);
+        const followerRange = Math.max(0, follower.scrollHeight - follower.clientHeight);
+        follower.scrollTop = (source.scrollTop / sourceRange) * followerRange;
+      };
+      source.addEventListener('scroll', sync, { passive: true });
+      sync();
+      return () => source.removeEventListener('scroll', sync);
+    }
+
+    if (isDocumentMode) {
+      const sourceFrame = mainRoot.querySelector<HTMLIFrameElement>('iframe');
+      const followerFrame = followerRoot.querySelector<HTMLIFrameElement>('iframe');
+      if (!sourceFrame || !followerFrame) return;
+      let detachScroll: (() => void) | null = null;
+      const attach = () => {
+        detachScroll?.();
+        try {
+          const sourceWindow = sourceFrame.contentWindow;
+          const followerWindow = followerFrame.contentWindow;
+          if (!sourceWindow || !followerWindow) return;
+          const sync = () => {
+            const sourceDoc = sourceWindow.document.documentElement;
+            const followerDoc = followerWindow.document.documentElement;
+            const sourceRange = Math.max(1, sourceDoc.scrollHeight - sourceWindow.innerHeight);
+            const followerRange = Math.max(
+              0,
+              followerDoc.scrollHeight - followerWindow.innerHeight,
+            );
+            followerWindow.scrollTo(0, (sourceWindow.scrollY / sourceRange) * followerRange);
+          };
+          sourceWindow.addEventListener('scroll', sync, { passive: true });
+          detachScroll = () => sourceWindow.removeEventListener('scroll', sync);
+          sync();
+        } catch {
+          // The srcDoc frames are same-origin, but a host may tighten their
+          // sandbox. In that case the duplicate content remains useful even
+          // though scroll mirroring is unavailable.
+        }
+      };
+      sourceFrame.addEventListener('load', attach);
+      followerFrame.addEventListener('load', attach);
+      attach();
+      return () => {
+        sourceFrame.removeEventListener('load', attach);
+        followerFrame.removeEventListener('load', attach);
+        detachScroll?.();
+      };
+    }
+  }, [
+    contentDoc,
+    documentMarkdown,
+    isDocumentMode,
+    isPageMode,
+    presentation?.activeTarget,
+    presentation?.popupRoot,
+  ]);
+
+  // Status overlays for non-ready states. Narrate is exempt: the
+  // teleprompter holds live state (mic capture, an in-flight recording,
+  // pacing position) that an unmount would destroy — e.g. saving a take
+  // rewrites the markdown, which triggers exactly this reparse. It keeps
+  // rendering the last-good doc until the new parse lands.
+  if (isParsing && !isNarrateMode) {
     return (
       <div className={`squisq-preview-status ${className || ''}`} data-testid="preview-panel">
         <p>Parsing…</p>
@@ -101,7 +259,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     );
   }
 
-  if (parseError) {
+  if (parseError && !isNarrateMode) {
     return (
       <div className={`squisq-preview-status ${className || ''}`} data-testid="preview-panel">
         <h3>Parse Error</h3>
@@ -110,15 +268,11 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     );
   }
 
-  // The public DisplayMode values predate the current labels: raw `page`
-  // is the plain Document preview, while raw `linear` is the styled Page view.
-  const isDocumentMode = activeDisplayMode === 'page';
-  const isPageMode = activeDisplayMode === 'linear';
-
-  // Document 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 && !isDocumentMode) {
+  // Document mode renders a text-first markdown projection, and Narrate
+  // builds its script from the parsed source doc (showing its own empty
+  // state). Neither depends on the player projection, so let them fall
+  // through even when that isn't ready yet.
+  if (!previewDoc && !isDocumentMode && !isNarrateMode) {
     return (
       <div className={`squisq-preview-status ${className || ''}`} data-testid="preview-panel">
         <p>No content to preview. Start typing in the editor.</p>
@@ -126,63 +280,143 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     );
   }
 
-  const fillsContainer = isDocumentMode || isPageMode ? 'stretch' : 'center';
+  const fillsContainer = isDocumentMode || isPageMode || isNarrateMode ? 'stretch' : 'center';
+  const audienceWindowOpen = presentation?.activeTarget === 'window';
+
+  const renderSurface = (audience: boolean): ReactNode => {
+    if (isDocumentMode) {
+      return (
+        <PlainHtmlPreview
+          markdown={documentMarkdown}
+          title={(contentDoc?.frontmatter?.title as string | undefined) ?? undefined}
+          mediaProvider={mediaProvider}
+          mediaRevision={mediaRevision}
+          theme={activeTheme}
+          globalKeyboardShortcuts={!audience}
+        />
+      );
+    }
+
+    if (isNarrateMode) {
+      if (audience) return null;
+      // Narrate keeps one controller/microphone session in the main view and
+      // portals only its display surface to the audience window.
+      return (
+        <TeleprompterView
+          doc={doc}
+          theme={activeTheme}
+          workspaceContainer={workspaceContainer ?? null}
+          basePath={basePath}
+          presentationTarget={
+            presentation?.activeTarget === 'window' ? presentation.popupRoot : null
+          }
+          recording={
+            allowRecording && mediaProvider
+              ? {
+                  mediaProvider,
+                  container: workspaceContainer ?? null,
+                  markdownSource,
+                  setMarkdownSource,
+                  bumpMediaRevision,
+                }
+              : null
+          }
+        />
+      );
+    }
+
+    if (isPageMode) {
+      return (
+        <LinearDocView
+          doc={contentDoc ?? doc!}
+          basePath={basePath}
+          viewport={activeViewport}
+          theme={activeTheme}
+          globalKeyboardShortcuts={!audience}
+        />
+      );
+    }
+
+    if (audience && !followerAudioController) {
+      return <div className="squisq-presentation-connecting">Connecting presentation...</div>;
+    }
+
+    const audienceCaptionMode = playbackState?.captionMode;
+    return (
+      <DocPlayer
+        // A style change replaces the slide sequence. Remounting clears state
+        // belonging to the previous transformed deck in both render targets.
+        key={`${audience ? 'audience' : 'primary'}-${activeTransformStyle || 'none'}`}
+        doc={previewDoc!}
+        basePath={basePath}
+        showControls={!audience}
+        muted
+        forceViewport={activeViewport}
+        displayMode={activeDisplayMode}
+        theme={activeTheme}
+        captionStyle={audienceCaptionMode === 'social' ? 'social' : activeCaptionStyle}
+        captionsEnabled={
+          audience && audienceCaptionMode ? audienceCaptionMode !== 'off' : activeCaptionsEnabled
+        }
+        showCoverSlide={activeCoverSlide}
+        coverVisible={audience ? playbackState?.isCoverVisible : undefined}
+        audioController={audience ? followerAudioController! : undefined}
+        enableSwipe={!audience}
+        globalKeyboardShortcuts={!audience}
+        onPlaybackStateChange={
+          !audience && audienceWindowOpen ? handlePlaybackStateChange : undefined
+        }
+      />
+    );
+  };
+
+  const surfaceStyle = {
+    flex: 1,
+    display: 'flex',
+    alignItems: fillsContainer,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    minHeight: 0,
+  } as const;
 
   return (
-    <div
-      className={`squisq-preview-container ${className || ''}`}
-      data-testid="preview-panel"
-      style={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        background: 'var(--squisq-bg, #f5f5f5)',
-      }}
-    >
-      {/* Player / Document / Page view */}
+    <>
       <div
-        className="squisq-preview-player"
+        className={`squisq-preview-container ${className || ''}`}
+        data-testid="preview-panel"
         style={{
-          flex: 1,
+          width: '100%',
+          height: '100%',
           display: 'flex',
-          alignItems: fillsContainer,
-          justifyContent: 'center',
+          flexDirection: 'column',
           overflow: 'hidden',
-          minHeight: 0,
+          background: 'var(--squisq-bg, #f5f5f5)',
         }}
       >
-        {isDocumentMode ? (
-          <PlainHtmlPreview
-            markdown={markdownSource}
-            title={(doc?.frontmatter?.title as string | undefined) ?? undefined}
-            mediaProvider={mediaProvider}
-            mediaRevision={mediaRevision}
-            theme={activeTheme}
-          />
-        ) : isPageMode ? (
-          <LinearDocView
-            doc={doc!}
-            basePath={basePath}
-            viewport={activeViewport}
-            theme={activeTheme}
-          />
-        ) : (
-          <DocPlayer
-            doc={previewDoc!}
-            basePath={basePath}
-            showControls
-            muted
-            forceViewport={activeViewport}
-            displayMode={activeDisplayMode}
-            theme={activeTheme}
-            captionStyle={activeCaptionStyle}
-            captionsEnabled={activeCaptionsEnabled}
-            showCoverSlide={activeCoverSlide}
-          />
-        )}
+        <div ref={mainSurfaceRef} className="squisq-preview-player" style={surfaceStyle}>
+          {renderSurface(false)}
+        </div>
       </div>
-    </div>
+      {audienceWindowOpen && presentation?.popupRoot && !isNarrateMode
+        ? createPortal(
+            <div
+              className="squisq-editor-shell squisq-presentation-window"
+              data-theme={colorScheme}
+            >
+              <div className="squisq-preview-container squisq-presentation-window-preview">
+                <div
+                  ref={popupSurfaceRef}
+                  className="squisq-preview-player squisq-presentation-window-surface"
+                  style={surfaceStyle}
+                  aria-label="Audience presentation"
+                >
+                  {renderSurface(true)}
+                </div>
+              </div>
+            </div>,
+            presentation.popupRoot,
+          )
+        : null}
+    </>
   );
 }

package/src/RawEditor.tsx

@@ -14,6 +14,7 @@ import { getAvailableTemplates } from '@bendyline/squisq/doc';
 import { suggestIcons, resolveIcon, iconGlyph } from '@bendyline/squisq/icons';
 import { BLOCK_META_KEY_DESCRIPTORS, tokenizeAttrTokens } from '@bendyline/squisq/markdown';
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
+import { canHandleSquisqMediaDrop, ownsMonacoModel } from './rawEditorIsolation';
 import { useMonacoLoader } from './useMonacoLoader';
 
 // Monaco is loaded lazily through `useMonacoLoader` (see the hook for the
@@ -108,9 +109,13 @@ export function RawEditor({
   const keyDisposable = useRef<monaco.IDisposable | null>(null);
   // Ref so the keydown handler always sees the latest callback.
   const submitOnEnterRef = useRef(submitOnEnter);
+  const readOnlyRef = useRef(readOnly);
   useEffect(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
+  useEffect(() => {
+    readOnlyRef.current = readOnly;
+  }, [readOnly]);
   // Ref so the completion provider — registered once at mount — always
   // sees the latest mentionProvider without needing to unregister.
   const mentionProviderRef = useRef(mentionProvider);
@@ -194,6 +199,7 @@ export function RawEditor({
         completionDisposable.current = monaco.languages.registerCompletionItemProvider('markdown', {
           triggerCharacters: ['['],
           provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
+            if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
             const lineContent = model.getLineContent(position.lineNumber);
 
             // Only trigger inside a heading line that has {[ before the cursor
@@ -248,6 +254,7 @@ export function RawEditor({
           {
             triggerCharacters: ['@'],
             async provideCompletionItems(model, position) {
+              if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
               const provider = mentionProviderRef.current;
               if (!provider) return { suggestions: [] };
               const lineContent = model.getLineContent(position.lineNumber);
@@ -306,6 +313,7 @@ export function RawEditor({
           {
             triggerCharacters: ['['],
             provideCompletionItems(model, position) {
+              if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
               const lineContent = model.getLineContent(position.lineNumber);
               const textBeforeCursor = lineContent.substring(0, position.column - 1);
               const textAfterCursor = lineContent.substring(position.column - 1);
@@ -388,6 +396,7 @@ export function RawEditor({
           {
             triggerCharacters: ['=', ' '],
             provideCompletionItems(model, position) {
+              if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
               const lineContent = model.getLineContent(position.lineNumber);
               // Block-meta attributes only mean something on a heading's
               // template annotation — same gate as the template provider.
@@ -498,12 +507,14 @@ export function RawEditor({
       const domNode = editor.getDomNode();
       if (domNode) {
         const onDragOver = (e: DragEvent) => {
-          if (e.dataTransfer?.types.includes(SQUISQ_MEDIA_MIME)) {
+          const dt = e.dataTransfer;
+          if (canHandleSquisqMediaDrop(readOnlyRef.current, dt)) {
             e.preventDefault();
-            e.dataTransfer.dropEffect = 'copy';
+            dt!.dropEffect = 'copy';
           }
         };
         const onDrop = (e: DragEvent) => {
+          if (!canHandleSquisqMediaDrop(readOnlyRef.current, e.dataTransfer)) return;
           const dt = e.dataTransfer;
           if (!dt) return;
           const raw = dt.getData(SQUISQ_MEDIA_MIME);

package/src/StatusBar.tsx

@@ -5,6 +5,7 @@
  */
 
 import { useMemo } from 'react';
+import { countBlocks } from '@bendyline/squisq/doc';
 import { useEditorContext } from './EditorContext';
 
 export interface StatusBarProps {
@@ -23,7 +24,7 @@ export function StatusBar({ className }: StatusBarProps) {
     const chars = markdownSource.length;
     const words = markdownSource.trim() ? markdownSource.trim().split(/\s+/).length : 0;
     const lines = markdownSource.split('\n').length;
-    const blocks = doc?.blocks.length ?? 0;
+    const blocks = doc ? countBlocks(doc.blocks) : 0;
     return { chars, words, lines, blocks };
   }, [markdownSource, doc]);
 
@@ -32,7 +33,9 @@ export function StatusBar({ className }: StatusBarProps) {
       <span className="squisq-status-item">{stats.words} words</span>
       <span className="squisq-status-item">{stats.chars} chars</span>
       <span className="squisq-status-item">{stats.lines} lines</span>
-      <span className="squisq-status-item">{stats.blocks} blocks</span>
+      <span className="squisq-status-item">
+        {stats.blocks} {stats.blocks === 1 ? 'block' : 'blocks'}
+      </span>
       <span className="squisq-status-spacer" />
       {isParsing && <span className="squisq-status-item squisq-status-parsing">Parsing…</span>}
       {parseError && (

package/src/TemplateAnnotation.ts

@@ -1,9 +1,10 @@
 /**
  * TemplateAnnotation — Tiptap Heading Extension
  *
- * Extends Tiptap's built-in Heading node to support `data-template` and
- * `data-template-params` HTML attributes. These attributes store which block
- * template should be used for a heading section.
+ * Extends Tiptap's built-in Heading node to support `data-template`,
+ * `data-template-params`, and `data-template-empty` HTML attributes. These
+ * attributes store the authored template annotation without exposing its raw
+ * `{[…]}` syntax in the Write view.
  *
  * When present, the heading renders a visible badge (styled CSS chip)
  * showing the template name, e.g. `[chart]`.
@@ -41,6 +42,14 @@ export const HeadingWithTemplate = Heading.extend({
           return { 'data-template-params': attributes.dataTemplateParams };
         },
       },
+      dataTemplateEmpty: {
+        default: false,
+        parseHTML: (element: HTMLElement) => element.hasAttribute('data-template-empty'),
+        renderHTML: (attributes: Record<string, unknown>) => {
+          if (!attributes.dataTemplateEmpty) return {};
+          return { 'data-template-empty': 'true' };
+        },
+      },
       dataBlockAttrs: {
         default: null,
         parseHTML: (element: HTMLElement) => element.getAttribute('data-block-attrs') || null,