@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/EditorShell.tsx

@@ -22,11 +22,23 @@ import { StatusBar } from './StatusBar';
 import { RawEditor } from './RawEditor';
 import { WysiwygEditor } from './WysiwygEditor';
 import { InlinePreviewGutter } from './InlinePreviewGutter';
-import { OutlinePanel } from './OutlinePanel';
+import { BlockPreviewPanel } from './BlockPreviewPanel';
+import { OutlinePanel, OUTLINE_RESPONSIVE_WIDTH } from './OutlinePanel';
+import { CodeContextZones } from './codeContext/CodeContextZones';
+import type { CodeContext } from './codeContext/types';
+import { BlockCardView } from './BlockCardView';
+import { TimelineTrack } from './TimelineTrack';
 import { PreviewPanel } from './PreviewPanel';
 import { ImageViewer } from './ImageViewer';
 import { ImageEditor } from './ImageEditor';
-import { PreviewSettingsProvider, PreviewToolbarControls } from './PreviewControls';
+import {
+  PreviewSettingsProvider,
+  PreviewToolbarControls,
+  PreviewModeSwitch,
+  PreviewFormatSwitch,
+  ThemeDesignerDock,
+} from './PreviewControls';
+import { CustomThemeProvider, useDocCustomThemes } from './customThemes';
 import { MediaBin } from './MediaBin';
 import { DropZoneOverlay } from './DropZoneOverlay';
 import { TooltipLayer } from './Tooltip';
@@ -48,7 +60,7 @@ import {
 import type { PrunePolicy, SaveVersionResult } from '@bendyline/squisq/versions';
 import type { CSSProperties, ReactNode } from 'react';
 
-export type { EditorTheme } from './EditorContext';
+export type { EditorColorScheme } from './EditorContext';
 
 export interface EditorShellProps {
   /** Initial markdown content */
@@ -62,8 +74,13 @@ export interface EditorShellProps {
   basePath?: string;
   /** Called when markdown source changes */
   onChange?: (source: string) => void;
-  /** Color theme: 'light' or 'dark' (default: 'light') */
-  theme?: 'light' | 'dark';
+  /**
+   * Light/dark chrome color scheme for the editor shell — toolbar, tabs,
+   * status bar, and side panes (default: `'light'`). This is the editor's
+   * UI mode, **not** a Squisq `Theme` object; the rendered document's
+   * styling is controlled separately via `themeOverride` / `Doc.themeId`.
+   */
+  colorScheme?: 'light' | 'dark';
   /** Additional class name */
   className?: string;
   /** CSS height for the shell container (default: '100vh') */
@@ -158,6 +175,13 @@ export interface EditorShellProps {
    * (Slack, Discord). When omitted, the editor behaves normally.
    */
   submitOnEnter?: () => void;
+  /**
+   * Host-supplied context dictionary rendered inside the Monaco (raw / code)
+   * surface: collapsible markdown sections injected above anchor lines, plus
+   * an optional file-top summary. See {@link CodeContext}. Ignored in
+   * WYSIWYG / preview / image surfaces.
+   */
+  codeContext?: CodeContext;
   /**
    * Let the WYSIWYG editing surface fill its container instead of rendering
    * as a centered 800px "page" column. Useful when embedding in chat
@@ -316,9 +340,11 @@ export interface EditorShellProps {
    */
   outline?: boolean;
   /**
-   * Width in pixels for the outline pane. Defaults to 240. Only takes
-   * effect when {@link EditorShellProps.outline} is true (or the View
-   * menu has toggled it on).
+   * Fixed width in pixels for the outline pane. When omitted, the pane sizes
+   * responsively — never narrower than 260px, growing with the window and
+   * capped at 460px — so it stretches out when there's horizontal space to
+   * spare. Only takes effect when {@link EditorShellProps.outline} is true (or
+   * the View menu has toggled it on).
    */
   outlineWidth?: number;
   /**
@@ -370,7 +396,7 @@ export function EditorShell({
   articleId = 'untitled',
   basePath = '/',
   onChange,
-  theme = 'light',
+  colorScheme = 'light',
   className,
   height = '100vh',
   minHeight,
@@ -389,6 +415,7 @@ export function EditorShell({
   toolbarSlotRight,
   showPlayTab = true,
   submitOnEnter,
+  codeContext,
   fullWidth = false,
   uxFont,
   thinMargins = false,
@@ -409,7 +436,7 @@ export function EditorShell({
   inlinePreview = false,
   inlinePreviewWidth = 320,
   outline = false,
-  outlineWidth = 240,
+  outlineWidth,
   blockTags = true,
   themeInheritance = 'fonts',
   viewPreferences,
@@ -441,7 +468,7 @@ export function EditorShell({
       initialMarkdown={initialMarkdown}
       initialView={effectiveInitialView}
       articleId={articleId}
-      theme={theme}
+      colorScheme={colorScheme}
       workspaceContainer={effectiveContainer}
       allowVersioning={allowVersioning}
       versionBasename={versionBasename}
@@ -479,6 +506,7 @@ export function EditorShell({
         toolbarSlotRight={toolbarSlotRight}
         showPlayTab={showPlayTab}
         submitOnEnter={submitOnEnter}
+        codeContext={codeContext}
         fullWidth={fullWidth}
         uxFont={uxFont}
         thinMargins={thinMargins}
@@ -514,6 +542,7 @@ interface EditorShellInnerProps {
   toolbarSlotRight?: ReactNode;
   showPlayTab: boolean;
   submitOnEnter?: () => void;
+  codeContext?: CodeContext;
   fullWidth: boolean;
   uxFont?: string;
   thinMargins: boolean;
@@ -526,7 +555,7 @@ interface EditorShellInnerProps {
   allowVersioning: boolean;
   versioningAutoSaveIdleMs?: number;
   inlinePreviewWidth: number;
-  outlineWidth: number;
+  outlineWidth?: number;
   themeOverride: Theme | null;
 }
 
@@ -546,6 +575,7 @@ function EditorShellInner({
   toolbarSlotRight,
   showPlayTab,
   submitOnEnter,
+  codeContext,
   fullWidth,
   uxFont,
   thinMargins,
@@ -565,7 +595,7 @@ function EditorShellInner({
     activeView,
     markdownSource,
     doc,
-    theme,
+    colorScheme,
     editorMode,
     insertAtCursor,
     replaceAll,
@@ -575,14 +605,31 @@ function EditorShellInner({
     inlinePreviewVisible,
     statusBarVisible,
     outlineVisible,
+    layoutMode,
+    blockCount,
+    activeBlockKey,
+    prevBlock,
+    nextBlock,
+    addBlock,
     imageEditTarget,
     closeImageEdit,
     bumpMediaRevision,
   } = useEditorContext();
+  // Dual-catalog custom themes (doc + browser library), mirroring how
+  // CustomTemplateProvider is fed. Wraps the preview subtree so the theme
+  // picker + designer can read/write both pools.
+  const { docThemes, onDocThemesChange } = useDocCustomThemes();
   const isPreview = activeView === 'preview';
   const isCodeMode = editorMode === 'code';
   const isImageMode = editorMode === 'image';
   const isMarkdownMode = editorMode === 'markdown';
+  // The block card (one block at a time) applies to the editing surfaces (raw /
+  // wysiwyg) in markdown mode — never to preview, code, or image. Both the
+  // block-at-a-time and timeline layouts scope the editor to a single block.
+  const isCardMode =
+    isMarkdownMode && (layoutMode === 'block' || layoutMode === 'timeline') && !isPreview;
+  // Timeline mode additionally shows the horizontal timeline track below.
+  const isTimelineMode = isMarkdownMode && layoutMode === 'timeline' && !isPreview;
   const [showFiles, setShowFiles] = useState(false);
   const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
   // Persistent fallback container for image-edit sidecars when the host
@@ -595,7 +642,7 @@ function EditorShellInner({
     imageEditFallbackContainerRef.current = new MemoryContentContainer();
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
-  const isDark = theme === 'dark';
+  const isDark = colorScheme === 'dark';
 
   const handleToggleFiles = useCallback(() => {
     setShowFiles((prev) => !prev);
@@ -736,7 +783,7 @@ function EditorShellInner({
   return (
     <div
       className={`squisq-editor-shell ${className || ''}`}
-      data-theme={theme}
+      data-theme={colorScheme}
       data-full-width={fullWidth ? 'true' : undefined}
       data-thin-margins={thinMargins ? 'true' : undefined}
       data-outline-visible={isMarkdownMode && outlineVisible ? 'true' : undefined}
@@ -750,145 +797,213 @@ function EditorShellInner({
         // tabs, status bar) consume `--squisq-ux-font` as their
         // `font-family`, falling back to the system stack when unset.
         ...(uxFont ? ({ '--squisq-ux-font': uxFont } as CSSProperties) : {}),
-        // Exposed so the toolbar's view-tabs section can match the outline
-        // pane's width, lining up its right-edge separator with the
-        // outline's right edge. The variable is set unconditionally so the
-        // outline pane itself can also read it if needed; the
-        // `data-outline-visible` gate above keeps the toolbar override
-        // scoped to the case where alignment matters.
-        ...({ '--squisq-outline-width': `${outlineWidth}px` } as CSSProperties),
+        // Exposed so the toolbar's view-tabs section AND the outline pane read
+        // one shared width, lining up the view-tabs' right-edge separator with
+        // the outline's right edge. A fixed `outlineWidth` pins it to px;
+        // otherwise it's the responsive clamp so the pane stretches when
+        // there's room. The `data-outline-visible` gate above keeps the
+        // toolbar override scoped to the case where alignment matters.
+        ...({
+          '--squisq-outline-width':
+            outlineWidth != null ? `${outlineWidth}px` : OUTLINE_RESPONSIVE_WIDTH,
+        } as CSSProperties),
       }}
       {...containerProps}
     >
-      <PreviewSettingsProvider doc={doc} themeOverride={themeOverride}>
-        {/* Header. In image mode the full markdown/code Toolbar is replaced
+      <CustomThemeProvider docThemes={docThemes} onDocThemesChange={onDocThemesChange}>
+        <PreviewSettingsProvider doc={doc} themeOverride={themeOverride}>
+          {/* Header. In image mode the full markdown/code Toolbar is replaced
             with a minimal slot bar — view tabs, formatting, and preview
             controls don't apply to a binary asset. */}
-        {isImageMode ? (
-          (toolbarSlotLeft || toolbarSlotRight) && (
-            <div className="squisq-editor-header squisq-editor-header--image">
-              {toolbarSlotLeft}
-              <div style={{ flex: 1 }} />
-              {toolbarSlotRight}
+          {isImageMode ? (
+            (toolbarSlotLeft || toolbarSlotRight) && (
+              <div className="squisq-editor-header squisq-editor-header--image">
+                {toolbarSlotLeft}
+                <div style={{ flex: 1 }} />
+                {toolbarSlotRight}
+              </div>
+            )
+          ) : (
+            <div className="squisq-editor-header">
+              <Toolbar
+                showFiles={showFiles}
+                onToggleFiles={!isCodeMode && filesToggleEnabled ? handleToggleFiles : undefined}
+                slotLeft={toolbarSlotLeft}
+                slotAfterTabs={
+                  !isCodeMode &&
+                  isPreview && (
+                    <div className="squisq-preview-left-controls">
+                      <PreviewModeSwitch />
+                      <span className="squisq-preview-seg-divider" aria-hidden="true" />
+                      <PreviewFormatSwitch />
+                    </div>
+                  )
+                }
+                slotAfterActions={
+                  <>
+                    {toolbarSlotAfterActions}
+                    {!isCodeMode && isPreview && <PreviewToolbarControls />}
+                  </>
+                }
+                slotRight={toolbarSlotRight}
+                showPlayTab={showPlayTab}
+              />
             </div>
-          )
-        ) : (
-          <div className="squisq-editor-header">
-            <Toolbar
-              showFiles={showFiles}
-              onToggleFiles={!isCodeMode && filesToggleEnabled ? handleToggleFiles : undefined}
-              slotLeft={toolbarSlotLeft}
-              slotAfterActions={
-                <>
-                  {toolbarSlotAfterActions}
-                  {!isCodeMode && isPreview && <PreviewToolbarControls />}
-                </>
-              }
-              slotRight={toolbarSlotRight}
-              showPlayTab={showPlayTab}
-            />
-          </div>
-        )}
+          )}
 
-        {/* Main content area */}
-        <div
-          className="squisq-editor-content"
-          style={{
-            flex: autoGrow ? '1 1 auto' : 1,
-            overflowY: autoGrow ? 'auto' : 'hidden',
-            overflowX: 'hidden',
-            minHeight: 0,
-            position: 'relative',
-            display: 'flex',
-          }}
-        >
+          {/* Main content area */}
           <div
+            className="squisq-editor-content"
             style={{
               flex: autoGrow ? '1 1 auto' : 1,
-              overflow: autoGrow ? 'visible' : 'hidden',
+              overflowY: autoGrow ? 'auto' : 'hidden',
+              overflowX: 'hidden',
               minHeight: 0,
               position: 'relative',
+              display: 'flex',
             }}
           >
-            {isImageMode &&
-              imageSrc &&
-              (imageMode === 'edit' && imageEditorContainer ? (
-                <ImageEditor
-                  filesContainer={imageEditorContainer}
-                  initialSrc={imageSrc}
-                  allowVersioning={allowVersioning}
-                  versioningAutoSaveIdleMs={versioningAutoSaveIdleMs}
-                  onExport={onImageExport}
-                />
-              ) : (
-                <ImageViewer src={imageSrc} alt={imageAlt} theme={theme} />
-              ))}
-            {/* Raw (Monaco) view. Always wrapped in `.squisq-editor-with-gutter`
+            <div
+              style={{
+                flex: autoGrow ? '1 1 auto' : 1,
+                overflow: autoGrow ? 'visible' : 'hidden',
+                minHeight: 0,
+                position: 'relative',
+              }}
+            >
+              {isImageMode &&
+                imageSrc &&
+                (imageMode === 'edit' && imageEditorContainer ? (
+                  <ImageEditor
+                    filesContainer={imageEditorContainer}
+                    initialSrc={imageSrc}
+                    allowVersioning={allowVersioning}
+                    versioningAutoSaveIdleMs={versioningAutoSaveIdleMs}
+                    onExport={onImageExport}
+                  />
+                ) : (
+                  <ImageViewer src={imageSrc} alt={imageAlt} theme={colorScheme} />
+                ))}
+              {/* Raw (Monaco) view. Always wrapped in `.squisq-editor-with-gutter`
                 so toggling a pane on/off doesn't change the editor's tree
                 position — Monaco stays mounted and `monacoEditor` in
                 context stays stable, which is what `useHeadingLayout` needs
                 to compute positions. */}
-            {!isImageMode && activeView === 'raw' && (
-              <div className="squisq-editor-with-gutter" key="raw-shell">
-                {isMarkdownMode && outlineVisible && (
-                  <OutlinePanel key="outline" width={outlineWidth} />
-                )}
-                <div key="raw-editor" className="squisq-raw-editor-container">
-                  <RawEditor
-                    theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-                    submitOnEnter={submitOnEnter}
-                    readOnly={readOnly}
-                  />
+              {!isImageMode && activeView === 'raw' && (
+                <div className="squisq-editor-with-gutter" key="raw-shell">
+                  {isMarkdownMode && outlineVisible && (
+                    <OutlinePanel key="outline" width={outlineWidth} />
+                  )}
+                  {isCardMode ? (
+                    <BlockCardView
+                      key="raw-card"
+                      blockCount={blockCount}
+                      activeBlockKey={activeBlockKey}
+                      onPrev={prevBlock}
+                      onNext={nextBlock}
+                      onAdd={addBlock}
+                    >
+                      <div key="raw-editor" className="squisq-raw-editor-container">
+                        <RawEditor
+                          monacoTheme={colorScheme === 'dark' ? 'vs-dark' : 'vs'}
+                          submitOnEnter={submitOnEnter}
+                          readOnly={readOnly}
+                        />
+                      </div>
+                    </BlockCardView>
+                  ) : (
+                    <div key="raw-editor" className="squisq-raw-editor-container">
+                      <RawEditor
+                        monacoTheme={colorScheme === 'dark' ? 'vs-dark' : 'vs'}
+                        submitOnEnter={submitOnEnter}
+                        readOnly={readOnly}
+                      />
+                    </div>
+                  )}
+                  {/* Renders nothing in normal flow — portals context
+                    sections into Monaco view zones via the context's
+                    monacoEditor. Code mode only. */}
+                  {isCodeMode && codeContext && (
+                    <CodeContextZones key="code-context" options={codeContext} />
+                  )}
+                  {isMarkdownMode && isCardMode && inlinePreviewVisible && (
+                    <BlockPreviewPanel key="block-preview" basePath={basePath} />
+                  )}
+                  {isMarkdownMode && !isCardMode && inlinePreviewVisible && (
+                    <InlinePreviewGutter
+                      key="inline"
+                      width={inlinePreviewWidth}
+                      basePath={basePath}
+                      mediaProvider={mediaProvider}
+                    />
+                  )}
                 </div>
-                {isMarkdownMode && inlinePreviewVisible && (
-                  <InlinePreviewGutter
-                    key="inline"
-                    width={inlinePreviewWidth}
-                    basePath={basePath}
-                    mediaProvider={mediaProvider}
-                  />
-                )}
-              </div>
-            )}
-            {/* WYSIWYG + Preview are markdown-only surfaces — skip them
+              )}
+              {/* WYSIWYG + Preview are markdown-only surfaces — skip them
                 entirely in code or image mode so Tiptap never initializes
                 and the preview pipeline stays idle. Same always-wrapped
                 pattern as the Raw branch above so pane toggles don't
                 remount Tiptap. */}
-            {isMarkdownMode && activeView === 'wysiwyg' && (
-              <div className="squisq-editor-with-gutter" key="wysiwyg-shell">
-                {outlineVisible && <OutlinePanel key="outline" width={outlineWidth} />}
-                <WysiwygEditor
-                  key="wysiwyg-editor"
-                  submitOnEnter={submitOnEnter}
-                  placeholder={placeholder}
-                  readOnly={readOnly}
-                />
-                {inlinePreviewVisible && (
-                  <InlinePreviewGutter
-                    key="inline"
-                    width={inlinePreviewWidth}
-                    basePath={basePath}
-                    mediaProvider={mediaProvider}
-                  />
-                )}
-              </div>
-            )}
-            {isMarkdownMode && isPreview && (
-              <PreviewPanel basePath={basePath} workspaceContainer={workspaceContainer} />
+              {isMarkdownMode && activeView === 'wysiwyg' && (
+                <div className="squisq-editor-with-gutter" key="wysiwyg-shell">
+                  {outlineVisible && <OutlinePanel key="outline" width={outlineWidth} />}
+                  {isCardMode ? (
+                    <BlockCardView
+                      key="wysiwyg-card"
+                      blockCount={blockCount}
+                      activeBlockKey={activeBlockKey}
+                      onPrev={prevBlock}
+                      onNext={nextBlock}
+                      onAdd={addBlock}
+                    >
+                      <WysiwygEditor
+                        key="wysiwyg-editor"
+                        submitOnEnter={submitOnEnter}
+                        placeholder={placeholder}
+                        readOnly={readOnly}
+                      />
+                    </BlockCardView>
+                  ) : (
+                    <WysiwygEditor
+                      key="wysiwyg-editor"
+                      submitOnEnter={submitOnEnter}
+                      placeholder={placeholder}
+                      readOnly={readOnly}
+                    />
+                  )}
+                  {isCardMode && inlinePreviewVisible && (
+                    <BlockPreviewPanel key="block-preview" basePath={basePath} />
+                  )}
+                  {!isCardMode && inlinePreviewVisible && (
+                    <InlinePreviewGutter
+                      key="inline"
+                      width={inlinePreviewWidth}
+                      basePath={basePath}
+                      mediaProvider={mediaProvider}
+                    />
+                  )}
+                </div>
+              )}
+              {isMarkdownMode && isPreview && (
+                <PreviewPanel basePath={basePath} workspaceContainer={workspaceContainer} />
+              )}
+            </div>
+
+            {isMarkdownMode && showFiles && (
+              <MediaBin
+                mediaProvider={mediaProvider}
+                isDark={isDark}
+                refreshKey={mediaRefreshKey}
+                onMediaUploaded={insertMediaRef}
+              />
             )}
-          </div>
 
-          {isMarkdownMode && showFiles && (
-            <MediaBin
-              mediaProvider={mediaProvider}
-              isDark={isDark}
-              refreshKey={mediaRefreshKey}
-              onMediaUploaded={insertMediaRef}
-            />
-          )}
+            {/* Docked custom-theme designer — a flex sibling of the preview, so
+              opening it reflows the preview narrower. Renders nothing when the
+              designer is closed. */}
+            {isMarkdownMode && <ThemeDesignerDock />}
 
-          {/* Drop zone overlay — image / text drop UX is markdown-specific.
+            {/* Drop zone overlay — image / text drop UX is markdown-specific.
               In WYSIWYG, image drops are handled directly by Tiptap's
               `handleDrop` (uploads to the MediaProvider and inserts an
               image node at the mouse position). The overlay would sit on
@@ -896,23 +1011,29 @@ function EditorShellInner({
               when the dragged content is media-only on the WYSIWYG view —
               the user gets a one-step "drop where you want it" flow
               instead of a two-step "drop in bin, then insert" flow. */}
-          {isMarkdownMode &&
-            isDragging &&
-            !(activeView === 'wysiwyg' && dragContentType === 'media') && (
-              <DropZoneOverlay
-                dragContentType={dragContentType}
-                zoneProps={zoneProps}
-                hasMediaProvider={mediaProvider !== null}
-              />
-            )}
-        </div>
+            {isMarkdownMode &&
+              isDragging &&
+              !(activeView === 'wysiwyg' && dragContentType === 'media') && (
+                <DropZoneOverlay
+                  dragContentType={dragContentType}
+                  zoneProps={zoneProps}
+                  hasMediaProvider={mediaProvider !== null}
+                />
+              )}
+          </div>
+
+          {/* Timeline track — horizontal strip of block + media bars shown
+            below the editor in Timeline view. The card editor above (driven by
+            the block navigator) shows whichever block is selected here. */}
+          {isTimelineMode && <TimelineTrack />}
 
-        {/* Status bar — word / char / line / block counts. Host can
+          {/* Status bar — word / char / line / block counts. Host can
             suppress via `showStatusBar={false}` for embedded chat-style
             composers where the stats are noise. The image viewer has its
             own dimension/zoom status row, so suppress here too. */}
-        {statusBarVisible && !isImageMode && <StatusBar />}
-      </PreviewSettingsProvider>
+          {statusBarVisible && !isImageMode && <StatusBar />}
+        </PreviewSettingsProvider>
+      </CustomThemeProvider>
       <TooltipLayer />
       {imageEditTarget !== null && mediaProvider && (
         <ImageEditModal
@@ -926,7 +1047,7 @@ function EditorShellInner({
           }}
           allowVersioning={allowVersioning}
           versioningAutoSaveIdleMs={versioningAutoSaveIdleMs}
-          shellTheme={theme}
+          shellTheme={colorScheme}
         />
       )}
     </div>
@@ -951,8 +1072,8 @@ interface ImageEditModalProps {
   onSaved: () => void;
   allowVersioning: boolean;
   versioningAutoSaveIdleMs?: number;
-  /** EditorShell's `theme` prop — 'light' or 'dark'. Threaded through so
-   *  the image editor chrome matches the host shell. */
+  /** EditorShell's `colorScheme` prop — 'light' or 'dark'. Threaded through
+   *  so the image editor chrome matches the host shell. */
   shellTheme?: 'light' | 'dark';
 }