@bendyline/squisq-editor-react 1.5.3 → 1.6.0

package/src/recorder/RecorderModal.tsx

@@ -154,34 +154,29 @@ const btnDanger: CSSProperties = {
   borderColor: '#902929',
 };
 
-const tabRowStyle: CSSProperties = {
+const toggleRowStyle: CSSProperties = {
   display: 'flex',
-  gap: 4,
+  gap: 8,
   marginBottom: 16,
-  borderBottom: '1px solid #c9b98a',
 };
 
-const tabBase: CSSProperties = {
-  padding: '6px 12px',
+const toggleBase: CSSProperties = {
+  padding: '6px 14px',
   fontSize: 13,
   fontFamily: 'inherit',
   cursor: 'pointer',
   background: 'transparent',
   color: '#5a4a2a',
-  border: 'none',
-  borderBottom: '2px solid transparent',
-  marginBottom: -1,
+  border: '1px solid #c9b98a',
+  borderRadius: 999,
 };
 
-const tabActive: CSSProperties = {
-  ...tabBase,
-  color: '#2d2310',
+const toggleActive: CSSProperties = {
+  ...toggleBase,
+  color: '#fffdf5',
   fontWeight: 600,
-  // Use the `borderBottom` shorthand (not `borderBottomColor` longhand)
-  // so React's style diff cleanly resets the underline when this tab
-  // goes inactive — mixing shorthand + longhand can leave the old
-  // color stuck on a previously-active tab between renders.
-  borderBottom: '2px solid #8B6914',
+  background: '#8B6914',
+  borderColor: '#8B6914',
 };
 
 const previewBoxStyle: CSSProperties = {
@@ -237,17 +232,61 @@ function formatDurationMs(ms: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
-const TABS: Array<{ id: RecorderSource; label: string; description: string }> = [
-  {
-    id: 'mic',
-    label: 'Narration',
-    description: 'Voice-only audio. Pairs with a written script for auto-mapping to blocks.',
-  },
-  { id: 'camera', label: 'Camera', description: 'Camera + microphone. Saved as a video clip.' },
-  { id: 'screen', label: 'Screen', description: 'Screen capture. System audio when available.' },
-  { id: 'screen+mic', label: 'Screen + Mic', description: 'Screen with your microphone mixed in.' },
+/** The two mutually-exclusive video sources, plus "none" (audio-only). */
+type VideoSource = 'none' | 'camera' | 'screen';
+
+/**
+ * Resolve the toggle state (microphone on/off + which video source) to the
+ * recorder's capture mode. Returns null when nothing is selected — there's
+ * nothing to capture, so the controls stay disabled.
+ *
+ * Camera + Screen can't be captured together (no compositing), so the two
+ * are mutually exclusive; the microphone composes with either, or stands
+ * alone as narration.
+ */
+function deriveSource(micOn: boolean, video: VideoSource): RecorderSource | null {
+  if (video === 'camera') return 'camera'; // mic handled via includeMicrophone
+  if (video === 'screen') return micOn ? 'screen+mic' : 'screen';
+  return micOn ? 'mic' : null;
+}
+
+/** Initial toggle state for a given starting capture mode. */
+function toggleStateFromMode(mode: RecorderSource): { micOn: boolean; video: VideoSource } {
+  switch (mode) {
+    case 'mic':
+      return { micOn: true, video: 'none' };
+    case 'camera':
+      return { micOn: true, video: 'camera' };
+    case 'screen':
+      return { micOn: false, video: 'screen' };
+    case 'screen+mic':
+      return { micOn: true, video: 'screen' };
+  }
+}
+
+const TOGGLES: Array<{ key: 'mic' | 'camera' | 'screen'; label: string }> = [
+  { key: 'mic', label: 'Microphone' },
+  { key: 'camera', label: 'Camera' },
+  { key: 'screen', label: 'Screen' },
 ];
 
+/** One-line summary of what the current toggle combination will capture. */
+function captureSummary(micOn: boolean, video: VideoSource): string {
+  if (video === 'camera') {
+    return micOn
+      ? 'Camera video with your microphone. Saved as a video clip.'
+      : 'Camera video only (no microphone). Saved as a video clip.';
+  }
+  if (video === 'screen') {
+    return micOn
+      ? 'Screen capture with your microphone mixed in. System audio when available.'
+      : 'Screen capture (no microphone). System audio when available.';
+  }
+  return micOn
+    ? 'Voice-only audio. Pairs with a written script for auto-mapping to blocks.'
+    : 'Pick at least one source to record.';
+}
+
 // ── Component ──────────────────────────────────────────────────────
 
 export function RecorderModal({
@@ -257,7 +296,9 @@ export function RecorderModal({
   onClose,
   onSave,
 }: RecorderModalProps) {
-  const [source, setSource] = useState<RecorderSource>(initialMode);
+  const initialToggles = toggleStateFromMode(initialMode);
+  const [micOn, setMicOn] = useState(initialToggles.micOn);
+  const [video, setVideo] = useState<VideoSource>(initialToggles.video);
   const [sourceText, setSourceText] = useState('');
   const [basename, setBasename] = useState('');
   const [includeSystemAudio, setIncludeSystemAudio] = useState(false);
@@ -267,9 +308,17 @@ export function RecorderModal({
 
   const previewRef = useRef<HTMLVideoElement | null>(null);
 
+  // Toggle state → the recorder's capture mode. `source` is null when nothing
+  // is selected; we feed the hook a harmless default and gate the controls on
+  // `canCapture` instead.
+  const derivedSource = deriveSource(micOn, video);
+  const canCapture = derivedSource !== null;
+  const source: RecorderSource = derivedSource ?? 'mic';
+
   const recorder = useMediaRecorder({
     source,
-    systemAudio: source === 'screen' || source === 'screen+mic' ? includeSystemAudio : false,
+    includeMicrophone: video === 'camera' ? micOn : undefined,
+    systemAudio: video === 'screen' ? includeSystemAudio : false,
   });
 
   useStreamPreview(previewRef, recorder.state === 'stopped' ? null : recorder.stream);
@@ -290,17 +339,20 @@ export function RecorderModal({
     };
   }, [recorder.blob]);
 
-  // Switching capture source mid-session: tear down whatever stream/
-  // recorder we had so the new mode acquires a fresh one. The hook
-  // already handles its own internal teardown on unmount; cancel()
-  // here covers in-place source changes.
-  const previousSourceRef = useRef(source);
+  // Switching capture config mid-session: tear down whatever stream/
+  // recorder we had so the new mode acquires a fresh one. We key on a
+  // signature of everything that changes the acquired stream — including
+  // the camera microphone and screen system-audio flags, which don't
+  // change `source` on their own. The hook handles its own teardown on
+  // unmount; cancel() here covers in-place changes.
+  const captureKey = `${source}:${video === 'camera' ? micOn : ''}:${includeSystemAudio}`;
+  const previousKeyRef = useRef(captureKey);
   useEffect(() => {
-    if (previousSourceRef.current !== source) {
-      previousSourceRef.current = source;
+    if (previousKeyRef.current !== captureKey) {
+      previousKeyRef.current = captureKey;
       recorder.cancel();
     }
-  }, [source, recorder]);
+  }, [captureKey, recorder]);
 
   // Make sure tearing down the modal always releases the camera /
   // screen-capture indicator. The hook's own unmount effect handles
@@ -403,37 +455,47 @@ export function RecorderModal({
   const canSave = recorder.state === 'stopped' && recorder.blob !== null;
   const isBusy = recorder.state === 'requesting' || recorder.state === 'stopping' || isSaving;
 
-  const activeTabDescription = TABS.find((t) => t.id === source)?.description;
+  // Toggles lock while a stream is live (acquiring or recording) — changing
+  // the capture config then would tear down the in-progress take.
+  const togglesLocked = recorder.state === 'recording' || recorder.state === 'requesting';
+  const toggleActiveFor = (key: 'mic' | 'camera' | 'screen') =>
+    key === 'mic' ? micOn : video === key;
+  const onToggle = (key: 'mic' | 'camera' | 'screen') => {
+    if (key === 'mic') {
+      setMicOn((on) => !on);
+    } else {
+      // Camera and Screen are mutually exclusive — turning one on clears the
+      // other (no camera+screen compositing).
+      setVideo((v) => (v === key ? 'none' : key));
+    }
+  };
 
   return (
     <div style={overlayStyle} role="dialog" aria-modal="true" aria-label="Record media">
       <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
         <h2 style={titleStyle}>Record media</h2>
 
-        <div style={tabRowStyle} role="tablist">
-          {TABS.map((tab) => {
-            const active = tab.id === source;
+        <div style={toggleRowStyle} role="group" aria-label="Capture sources">
+          {TOGGLES.map((t) => {
+            const active = toggleActiveFor(t.key);
             return (
               <button
-                key={tab.id}
-                role="tab"
-                aria-selected={active}
+                key={t.key}
                 type="button"
-                style={active ? tabActive : tabBase}
-                onClick={() => setSource(tab.id)}
-                disabled={recorder.state === 'recording' || recorder.state === 'requesting'}
+                aria-pressed={active}
+                style={active ? toggleActive : toggleBase}
+                onClick={() => onToggle(t.key)}
+                disabled={togglesLocked}
               >
-                {tab.label}
+                {t.label}
               </button>
             );
           })}
         </div>
 
-        {activeTabDescription && (
-          <p style={{ margin: '0 0 12px 0', fontSize: 12, color: '#5a4a2a' }}>
-            {activeTabDescription}
-          </p>
-        )}
+        <p style={{ margin: '0 0 12px 0', fontSize: 12, color: '#5a4a2a' }}>
+          {captureSummary(micOn, video)}
+        </p>
 
         {recorder.error && <div style={errorStyle}>{recorder.error.message}</div>}
         {saveError && <div style={errorStyle}>{saveError}</div>}
@@ -505,7 +567,7 @@ export function RecorderModal({
             />
           </>
         )}
-        {(source === 'screen' || source === 'screen+mic') && (
+        {video === 'screen' && (
           <label
             style={{
               display: 'flex',
@@ -562,7 +624,12 @@ export function RecorderModal({
           {(recorder.state === 'idle' ||
             recorder.state === 'error' ||
             recorder.state === 'requesting') && (
-            <button type="button" style={btnPrimary} onClick={handleRequest} disabled={isBusy}>
+            <button
+              type="button"
+              style={btnPrimary}
+              onClick={handleRequest}
+              disabled={isBusy || !canCapture}
+            >
               {recorder.state === 'requesting' ? 'Requesting…' : 'Start preview'}
             </button>
           )}

package/src/recorder/RecorderPanel.tsx

@@ -13,6 +13,7 @@ import { createPortal } from 'react-dom';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import { RecorderModal, type RecorderSaveResult } from './RecorderModal.js';
+import { Icon } from '../Icon';
 import type { RecorderSource } from './hooks/useMediaRecorder.js';
 
 export interface RecorderPanelProps {
@@ -26,31 +27,6 @@ export interface RecorderPanelProps {
   className?: string;
 }
 
-/**
- * Inline 16×16 SVG mic icon — currentColor-driven so it inherits the
- * toolbar's icon color regardless of theme.
- */
-function MicIcon() {
-  return (
-    <svg
-      width={16}
-      height={16}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x={5.5} y={2} width={5} height={8} rx={2.5} />
-      <path d="M3.5 7.5v1a4.5 4.5 0 0 0 9 0v-1" />
-      <line x1={8} y1={13} x2={8} y2={15} />
-      <line x1={5.5} y1={15} x2={10.5} y2={15} />
-    </svg>
-  );
-}
-
 export function RecorderPanel({
   mediaProvider,
   container = null,
@@ -72,7 +48,7 @@ export function RecorderPanel({
         aria-expanded={open}
         onClick={() => setOpen((v) => !v)}
       >
-        <MicIcon />
+        <Icon icon="fa-solid fa-microphone" />
       </button>
       {open &&
         typeof document !== 'undefined' &&

package/src/recorder/hooks/useMediaRecorder.ts

@@ -59,6 +59,13 @@ export interface UseMediaRecorderOptions {
    * only); when unsupported the resulting stream simply omits it.
    */
   systemAudio?: boolean;
+  /**
+   * For `source === 'camera'`, whether to include the microphone track.
+   * Defaults to `true` (camera + mic). Set `false` to capture silent
+   * video. Ignored for other sources, whose mic handling is encoded in
+   * the source itself (`'mic'`, `'screen+mic'`).
+   */
+  includeMicrophone?: boolean;
 }
 
 export interface UseMediaRecorderResult {
@@ -119,7 +126,7 @@ async function acquireStream(
     case 'camera': {
       const stream = await requestCameraStream({
         video: opts.videoConstraints ?? true,
-        audio: opts.audioConstraints ?? true,
+        audio: opts.includeMicrophone === false ? false : (opts.audioConstraints ?? true),
       });
       return { stream, dispose: () => {} };
     }

package/src/recorder/insertMediaBlock.ts

@@ -0,0 +1,30 @@
+/**
+ * insertMediaBlock — drop a recorded clip into the WYSIWYG editor as a
+ * *top-level* block, not at the raw caret position.
+ *
+ * The recorder's media nodes (`TiptapVideo` / `TiptapAudio`) are block
+ * atoms. A plain `insertContent` at a caret that happens to sit inside a
+ * list item (or blockquote) nests the atom inside that container — and
+ * `tiptapToMarkdown`'s list serializer emits only the item's inline text,
+ * so the nested `<video>` / `<audio>` is silently dropped on the next
+ * sync and never reaches the markdown source (so it also never shows up
+ * as a timeline clip). Lifting the insertion to the position right after
+ * the caret's top-level ancestor keeps the tag at document level, where
+ * the serializer's block-media handler round-trips it.
+ */
+import type { Editor } from '@tiptap/core';
+
+export interface MediaNodeSpec {
+  type: 'video' | 'audio';
+  attrs: Record<string, unknown>;
+}
+
+export function insertMediaBlock(editor: Editor, node: MediaNodeSpec): void {
+  const { $from } = editor.state.selection;
+  // `after(1)` is the position immediately after the depth-1 (top-level)
+  // ancestor of the selection — after the whole list / blockquote /
+  // paragraph the caret is in. Fall back to the document end for the rare
+  // depth-0 (node) selection.
+  const pos = $from.depth >= 1 ? $from.after(1) : editor.state.doc.content.size;
+  editor.chain().focus().insertContentAt(pos, node).run();
+}

package/src/resolveBlockVisual.ts

@@ -0,0 +1,33 @@
+/**
+ * resolveBlockVisual — resolves a doc block into a renderable card (with
+ * `layers`) via the shared preview pipeline (`buildPreviewDoc` → `getLayers`).
+ *
+ * Kept in its own module (rather than alongside `BlockThumbnail` in
+ * `TimelineBlockPreview.tsx`) so that component file exports only components,
+ * which keeps React Fast Refresh working.
+ */
+
+import type { Block, DocBlock, Doc, ViewportConfig, Theme } from '@bendyline/squisq/schemas';
+import { getLayers, type RenderContext } from '@bendyline/squisq/doc';
+import { buildPreviewDoc } from './buildPreviewDoc';
+
+/**
+ * Resolve a doc block into a renderable card (with `layers`) via the shared
+ * preview pipeline, or null when it can't be rendered.
+ */
+export function resolveBlockVisual(
+  doc: Doc,
+  block: Block,
+  theme: Theme,
+  viewport: ViewportConfig,
+): Block | null {
+  try {
+    const slide = buildPreviewDoc({ ...doc, blocks: [block] }).blocks[0] as DocBlock | undefined;
+    if (!slide) return null;
+    const ctx: RenderContext = { blockIndex: 0, totalBlocks: 1, theme, viewport };
+    const layers = getLayers(slide, ctx);
+    return { ...(slide as unknown as Block), layers };
+  } catch {
+    return null;
+  }
+}