@bendyline/squisq-editor-react 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -56,9 +56,9 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "2.0.1",
-    "@bendyline/squisq-formats": "2.0.1",
-    "@bendyline/squisq-react": "2.0.1",
+    "@bendyline/squisq": "2.1.0",
+    "@bendyline/squisq-formats": "2.1.0",
+    "@bendyline/squisq-react": "2.1.0",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",
@@ -74,7 +74,8 @@
     "@tiptap/pm": "2.27.2",
     "@tiptap/react": "2.27.2",
     "@tiptap/starter-kit": "2.27.2",
-    "@tiptap/suggestion": "2.27.2"
+    "@tiptap/suggestion": "2.27.2",
+    "mermaid": "11.16.0"
   },
   "devDependencies": {
     "@types/react": "18.3.28",

package/src/EditorContext.tsx

@@ -153,6 +153,8 @@ export interface EditorState {
   colorScheme: EditorColorScheme;
   /** Operating mode — 'markdown' for the full shell, 'code' for Monaco-only. */
   editorMode: EditorMode;
+  /** Whether the host-triggered Find toolbar is active. */
+  findMode: boolean;
   /** Monaco language ID for the Raw editor. */
   language: string;
   /**
@@ -263,6 +265,8 @@ export interface EditorActions {
   setMarkdownDoc: (doc: MarkdownDocument) => void;
   /** Switch the active view */
   setActiveView: (view: EditorView) => void;
+  /** Enter or leave the host-triggered Find toolbar mode. */
+  setFindMode: (active: boolean) => void;
   /** Register / unregister the Tiptap editor instance (called by WysiwygEditor) */
   setTiptapEditor: (editor: TiptapEditor | null) => void;
   /** Register / unregister the Monaco editor instance (called by RawEditor) */
@@ -462,6 +466,13 @@ export interface EditorProviderProps {
   fileName?: string;
   /** Explicit Monaco language ID — wins over the fileName-derived one. */
   language?: string;
+  /**
+   * Controlled Find-mode state. No trigger button is rendered by default;
+   * hosts can set this prop or call `setFindMode` from editor context.
+   */
+  findMode?: boolean;
+  /** Notified when Find mode requests a state change (for example, its X button). */
+  onFindModeChange?: (active: boolean) => void;
   /**
    * Initial visibility of the inline preview gutter. Defaults to false.
    * The toolbar's View menu can toggle it at runtime.
@@ -577,6 +588,8 @@ export function EditorProvider({
   allowNarrate = true,
   fileName,
   language,
+  findMode: controlledFindMode,
+  onFindModeChange,
   inlinePreview = false,
   showStatusBar = true,
   outline = false,
@@ -618,6 +631,16 @@ export function EditorProvider({
   const [activeView, setActiveViewRaw] = useState<EditorView>(
     editorMode === 'markdown' ? initialView : 'raw',
   );
+  const [uncontrolledFindMode, setUncontrolledFindMode] = useState(false);
+  const findMode = editorMode !== 'image' && (controlledFindMode ?? uncontrolledFindMode);
+  const setFindMode = useCallback(
+    (active: boolean) => {
+      if (editorMode === 'image') return;
+      if (controlledFindMode === undefined) setUncontrolledFindMode(active);
+      onFindModeChange?.(active);
+    },
+    [controlledFindMode, editorMode, onFindModeChange],
+  );
   const activeViewRef = useRef(activeView);
   activeViewRef.current = activeView;
   const tiptapEditorRef = useRef<TiptapEditor | null>(null);
@@ -1128,6 +1151,7 @@ export function EditorProvider({
       isParsing,
       colorScheme,
       editorMode,
+      findMode,
       language: resolvedLanguage,
       inlinePreviewVisible,
       statusBarVisible,
@@ -1165,6 +1189,7 @@ export function EditorProvider({
       addBlock,
       setMarkdownDoc,
       setActiveView,
+      setFindMode,
       setTiptapEditor,
       setMonacoEditor,
       setColorScheme,
@@ -1189,6 +1214,7 @@ export function EditorProvider({
       isParsing,
       colorScheme,
       editorMode,
+      findMode,
       resolvedLanguage,
       inlinePreviewVisible,
       statusBarVisible,
@@ -1222,6 +1248,7 @@ export function EditorProvider({
       addBlock,
       setMarkdownDoc,
       setActiveView,
+      setFindMode,
       setTiptapEditor,
       setMonacoEditor,
       setColorScheme,

package/src/EditorShell.tsx

@@ -65,6 +65,7 @@ import {
 import type { PrunePolicy, SaveVersionResult } from '@bendyline/squisq/versions';
 import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';
 import { MediaContext } from '@bendyline/squisq-react';
+import { writeCanvasSettingsStyle, type WriteCanvasSettings } from './writeCanvasSettings';
 
 export type { EditorColorScheme } from './EditorContext';
 
@@ -210,6 +211,12 @@ export interface EditorShellProps {
    * toolbar, tabs, and status bar keep their normal sizing.
    */
   thinMargins?: boolean;
+  /**
+   * Host-controlled typography for the markdown Write canvas. `textSize` is
+   * measured in CSS pixels and `lineSpacing` is a unitless line-height
+   * multiplier. This is presentation-only and does not modify the markdown.
+   */
+  writeCanvasSettings?: WriteCanvasSettings;
   /**
    * Render the bottom status bar (word / character / line / block counts
    * and parse-state indicator). Defaults to `true`. Set to `false` in
@@ -243,6 +250,14 @@ export interface EditorShellProps {
    * switches the shell into code mode.
    */
   language?: string;
+  /**
+   * Controlled Find-mode state. Find has no built-in trigger button; hosts
+   * opt in by setting this prop (or by calling `setFindMode` from a toolbar
+   * slot rendered inside the editor context).
+   */
+  findMode?: boolean;
+  /** Called when Find mode requests a state change, including its X button. */
+  onFindModeChange?: (active: boolean) => void;
   /**
    * Optional async provider for `@`-mention suggestions. When supplied,
    * typing `@` inside the editor opens a popover of candidates; selecting
@@ -431,10 +446,13 @@ export function EditorShell({
   fullWidth = false,
   uxFont,
   thinMargins = false,
+  writeCanvasSettings,
   showStatusBar = true,
   imageDisplayMode = 'inline',
   fileName,
   language,
+  findMode,
+  onFindModeChange,
   mentionProvider,
   documentLinkProvider,
   allowRecording = true,
@@ -498,6 +516,8 @@ export function EditorShell({
         allowNarrate={allowNarrate}
         fileName={fileName}
         language={language}
+        findMode={findMode}
+        onFindModeChange={onFindModeChange}
         inlinePreview={inlinePreview}
         showStatusBar={showStatusBar}
         outline={outline}
@@ -527,6 +547,7 @@ export function EditorShell({
           fullWidth={fullWidth}
           uxFont={uxFont}
           thinMargins={thinMargins}
+          writeCanvasSettings={writeCanvasSettings}
           readOnly={readOnly}
           imageSrc={imageSrc}
           imageAlt={imageAlt}
@@ -564,6 +585,7 @@ interface EditorShellInnerProps {
   fullWidth: boolean;
   uxFont?: string;
   thinMargins: boolean;
+  writeCanvasSettings?: WriteCanvasSettings;
   readOnly: boolean;
   imageSrc?: string;
   imageAlt?: string;
@@ -597,6 +619,7 @@ function EditorShellInner({
   fullWidth,
   uxFont,
   thinMargins,
+  writeCanvasSettings,
   readOnly,
   imageSrc,
   imageAlt,
@@ -862,6 +885,7 @@ 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) : {}),
+        ...writeCanvasSettingsStyle(writeCanvasSettings),
         // 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;

package/src/PreviewControls.tsx

@@ -616,6 +616,20 @@ const SUMMARIZE_TOOLTIP =
 type ControlKey = 'format' | 'theme' | 'transform' | 'captions' | 'cover';
 const CONTROL_KEYS: ControlKey[] = ['format', 'theme', 'transform', 'captions', 'cover'];
 
+/**
+ * Controls that apply to the active display mode. Page (`linear`) is a
+ * variable-height HTML rendition: the aspect-ratio format switch only
+ * affects embedded canvas sections (which default sensibly) and captions
+ * never applied, so both are hidden there. Cover, Theme, and Summarize
+ * remain live in every mode.
+ */
+function controlKeysForMode(displayMode: string): ControlKey[] {
+  if (displayMode === 'linear') {
+    return CONTROL_KEYS.filter((key) => key !== 'format' && key !== 'captions');
+  }
+  return CONTROL_KEYS;
+}
+
 const PREVIEW_POPOVER_GAP = 4;
 const PREVIEW_POPOVER_MARGIN = 8;
 const PREVIEW_POPOVER_FALLBACK_WIDTH = 220;
@@ -666,6 +680,7 @@ const selectStyle: React.CSSProperties = {
  */
 export function PreviewToolbarControls() {
   const s = usePreviewSettings();
+  const controlKeys = controlKeysForMode(s.activeDisplayMode);
   const [visibleCount, setVisibleCount] = useState(CONTROL_KEYS.length);
   const [popoverOpen, setPopoverOpen] = useState(false);
   // `rootRef` (flex:1) always spans the toolbar's leftover width, so its
@@ -732,7 +747,7 @@ export function PreviewToolbarControls() {
     ro.observe(probe);
     measure();
     return () => ro.disconnect();
-  }, []);
+  }, [controlKeys.length]);
 
   // Close popover on outside click
   useEffect(() => {
@@ -900,9 +915,9 @@ export function PreviewToolbarControls() {
     }
   };
 
-  const hasOverflow = visibleCount < CONTROL_KEYS.length;
-  const visibleKeys = CONTROL_KEYS.slice(0, visibleCount);
-  const overflowKeys = CONTROL_KEYS.slice(visibleCount);
+  const hasOverflow = visibleCount < controlKeys.length;
+  const visibleKeys = controlKeys.slice(0, visibleCount);
+  const overflowKeys = controlKeys.slice(visibleCount);
 
   useEffect(() => {
     if (!hasOverflow && popoverOpen) closePopover();
@@ -920,7 +935,7 @@ export function PreviewToolbarControls() {
           inline/overflow split. Absolutely positioned so it never affects
           layout. */}
       <div className="squisq-preview-controls-probe" ref={probeRef} aria-hidden="true">
-        {CONTROL_KEYS.map((key) => renderControl(key, false))}
+        {controlKeys.map((key) => renderControl(key, false))}
       </div>
 
       {visibleKeys.length > 0 && (

package/src/PreviewPanel.tsx

@@ -14,7 +14,7 @@ import { createPortal } from 'react-dom';
 import { DocPlayer, LinearDocView, useMediaProvider } from '@bendyline/squisq-react';
 import type { AudioController, PlaybackState } from '@bendyline/squisq-react';
 import type { Doc } from '@bendyline/squisq/schemas';
-import { applyTransform } from '@bendyline/squisq/transform';
+import { applyTransform, resolveTransformStyle } from '@bendyline/squisq/transform';
 import { resolveAudioMapping } from '@bendyline/squisq/doc';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import { useEditorContext } from './EditorContext';
@@ -333,6 +333,10 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
           viewport={activeViewport}
           theme={activeTheme}
           globalKeyboardShortcuts={!audience}
+          showCover={activeCoverSlide}
+          transformPage={
+            activeTransformStyle ? resolveTransformStyle(activeTransformStyle).page : undefined
+          }
         />
       );
     }

package/src/RawEditor.tsx

@@ -16,6 +16,7 @@ import { BLOCK_META_KEY_DESCRIPTORS, tokenizeAttrTokens } from '@bendyline/squis
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 import { canHandleSquisqMediaDrop, ownsMonacoModel } from './rawEditorIsolation';
 import { useMonacoLoader } from './useMonacoLoader';
+import { isMarkdownFencedCodeLine, markdownFencedCodeLineMask } from './markdownCodeFence';
 
 // Monaco is loaded lazily through `useMonacoLoader` (see the hook for the
 // rationale). The type-only `import type * as monaco from 'monaco-editor'`
@@ -200,6 +201,9 @@ export function RawEditor({
           triggerCharacters: ['['],
           provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
             if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
+            if (isMarkdownFencedCodeLine(model.getValue(), position.lineNumber)) {
+              return { suggestions: [] };
+            }
             const lineContent = model.getLineContent(position.lineNumber);
 
             // Only trigger inside a heading line that has {[ before the cursor
@@ -314,6 +318,9 @@ export function RawEditor({
             triggerCharacters: ['['],
             provideCompletionItems(model, position) {
               if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
+              if (isMarkdownFencedCodeLine(model.getValue(), position.lineNumber)) {
+                return { suggestions: [] };
+              }
               const lineContent = model.getLineContent(position.lineNumber);
               const textBeforeCursor = lineContent.substring(0, position.column - 1);
               const textAfterCursor = lineContent.substring(position.column - 1);
@@ -397,6 +404,9 @@ export function RawEditor({
             triggerCharacters: ['=', ' '],
             provideCompletionItems(model, position) {
               if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
+              if (isMarkdownFencedCodeLine(model.getValue(), position.lineNumber)) {
+                return { suggestions: [] };
+              }
               const lineContent = model.getLineContent(position.lineNumber);
               // Block-meta attributes only mean something on a heading's
               // template annotation — same gate as the template provider.
@@ -624,8 +634,10 @@ export function RawEditor({
 
     const decorations: monaco.editor.IModelDeltaDecoration[] = [];
     const lines = model.getLineCount();
+    const fencedLines = markdownFencedCodeLineMask(model.getValue());
     const re = /\{\[([a-zA-Z0-9_:-]+)\]\}/g;
     for (let line = 1; line <= lines; line++) {
+      if (fencedLines[line - 1]) continue;
       const text = model.getLineContent(line);
       re.lastIndex = 0;
       let match: RegExpExecArray | null;

package/src/RecorderEntry.tsx

@@ -26,6 +26,7 @@ import { RecorderPanel } from './recorder/RecorderPanel.js';
 import type { RecorderSaveResult } from './recorder/RecorderModal.js';
 import { insertMediaBlock } from './recorder/insertMediaBlock.js';
 import { useEditorContext } from './EditorContext';
+import { markdownFencedCodeLineMask } from './markdownCodeFence';
 
 /**
  * Insert a narration annotation `{[audio=filename]}` onto the heading
@@ -42,8 +43,10 @@ function annotateMonacoHeading(
   if (!model) return false;
   const position = editor.getPosition();
   if (!position) return false;
+  const fencedLines = markdownFencedCodeLineMask(model.getValue());
   // Walk upward from the cursor to find the nearest heading line.
   for (let line = position.lineNumber; line >= 1; line--) {
+    if (fencedLines[line - 1]) continue;
     const text = model.getLineContent(line);
     if (!/^#{1,6}\s/.test(text)) continue;
     // Skip if the heading already has an audio annotation — don't