@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/src/PreviewPanel.tsx

@@ -48,6 +48,8 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     activeTheme,
     activeTransformStyle,
     activeCaptionStyle,
+    activeCaptionsEnabled,
+    activeCoverSlide,
   } = usePreviewSettings();
 
   // Build the player-ready Doc whenever the parsed doc changes.
@@ -108,10 +110,15 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     );
   }
 
-  // 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') {
+  // 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) {
     return (
       <div className={`squisq-preview-status ${className || ''}`} data-testid="preview-panel">
         <p>No content to preview. Start typing in the editor.</p>
@@ -119,8 +126,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     );
   }
 
-  const fillsContainer =
-    activeDisplayMode === 'linear' || activeDisplayMode === 'page' ? 'stretch' : 'center';
+  const fillsContainer = isDocumentMode || isPageMode ? 'stretch' : 'center';
 
   return (
     <div
@@ -147,7 +153,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
           minHeight: 0,
         }}
       >
-        {activeDisplayMode === 'page' ? (
+        {isDocumentMode ? (
           <PlainHtmlPreview
             markdown={markdownSource}
             title={(doc?.frontmatter?.title as string | undefined) ?? undefined}
@@ -155,7 +161,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
             mediaRevision={mediaRevision}
             theme={activeTheme}
           />
-        ) : activeDisplayMode === 'linear' ? (
+        ) : isPageMode ? (
           <LinearDocView
             doc={doc!}
             basePath={basePath}
@@ -164,7 +170,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
           />
         ) : (
           <DocPlayer
-            script={previewDoc!}
+            doc={previewDoc!}
             basePath={basePath}
             showControls
             muted
@@ -172,6 +178,8 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
             displayMode={activeDisplayMode}
             theme={activeTheme}
             captionStyle={activeCaptionStyle}
+            captionsEnabled={activeCaptionsEnabled}
+            showCoverSlide={activeCoverSlide}
           />
         )}
       </div>

package/src/RawEditor.tsx

@@ -56,8 +56,14 @@ const SQUISQ_THEMES: Record<string, string> = {
 };
 
 export interface RawEditorProps {
-  /** Monaco editor theme (default: 'vs-dark') */
-  theme?: string;
+  /**
+   * Monaco editor theme name (default: `'vs'`). Accepts Monaco's built-in
+   * theme ids (`'vs'`, `'vs-dark'`, `'hc-black'`) — which are transparently
+   * mapped to the Squisq-tinted variants — or any custom theme registered
+   * via `monaco.editor.defineTheme`. This is the *code editor* color
+   * theme, distinct from the shell's light/dark `colorScheme`.
+   */
+  monacoTheme?: string;
   /** Show minimap (default: false) */
   minimap?: boolean;
   /** Font size in pixels (default: 14) */
@@ -80,7 +86,7 @@ export interface RawEditorProps {
  * Binds to the shared EditorContext for source synchronization.
  */
 export function RawEditor({
-  theme = 'vs',
+  monacoTheme = 'vs',
   minimap = false,
   fontSize = 14,
   wordWrap = 'on',
@@ -640,7 +646,7 @@ export function RawEditor({
     }
   }, [editorSource, language, monacoNs]);
 
-  const effectiveTheme = SQUISQ_THEMES[theme] ?? theme;
+  const effectiveTheme = SQUISQ_THEMES[monacoTheme] ?? monacoTheme;
 
   // Wait for the lazy monaco namespace + `loader.config()` to settle
   // before mounting `<Editor>`. Without this gate, the @monaco-editor/

package/src/TemplateAnnotation.ts

@@ -63,10 +63,10 @@ export const HeadingWithTemplate = Heading.extend({
       (HTMLAttributes['data-template-params'] as string | undefined) ?? null,
     );
 
-    // Render heading with a trailing badge span. The badge has no text
-    // content — its label is painted via CSS `content: attr(data-template-label)`
-    // so the template name never becomes part of the serialized heading
-    // text (which would leak into markdown on round-trip).
+    // Render heading with a trailing badge span. The badge and its inner core
+    // have no real text content — labels/braces are painted via CSS so the
+    // template name never becomes part of serialized heading text (which
+    // would leak into markdown on round-trip).
     //
     // When no template is set we still render a subtle "empty" badge so
     // authors have a visible affordance for opening the template picker
@@ -86,10 +86,17 @@ export const HeadingWithTemplate = Heading.extend({
             role: 'button',
             tabindex: '0',
             'aria-haspopup': 'listbox',
-            title: 'Change block template',
+            title: 'Change block type',
             'data-template': templateName,
-            'data-template-label': templateLabel(templateName),
           },
+          [
+            'span',
+            {
+              class: 'squisq-template-badge-core',
+              'data-template-label': templateLabel(templateName),
+              'aria-hidden': 'true',
+            },
+          ],
         ],
         propsBadgeSpec(propsSummary),
       ];
@@ -107,8 +114,16 @@ export const HeadingWithTemplate = Heading.extend({
           role: 'button',
           tabindex: '0',
           'aria-haspopup': 'listbox',
-          title: 'Choose block template',
+          title: 'Choose block type',
         },
+        [
+          'span',
+          {
+            class: 'squisq-template-badge-core',
+            'data-template-label': 'Block',
+            'aria-hidden': 'true',
+          },
+        ],
       ],
       propsBadgeSpec(propsSummary),
     ];

package/src/TemplateContentPreview.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { BlockRenderer, MediaContext } from '@bendyline/squisq-react';
+import {
+  resolveTemplateContentPreviewResult,
+  type TemplatePreviewSource,
+} from './templateContentPreviewResolver';
+
+export interface TemplateContentPreviewProps {
+  templateName: string;
+  source?: TemplatePreviewSource;
+  fallback: JSX.Element;
+}
+
+export function TemplateContentPreview({
+  templateName,
+  source,
+  fallback,
+}: TemplateContentPreviewProps) {
+  const preview = useMemo(
+    () => (source ? resolveTemplateContentPreviewResult(templateName, source) : null),
+    [templateName, source],
+  );
+
+  if (!source) return fallback;
+
+  if (!preview?.visual) {
+    if (!preview?.warning) return fallback;
+    return (
+      <div
+        className="squisq-template-gallery-content-preview squisq-template-gallery-content-preview--fallback"
+        style={{ aspectRatio: `${source.viewport.width} / ${source.viewport.height}` }}
+        aria-hidden="true"
+      >
+        <div className="squisq-template-gallery-content-preview-fallback">{fallback}</div>
+        <span className="squisq-template-gallery-content-preview-warning">{preview.warning}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="squisq-template-gallery-content-preview"
+      style={{ aspectRatio: `${source.viewport.width} / ${source.viewport.height}` }}
+      aria-hidden="true"
+    >
+      <MediaContext.Provider value={source.mediaProvider ?? null}>
+        <BlockRenderer
+          block={preview.visual}
+          blockTime={0}
+          basePath={source.basePath ?? '/'}
+          viewport={source.viewport}
+        />
+      </MediaContext.Provider>
+    </div>
+  );
+}