@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/src/TransitionPicker.tsx

@@ -32,7 +32,14 @@ export interface TransitionPickerProps {
   onChange: (next: TransitionFields) => void;
 }
 
-const FLYOUT_ID = 'squisq-transition-flyout-portal';
+/**
+ * DOM id of the portaled transition flyout. Exported so hosts that embed the
+ * picker inside their own popovers (e.g. the toolbar overflow menu) can treat
+ * clicks inside the flyout as "inside" in their outside-click handling.
+ */
+export const TRANSITION_FLYOUT_PORTAL_ID = 'squisq-transition-flyout-portal';
+
+const FLYOUT_ID = TRANSITION_FLYOUT_PORTAL_ID;
 
 export function TransitionPicker({ value, onChange }: TransitionPickerProps) {
   const [open, setOpen] = useState(false);

package/src/VersionHistoryPanel.tsx

@@ -115,7 +115,7 @@ function formatBytes(n: number): string {
 }
 
 export function VersionHistoryPanel() {
-  const { versioning, replaceAll, markdownSource, theme } = useEditorContext();
+  const { versioning, replaceAll, markdownSource, colorScheme } = useEditorContext();
   const [open, setOpen] = useState(false);
   const [state, setState] = useState<PanelState>(initialState);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -214,7 +214,7 @@ export function VersionHistoryPanel() {
     [markdownSource],
   );
   const hasDiff = state.selected !== null;
-  const diffTheme = theme === 'dark' ? 'vs-dark' : 'vs';
+  const diffTheme = colorScheme === 'dark' ? 'vs-dark' : 'vs';
 
   if (!versioning) return null;
 

package/src/ViewSwitcher.tsx

@@ -1,15 +1,15 @@
 /**
  * ViewSwitcher
  *
- * Tab bar for switching between Raw, WYSIWYG, and Preview editor views.
+ * Tab bar for switching between Write, Source, and Use editor views.
  */
 
 import { useEditorContext, type EditorView } from './EditorContext';
 
 const VIEWS: { id: EditorView; label: string; shortLabel?: string; shortcut: string }[] = [
-  { id: 'raw', label: 'Markdown', shortLabel: 'MD', shortcut: '⌘1' },
-  { id: 'wysiwyg', label: 'Editor', shortcut: '⌘2' },
-  { id: 'preview', label: 'Preview', shortcut: '⌘3' },
+  { id: 'wysiwyg', label: 'Write', shortcut: '⌘1' },
+  { id: 'raw', label: 'Source', shortcut: '⌘2' },
+  { id: 'preview', label: 'Use', shortcut: '⌘3' },
 ];
 
 export interface ViewSwitcherProps {

package/src/WysiwygEditor.tsx

@@ -22,7 +22,9 @@ import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
 import Link from '@tiptap/extension-link';
 import Placeholder from '@tiptap/extension-placeholder';
-import { resolveFontFamily, FONT_FALLBACKS } from '@bendyline/squisq/schemas';
+import { resolveFontFamily, FONT_FALLBACKS, VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import { DEFAULT_THEME, flattenBlocks, markdownToDoc } from '@bendyline/squisq/doc';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
 import { HeadingWithTemplate } from './TemplateAnnotation';
 import { DiagramExtension } from './diagram/DiagramExtension';
 import { SceneBlockExtension } from './scene/SceneBlockExtension';
@@ -108,6 +110,8 @@ export function WysiwygEditor({
     mentionProvider,
     blockTagsVisible,
     themeInheritance,
+    colorScheme,
+    bumpMediaRevision,
   } = useEditorContext();
   // Custom templates inlined in the active doc's frontmatter + the
   // persist callback that writes a new list back into the source.
@@ -257,7 +261,7 @@ export function WysiwygEditor({
         const imageFiles = filesFromClipboard(clipboard);
         if (imageFiles.length > 0 && mediaProviderRef.current) {
           event.preventDefault();
-          uploadAndInsertImages(view, imageFiles, mediaProviderRef.current);
+          uploadAndInsertImages(view, imageFiles, mediaProviderRef.current, bumpMediaRevision);
           return true;
         }
 
@@ -326,7 +330,7 @@ export function WysiwygEditor({
 
         event.preventDefault();
         moveSelectionToDropPoint(view, event);
-        uploadAndInsertImages(view, imageFiles, mediaProviderRef.current);
+        uploadAndInsertImages(view, imageFiles, mediaProviderRef.current, bumpMediaRevision);
         return true;
       },
     },
@@ -467,6 +471,29 @@ export function WysiwygEditor({
   // a PreviewSettingsProvider in scope).
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme;
+  const badgePreviewSource = useMemo(() => {
+    if (!badgeMenu) return undefined;
+    try {
+      const previewDoc = markdownToDoc(parseMarkdown(editorSource), { autoTemplates: false });
+      const block = flattenBlocks(previewDoc.blocks)[badgeMenu.headingIndex];
+      if (!block) return undefined;
+      return {
+        block,
+        theme: previewSettings?.activeTheme ?? DEFAULT_THEME,
+        viewport: previewSettings?.activeViewport ?? VIEWPORT_PRESETS.landscape,
+        basePath: '/',
+        mediaProvider,
+      };
+    } catch {
+      return undefined;
+    }
+  }, [
+    badgeMenu,
+    editorSource,
+    mediaProvider,
+    previewSettings?.activeTheme,
+    previewSettings?.activeViewport,
+  ]);
   const themeStyle = useMemo<CSSProperties>(() => {
     if (themeInheritance === 'none' || !activeTheme) return {};
     const out: Record<string, string> = {
@@ -507,6 +534,7 @@ export function WysiwygEditor({
           <TemplateBadgePopover
             anchorRect={badgeMenu.rect}
             value={badgeMenu.template}
+            colorScheme={colorScheme}
             recommended={(() => {
               // `headingIndex` is counted within the mounted Tiptap doc, which
               // reflects `editorSource` — the active block's slice in block
@@ -516,6 +544,7 @@ export function WysiwygEditor({
               const profile = profileBlockContents(slice);
               return recommendTemplatesForBlock(profile, TEMPLATE_NAMES).recommended;
             })()}
+            previewSource={badgePreviewSource}
             onOpenDesigner={() => {
               setBadgeMenu(null);
               setDesignerState({});
@@ -546,6 +575,17 @@ export function WysiwygEditor({
               });
               editor.view.dispatch(tr);
             }}
+            onAnnotationChange={(next) => {
+              if (!editor) return;
+              const current = editor.state.doc.nodeAt(propsMenu.headingPos);
+              if (!current || current.type.name !== 'heading') return;
+              const tr = editor.state.tr.setNodeMarkup(propsMenu.headingPos, undefined, {
+                ...current.attrs,
+                dataBlockAttrs: next.blockAttrsInner,
+                dataTemplateParams: next.templateParams,
+              });
+              editor.view.dispatch(tr);
+            }}
             onClose={() => setPropsMenu(null)}
           />
         )}
@@ -631,6 +671,7 @@ async function uploadAndInsertImages(
   view: any,
   files: File[],
   mediaProvider: import('@bendyline/squisq/schemas').MediaProvider,
+  onMediaUploaded?: () => void,
 ): Promise<void> {
   for (const file of files) {
     try {
@@ -643,6 +684,7 @@ async function uploadAndInsertImages(
       const relativePath = await mediaProvider.addMedia(name, buffer, mimeType);
       const altText = name.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
       insertImageNode(view, relativePath, altText);
+      onMediaUploaded?.();
     } catch (err) {
       console.error('Failed to upload dropped image:', err);
     }

package/src/__tests__/buildPreviewDocTransition.test.ts

@@ -11,8 +11,7 @@ function previewSlides(md: string) {
 
 describe('buildPreviewDoc transition mapping', () => {
   it('carries an authored transition through to the player slide', () => {
-    // Transition written the way the toolbar / properties palette writes it:
-    // into the heading's Pandoc `{…}` attribute block.
+    // Legacy Pandoc transition syntax remains supported.
     const md = ['# Intro', '', '# Second {transition=vortex}', '', 'body'].join('\n');
     const slides = previewSlides(md);
     expect(slides[1].transition).toEqual({ type: 'vortex' });

package/src/__tests__/codeContextSectionView.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/react';
+import { CodeContextSectionView } from '../codeContext/CodeContextSectionView';
+
+const noop = () => {};
+
+const baseSection = {
+  id: 'foo@10',
+  summaryMarkdown: '**foo** — does things · ↓2 imported-by',
+  markdown: 'Body text with [`a.ts`](gezel-nav:src%2Fa.ts) and [line 4](#L4).',
+};
+
+function renderView(over: Partial<Parameters<typeof CodeContextSectionView>[0]> = {}) {
+  const props = {
+    section: baseSection,
+    expanded: false,
+    onToggle: vi.fn(),
+    linkSchemes: ['gezel-nav'] as const,
+    onLinkClick: vi.fn(),
+    onRevealLine: vi.fn(),
+    onMeasure: noop,
+    ...over,
+  };
+  const utils = render(<CodeContextSectionView {...props} />);
+  return { ...utils, props };
+}
+
+describe('<CodeContextSectionView>', () => {
+  it('renders the strip collapsed, body absent (lazy)', () => {
+    const { container } = renderView();
+    expect(container.querySelector('.squisq-ccx-strip')).toBeTruthy();
+    expect(container.textContent).toContain('foo');
+    expect(container.querySelector('.squisq-ccx-body')).toBeNull();
+  });
+
+  it('strip click calls onToggle with the section id', () => {
+    const { container, props } = renderView();
+    fireEvent.click(container.querySelector('.squisq-ccx-strip')!);
+    expect(props.onToggle).toHaveBeenCalledWith('foo@10');
+  });
+
+  it('expanded body renders markdown with host-scheme links as real anchors', () => {
+    const { container } = renderView({ expanded: true });
+    const body = container.querySelector('.squisq-ccx-body')!;
+    expect(body.textContent).toContain('Body text');
+    const anchors = [...body.querySelectorAll('a')].map((a) => a.getAttribute('href'));
+    expect(anchors).toContain('gezel-nav:src%2Fa.ts');
+    expect(anchors).toContain('#L4');
+  });
+
+  it('expanded without markdown shows the loading row', () => {
+    const { container } = renderView({
+      expanded: true,
+      section: { ...baseSection, markdown: undefined },
+    });
+    expect(container.querySelector('.squisq-ccx-body--loading')?.textContent).toBe('Loading…');
+  });
+
+  it('link clicks are intercepted: handled by default, defaulted on false', () => {
+    const onLinkClick = vi.fn(() => undefined);
+    const { container } = renderView({ expanded: true, onLinkClick });
+    const nav = [...container.querySelectorAll('a')].find(
+      (a) => a.getAttribute('href') === 'gezel-nav:src%2Fa.ts',
+    )!;
+    const first = fireEvent.click(nav);
+    expect(onLinkClick).toHaveBeenCalledWith('gezel-nav:src%2Fa.ts', { sectionId: 'foo@10' });
+    expect(first).toBe(false); // preventDefault was called
+
+    onLinkClick.mockReturnValue(false as unknown as undefined);
+    const second = fireEvent.click(nav);
+    expect(second).toBe(true); // host declined — default navigation allowed
+  });
+
+  it('#L links reveal natively and never reach onLinkClick', () => {
+    const onLinkClick = vi.fn();
+    const onRevealLine = vi.fn();
+    const { container } = renderView({ expanded: true, onLinkClick, onRevealLine });
+    const line = [...container.querySelectorAll('a')].find(
+      (a) => a.getAttribute('href') === '#L4',
+    )!;
+    fireEvent.click(line);
+    expect(onRevealLine).toHaveBeenCalledWith(4);
+    expect(onLinkClick).not.toHaveBeenCalled();
+  });
+
+  it('without linkSchemes, custom-scheme links render blocked (no anchor)', () => {
+    const { container } = renderView({ expanded: true, linkSchemes: undefined });
+    const anchors = [...container.querySelectorAll('a')].map((a) => a.getAttribute('href'));
+    expect(anchors).not.toContain('gezel-nav:src%2Fa.ts');
+    expect(container.querySelector('.squisq-md-link--blocked')).toBeTruthy();
+  });
+});

package/src/__tests__/codeContextZoneManager.test.ts

@@ -0,0 +1,127 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Exercises the zone manager against a fake Monaco editor with a recording
+ * changeViewZones accessor — batch semantics, delegate mutation on move and
+ * height changes, model-change rebuild, and dispose cleanup.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import type { editor as MonacoEditorNs } from 'monaco-editor';
+import { CodeContextZoneManager } from '../codeContext/CodeContextZoneManager';
+
+type Zone = MonacoEditorNs.IViewZone & { ordinal?: number };
+
+function fakeEditor() {
+  const zones = new Map<string, Zone>();
+  const layoutCalls: string[] = [];
+  let counter = 0;
+  let batches = 0;
+  let modelCb: (() => void) | null = null;
+  const accessor = {
+    addZone: (zone: Zone) => {
+      const id = `z${++counter}`;
+      zones.set(id, zone);
+      return id;
+    },
+    removeZone: (id: string) => {
+      zones.delete(id);
+    },
+    layoutZone: (id: string) => {
+      layoutCalls.push(id);
+    },
+  };
+  const editor = {
+    changeViewZones: (cb: (a: typeof accessor) => void) => {
+      batches++;
+      cb(accessor);
+    },
+    onDidChangeModel: (cb: () => void) => {
+      modelCb = cb;
+      return { dispose: vi.fn() };
+    },
+  } as unknown as MonacoEditorNs.IStandaloneCodeEditor;
+  return {
+    editor,
+    zones,
+    layoutCalls,
+    get batches() {
+      return batches;
+    },
+    fireModelChange: () => modelCb?.(),
+  };
+}
+
+describe('CodeContextZoneManager', () => {
+  it('creates zones above the anchor line in one batch, with dom nodes', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([
+      { id: 'file', line: 0, ordinal: 0 },
+      { id: 'foo@10', line: 10, ordinal: 1 },
+    ]);
+    expect(fake.batches).toBe(1);
+    expect(fake.zones.size).toBe(2);
+    const list = [...fake.zones.values()];
+    expect(list.map((z) => z.afterLineNumber)).toEqual([0, 9]);
+    expect(list.map((z) => z.ordinal)).toEqual([0, 1]);
+    expect(list.every((z) => z.suppressMouseDown)).toBe(true);
+    expect(mgr.getDomNode('foo@10')?.className).toBe('squisq-ccx-zone');
+  });
+
+  it('sync with no changes performs no batch', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    expect(fake.batches).toBe(1);
+  });
+
+  it('moves mutate the delegate and layoutZone — dom node survives', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    const nodeBefore = mgr.getDomNode('a');
+    mgr.sync([{ id: 'a', line: 8, ordinal: 1 }]);
+    expect(fake.zones.size).toBe(1);
+    expect([...fake.zones.values()][0]!.afterLineNumber).toBe(7);
+    expect(fake.layoutCalls.length).toBe(1);
+    expect(mgr.getDomNode('a')).toBe(nodeBefore);
+  });
+
+  it('setHeight mutates heightInPx and lays out; sub-pixel deltas are ignored', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    mgr.setHeight('a', 120);
+    expect([...fake.zones.values()][0]!.heightInPx).toBe(120);
+    expect(fake.layoutCalls.length).toBe(1);
+    mgr.setHeight('a', 119.5); // ceils back to 120 — no relayout
+    expect(fake.layoutCalls.length).toBe(1);
+  });
+
+  it('a model change drops bookkeeping; the next sync recreates zones', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    const onChange = vi.fn();
+    mgr.onDidChangeZones(onChange);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    fake.fireModelChange();
+    expect(onChange).toHaveBeenCalledTimes(2); // sync + model change
+    expect(mgr.getDomNode('a')).toBeUndefined();
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    expect(mgr.getDomNode('a')).toBeDefined();
+  });
+
+  it('dispose removes every zone and goes inert', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([
+      { id: 'a', line: 1, ordinal: 1 },
+      { id: 'b', line: 2, ordinal: 2 },
+    ]);
+    mgr.dispose();
+    expect(fake.zones.size).toBe(0);
+    mgr.sync([{ id: 'c', line: 3, ordinal: 1 }]);
+    expect(fake.zones.size).toBe(0);
+  });
+});

package/src/__tests__/diffContextSections.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { diffContextSections, type ZoneSpec } from '../codeContext/diffContextSections';
+
+const spec = (id: string, line: number, ordinal = 0): ZoneSpec => ({ id, line, ordinal });
+
+describe('diffContextSections', () => {
+  it('adds everything on first sync', () => {
+    const d = diffContextSections([], [spec('a', 1), spec('b', 5)]);
+    expect(d.add.map((z) => z.id)).toEqual(['a', 'b']);
+    expect(d.remove).toEqual([]);
+    expect(d.move).toEqual([]);
+  });
+
+  it('is a no-op for identical specs', () => {
+    const specs = [spec('a', 1, 1), spec('b', 5, 2)];
+    const d = diffContextSections(
+      specs,
+      specs.map((s) => ({ ...s })),
+    );
+    expect(d.add).toEqual([]);
+    expect(d.remove).toEqual([]);
+    expect(d.move).toEqual([]);
+  });
+
+  it('moves when a line or ordinal changes, removes vanished ids', () => {
+    const d = diffContextSections(
+      [spec('a', 1, 1), spec('b', 5, 2), spec('c', 9, 3)],
+      [spec('a', 2, 1), spec('b', 5, 4)],
+    );
+    expect(d.move.map((z) => z.id)).toEqual(['a', 'b']);
+    expect(d.remove).toEqual(['c']);
+    expect(d.add).toEqual([]);
+  });
+
+  it('duplicate ids in next: first occurrence wins, no double-add', () => {
+    const d = diffContextSections([], [spec('a', 1), spec('a', 7)]);
+    expect(d.add).toEqual([spec('a', 1)]);
+  });
+});

package/src/__tests__/editorShellCodeContext.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Prop-contract test for `codeContext`: the shell threads it to the
+ * CodeContextZones bridge in code mode only (mirrors the submitOnEnter
+ * threading tests). Heavy surfaces are stubbed.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import type { CodeContext } from '../codeContext/types';
+
+const zoneOptions: CodeContext[] = [];
+
+vi.mock('../RawEditor', () => ({
+  RawEditor: () => <div data-testid="raw-editor-stub" />,
+}));
+vi.mock('../WysiwygEditor', () => ({
+  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
+}));
+vi.mock('../PreviewPanel', () => ({
+  PreviewPanel: () => <div data-testid="preview-stub" />,
+}));
+vi.mock('../codeContext/CodeContextZones', () => ({
+  CodeContextZones: ({ options }: { options: CodeContext }) => {
+    zoneOptions.push(options);
+    return <div data-testid="code-context-stub" />;
+  },
+}));
+
+import { EditorShell } from '../EditorShell';
+
+beforeEach(() => {
+  zoneOptions.length = 0;
+  if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(() => false),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
+
+const codeContext: CodeContext = {
+  sections: [{ id: 'foo@2', line: 2, summaryMarkdown: '**foo**', markdown: 'body' }],
+};
+
+describe('<EditorShell> codeContext prop', () => {
+  it('mounts CodeContextZones with the options in code mode', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" codeContext={codeContext} />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeTruthy();
+    expect(zoneOptions[0]).toBe(codeContext);
+  });
+
+  it('does not mount without the prop', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeNull();
+  });
+
+  it('ignores codeContext in markdown mode', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="# hi" fileName="a.md" codeContext={codeContext} />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeNull();
+  });
+});