@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/__tests__/tiptapCodeBlockRoundTrip.test.ts

@@ -1,109 +0,0 @@
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import { describe, expect, it } from 'vitest';
-import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
-import { HeadingWithTemplate } from '../TemplateAnnotation';
-
-/**
- * Code-fence round-trip through a REAL tiptap editor.
- *
- * The string-level bridge tests feed hand-written `<pre><code>` HTML, but
- * the production editor configures StarterKit's codeBlock with
- * `HTMLAttributes: { class: 'squisq-code-block' }`, which tiptap renders
- * onto the <pre>. The serializer regex used to require a bare `<pre><code`
- * and silently dropped every fence on save. These tests exercise the real
- * `getHTML()` output so that shape can never regress unnoticed.
- */
-
-function roundTripThroughEditor(md: string): string {
-  const editor = new Editor({
-    extensions: [
-      StarterKit.configure({
-        heading: false,
-        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
-      }),
-      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
-    ],
-    content: markdownToTiptap(md),
-  });
-  const html = editor.getHTML();
-  editor.destroy();
-  return tiptapToMarkdown(html);
-}
-
-describe('code fences through a real editor (getHTML → markdown)', () => {
-  it('emits class="squisq-code-block" on <pre> (the shape the serializer must accept)', () => {
-    const editor = new Editor({
-      extensions: [
-        StarterKit.configure({
-          heading: false,
-          codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
-        }),
-        HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
-      ],
-      content: markdownToTiptap('```js\nconst x = 1;\n```\n'),
-    });
-    const html = editor.getHTML();
-    editor.destroy();
-    expect(html).toContain('<pre class="squisq-code-block">');
-  });
-
-  it('round-trips a fence with a language byte-for-byte', () => {
-    const md = '```js\nconst x = 1;\n```\n';
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-
-  it('round-trips a fence without a language byte-for-byte', () => {
-    const md = '```\nplain text content\n```\n';
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-
-  it('round-trips a fence surrounded by prose', () => {
-    const md = 'Before the code.\n\n```python\nprint("hi")\n```\n\nAfter the code.\n';
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-
-  it('round-trips HTML-significant characters inside a fence', () => {
-    const md = '```\nif (a < b && c > d) { echo "&nbsp;"; }\n```\n';
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-
-  it('round-trips trailing spaces inside fence lines', () => {
-    const md = '```\nline with trailing   \nspaces\n```\n';
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-
-  it('round-trips a blank last line inside a fence', () => {
-    const md = '```\nfoo\n\n```\n';
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-
-  it('round-trips Unicode box-drawing art byte-for-byte', () => {
-    const md = [
-      '```',
-      '┌────────┐    ┌────────┐',
-      '│  CLI   │    │  MCP   │',
-      '└───┬────┘    └───┬────┘',
-      '    │             │',
-      '    ▼             ▼',
-      '┌──────────────────────┐',
-      '│        kernel        │',
-      '└──────────────────────┘',
-      '```',
-      '',
-    ].join('\n');
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-
-  it('round-trips +--+ ASCII art byte-for-byte', () => {
-    const md = [
-      '```text',
-      '+--------+     +--------+',
-      '| Input  | --> | Output |',
-      '+--------+     +--------+',
-      '```',
-      '',
-    ].join('\n');
-    expect(roundTripThroughEditor(md)).toBe(md);
-  });
-});

package/src/__tests__/tiptapImageRoundTrip.test.ts

@@ -1,73 +0,0 @@
-import { Editor } from '@tiptap/core';
-import Image from '@tiptap/extension-image';
-import Document from '@tiptap/extension-document';
-import Paragraph from '@tiptap/extension-paragraph';
-import Text from '@tiptap/extension-text';
-import { describe, expect, it } from 'vitest';
-import { tiptapToMarkdown } from '../tiptapBridge';
-
-/**
- * The actual end-to-end question the chat composer hinges on:
- *
- *   when a pasted / uploaded image is inserted into the tiptap
- *   editor via `setImage({src, alt})`, does the markdown we serialize
- *   out (via `getHTML()` + `tiptapToMarkdown`) contain
- *   `![alt](src)` — the shape the downstream service's image-attachment
- *   extractor expects?
- *
- * Unit tests on the regex alone have been green the whole time, and
- * yet the production app kept sending image-less messages. This test
- * exercises the real tiptap editor in jsdom so the HTML tiptap
- * actually emits is what we check, not a hand-synthesized string.
- */
-
-function makeEditor() {
-  return new Editor({
-    // Bare-minimum schema: doc → paragraph (text) + block image. No
-    // React node-view — we only care about the serialized HTML.
-    extensions: [Document, Paragraph, Text, Image.configure({ inline: false })],
-    content: '<p></p>',
-  });
-}
-
-describe('tiptap Image node → markdown round-trip', () => {
-  it('produces `![alt](src)` for an image inserted via setImage', () => {
-    const editor = makeEditor();
-    editor.chain().focus().setImage({ src: 'attachments/xyz.png', alt: 'my screenshot' }).run();
-    const html = editor.getHTML();
-    const md = tiptapToMarkdown(html);
-    editor.destroy();
-    expect(html).toMatch(/<img\b/);
-    expect(html).toContain('src="attachments/xyz.png"');
-    expect(md).toContain('![my screenshot](attachments/xyz.png)');
-  });
-
-  it('produces `![](src)` when alt is empty (most common pasted-image shape)', () => {
-    const editor = makeEditor();
-    editor.chain().focus().setImage({ src: 'attachments/pasted.png', alt: '' }).run();
-    const md = tiptapToMarkdown(editor.getHTML());
-    editor.destroy();
-    expect(md).toContain('![](attachments/pasted.png)');
-  });
-
-  it('produces `![](src)` when alt is omitted entirely', () => {
-    const editor = makeEditor();
-    editor.chain().focus().setImage({ src: 'attachments/no-alt.png' }).run();
-    const md = tiptapToMarkdown(editor.getHTML());
-    editor.destroy();
-    expect(md).toContain('![](attachments/no-alt.png)');
-  });
-
-  it('coexists with paragraph text', () => {
-    // Seed the editor with a paragraph, then insert the image after
-    // it — mirrors the common case where the user types "here:" and
-    // then pastes an image.
-    const editor = makeEditor();
-    editor.chain().focus().insertContent('here you go').run();
-    editor.chain().focus().setImage({ src: 'attachments/foo.png', alt: 'foo' }).run();
-    const md = tiptapToMarkdown(editor.getHTML());
-    editor.destroy();
-    expect(md).toContain('![foo](attachments/foo.png)');
-    expect(md).toContain('here you go');
-  });
-});

package/src/__tests__/toolbarSelectionConversion.test.tsx

@@ -1,190 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import TaskList from '@tiptap/extension-task-list';
-import TaskItem from '@tiptap/extension-task-item';
-import { EditorProvider, useEditorContext, type EditorContextValue } from '../EditorContext';
-import { Toolbar } from '../Toolbar';
-import { tiptapToMarkdown } from '../tiptapBridge';
-
-let currentContext: EditorContextValue | null = null;
-
-function ContextProbe() {
-  currentContext = useEditorContext();
-  return null;
-}
-
-function context(): EditorContextValue {
-  if (!currentContext) throw new Error('EditorContext has not mounted');
-  return currentContext;
-}
-
-function monacoWithSelection(selectedText: string) {
-  const selection = {
-    startLineNumber: 1,
-    startColumn: 1,
-    endLineNumber: selectedText.split('\n').length,
-    endColumn: 1,
-  };
-  const model = {
-    getValue: () => selectedText,
-    getValueInRange: () => selectedText,
-    getLineContent: () => selectedText.split('\n')[0] ?? '',
-  };
-  const disposable = { dispose: vi.fn() };
-  const executeEdits = vi.fn();
-  const editor = {
-    getSelection: () => selection,
-    getModel: () => model,
-    getPosition: () => ({ lineNumber: 1, column: 1 }),
-    onDidChangeCursorPosition: () => disposable,
-    onDidChangeModelContent: () => disposable,
-    executeEdits,
-    focus: vi.fn(),
-  };
-  return { editor, executeEdits, selection };
-}
-
-beforeEach(() => {
-  currentContext = null;
-  if (typeof window.matchMedia !== 'function') {
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      value: () => ({
-        matches: false,
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-      }),
-    });
-  }
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    class ResizeObserverStub {
-      observe(): void {}
-      unobserve(): void {}
-      disconnect(): void {}
-    }
-    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
-  }
-});
-
-describe('<Toolbar> selection conversion menu', () => {
-  it('shows Convert above Insert and replaces a delimited Monaco selection', async () => {
-    const source = 'Name,Role\nAda,Engineer\n';
-    const { editor, executeEdits, selection } = monacoWithSelection(source);
-    render(
-      <EditorProvider initialMarkdown={source} initialView="raw" allowRecording={false}>
-        <Toolbar />
-        <ContextProbe />
-      </EditorProvider>,
-    );
-    act(() => context().setMonacoEditor(editor as never));
-
-    fireEvent.click(screen.getByLabelText('Insert'));
-    const menu = await screen.findByRole('menu');
-    expect(
-      within(menu)
-        .getAllByText(/^(Convert|Insert)$/)
-        .map((node) => node.textContent),
-    ).toEqual(['Convert', 'Insert']);
-
-    fireEvent.click(within(menu).getByRole('menuitem', { name: 'Convert selection to Table' }));
-
-    expect(executeEdits).toHaveBeenCalledWith('toolbar-convert-selection', [
-      {
-        range: selection,
-        text: '| Name | Role |\n| --- | --- |\n| Ada | Engineer |\n',
-      },
-    ]);
-  });
-
-  it('does not show Convert without selected text', async () => {
-    const { editor } = monacoWithSelection('');
-    render(
-      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
-        <Toolbar />
-        <ContextProbe />
-      </EditorProvider>,
-    );
-    act(() => context().setMonacoEditor(editor as never));
-
-    fireEvent.click(screen.getByLabelText('Insert'));
-    const menu = await screen.findByRole('menu');
-    expect(within(menu).queryByText('Convert')).toBeNull();
-    expect(within(menu).queryByRole('menuitem', { name: 'Convert selection to Table' })).toBeNull();
-  });
-
-  it('wraps the selected Monaco text in the chosen code-snippet language', async () => {
-    const source = 'const answer = 42;';
-    const { editor, executeEdits, selection } = monacoWithSelection(source);
-    render(
-      <EditorProvider initialMarkdown={source} initialView="raw" allowRecording={false}>
-        <Toolbar />
-        <ContextProbe />
-      </EditorProvider>,
-    );
-    act(() => context().setMonacoEditor(editor as never));
-
-    fireEvent.click(screen.getByLabelText('Insert'));
-    fireEvent.click(await screen.findByRole('menuitem', { name: 'Insert Code Snippet' }));
-    fireEvent.click(
-      await screen.findByRole('menuitem', { name: 'Insert JavaScript code snippet' }),
-    );
-
-    expect(executeEdits).toHaveBeenCalledWith('toolbar-code-snippet', [
-      {
-        range: selection,
-        text: '\n```javascript\nconst answer = 42;\n```\n',
-      },
-    ]);
-  });
-
-  it('replaces fully selected Write paragraphs without leaving a blank paragraph', async () => {
-    const editor = new Editor({
-      extensions: [StarterKit, TaskList, TaskItem],
-      content: '<p>First</p><p>Second</p><p>Third</p><h2>After</h2>',
-    });
-    const paragraphs: Array<{ pos: number; contentSize: number }> = [];
-    editor.state.doc.descendants((node, pos) => {
-      if (node.type.name === 'paragraph') {
-        paragraphs.push({ pos, contentSize: node.content.size });
-      }
-    });
-    const first = paragraphs[0];
-    const third = paragraphs[2];
-    expect(first).toBeDefined();
-    expect(third).toBeDefined();
-    editor.commands.setTextSelection({
-      from: first.pos + 1,
-      to: third.pos + 1 + third.contentSize,
-    });
-
-    render(
-      <EditorProvider
-        initialMarkdown="First\n\nSecond\n\nThird\n\n## After"
-        initialView="wysiwyg"
-        allowRecording={false}
-      >
-        <Toolbar />
-        <ContextProbe />
-      </EditorProvider>,
-    );
-    act(() => context().setTiptapEditor(editor));
-
-    fireEvent.click(screen.getByLabelText('Insert'));
-    fireEvent.click(
-      await screen.findByRole('menuitem', { name: 'Convert selection to Task List' }),
-    );
-
-    await waitFor(() => {
-      expect(editor.getJSON().content?.map((node) => node.type)).toEqual(['taskList', 'heading']);
-    });
-    expect(tiptapToMarkdown(editor.getHTML())).toBe(
-      '- [ ] First\n- [ ] Second\n- [ ] Third\n\n## After\n',
-    );
-    editor.destroy();
-  });
-});

package/src/__tests__/tooltip.test.tsx

@@ -1,72 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { TooltipLayer } from '../Tooltip';
-import { clampTooltipLeft } from '../tooltipPlacement';
-
-function rect(left: number, top: number, width: number, height: number): DOMRect {
-  return DOMRect.fromRect({ x: left, y: top, width, height });
-}
-
-const originalInnerWidth = Object.getOwnPropertyDescriptor(window, 'innerWidth');
-
-function setViewportWidth(width: number) {
-  Object.defineProperty(window, 'innerWidth', {
-    configurable: true,
-    value: width,
-  });
-}
-
-afterEach(() => {
-  cleanup();
-  vi.useRealTimers();
-  vi.restoreAllMocks();
-  if (originalInnerWidth) {
-    Object.defineProperty(window, 'innerWidth', originalInnerWidth);
-  }
-});
-
-describe('TooltipLayer', () => {
-  it('clamps centered tooltip placement inside the viewport', () => {
-    expect(clampTooltipLeft(380, 120, 400)).toBe(272);
-    expect(clampTooltipLeft(20, 120, 400)).toBe(8);
-    expect(clampTooltipLeft(200, 120, 400)).toBe(140);
-  });
-
-  it('keeps a tooltip from spilling off the right edge', () => {
-    vi.useFakeTimers();
-    setViewportWidth(400);
-    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (
-      this: HTMLElement,
-    ) {
-      if (this.classList.contains('squisq-tooltip')) {
-        return rect(0, 0, 120, 28);
-      }
-      return rect(0, 0, 0, 0);
-    });
-
-    render(
-      <div>
-        <button type="button" data-tooltip="View options">
-          View
-        </button>
-        <TooltipLayer />
-      </div>,
-    );
-
-    const button = screen.getByRole('button', { name: 'View' });
-    Object.defineProperty(button, 'getBoundingClientRect', {
-      configurable: true,
-      value: () => rect(360, 10, 40, 32),
-    });
-
-    act(() => {
-      fireEvent.mouseOver(button);
-      vi.advanceTimersByTime(180);
-    });
-
-    const tooltip = screen.getByRole('tooltip');
-    expect(tooltip.textContent).toBe('View options');
-    expect(tooltip.style.left).toBe('272px');
-    expect(tooltip.style.visibility).toBe('visible');
-  });
-});

package/src/__tests__/transformStyleId.test.ts

@@ -1,13 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { resolvePersistedTransformStyleId } from '../transformStyleId';
-
-describe('resolvePersistedTransformStyleId', () => {
-  it('accepts canonical ids and canonicalizes the legacy wire value', () => {
-    expect(resolvePersistedTransformStyleId('data-driven')).toBe('data-driven');
-    expect(resolvePersistedTransformStyleId('dataDriven')).toBe('data-driven');
-  });
-
-  it('does not turn an unknown id into the default transform', () => {
-    expect(resolvePersistedTransformStyleId('not-a-style')).toBeNull();
-  });
-});

package/src/__tests__/transitionCatalog.test.ts

@@ -1,64 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { isTransitionType } from '@bendyline/squisq/schemas';
-import {
-  TRANSITION_GROUPS,
-  TRANSITION_ENTRIES,
-  DIRECTION_OPTIONS,
-  findTransitionEntry,
-  transitionLabel,
-} from '../transitionCatalog';
-
-describe('transition catalog', () => {
-  it('every curated value is a real core transition type', () => {
-    for (const entry of TRANSITION_ENTRIES) {
-      expect(isTransitionType(entry.value), entry.value).toBe(true);
-    }
-  });
-
-  it('has no duplicate values across groups', () => {
-    const values = TRANSITION_ENTRIES.map((e) => e.value);
-    expect(new Set(values).size).toBe(values.length);
-  });
-
-  it('gives every entry a non-empty label', () => {
-    for (const entry of TRANSITION_ENTRIES) {
-      expect(entry.label.length).toBeGreaterThan(0);
-    }
-  });
-
-  it('only uses known direction models', () => {
-    for (const entry of TRANSITION_ENTRIES) {
-      if (entry.direction) {
-        expect(DIRECTION_OPTIONS[entry.direction]).toBeDefined();
-      }
-    }
-  });
-
-  it('flat list matches the groups', () => {
-    expect(TRANSITION_ENTRIES).toEqual(TRANSITION_GROUPS.flatMap((g) => g.entries));
-  });
-});
-
-describe('transitionLabel', () => {
-  it('maps the empty value to None', () => {
-    expect(transitionLabel('')).toBe('None');
-  });
-
-  it('uses the curated label for a known value', () => {
-    expect(transitionLabel('pageCurl')).toBe('Page Curl');
-  });
-
-  it('humanizes an uncurated (but valid) alias', () => {
-    expect(transitionLabel('ferris')).toBe('Ferris');
-  });
-});
-
-describe('findTransitionEntry', () => {
-  it('finds a curated entry', () => {
-    expect(findTransitionEntry('push')?.direction).toBe('lrud');
-  });
-
-  it('returns undefined for an uncurated value', () => {
-    expect(findTransitionEntry('ferris')).toBeUndefined();
-  });
-});

package/src/__tests__/useBlockNavigator.test.tsx

@@ -1,67 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useState } from 'react';
-import { useBlockNavigator } from '../useBlockNavigator';
-
-/** Drive the hook against a piece of React-managed source state. */
-function useHarness(initial: string, enabled: boolean) {
-  const [source, setSource] = useState(initial);
-  const nav = useBlockNavigator(source, setSource, { enabled });
-  return { source, nav };
-}
-
-const DOC = '# One\n\nalpha\n\n# Two\n\nbeta\n';
-
-describe('useBlockNavigator', () => {
-  it('passes through to the full source when disabled', () => {
-    const { result } = renderHook(() => useHarness(DOC, false));
-    expect(result.current.nav.editorSource).toBe(DOC);
-    act(() => result.current.nav.setEditorSource('changed\n'));
-    expect(result.current.source).toBe('changed\n');
-  });
-
-  it('scopes editorSource to the active block when enabled', () => {
-    const { result } = renderHook(() => useHarness(DOC, true));
-    expect(result.current.nav.blockCount).toBe(2);
-    expect(result.current.nav.activeBlockKey).toBe(0);
-    expect(result.current.nav.editorSource).toBe('# One\n\nalpha\n\n');
-
-    act(() => result.current.nav.nextBlock());
-    expect(result.current.nav.activeBlockKey).toBe(1);
-    expect(result.current.nav.editorSource).toBe('# Two\n\nbeta\n');
-  });
-
-  it('splices an edit to the active block back into the full source', () => {
-    const { result } = renderHook(() => useHarness(DOC, true));
-    act(() => result.current.nav.setEditorSource('# One\n\nalpha edited'));
-    // A blank line is guaranteed before the following heading.
-    expect(result.current.source).toBe('# One\n\nalpha edited\n\n# Two\n\nbeta\n');
-  });
-
-  it('clamps navigation at the document ends', () => {
-    const { result } = renderHook(() => useHarness(DOC, true));
-    act(() => result.current.nav.prevBlock());
-    expect(result.current.nav.activeBlockKey).toBe(0);
-    act(() => result.current.nav.nextBlock());
-    act(() => result.current.nav.nextBlock());
-    expect(result.current.nav.activeBlockKey).toBe(1);
-  });
-
-  it('adds a new block after the active one and moves to it', () => {
-    const { result } = renderHook(() => useHarness(DOC, true));
-    act(() => result.current.nav.addBlock());
-    expect(result.current.nav.blockCount).toBe(3);
-    expect(result.current.nav.activeBlockKey).toBe(1);
-    expect(result.current.nav.editorSource).toContain('## New section');
-    // The original second block is preserved and now sits last.
-    expect(result.current.source).toContain('# Two\n\nbeta\n');
-  });
-
-  it('selects a block by source line for the outline', () => {
-    const { result } = renderHook(() => useHarness(DOC, true));
-    // Line 5 is the "# Two" heading.
-    act(() => result.current.nav.goToBlockByLine(5));
-    expect(result.current.nav.activeBlockKey).toBe(1);
-    expect(result.current.nav.activeBlockStartLine).toBe(5);
-  });
-});