@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/src/__tests__/jsonEditor.test.tsx

@@ -0,0 +1,168 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
+import { JsonEditor } from '../jsonEditor';
+
+function Controlled<T>({
+  schema,
+  initial,
+  onValueChange,
+}: {
+  schema: SquisqAnnotatedSchema;
+  initial: T;
+  onValueChange?: (next: T) => void;
+}) {
+  const [value, setValue] = useState<T>(initial);
+  return (
+    <JsonEditor
+      schema={schema}
+      value={value}
+      onChange={(v) => {
+        setValue(v as T);
+        onValueChange?.(v as T);
+      }}
+    />
+  );
+}
+
+describe('JsonEditor', () => {
+  it('renders text input and propagates edits through onChange', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { title: { type: 'string', title: 'Title' } },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ title: 'Hi' }} onValueChange={onChange} />);
+    const input = screen.getByDisplayValue('Hi') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'Hello' } });
+    expect(onChange).toHaveBeenLastCalledWith({ title: 'Hello' });
+  });
+
+  it('toggles a boolean via the toggle control', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { active: { type: 'boolean', title: 'Active' } },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ active: false }} onValueChange={onChange} />);
+    const button = screen.getByRole('button', { pressed: false });
+    fireEvent.click(button);
+    expect(onChange).toHaveBeenLastCalledWith({ active: true });
+  });
+
+  it('hides fields whose hidden rule matches', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        showAuthor: { type: 'boolean', title: 'Show author' },
+        authorName: {
+          type: 'string',
+          title: 'Author name',
+          squisq: { hidden: { field: 'showAuthor', truthy: false } },
+        },
+      },
+    };
+    const { container } = render(
+      <Controlled schema={schema} initial={{ showAuthor: false, authorName: 'Alex' }} />,
+    );
+    expect(container.textContent).not.toContain('Author name');
+  });
+
+  it('selecting a different segmented option commits the new enum value', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        size: { type: 'string', title: 'Size', enum: ['s', 'm', 'l'] },
+      },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ size: 's' }} onValueChange={onChange} />);
+    fireEvent.click(screen.getByRole('button', { name: 'l' }));
+    expect(onChange).toHaveBeenLastCalledWith({ size: 'l' });
+  });
+
+  it('card-stack: + Add appends, × Remove removes, ↑↓ reorder', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        sections: {
+          type: 'array',
+          title: 'Sections',
+          items: {
+            type: 'object',
+            properties: { heading: { type: 'string' } },
+            squisq: { itemLabel: { fromField: 'heading' } },
+          },
+          squisq: { control: 'card-stack', addLabel: '+ Add section' },
+        },
+      },
+    };
+    const onChange = vi.fn();
+    render(
+      <Controlled
+        schema={schema}
+        initial={{ sections: [{ heading: 'A' }, { heading: 'B' }] }}
+        onValueChange={onChange}
+      />,
+    );
+
+    // + Add appends a new empty item.
+    fireEvent.click(screen.getByText('+ Add section'));
+    expect(onChange).toHaveBeenLastCalledWith({
+      sections: [{ heading: 'A' }, { heading: 'B' }, { heading: '' }],
+    });
+
+    // × on the first card removes it.
+    const removeButtons = screen.getAllByLabelText('Remove');
+    fireEvent.click(removeButtons[0]);
+    expect(onChange).toHaveBeenLastCalledWith({
+      sections: [{ heading: 'B' }, { heading: '' }],
+    });
+
+    // ↓ on the first card reorders.
+    const downs = screen.getAllByLabelText('Move down');
+    fireEvent.click(downs[0]);
+    expect(onChange).toHaveBeenLastCalledWith({
+      sections: [{ heading: '' }, { heading: 'B' }],
+    });
+  });
+
+  it('chip-bin: typing + Enter appends, × removes', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        tags: {
+          type: 'array',
+          items: { type: 'string' },
+          squisq: { control: 'chip-bin', addLabel: '+ Add tag' },
+        },
+      },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ tags: ['one'] }} onValueChange={onChange} />);
+
+    const addInput = screen.getByPlaceholderText('+ Add tag');
+    fireEvent.change(addInput, { target: { value: 'two' } });
+    fireEvent.keyDown(addInput, { key: 'Enter' });
+    expect(onChange).toHaveBeenLastCalledWith({ tags: ['one', 'two'] });
+
+    fireEvent.click(screen.getByLabelText('Remove one'));
+    expect(onChange).toHaveBeenLastCalledWith({ tags: ['two'] });
+  });
+
+  it('omitting onChange disables every editor', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { title: { type: 'string', title: 'Title' } },
+    };
+    const onChange = vi.fn();
+    // Use a sniffer onChange we can verify is never called by simulating an
+    // attempted change. We render WITHOUT passing onChange to JsonEditor.
+    render(<JsonEditor schema={schema} value={{ title: 'Hi' }} />);
+    const input = screen.getByDisplayValue('Hi') as HTMLInputElement;
+    expect(input.disabled).toBe(true);
+    fireEvent.change(input, { target: { value: 'changed' } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/layersPanel.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ImageEditDoc } from '@bendyline/squisq/schemas';
+import { LayersPanel } from '../imageEditor/LayersPanel.js';
+import type { ImageEditorAction } from '../imageEditor/state.js';
+
+function buildDoc(): ImageEditDoc {
+  return {
+    version: 1,
+    canvas: { width: 100, height: 100 },
+    layers: [
+      {
+        id: 'a',
+        type: 'shape',
+        name: 'Bottom',
+        position: { x: 0, y: 0, width: 10, height: 10 },
+        content: { shape: 'rect' },
+      },
+      {
+        id: 'b',
+        type: 'text',
+        name: 'Middle',
+        position: { x: 0, y: 0, width: 50, height: 20 },
+        content: { text: 'Hi', style: { fontSize: 16, color: '#000' } },
+      },
+      {
+        id: 'c',
+        type: 'shape',
+        name: 'Top',
+        visible: false,
+        position: { x: 0, y: 0, width: 10, height: 10 },
+        content: { shape: 'rect' },
+      },
+    ],
+  };
+}
+
+describe('LayersPanel', () => {
+  it('renders layers with the top of the SVG stack first', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    const items = screen.getAllByText(/Bottom|Middle|Top/);
+    expect(items[0]?.textContent).toContain('Top');
+    expect(items[items.length - 1]?.textContent).toContain('Bottom');
+  });
+
+  it('clicking the layer name dispatches a select action', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    fireEvent.click(screen.getByText('Middle'));
+    expect(dispatch).toHaveBeenCalledWith({ type: 'select', layerId: 'b' });
+  });
+
+  it('toggling visibility dispatches an update-layer action', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    // The "Hide layer" buttons exist for visible layers.
+    const hideButtons = screen.getAllByRole('button', { name: 'Hide layer' });
+    fireEvent.click(hideButtons[0]!); // top-most visible layer is 'b'
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'update-layer',
+      layerId: 'b',
+      patch: { visible: false },
+    });
+  });
+
+  it('move-up button is disabled at the top of the stack', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    const upButtons = screen.getAllByRole('button', { name: 'Move layer up' });
+    // Visual order is c, b, a; layer 'c' is at the top of the stack and cannot move up.
+    expect((upButtons[0] as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it('delete button dispatches a remove-layer action', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    const delButtons = screen.getAllByRole('button', { name: 'Delete layer' });
+    fireEvent.click(delButtons[0]!); // top of stack ('c')
+    expect(dispatch).toHaveBeenCalledWith({ type: 'remove-layer', layerId: 'c' });
+  });
+
+  it('shows an empty-state message when there are no layers', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(
+      <LayersPanel
+        doc={{ version: 1, canvas: { width: 1, height: 1 }, layers: [] }}
+        selectedLayerId={null}
+        dispatch={dispatch}
+      />,
+    );
+    expect(screen.getByText(/no layers yet/i)).toBeTruthy();
+  });
+});

package/src/__tests__/linkDialogDocPicker.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * Covers the LinkDialog's "Browse documents" picker added behind the
+ * `documentLinkProvider` prop. The picker is purely additive — when
+ * the prop is absent the dialog renders its original URL-only layout.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { LinkDialog } from '../LinkDialog';
+import type { DocumentLinkProvider } from '../EditorContext';
+
+const NEIGHBORS = [
+  { path: 'resume.md', label: 'Resume', description: 'My CV' },
+  { path: 'projects.md', label: 'Projects' },
+  { path: 'misc/notes.md', label: 'Notes', description: 'Scratchpad' },
+];
+
+const provider: DocumentLinkProvider = async (q) => {
+  const query = q.trim().toLowerCase();
+  if (!query) return NEIGHBORS;
+  return NEIGHBORS.filter(
+    (n) => n.label.toLowerCase().includes(query) || n.path.toLowerCase().includes(query),
+  );
+};
+
+describe('LinkDialog — document picker', () => {
+  it('hides the documents tab when no provider is supplied', () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+      />,
+    );
+    expect(screen.queryByRole('tab', { name: /browse documents/i })).toBeNull();
+  });
+
+  it('shows both tabs when the provider is supplied', () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    expect(screen.getByRole('tab', { name: 'URL' })).toBeTruthy();
+    expect(screen.getByRole('tab', { name: 'Browse documents' })).toBeTruthy();
+  });
+
+  it('lists initial candidates when the documents tab opens', async () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => {
+      expect(screen.getByText('Resume')).toBeTruthy();
+      expect(screen.getByText('Projects')).toBeTruthy();
+      expect(screen.getByText('Notes')).toBeTruthy();
+    });
+  });
+
+  it('filters candidates as the user types', async () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => screen.getByText('Resume'));
+    const search = screen.getByLabelText('Search') as HTMLInputElement;
+    fireEvent.change(search, { target: { value: 'proj' } });
+    await waitFor(() => {
+      expect(screen.getByText('Projects')).toBeTruthy();
+      expect(screen.queryByText('Resume')).toBeNull();
+    });
+  });
+
+  it('picking a document fills the URL and auto-fills the caption when empty', async () => {
+    const onConfirm = vi.fn();
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={onConfirm}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => screen.getByText('Resume'));
+    fireEvent.click(screen.getByRole('option', { name: /Resume/i }));
+    // After picking, the dialog jumps back to the URL tab so Enter submits.
+    const urlInput = screen.getByLabelText('URL') as HTMLInputElement;
+    expect(urlInput.value).toBe('resume.md');
+    const textInput = screen.getByLabelText('Text') as HTMLInputElement;
+    expect(textInput.value).toBe('Resume');
+    // Submit
+    fireEvent.submit(urlInput.closest('form')!);
+    expect(onConfirm).toHaveBeenCalledWith('Resume', 'resume.md');
+  });
+
+  it('preserves a caption the user already typed when picking a document', async () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText="Read my work"
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => screen.getByText('Resume'));
+    fireEvent.click(screen.getByRole('option', { name: /Resume/i }));
+    const textInput = screen.getByLabelText('Text') as HTMLInputElement;
+    expect(textInput.value).toBe('Read my work');
+  });
+});

package/src/__tests__/mediaAttachmentFlow.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
+
+/**
+ * Attachment-flow regression: earlier versions of MediaBin dropped
+ * 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."
+ *
+ * The fix: after `mediaProvider.addMedia(...)` succeeds, MediaBin
+ * fires `onMediaUploaded(relativePath, name, mimeType)`. The
+ * EditorShell wires this to an `insertAtCursor` that emits
+ * `![alt](attachments/<filename>)` so the file actually participates
+ * in the outgoing markdown.
+ *
+ * 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.
+ */
+
+function fakeMediaProvider(records: string[]): MediaProvider {
+  let counter = 0;
+  return {
+    async addMedia(name: string, _data: ArrayBuffer | Blob | Uint8Array, _mime: string) {
+      counter += 1;
+      const relative = `attachments/${counter}-${name}`;
+      records.push(relative);
+      return relative;
+    },
+    async resolveUrl(relPath: string) {
+      return relPath;
+    },
+    async listMedia() {
+      return [];
+    },
+    async removeMedia(_relPath: string) {
+      /* no-op */
+    },
+    dispose() {
+      /* no-op */
+    },
+  };
+}
+
+/**
+ * Re-implements the exact snippet EditorShell's `insertMediaRef`
+ * builds. Keeping this aligned with the real impl would ordinarily
+ * rely on directly importing the helper; since it's currently inline
+ * in EditorShell, mirror the logic here and lean on the test to
+ * alert us if we drift apart.
+ */
+function buildAttachmentSnippet(relativePath: string, name: string, mimeType: string): string {
+  const alt = name.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
+  return mimeType.startsWith('image/') ? `![${alt}](${relativePath})` : `[${alt}](${relativePath})`;
+}
+
+describe('media attachment flow', () => {
+  it('addMedia → buildAttachmentSnippet → markdown round-trip keeps the ref', async () => {
+    const records: string[] = [];
+    const provider = fakeMediaProvider(records);
+
+    // Simulate MediaBin.handleFileChange for a single PNG drop.
+    const pngBytes = new Uint8Array([0x89, 0x50, 0x4e, 0x47]);
+    const relative = await provider.addMedia('my_screenshot.png', pngBytes, 'image/png');
+
+    expect(records).toEqual([relative]);
+    const snippet = buildAttachmentSnippet(relative, 'my_screenshot.png', 'image/png');
+    expect(snippet).toBe(`![my screenshot](${relative})`);
+
+    // Insert snippet into the editor: markdown → HTML → markdown.
+    // This is the path a real insertAtCursor + tiptap onUpdate goes
+    // through. The outbound markdown must still contain the ref.
+    const html = markdownToTiptap(snippet);
+    expect(html).toMatch(/<img\b/);
+    expect(html).toContain(`src="${relative}"`);
+
+    const back = tiptapToMarkdown(html);
+    expect(back).toContain(`![my screenshot](${relative})`);
+  });
+
+  it('handles empty-alt (most common pasted-image shape)', async () => {
+    const records: string[] = [];
+    const provider = fakeMediaProvider(records);
+    const relative = await provider.addMedia('pasted.png', new Uint8Array([0]), 'image/png');
+
+    // Simulate what happens when alt is empty — common for bare pastes
+    // where the user hasn't typed a caption.
+    const snippet = `![](${relative})`;
+    const html = markdownToTiptap(snippet);
+    expect(html).toMatch(/<img\b/);
+    expect(html).toContain(`src="${relative}"`);
+    const back = tiptapToMarkdown(html);
+    expect(back).toContain(`![](${relative})`);
+  });
+
+  it('non-image files fall back to a plain link, still preserving the ref', async () => {
+    const records: string[] = [];
+    const provider = fakeMediaProvider(records);
+    const relative = await provider.addMedia('design.pdf', new Uint8Array([0]), 'application/pdf');
+    const snippet = buildAttachmentSnippet(relative, 'design.pdf', 'application/pdf');
+    expect(snippet).toBe(`[design](${relative})`);
+    // Non-images don't go through the `<img>` regex — they stay as
+    // plain markdown links, which the service-side extractor ignores
+    // but the UI renders as normal hyperlinks.
+    expect(snippet).not.toContain('!');
+  });
+});

package/src/__tests__/outlinePanel.test.tsx

@@ -0,0 +1,79 @@
+import { describe, expect, it, beforeAll } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { EditorProvider } from '../EditorContext';
+import { OutlinePanel } from '../OutlinePanel';
+
+// jsdom lacks ResizeObserver — the pane wires one up to track the editor's
+// page edge. A no-op shim is enough for the rendering tests below.
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    globalThis.ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+  }
+});
+
+function renderOutline(markdown: string) {
+  return render(
+    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
+      <OutlinePanel />
+    </EditorProvider>,
+  );
+}
+
+describe('OutlinePanel', () => {
+  it('renders the empty placeholder when the doc has no headings', async () => {
+    renderOutline('Just a paragraph, no headings.\n');
+    expect(await screen.findByText(/add a heading to populate the outline/i)).toBeTruthy();
+  });
+
+  it('renders one row per heading and nests by depth', async () => {
+    const md = [
+      '# Top Level',
+      '',
+      '## Subsection A',
+      '',
+      'Body.',
+      '',
+      '### Detail',
+      '',
+      'Body.',
+      '',
+      '## Subsection B',
+      '',
+      'Body.',
+      '',
+    ].join('\n');
+
+    const { container } = renderOutline(md);
+    await screen.findByTestId('outline-panel');
+
+    const rows = container.querySelectorAll('.squisq-outline-row');
+    expect(rows.length).toBe(4);
+
+    // Depth modifier classes are applied per heading level.
+    const depths = Array.from(rows).map((r) => {
+      const match = r.className.match(/squisq-outline-row--depth-(\d)/);
+      return match ? Number(match[1]) : null;
+    });
+    expect(depths).toEqual([1, 2, 3, 2]);
+
+    // Heading text is reflected in row labels.
+    const labels = Array.from(rows).map((r) => r.textContent?.trim());
+    expect(labels).toContain('Top Level');
+    expect(labels).toContain('Subsection A');
+    expect(labels).toContain('Detail');
+    expect(labels).toContain('Subsection B');
+  });
+
+  it('shows a template chip on annotated headings', async () => {
+    const md = '# Welcome {[title]}\n\nIntro.\n';
+    const { container } = renderOutline(md);
+    await screen.findByTestId('outline-panel');
+    const chip = container.querySelector('.squisq-outline-template-chip');
+    expect(chip).not.toBeNull();
+    expect(chip!.textContent).toContain('Title');
+  });
+});