@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/WysiwygEditor.tsx

@@ -32,6 +32,8 @@ import { AsciiDiagramExtension } from './asciiDiagram/AsciiDiagramExtension';
 import { RepairableDiagramExtension } from './asciiDiagram/RepairableDiagramExtension';
 import { applyRepairCommand } from './asciiDiagram/asciiDiagramCommands';
 import { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste';
+import { MermaidDiagramExtension } from './mermaid/MermaidDiagramExtension';
+import { CodeSnippetExtension } from './codeSnippet/CodeSnippetExtension';
 import { TreeViewExtension } from './treeview/TreeViewExtension';
 import { shouldPasteAsTreeFence } from './treeview/treePaste';
 import { TimelineViewExtension } from './timeline/TimelineViewExtension';
@@ -62,6 +64,8 @@ import { looksLikeMarkdown } from './detectMarkdown';
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 import { usePreviewSettingsOptional } from './PreviewControls';
 import { uploadAndInsertImages } from './wysiwygImageUpload';
+import { writeCanvasSettingsStyle, type WriteCanvasSettings } from './writeCanvasSettings';
+import { FindHighlightExtension } from './find/FindHighlightExtension';
 
 type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
 
@@ -71,16 +75,14 @@ type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
  * `placeholder` prop with a fixed string.
  */
 const EMPTY_PROMPTS = [
-  'Start typing your content, or drop images on top of me…',
-  'Write anything — paste markdown, drag in images, or just start typing…',
-  'Type away. Markdown syntax works too…',
-  'Chapter 1 begins here…',
-  'Once upon a time…',
-  'A blank page. Exciting, isn\u2019t it?',
-  'The first word is always the hardest…',
-  'Plot twist: this is where it all starts…',
-  'Write something the future you will thank you for…',
-  'Begin at the beginning…',
+  'Start typing your content, or drop images on top of me...',
+  'Write anything -- paste markdown, drag in images, or just start typing...',
+  'Type away. Markdown syntax works too...',
+  'Chapter 1 begins here...',
+  'Once upon a time...',
+  "A blank page. Exciting, isn't it?",
+  'The first word is always the hardest...',
+  'Plot twist: this is where it all starts...',
 ];
 
 const BLOCK_TAG_DATA_VALUES = {
@@ -109,6 +111,8 @@ export interface WysiwygEditorProps {
   submitOnEnter?: () => void;
   /** Disable Tiptap editing — renders content but blocks input. */
   readOnly?: boolean;
+  /** Host-controlled base text size and line spacing for the Write canvas. */
+  writeCanvasSettings?: WriteCanvasSettings;
 }
 
 /**
@@ -120,6 +124,7 @@ export function WysiwygEditor({
   className,
   submitOnEnter,
   readOnly = false,
+  writeCanvasSettings,
 }: WysiwygEditorProps) {
   const {
     editorSource,
@@ -199,6 +204,8 @@ export function WysiwygEditor({
       HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
       BlockTagActivityExtension,
       AsciiDiagramExtension.configure({ textChannel: sceneTextChannel }),
+      MermaidDiagramExtension,
+      CodeSnippetExtension,
       RepairableDiagramExtension.configure({ onRepair: applyRepairCommand }),
       TimelineViewExtension,
       TreeViewExtension,
@@ -220,6 +227,7 @@ export function WysiwygEditor({
       Placeholder.configure({ placeholder: resolvedPlaceholder }),
       buildMentionExtension(() => mentionProviderRef.current),
       InlineIcon,
+      FindHighlightExtension,
     ],
     content: markdownToTiptap(stripFrontmatter(editorSource).body),
     onUpdate: ({ editor: ed }) => {
@@ -625,7 +633,13 @@ export function WysiwygEditor({
     <CustomTemplateProvider docTemplates={docTemplates} onDocTemplatesChange={onDocTemplatesChange}>
       <div
         className={`squisq-wysiwyg-container${className ? ` ${className}` : ''}`}
-        style={{ width: '100%', height: '100%', overflow: 'auto', ...themeStyle }}
+        style={{
+          width: '100%',
+          height: '100%',
+          overflow: 'auto',
+          ...themeStyle,
+          ...writeCanvasSettingsStyle(writeCanvasSettings),
+        }}
         data-testid="wysiwyg-container"
         data-block-tags={BLOCK_TAG_DATA_VALUES[blockTagVisibility]}
         data-theme-inheritance={themeInheritance}

package/src/__tests__/buildPreviewDocContent.test.ts

@@ -45,4 +45,21 @@ describe('buildPreviewDoc content mapping', () => {
       description: 'Pinned description',
     });
   });
+
+  it('keeps Mermaid source available to the slide materializer for every template', () => {
+    const slide = firstPreviewSlide(
+      '# Architecture\n\n```mermaid\nflowchart LR\n  client --> server\n```',
+    );
+    expect(slide.contents).toEqual([expect.objectContaining({ type: 'code', lang: 'mermaid' })]);
+
+    const { layers } = materializeBlockLayers(slide as unknown as DocBlock, {
+      persistentLayers: false,
+    });
+    expect(layers.some((layer) => layer.type === 'mermaid')).toBe(true);
+    const narrativeText = layers
+      .filter((layer): layer is TextLayer => layer.type === 'text')
+      .map((layer) => layer.content.text)
+      .join('\n');
+    expect(narrativeText).not.toContain('flowchart LR');
+  });
 });

package/src/__tests__/codeContextSectionView.test.tsx

@@ -10,7 +10,7 @@ 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).',
+  markdown: 'Body text with [`a.ts`](workspace-nav:src%2Fa.ts) and [line 4](#L4).',
 };
 
 function renderView(over: Partial<Parameters<typeof CodeContextSectionView>[0]> = {}) {
@@ -18,7 +18,7 @@ function renderView(over: Partial<Parameters<typeof CodeContextSectionView>[0]>
     section: baseSection,
     expanded: false,
     onToggle: vi.fn(),
-    linkSchemes: ['gezel-nav'] as const,
+    linkSchemes: ['workspace-nav'] as const,
     onLinkClick: vi.fn(),
     onRevealLine: vi.fn(),
     onMeasure: noop,
@@ -47,7 +47,7 @@ describe('<CodeContextSectionView>', () => {
     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('workspace-nav:src%2Fa.ts');
     expect(anchors).toContain('#L4');
   });
 
@@ -63,10 +63,12 @@ describe('<CodeContextSectionView>', () => {
     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',
+      (a) => a.getAttribute('href') === 'workspace-nav:src%2Fa.ts',
     )!;
     const first = fireEvent.click(nav);
-    expect(onLinkClick).toHaveBeenCalledWith('gezel-nav:src%2Fa.ts', { sectionId: 'foo@10' });
+    expect(onLinkClick).toHaveBeenCalledWith('workspace-nav:src%2Fa.ts', {
+      sectionId: 'foo@10',
+    });
     expect(first).toBe(false); // preventDefault was called
 
     onLinkClick.mockReturnValue(false as unknown as undefined);
@@ -89,7 +91,7 @@ describe('<CodeContextSectionView>', () => {
   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(anchors).not.toContain('workspace-nav:src%2Fa.ts');
     expect(container.querySelector('.squisq-md-link--blocked')).toBeTruthy();
   });
 });

package/src/__tests__/documentSettingsDialog.test.tsx

@@ -123,6 +123,28 @@ describe('DocumentSettingsDialog', () => {
     expect(next).not.toContain('squisq-theme');
   });
 
+  it('removes explicit managed defaults and their legacy aliases on save', () => {
+    const onSave = vi.fn();
+    const src = `---
+squisq-theme: standard
+themeId: standard
+theme: standard
+squisq-captions: standard
+caption-style: standard
+author: Keep
+---
+
+# Doc
+`;
+    open(src, onSave);
+    clickSave();
+
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).not.toMatch(/^(?:squisq-theme|themeId|theme):/m);
+    expect(next).not.toMatch(/^(?:squisq-captions|caption-style):/m);
+    expect(next).toContain('author: Keep');
+  });
+
   it('writes squisq-transform when a transform is picked', () => {
     const onSave = vi.fn();
     open('# Doc\n', onSave);

package/src/__tests__/editorShellProps.test.tsx

@@ -176,6 +176,29 @@ describe('<EditorShell> colorScheme prop', () => {
   });
 });
 
+describe('<EditorShell> Write canvas settings', () => {
+  it('exposes host settings as live CSS variables on the shell', () => {
+    const { container, rerender } = render(
+      <EditorShell
+        initialMarkdown="Paragraph"
+        writeCanvasSettings={{ textSize: 18, lineSpacing: 1.9 }}
+      />,
+    );
+    const shell = container.querySelector<HTMLElement>('.squisq-editor-shell')!;
+    expect(shell.style.getPropertyValue('--squisq-write-text-size')).toBe('18px');
+    expect(shell.style.getPropertyValue('--squisq-write-line-spacing')).toBe('1.9');
+
+    rerender(
+      <EditorShell
+        initialMarkdown="Paragraph"
+        writeCanvasSettings={{ textSize: 20, lineSpacing: 2 }}
+      />,
+    );
+    expect(shell.style.getPropertyValue('--squisq-write-text-size')).toBe('20px');
+    expect(shell.style.getPropertyValue('--squisq-write-line-spacing')).toBe('2');
+  });
+});
+
 describe('RawEditor monacoTheme prop', () => {
   it('maps colorScheme="dark" to monacoTheme="vs-dark"', () => {
     render(<EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="dark" />);
@@ -482,4 +505,46 @@ describe('<Toolbar> Insert menu', () => {
       );
     });
   });
+
+  it('opens the Mermaid type gallery and inserts the selected diagram grammar', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Complex Diagram (Mermaid)' }));
+    expect(await screen.findByRole('menu', { name: 'Mermaid diagram type' })).toBeTruthy();
+    expect(screen.getByText(/Flow direction remains a separate edit/)).toBeTruthy();
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Insert Gantt Mermaid diagram' }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toContain(
+        '```mermaid\ngantt\n  title Project plan\n  dateFormat YYYY-MM-DD',
+      );
+    });
+  });
+
+  it('adds a typed code fence from the Code Snippet submenu', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Insert Code Snippet' }));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: 'Insert TypeScript code snippet' }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toContain(
+        "```typescript\nconst message: string = 'Hello, world!';\n```",
+      );
+    });
+  });
 });

package/src/__tests__/findMode.test.tsx

@@ -0,0 +1,104 @@
+/** @vitest-environment jsdom */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('../RawEditor', () => ({
+  RawEditor: () => <div data-testid="raw-editor-stub">Alpha beta alpha</div>,
+}));
+vi.mock('../WysiwygEditor', () => ({
+  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
+}));
+vi.mock('../PreviewPanel', () => ({
+  PreviewPanel: () => <div data-testid="preview-panel">Alpha beta alpha</div>,
+}));
+
+import { EditorShell } from '../EditorShell';
+
+beforeEach(() => {
+  if (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;
+  }
+});
+
+describe('<EditorShell> Find mode', () => {
+  it('does not render a Find trigger or textbox by default', () => {
+    render(<EditorShell initialMarkdown="Alpha" initialView="raw" />);
+    expect(screen.queryByRole('search', { name: 'Find in document' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Close find' })).toBeNull();
+  });
+
+  it('shows search beside the view tabs, clears middle/left actions, and preserves right items', () => {
+    const onFindModeChange = vi.fn();
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="Alpha beta alpha"
+        initialView="raw"
+        findMode
+        onFindModeChange={onFindModeChange}
+        toolbarSlotLeft={<span data-testid="left-slot">Left</span>}
+        toolbarSlotAfterActions={<span data-testid="middle-slot">Middle</span>}
+        toolbarSlotRight={<span data-testid="right-slot">Right</span>}
+      />,
+    );
+
+    const tabs = container.querySelector('.squisq-toolbar-view-tabs');
+    const search = screen.getByRole('search', { name: 'Find in document' });
+    expect(tabs?.nextElementSibling).toBe(search);
+    expect(screen.queryByTestId('left-slot')).toBeNull();
+    expect(screen.queryByTestId('middle-slot')).toBeNull();
+    expect(screen.getByTestId('right-slot')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Bold' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Document settings' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close find' }));
+    expect(onFindModeChange).toHaveBeenCalledWith(false);
+  });
+
+  it('responds to host-controlled mode changes and supports Escape to close', () => {
+    const onFindModeChange = vi.fn();
+    const { rerender } = render(
+      <EditorShell
+        initialMarkdown="Alpha"
+        initialView="raw"
+        findMode={false}
+        onFindModeChange={onFindModeChange}
+      />,
+    );
+    expect(screen.queryByRole('search', { name: 'Find in document' })).toBeNull();
+
+    rerender(
+      <EditorShell
+        initialMarkdown="Alpha"
+        initialView="raw"
+        findMode
+        onFindModeChange={onFindModeChange}
+      />,
+    );
+    const input = screen.getByRole('searchbox', { name: 'Find in document' });
+    expect(document.activeElement).toBe(input);
+    fireEvent.keyDown(input, { key: 'Escape' });
+    expect(onFindModeChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/__tests__/findModel.test.ts

@@ -0,0 +1,55 @@
+/** @vitest-environment jsdom */
+
+import { afterEach, describe, expect, it } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { FindHighlightExtension, updateTiptapFindHighlights } from '../find/FindHighlightExtension';
+import { findProseMirrorMatches, findTextMatches, normalizeFindIndex } from '../find/findModel';
+
+const editors: Editor[] = [];
+
+afterEach(() => {
+  editors.splice(0).forEach((editor) => editor.destroy());
+});
+
+describe('Find model', () => {
+  it('finds case-insensitive literal matches and escapes punctuation', () => {
+    expect(findTextMatches('A+b a+B A-b', 'a+b')).toEqual([
+      { from: 0, to: 3 },
+      { from: 4, to: 7 },
+    ]);
+  });
+
+  it('wraps next and previous indexes', () => {
+    expect(normalizeFindIndex(3, 3)).toBe(0);
+    expect(normalizeFindIndex(-1, 3)).toBe(2);
+    expect(normalizeFindIndex(10, 0)).toBe(0);
+  });
+
+  it('matches across adjacent formatted spans but not across paragraphs', () => {
+    const editor = new Editor({
+      extensions: [StarterKit],
+      content: '<p>Hello <strong>wide</strong> world</p><p>Hello world</p>',
+    });
+    editors.push(editor);
+
+    expect(findProseMirrorMatches(editor.state.doc, 'hello wide world')).toHaveLength(1);
+    expect(findProseMirrorMatches(editor.state.doc, 'worldhello')).toHaveLength(0);
+  });
+
+  it('decorates every WYSIWYG match and marks the selected one separately', () => {
+    const element = document.createElement('div');
+    document.body.append(element);
+    const editor = new Editor({
+      element,
+      extensions: [StarterKit, FindHighlightExtension],
+      content: '<p>Alpha alpha ALPHA</p>',
+    });
+    editors.push(editor);
+
+    expect(updateTiptapFindHighlights(editor, 'alpha', 1)).toBe(3);
+    expect(element.querySelectorAll('.squisq-find-match')).toHaveLength(3);
+    expect(element.querySelectorAll('.squisq-find-match--selected')).toHaveLength(1);
+    expect(element.querySelector('.squisq-find-match--selected')?.textContent).toBe('alpha');
+  });
+});

package/src/__tests__/markdownCodeFence.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import {
+  isMarkdownFencedCodeLine,
+  markdownFencedCodeLineMask,
+  maskMarkdownFencedCode,
+} from '../markdownCodeFence';
+
+describe('markdown fenced-code detection', () => {
+  it('marks opening, body, and closing lines without masking surrounding prose', () => {
+    const source = [
+      'Before {[github]}',
+      '```md',
+      '## Example {[sectionHeader]}',
+      '```',
+      'After',
+    ].join('\n');
+
+    expect(markdownFencedCodeLineMask(source)).toEqual([false, true, true, true, false]);
+    expect(isMarkdownFencedCodeLine(source, 3)).toBe(true);
+    expect(isMarkdownFencedCodeLine(source, 5)).toBe(false);
+  });
+
+  it('supports tilde fences, longer closers, indentation, and unclosed fences', () => {
+    const source = [
+      '  ~~~~ts',
+      '{[audio src=inside.mp3]}',
+      '  ~~~~~',
+      'text',
+      '```',
+      '{[quote]}',
+    ].join('\r\n');
+
+    expect(markdownFencedCodeLineMask(source)).toEqual([true, true, true, false, true, true]);
+  });
+
+  it('masks fenced contents while preserving offsets and line endings', () => {
+    const source = 'Outside\r\n```md\r\n{[image src=inside.png]}\r\n```\r\nAfter';
+    const masked = maskMarkdownFencedCode(source);
+
+    expect(masked).toHaveLength(source.length);
+    expect(masked).toContain('Outside\r\n');
+    expect(masked).not.toContain('inside.png');
+    expect(masked.endsWith('\r\nAfter')).toBe(true);
+  });
+});

package/src/__tests__/mediaAttachmentFlow.test.ts

@@ -7,7 +7,7 @@ import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
  * uploaded files into the bin without inserting a markdown ref into
  * the editor body. A user would upload an image, hit Send in the
  * downstream chat composer, and the outgoing markdown would have no
- * image reference — the gezel would reply "nothing came through."
+ * image reference — the downstream consumer would reply "nothing came through."
  *
  * The fix: after `mediaProvider.addMedia(...)` succeeds, MediaBin
  * fires `onMediaUploaded(relativePath, name, mimeType)`. The
@@ -18,7 +18,7 @@ import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
  * These tests exercise the contract directly: the markdown snippet
  * produced by the upload callback, once round-tripped through the
  * editor's markdown↔HTML bridge, must round-trip back to a form
- * the gezel service's image-extraction regex can see.
+ * the downstream service's image-extraction regex can see.
  */
 
 function fakeMediaProvider(records: string[]): MediaProvider {

package/src/__tests__/mediaReferences.test.ts

@@ -39,6 +39,21 @@ describe('collectMediaReferencesFromMarkdown', () => {
       'video/clip with spaces.webm',
     ]);
   });
+
+  it('ignores annotations and other reference-shaped text inside code fences', () => {
+    const refs = collectMediaReferencesFromMarkdown(
+      [
+        '## Real {[image src=images/outside.png]}',
+        '```markdown',
+        '{[audio src=audio/inside.mp3]}',
+        '![Example](images/inside.png)',
+        '<video src="video/inside.webm"></video>',
+        '```',
+      ].join('\n'),
+    );
+
+    expect([...refs]).toEqual(['images/outside.png']);
+  });
 });
 
 describe('removeMediaReferencesFromMarkdown', () => {