@bendyline/squisq-editor-react 1.1.0 → 1.2.0

package/src/EditorContext.tsx

@@ -17,7 +17,7 @@ import {
   useEffect,
   type ReactNode,
 } from 'react';
-import type { Doc } from '@bendyline/squisq/schemas';
+import type { Doc, MediaProvider } from '@bendyline/squisq/schemas';
 import type { MarkdownDocument } from '@bendyline/squisq/markdown';
 import { parseMarkdown, stringifyMarkdown } from '@bendyline/squisq/markdown';
 import { markdownToDoc } from '@bendyline/squisq/doc';
@@ -74,6 +74,8 @@ export interface EditorContextValue extends EditorState, EditorActions {
   tiptapEditor: TiptapEditor | null;
   /** The live Monaco editor instance (null when Raw is not mounted) */
   monacoEditor: MonacoEditor | null;
+  /** MediaProvider for resolving image URLs in the WYSIWYG editor */
+  mediaProvider: MediaProvider | null;
 }
 
 // ─── Context ─────────────────────────────────────────────
@@ -103,6 +105,8 @@ export interface EditorProviderProps {
   articleId?: string;
   /** Color theme */
   theme?: EditorTheme;
+  /** MediaProvider for resolving image URLs */
+  mediaProvider?: MediaProvider | null;
   children: ReactNode;
 }
 
@@ -115,6 +119,7 @@ export function EditorProvider({
   initialView = 'raw',
   articleId = 'untitled',
   theme: initialTheme = 'light',
+  mediaProvider = null,
   children,
 }: EditorProviderProps) {
   const [markdownSource, setMarkdownSourceRaw] = useState(initialMarkdown);
@@ -273,6 +278,7 @@ export function EditorProvider({
       theme,
       tiptapEditor,
       monacoEditor,
+      mediaProvider,
       setMarkdownSource,
       setMarkdownDoc,
       setActiveView,
@@ -292,6 +298,7 @@ export function EditorProvider({
       theme,
       tiptapEditor,
       monacoEditor,
+      mediaProvider,
       setMarkdownSource,
       setMarkdownDoc,
       setActiveView,

package/src/EditorShell.tsx

@@ -13,6 +13,7 @@ import { StatusBar } from './StatusBar';
 import { RawEditor } from './RawEditor';
 import { WysiwygEditor } from './WysiwygEditor';
 import { PreviewPanel } from './PreviewPanel';
+import { PreviewSettingsProvider, PreviewToolbarControls } from './PreviewControls';
 import { MediaBin } from './MediaBin';
 import { DropZoneOverlay } from './DropZoneOverlay';
 import { useFileDrop, type DropTarget } from './hooks/useFileDrop';
@@ -23,6 +24,8 @@ import {
   processTextFiles,
 } from './utils/dropUtils';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
+import type { ContentContainer } from '@bendyline/squisq/storage';
+import type { ReactNode } from 'react';
 
 export type { EditorTheme } from './EditorContext';
 
@@ -46,8 +49,16 @@ export interface EditorShellProps {
   height?: string;
   /** Optional MediaProvider for the Files panel. When set (even to null), a Files toggle appears in the toolbar. */
   mediaProvider?: MediaProvider | null;
+  /** Optional ContentContainer for audio mapping (MP3 discovery + timing.json reading). */
+  container?: ContentContainer | null;
   /** Show the Files toggle in the toolbar. Defaults to true when mediaProvider is passed. */
   showFilesToggle?: boolean;
+  /** Content rendered at the left edge of the toolbar, before the view tabs. */
+  toolbarSlotLeft?: ReactNode;
+  /** Content rendered after the formatting controls (in the middle area of the toolbar). */
+  toolbarSlotAfterActions?: ReactNode;
+  /** Content rendered at the rightmost end of the toolbar, after all other elements. */
+  toolbarSlotRight?: ReactNode;
 }
 
 /**
@@ -64,7 +75,11 @@ export function EditorShell({
   className,
   height = '100vh',
   mediaProvider,
+  container,
   showFilesToggle,
+  toolbarSlotLeft,
+  toolbarSlotAfterActions,
+  toolbarSlotRight,
 }: EditorShellProps) {
   // Show the toggle when explicitly opted in, or when mediaProvider prop was passed at all
   const filesToggleEnabled = showFilesToggle ?? mediaProvider !== undefined;
@@ -75,6 +90,7 @@ export function EditorShell({
       initialView={initialView}
       articleId={articleId}
       theme={theme}
+      mediaProvider={mediaProvider}
     >
       <EditorShellInner
         basePath={basePath}
@@ -82,7 +98,11 @@ export function EditorShell({
         className={className}
         height={height}
         mediaProvider={mediaProvider ?? null}
+        container={container}
         filesToggleEnabled={filesToggleEnabled}
+        toolbarSlotLeft={toolbarSlotLeft}
+        toolbarSlotAfterActions={toolbarSlotAfterActions}
+        toolbarSlotRight={toolbarSlotRight}
       />
     </EditorProvider>
   );
@@ -94,7 +114,11 @@ interface EditorShellInnerProps {
   className?: string;
   height: string;
   mediaProvider: MediaProvider | null;
+  container?: ContentContainer | null;
   filesToggleEnabled: boolean;
+  toolbarSlotLeft?: ReactNode;
+  toolbarSlotAfterActions?: ReactNode;
+  toolbarSlotRight?: ReactNode;
 }
 
 function EditorShellInner({
@@ -103,9 +127,14 @@ function EditorShellInner({
   className,
   height,
   mediaProvider,
+  container,
   filesToggleEnabled,
+  toolbarSlotLeft,
+  toolbarSlotAfterActions,
+  toolbarSlotRight,
 }: EditorShellInnerProps) {
-  const { activeView, markdownSource, theme, insertAtCursor, replaceAll } = useEditorContext();
+  const { activeView, markdownSource, doc, theme, insertAtCursor, replaceAll } = useEditorContext();
+  const isPreview = activeView === 'preview';
   const [showFiles, setShowFiles] = useState(false);
   const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
   const isDark = theme === 'dark';
@@ -193,41 +222,51 @@ function EditorShellInner({
       }}
       {...containerProps}
     >
-      {/* Header: Toolbar (includes view tabs) */}
-      <div className="squisq-editor-header">
-        <Toolbar
-          showFiles={showFiles}
-          onToggleFiles={filesToggleEnabled ? handleToggleFiles : undefined}
-        />
-      </div>
-
-      {/* Main content area */}
-      <div
-        className="squisq-editor-content"
-        style={{ flex: 1, overflow: 'hidden', position: 'relative', display: 'flex' }}
-      >
-        <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
-          {activeView === 'raw' && <RawEditor theme={theme === 'dark' ? 'vs-dark' : 'vs'} />}
-          {activeView === 'wysiwyg' && <WysiwygEditor />}
-          {activeView === 'preview' && <PreviewPanel basePath={basePath} />}
+      <PreviewSettingsProvider doc={doc}>
+        {/* Header: Toolbar (includes view tabs + preview controls) */}
+        <div className="squisq-editor-header">
+          <Toolbar
+            showFiles={showFiles}
+            onToggleFiles={filesToggleEnabled ? handleToggleFiles : undefined}
+            slotLeft={toolbarSlotLeft}
+            slotAfterActions={
+              <>
+                {toolbarSlotAfterActions}
+                {isPreview && <PreviewToolbarControls />}
+              </>
+            }
+            slotRight={toolbarSlotRight}
+          />
         </div>
 
-        {showFiles && (
-          <MediaBin mediaProvider={mediaProvider} isDark={isDark} refreshKey={mediaRefreshKey} />
-        )}
+        {/* Main content area */}
+        <div
+          className="squisq-editor-content"
+          style={{ flex: 1, overflow: 'hidden', position: 'relative', display: 'flex' }}
+        >
+          <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+            {activeView === 'raw' && <RawEditor theme={theme === 'dark' ? 'vs-dark' : 'vs'} />}
+            {activeView === 'wysiwyg' && <WysiwygEditor />}
+            {isPreview && <PreviewPanel basePath={basePath} container={container} />}
+          </div>
 
-        {/* Drop zone overlay */}
-        {isDragging && (
-          <DropZoneOverlay
-            dragContentType={dragContentType}
-            zoneProps={zoneProps}
-            hasMediaProvider={mediaProvider !== null}
-          />
-        )}
-      </div>
+          {showFiles && (
+            <MediaBin mediaProvider={mediaProvider} isDark={isDark} refreshKey={mediaRefreshKey} />
+          )}
+
+          {/* Drop zone overlay */}
+          {isDragging && (
+            <DropZoneOverlay
+              dragContentType={dragContentType}
+              zoneProps={zoneProps}
+              hasMediaProvider={mediaProvider !== null}
+            />
+          )}
+        </div>
 
-      {/* Status bar */}
-      <StatusBar />
+        {/* Status bar */}
+        <StatusBar />
+      </PreviewSettingsProvider>
     </div>
   );
 }

package/src/ImageNodeView.tsx

@@ -0,0 +1,70 @@
+/**
+ * ImageNodeView — Custom Tiptap NodeView for images.
+ *
+ * Resolves image `src` attributes through the EditorContext's MediaProvider,
+ * converting relative paths (e.g. "images/hero.jpg") to displayable blob URLs.
+ *
+ * The ProseMirror node retains the original relative path so markdown roundtrip
+ * is preserved — only the rendered DOM uses the resolved URL.
+ */
+
+import { useEffect, useState } from 'react';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import Image from '@tiptap/extension-image';
+import { useEditorContext } from './EditorContext';
+
+function ImageComponent({ node }: NodeViewProps) {
+  const { src, alt, title } = node.attrs as { src: string; alt: string; title: string };
+  const { mediaProvider } = useEditorContext();
+  const [resolvedSrc, setResolvedSrc] = useState(src);
+
+  const isRelative =
+    src &&
+    !src.startsWith('blob:') &&
+    !src.startsWith('http') &&
+    !src.startsWith('data:') &&
+    !src.startsWith('/');
+
+  useEffect(() => {
+    if (!mediaProvider || !isRelative) {
+      setResolvedSrc(src);
+      return;
+    }
+
+    let cancelled = false;
+    mediaProvider.resolveUrl(src).then(
+      (resolved) => {
+        if (!cancelled) setResolvedSrc(resolved);
+      },
+      () => {
+        if (!cancelled) setResolvedSrc(src);
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [src, mediaProvider, isRelative]);
+
+  return (
+    <NodeViewWrapper as="figure" style={{ margin: '0.5em 0' }}>
+      <img
+        src={resolvedSrc}
+        alt={alt || ''}
+        title={title || undefined}
+        style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
+      />
+    </NodeViewWrapper>
+  );
+}
+
+/**
+ * Image extension with a custom React NodeView that resolves URLs
+ * through the EditorContext's MediaProvider.
+ */
+export const ImageWithMediaProvider = Image.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageComponent);
+  },
+});

package/src/PreviewControls.tsx

@@ -0,0 +1,340 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * PreviewControls
+ *
+ * Shared context and inline toolbar component for preview settings
+ * (viewport format, display mode, theme, transform, caption style).
+ *
+ * The context is provided by EditorShell and consumed by both:
+ * - PreviewControls (toolbar dropdowns, rendered in the main toolbar)
+ * - PreviewPanel (the actual player, which reads the selected values)
+ */
+
+import { createContext, useContext, useState, useMemo, useEffect } 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 { getTransformStyleSummaries } from '@bendyline/squisq/transform';
+import type { Doc } from '@bendyline/squisq/schemas';
+
+// ── Context ──────────────────────────────────────────────────────
+
+export interface PreviewSettings {
+  activePreset: ViewportPreset;
+  setSelectedPreset: (preset: ViewportPreset | null) => void;
+  activeViewport: ViewportConfig;
+  activeDisplayMode: DisplayMode;
+  setSelectedDisplayMode: (mode: DisplayMode | null) => void;
+  activeThemeId: string;
+  setSelectedThemeId: (id: string | null) => void;
+  activeTheme: Theme;
+  activeTransformStyle: string;
+  setSelectedTransformStyle: (id: string | null) => void;
+  activeCaptionStyle: CaptionStyle;
+  setSelectedCaptionStyle: (style: CaptionStyle | null) => void;
+}
+
+const PreviewSettingsContext = createContext<PreviewSettings | null>(null);
+
+export function usePreviewSettings(): PreviewSettings {
+  const ctx = useContext(PreviewSettingsContext);
+  if (!ctx) throw new Error('usePreviewSettings must be used within PreviewSettingsProvider');
+  return ctx;
+}
+
+// ── Frontmatter resolvers ────────────────────────────────────────
+
+function resolveRenderAs(value: unknown): ViewportPreset | null {
+  if (typeof value !== 'string') return null;
+  const v = value.trim().toLowerCase();
+  const mapping: Record<string, ViewportPreset> = {
+    landscape: 'landscape',
+    '16:9': 'landscape',
+    widescreen: 'landscape',
+    portrait: 'portrait',
+    '9:16': 'portrait',
+    vertical: 'portrait',
+    stories: 'portrait',
+    square: 'square',
+    '1:1': 'square',
+    standard: 'standard',
+    '4:3': 'standard',
+  };
+  return mapping[v] ?? 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 === 'slides' || v === 'presentation' || v === 'deck') return 'slideshow';
+  if (v === 'document' || v === 'scroll' || v === 'page') return 'linear';
+  return null;
+}
+
+const VALID_THEME_IDS = new Set(getThemeSummaries().map((s) => s.id));
+
+function resolveFrontmatterTheme(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const v = value.trim().toLowerCase();
+  if (VALID_THEME_IDS.has(v)) return v;
+  const normalized = v.replace(/\s+/g, '-');
+  if (VALID_THEME_IDS.has(normalized)) return normalized;
+  return null;
+}
+
+const VALID_TRANSFORM_IDS = new Set(getTransformStyleSummaries().map((s) => s.id));
+
+function resolveFrontmatterTransform(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const v = value.trim().toLowerCase();
+  if (VALID_TRANSFORM_IDS.has(v)) return v;
+  const normalized = v.replace(/\s+/g, '-');
+  if (VALID_TRANSFORM_IDS.has(normalized)) return normalized;
+  return null;
+}
+
+function resolveFrontmatterCaptionStyle(value: unknown): CaptionStyle | null {
+  if (typeof value !== 'string') return null;
+  const v = value.trim().toLowerCase();
+  if (v === 'standard' || v === 'social') return v;
+  if (v === 'instagram' || v === 'tiktok' || v === 'reels') return 'social';
+  return null;
+}
+
+// ── Provider ─────────────────────────────────────────────────────
+
+export interface PreviewSettingsProviderProps {
+  doc: Doc | null;
+  children: ReactNode;
+}
+
+export function PreviewSettingsProvider({ doc, children }: PreviewSettingsProviderProps) {
+  const frontmatter = doc?.frontmatter;
+
+  // Viewport
+  const fmPreset = useMemo(
+    () => resolveRenderAs(frontmatter?.['document-render-as']),
+    [frontmatter],
+  );
+  const [selectedPreset, setSelectedPreset] = useState<ViewportPreset | null>(null);
+  useEffect(() => setSelectedPreset(null), [fmPreset]);
+  const activePreset = selectedPreset ?? fmPreset ?? 'landscape';
+  const activeViewport = VIEWPORT_PRESETS[activePreset];
+
+  // Display mode
+  const fmMode = useMemo(() => resolveDisplayMode(frontmatter?.['display-mode']), [frontmatter]);
+  const [selectedDisplayMode, setSelectedDisplayMode] = useState<DisplayMode | null>(null);
+  useEffect(() => setSelectedDisplayMode(null), [fmMode]);
+  const activeDisplayMode = selectedDisplayMode ?? fmMode ?? 'video';
+
+  // Theme
+  const fmTheme = useMemo(() => resolveFrontmatterTheme(frontmatter?.['theme']), [frontmatter]);
+  const [selectedThemeId, setSelectedThemeId] = useState<string | null>(null);
+  useEffect(() => setSelectedThemeId(null), [fmTheme]);
+  const activeThemeId = selectedThemeId ?? fmTheme ?? 'standard';
+  const activeTheme = useMemo(() => resolveTheme(activeThemeId), [activeThemeId]);
+
+  // Transform
+  const fmTransform = useMemo(
+    () => resolveFrontmatterTransform(frontmatter?.['transform-style']),
+    [frontmatter],
+  );
+  const [selectedTransformStyle, setSelectedTransformStyle] = useState<string | null>(null);
+  useEffect(() => setSelectedTransformStyle(null), [fmTransform]);
+  const activeTransformStyle = selectedTransformStyle ?? fmTransform ?? '';
+
+  // Caption style
+  const fmCaption = useMemo(
+    () => resolveFrontmatterCaptionStyle(frontmatter?.['caption-style']),
+    [frontmatter],
+  );
+  const [selectedCaptionStyle, setSelectedCaptionStyle] = useState<CaptionStyle | null>(null);
+  useEffect(() => setSelectedCaptionStyle(null), [fmCaption]);
+  const activeCaptionStyle = selectedCaptionStyle ?? fmCaption ?? 'standard';
+
+  const value = useMemo<PreviewSettings>(
+    () => ({
+      activePreset,
+      setSelectedPreset,
+      activeViewport,
+      activeDisplayMode,
+      setSelectedDisplayMode,
+      activeThemeId,
+      setSelectedThemeId,
+      activeTheme,
+      activeTransformStyle,
+      setSelectedTransformStyle,
+      activeCaptionStyle,
+      setSelectedCaptionStyle,
+    }),
+    [
+      activePreset,
+      activeViewport,
+      activeDisplayMode,
+      activeThemeId,
+      activeTheme,
+      activeTransformStyle,
+      activeCaptionStyle,
+    ],
+  );
+
+  return (
+    <PreviewSettingsContext.Provider value={value}>{children}</PreviewSettingsContext.Provider>
+  );
+}
+
+// ── Dropdown options ─────────────────────────────────────────────
+
+const VIEWPORT_OPTIONS: { key: ViewportPreset; label: string }[] = [
+  { key: 'landscape', label: '16:9' },
+  { key: 'portrait', label: '9:16' },
+  { key: 'square', label: '1:1' },
+  { key: 'standard', label: '4:3' },
+];
+
+const DISPLAY_MODE_OPTIONS: { key: DisplayMode; label: string }[] = [
+  { key: 'video', label: 'Video' },
+  { key: 'slideshow', label: 'Slideshow' },
+  { key: 'linear', label: 'Document' },
+];
+
+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 })),
+];
+
+const CAPTION_STYLE_OPTIONS: { key: CaptionStyle; label: string }[] = [
+  { key: 'standard', label: 'Standard' },
+  { key: 'social', label: 'Social' },
+];
+
+// ── Shared styles ────────────────────────────────────────────────
+
+const labelStyle: React.CSSProperties = {
+  color: 'var(--squisq-text-muted, #6b7280)',
+  fontSize: '12px',
+  whiteSpace: 'nowrap',
+};
+
+const selectStyle: React.CSSProperties = {
+  padding: '2px 6px',
+  borderRadius: '4px',
+  border: '1px solid var(--squisq-border, #d1d5db)',
+  background: 'var(--squisq-input-bg, #fff)',
+  color: 'var(--squisq-text, #1f2937)',
+  fontSize: '12px',
+  cursor: 'pointer',
+};
+
+// ── Toolbar Controls Component ───────────────────────────────────
+
+/**
+ * Inline preview controls rendered in the main toolbar row.
+ * Reads from PreviewSettingsContext.
+ */
+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
+        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
+        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
+        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
+        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>
+
+      <Divider />
+
+      <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) => (
+          <option key={o.key} value={o.key}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function Divider() {
+  return (
+    <span
+      style={{
+        width: '1px',
+        height: '16px',
+        background: 'var(--squisq-border, #d1d5db)',
+        margin: '0 2px',
+      }}
+    />
+  );
+}