@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/EditorContext.tsx

@@ -32,6 +32,8 @@ import type { Editor as TiptapEditor } from '@tiptap/core';
 import type { editor as MonacoEditorNs } from 'monaco-editor';
 import { markdownToTiptap } from './tiptapBridge';
 import { resolveFileKind } from './fileKind';
+import { useBlockNavigator } from './useBlockNavigator';
+import { sceneTextChannel, type SceneTextHandle } from './scene/text/sceneTextChannel';
 
 /** Monaco standalone code editor instance type */
 type MonacoEditor = MonacoEditorNs.IStandaloneCodeEditor;
@@ -89,7 +91,22 @@ export type DocumentLinkProvider = (query: string) => Promise<DocumentLinkCandid
 // ─── Types ───────────────────────────────────────────────
 
 export type EditorView = 'raw' | 'wysiwyg' | 'preview';
-export type EditorTheme = 'light' | 'dark';
+/**
+ * Light/dark chrome mode for the editor shell (toolbar, tabs, status bar,
+ * side panes). This is the editor's *UI color scheme* — distinct from a
+ * Squisq `Theme` object, which styles the rendered document. Renamed from
+ * the former `EditorTheme` to remove that ambiguity.
+ */
+export type EditorColorScheme = 'light' | 'dark';
+/**
+ * Document layout mode. `'document'` shows the whole markdown document in
+ * the active view (the historical behavior). `'block'` is the
+ * block-at-a-time view — one heading-defined block on a card at a time,
+ * with the editor scoped to just that block. `'timeline'` is block mode plus
+ * a horizontal timeline track for editing block durations and media slices.
+ * See {@link useBlockNavigator}.
+ */
+export type LayoutMode = 'document' | 'block' | 'timeline';
 /**
  * How much of the active Squisq theme the WYSIWYG editing surface
  * mirrors. `'fonts'` is the historical default — body and heading
@@ -117,8 +134,8 @@ export interface EditorState {
   parseError: string | null;
   /** Whether a parse is pending */
   isParsing: boolean;
-  /** Current color theme */
-  theme: EditorTheme;
+  /** Current light/dark chrome color scheme for the editor shell. */
+  colorScheme: EditorColorScheme;
   /** Operating mode — 'markdown' for the full shell, 'code' for Monaco-only. */
   editorMode: EditorMode;
   /** Monaco language ID for the Raw editor. */
@@ -179,11 +196,48 @@ export interface EditorState {
    * shell.
    */
   allowRecording: boolean;
+  /**
+   * Document layout mode. `'document'` (default) edits the whole document;
+   * `'block'` activates the block-at-a-time card view. Initialized from the
+   * EditorShell `layoutMode` prop; the View menu can toggle it at runtime.
+   */
+  layoutMode: LayoutMode;
+  /**
+   * The markdown the active text editor should bind to: the full source in
+   * `'document'` mode, or just the active block's slice in `'block'` mode.
+   * Editors read this instead of `markdownSource` so the same surfaces work
+   * in both layouts.
+   */
+  editorSource: string;
+  /** Number of navigable blocks (cards) in the current document. */
+  blockCount: number;
+  /** Index of the block currently shown on the card (block mode). */
+  activeBlockKey: number;
+  /** 1-based source line where the active block begins, or null. */
+  activeBlockStartLine: number | null;
 }
 
 export interface EditorActions {
   /** Set markdown source and trigger re-parse */
   setMarkdownSource: (source: string) => void;
+  /**
+   * Write through the active editor channel. In `'document'` mode this is
+   * `setMarkdownSource`; in `'block'` mode it splices the edited block back
+   * into the full document. Editors call this instead of `setMarkdownSource`.
+   */
+  setEditorSource: (source: string) => void;
+  /** Switch between Document and Block-at-a-time layouts. */
+  setLayoutMode: (mode: LayoutMode) => void;
+  /** Show a block by index in block mode (clamped to range). */
+  goToBlock: (key: number) => void;
+  /** Show the block that owns a given 1-based source line (used by the outline). */
+  goToBlockByLine: (line: number) => void;
+  /** Move the card to the previous block. */
+  prevBlock: () => void;
+  /** Move the card to the next block. */
+  nextBlock: () => void;
+  /** Insert a new heading block after the active one and move to it. */
+  addBlock: () => void;
   /** Set markdown from a MarkdownDocument (e.g. from WYSIWYG) */
   setMarkdownDoc: (doc: MarkdownDocument) => void;
   /** Switch the active view */
@@ -192,8 +246,8 @@ export interface EditorActions {
   setTiptapEditor: (editor: TiptapEditor | null) => void;
   /** Register / unregister the Monaco editor instance (called by RawEditor) */
   setMonacoEditor: (editor: MonacoEditor | null) => void;
-  /** Set the color theme */
-  setTheme: (theme: EditorTheme) => void;
+  /** Set the light/dark chrome color scheme for the editor shell. */
+  setColorScheme: (colorScheme: EditorColorScheme) => void;
   /** Show or hide the inline preview gutter at runtime (driven by the View menu). */
   setInlinePreviewVisible: (visible: boolean) => void;
   /** Show or hide the bottom status bar at runtime (driven by the View menu). */
@@ -230,6 +284,14 @@ export interface EditorContextValue extends EditorState, EditorActions {
   tiptapEditor: TiptapEditor | null;
   /** The live Monaco editor instance (null when Raw is not mounted) */
   monacoEditor: MonacoEditor | null;
+  /**
+   * The focused canvas textbox editor, if any — a small Tiptap instance for
+   * a diagram/drawing/layout textbox being edited inline. Published via
+   * `sceneTextChannel` (the canvas renders in a detached React root). The
+   * top formatting toolbar retargets to this when set. `level` gates which
+   * buttons apply (`inline` = marks only; `rich` = headings/lists too).
+   */
+  activeSceneText: SceneTextHandle | null;
   /**
    * Workspace-scoped `ContentContainer` for this document — the folder
    * holding the doc, its `_files/` sidecar, sibling documents, and any
@@ -304,8 +366,8 @@ export interface EditorProviderProps {
   initialView?: EditorView;
   /** Article ID used when generating the Doc */
   articleId?: string;
-  /** Color theme */
-  theme?: EditorTheme;
+  /** Light/dark chrome color scheme for the editor shell. */
+  colorScheme?: EditorColorScheme;
   /**
    * Workspace-scoped `ContentContainer` for this document — the folder
    * holding the doc, its `_files/` sidecar, sibling documents, and any
@@ -396,6 +458,12 @@ export interface EditorProviderProps {
    * toolbar's View menu can change it at runtime.
    */
   themeInheritance?: ThemeInheritance;
+  /**
+   * Initial layout mode. Defaults to `'document'` (whole-document editing).
+   * `'block'` boots into the block-at-a-time card view. The toolbar's View
+   * menu can toggle it at runtime.
+   */
+  layoutMode?: LayoutMode;
   /**
    * Bundled view preferences — a serializable JSON blob covering all
    * runtime-toggleable view options. When provided, individual values
@@ -432,6 +500,8 @@ export interface ViewPreferences {
   blockTags?: boolean;
   /** How much of the active Squisq theme the WYSIWYG surface mirrors. */
   themeInheritance?: ThemeInheritance;
+  /** Document vs. block-at-a-time layout. */
+  layoutMode?: LayoutMode;
 }
 
 /**
@@ -445,7 +515,7 @@ export function EditorProvider({
   initialMarkdown = '',
   initialView = 'raw',
   articleId = 'untitled',
-  theme: initialTheme = 'light',
+  colorScheme: initialColorScheme = 'light',
   workspaceContainer = null,
   allowVersioning = false,
   versionBasename,
@@ -464,6 +534,7 @@ export function EditorProvider({
   outline = false,
   blockTags = true,
   themeInheritance = 'fonts',
+  layoutMode = 'document',
   viewPreferences,
   onViewPreferencesChange,
   children,
@@ -476,6 +547,7 @@ export function EditorProvider({
   const effectiveOutline = viewPreferences?.outline ?? outline;
   const effectiveBlockTags = viewPreferences?.blockTags ?? blockTags;
   const effectiveThemeInheritance = viewPreferences?.themeInheritance ?? themeInheritance;
+  const effectiveLayoutMode = viewPreferences?.layoutMode ?? layoutMode;
   // Resolve once per provider mount. Changing fileName/language after mount
   // would require recreating the Monaco model anyway, so treat it as static.
   const { mode: editorMode, language: resolvedLanguage } = useMemo(
@@ -504,7 +576,7 @@ export function EditorProvider({
   );
   const [parseError, setParseError] = useState<string | null>(null);
   const [isParsing, setIsParsing] = useState(false);
-  const [theme, setTheme] = useState<EditorTheme>(initialTheme);
+  const [colorScheme, setColorScheme] = useState<EditorColorScheme>(initialColorScheme);
   const [inlinePreviewVisible, setInlinePreviewVisibleRaw] =
     useState<boolean>(effectiveInlinePreview);
   // Sync visibility when the host changes the prop (e.g., toggle from outside).
@@ -528,6 +600,10 @@ export function EditorProvider({
   useEffect(() => {
     setThemeInheritanceRaw(themeInheritance);
   }, [themeInheritance]);
+  const [layoutModeState, setLayoutModeRaw] = useState<LayoutMode>(effectiveLayoutMode);
+  useEffect(() => {
+    setLayoutModeRaw(layoutMode);
+  }, [layoutMode]);
   const [imageEditTarget, setImageEditTarget] = useState<string | null>(null);
   const [mediaRevision, setMediaRevision] = useState(0);
   const openImageEdit = useCallback((relativePath: string) => {
@@ -560,6 +636,9 @@ export function EditorProvider({
     if (viewPreferences.themeInheritance !== undefined) {
       setThemeInheritanceRaw(viewPreferences.themeInheritance);
     }
+    if (viewPreferences.layoutMode !== undefined) {
+      setLayoutModeRaw(viewPreferences.layoutMode);
+    }
   }, [viewPreferences]);
 
   // Wrap the three setters so user-driven toggles emit a snapshot via
@@ -579,6 +658,8 @@ export function EditorProvider({
   blockTagsRef.current = blockTagsVisible;
   const themeInheritanceRef = useRef(themeInheritanceState);
   themeInheritanceRef.current = themeInheritanceState;
+  const layoutModeRef = useRef(layoutModeState);
+  layoutModeRef.current = layoutModeState;
   const setInlinePreviewVisible = useCallback((visible: boolean) => {
     setInlinePreviewVisibleRaw(visible);
     onViewPreferencesChangeRef.current?.({
@@ -587,6 +668,7 @@ export function EditorProvider({
       outline: outlineRef.current,
       blockTags: blockTagsRef.current,
       themeInheritance: themeInheritanceRef.current,
+      layoutMode: layoutModeRef.current,
     });
   }, []);
   const setStatusBarVisible = useCallback((visible: boolean) => {
@@ -597,6 +679,7 @@ export function EditorProvider({
       outline: outlineRef.current,
       blockTags: blockTagsRef.current,
       themeInheritance: themeInheritanceRef.current,
+      layoutMode: layoutModeRef.current,
     });
   }, []);
   const setOutlineVisible = useCallback((visible: boolean) => {
@@ -607,6 +690,7 @@ export function EditorProvider({
       outline: visible,
       blockTags: blockTagsRef.current,
       themeInheritance: themeInheritanceRef.current,
+      layoutMode: layoutModeRef.current,
     });
   }, []);
   const setBlockTagsVisible = useCallback((visible: boolean) => {
@@ -617,6 +701,7 @@ export function EditorProvider({
       outline: outlineRef.current,
       blockTags: visible,
       themeInheritance: themeInheritanceRef.current,
+      layoutMode: layoutModeRef.current,
     });
   }, []);
   const setThemeInheritance = useCallback((mode: ThemeInheritance) => {
@@ -627,18 +712,35 @@ export function EditorProvider({
       outline: outlineRef.current,
       blockTags: blockTagsRef.current,
       themeInheritance: mode,
+      layoutMode: layoutModeRef.current,
+    });
+  }, []);
+  const setLayoutMode = useCallback((mode: LayoutMode) => {
+    setLayoutModeRaw(mode);
+    onViewPreferencesChangeRef.current?.({
+      inlinePreview: inlinePreviewRef.current,
+      showStatusBar: statusBarRef.current,
+      outline: outlineRef.current,
+      blockTags: blockTagsRef.current,
+      themeInheritance: themeInheritanceRef.current,
+      layoutMode: mode,
     });
   }, []);
   const [tiptapEditor, setTiptapEditor] = useState<TiptapEditor | null>(null);
   const [monacoEditor, setMonacoEditor] = useState<MonacoEditor | null>(null);
+  // Mirror the focused canvas textbox editor (published by the inline
+  // SceneTextOverlay through a module channel, since the canvas renders in
+  // a detached React root outside this provider) so the toolbar can target it.
+  const [activeSceneText, setActiveSceneText] = useState<SceneTextHandle | null>(null);
+  useEffect(() => sceneTextChannel.subscribe(setActiveSceneText), []);
 
   const articleIdRef = useRef(articleId);
   articleIdRef.current = articleId;
 
-  // Sync theme when prop changes
+  // Sync color scheme when prop changes
   useEffect(() => {
-    setTheme(initialTheme);
-  }, [initialTheme]);
+    setColorScheme(initialColorScheme);
+  }, [initialColorScheme]);
 
   // Debounced parse on markdown source change
   const parseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -702,6 +804,27 @@ export function EditorProvider({
     setMarkdownSourceRaw(source);
   }, []);
 
+  // Block-at-a-time navigation. In 'document' mode the channel passes
+  // through to the full source; in 'block' mode `editorSource` is the active
+  // block's slice and `setEditorSource` splices edits back in. Gated to
+  // markdown mode — code/image surfaces always edit the whole file.
+  const blockNav = useBlockNavigator(markdownSource, setMarkdownSource, {
+    enabled:
+      (layoutModeState === 'block' || layoutModeState === 'timeline') && editorMode === 'markdown',
+  });
+  const {
+    editorSource,
+    setEditorSource,
+    blockCount,
+    activeBlockKey,
+    activeBlockStartLine,
+    goToBlock,
+    goToBlockByLine,
+    prevBlock,
+    nextBlock,
+    addBlock,
+  } = blockNav;
+
   const insertAtCursor = useCallback(
     (text: string) => {
       if (activeView === 'wysiwyg' && tiptapEditor) {
@@ -854,7 +977,7 @@ export function EditorProvider({
       activeView,
       parseError,
       isParsing,
-      theme,
+      colorScheme,
       editorMode,
       language: resolvedLanguage,
       inlinePreviewVisible,
@@ -862,11 +985,17 @@ export function EditorProvider({
       outlineVisible,
       blockTagsVisible,
       themeInheritance: themeInheritanceState,
+      layoutMode: layoutModeState,
+      editorSource,
+      blockCount,
+      activeBlockKey,
+      activeBlockStartLine,
       imageEditTarget,
       mediaRevision,
       allowRecording,
       tiptapEditor,
       monacoEditor,
+      activeSceneText,
       workspaceContainer,
       versioning,
       saveVersion,
@@ -875,11 +1004,18 @@ export function EditorProvider({
       mentionProvider,
       documentLinkProvider,
       setMarkdownSource,
+      setEditorSource,
+      setLayoutMode,
+      goToBlock,
+      goToBlockByLine,
+      prevBlock,
+      nextBlock,
+      addBlock,
       setMarkdownDoc,
       setActiveView,
       setTiptapEditor,
       setMonacoEditor,
-      setTheme,
+      setColorScheme,
       setInlinePreviewVisible,
       setStatusBarVisible,
       setOutlineVisible,
@@ -898,7 +1034,7 @@ export function EditorProvider({
       activeView,
       parseError,
       isParsing,
-      theme,
+      colorScheme,
       editorMode,
       resolvedLanguage,
       inlinePreviewVisible,
@@ -906,8 +1042,14 @@ export function EditorProvider({
       outlineVisible,
       blockTagsVisible,
       themeInheritanceState,
+      layoutModeState,
+      editorSource,
+      blockCount,
+      activeBlockKey,
+      activeBlockStartLine,
       tiptapEditor,
       monacoEditor,
+      activeSceneText,
       workspaceContainer,
       versioning,
       saveVersion,
@@ -916,11 +1058,18 @@ export function EditorProvider({
       mentionProvider,
       documentLinkProvider,
       setMarkdownSource,
+      setEditorSource,
+      setLayoutMode,
+      goToBlock,
+      goToBlockByLine,
+      prevBlock,
+      nextBlock,
+      addBlock,
       setMarkdownDoc,
       setActiveView,
       setTiptapEditor,
       setMonacoEditor,
-      setTheme,
+      setColorScheme,
       setInlinePreviewVisible,
       setStatusBarVisible,
       setOutlineVisible,