@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/__tests__/inlinePreviewGutter.test.tsx

@@ -1,62 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { EditorProvider } from '../EditorContext';
-import { InlinePreviewGutter } from '../InlinePreviewGutter';
-
-/**
- * The gutter pulls its data from the EditorContext's parsed Doc. We mount
- * it against a real provider seeded with markdown that contains both an
- * annotated heading (`{[title]}`) and a plain heading. The first
- * should produce a card; the second should be ignored.
- *
- * We deliberately don't snapshot the SVG — the BlockRenderer covers that
- * elsewhere. Here we just assert (a) the gutter mounts, (b) it renders
- * one card per annotated block, and (c) the empty state shows when there
- * are no annotated blocks.
- */
-
-function renderGutter(markdown: string) {
-  return render(
-    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
-      <InlinePreviewGutter />
-    </EditorProvider>,
-  );
-}
-
-describe('InlinePreviewGutter', () => {
-  it('renders the empty state when no blocks are template-annotated', async () => {
-    renderGutter('# Plain heading\n\nSome body text.\n');
-    expect(await screen.findByText(/tag a heading with a template/i)).toBeTruthy();
-  });
-
-  it('renders one card per template-annotated block', async () => {
-    const md = [
-      '# Welcome {[title]}',
-      '',
-      'Subtitle goes here.',
-      '',
-      '## Plain heading',
-      '',
-      'No template tag — should not produce a card.',
-      '',
-      '## Big number {[statHighlight]}',
-      '',
-      '42',
-    ].join('\n');
-
-    const { container } = renderGutter(md);
-
-    // Two annotated headings → two cards.
-    await screen.findByTestId('inline-preview-gutter');
-    const cards = container.querySelectorAll('.squisq-inline-preview-card');
-    expect(cards.length).toBe(2);
-
-    // Template labels are rendered alongside each card.
-    const labels = Array.from(
-      container.querySelectorAll('.squisq-inline-preview-card-template'),
-    ).map((el) => el.textContent);
-    // Templates render their human-readable label (via `templateLabel`).
-    expect(labels).toContain('Title');
-    expect(labels).toContain('Stat Highlight');
-  });
-});

package/src/__tests__/inlinePreviewGutterAllBlocks.test.tsx

@@ -1,103 +0,0 @@
-import { describe, expect, it, beforeAll } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import { EditorProvider } from '../EditorContext';
-import { InlinePreviewGutter } from '../InlinePreviewGutter';
-
-// jsdom lacks ResizeObserver — the gutter's heading-layout hook wires one
-// up to recompute on editor resizes. Stub a no-op for these tests.
-beforeAll(() => {
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    globalThis.ResizeObserver = class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    } as unknown as typeof ResizeObserver;
-  }
-});
-
-/**
- * The gutter pulls heading data from the parsed Doc (via `useHeadingLayout`)
- * and pairs it to DOM headings inside the `.squisq-wysiwyg-container`.
- * To exercise the all-blocks bracket logic we provide both: real markdown
- * (so the parser populates `doc.blocks`) AND a sibling stub container with
- * matching `<h*>` elements (so the DOM-pairing path finds something to
- * measure).
- */
-function renderWithMatchingDom(markdown: string, headingHtml: string) {
-  return render(
-    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
-      <div className="squisq-editor-with-gutter" style={{ position: 'relative', height: 600 }}>
-        <div
-          className="squisq-wysiwyg-container"
-          style={{ position: 'relative', width: 800, height: 600 }}
-        >
-          <div
-            className="squisq-wysiwyg-editor"
-            dangerouslySetInnerHTML={{ __html: headingHtml }}
-          />
-        </div>
-        <InlinePreviewGutter />
-      </div>
-    </EditorProvider>,
-  );
-}
-
-describe('InlinePreviewGutter — all-block bracket lines', () => {
-  it('renders a vertical-extent bar per heading even when none are annotated', async () => {
-    const md = '# Hello World\n\nBody\n\n## Getting Started\n\nBody\n\n## Tips\n\nBody\n';
-    const { container } = renderWithMatchingDom(
-      md,
-      '<h1>Hello World</h1>' +
-        '<p>Body</p>' +
-        '<h2>Getting Started</h2>' +
-        '<p>Body</p>' +
-        '<h2>Tips</h2>' +
-        '<p>Body</p>',
-    );
-
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll('.squisq-inline-preview-extent');
-        expect(bars.length).toBe(3);
-      },
-      { timeout: 1000 },
-    );
-
-    // All three should be the untagged variant (no `data-template` on any).
-    const bars = container.querySelectorAll('.squisq-inline-preview-extent');
-    bars.forEach((bar) =>
-      expect(bar.classList.contains('squisq-inline-preview-extent--untagged')).toBe(true),
-    );
-  });
-
-  it('renders a strong tagged bar for annotated headings + lighter bars for the rest', async () => {
-    const md = '# Welcome\n\n## Getting Started {[sectionHeader]}\n\n## Tips\n';
-    const { container } = renderWithMatchingDom(
-      md,
-      '<h1>Welcome</h1>' +
-        '<h2 data-template="sectionHeader">Getting Started</h2>' +
-        '<h2>Tips</h2>',
-    );
-
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll('.squisq-inline-preview-extent');
-        expect(bars.length).toBe(3);
-      },
-      { timeout: 1000 },
-    );
-
-    const bars = Array.from(container.querySelectorAll('.squisq-inline-preview-extent'));
-    const tagged = bars.filter(
-      (b) => !b.classList.contains('squisq-inline-preview-extent--untagged'),
-    );
-    const untagged = bars.filter((b) =>
-      b.classList.contains('squisq-inline-preview-extent--untagged'),
-    );
-    expect(tagged.length).toBe(1);
-    expect(untagged.length).toBe(2);
-  });
-});
-
-// `screen` import unused but kept to mirror the sibling test file's style.
-void screen;

package/src/__tests__/jsonEditor.test.tsx

@@ -1,223 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { useState } from 'react';
-import { fireEvent, render, screen, waitFor } 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();
-  });
-
-  it('escapes object property names as RFC 6901 pointer segments', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'object',
-      properties: { 'a/b~c': { type: 'string', title: 'Odd key' } },
-    };
-    const onChange = vi.fn();
-    render(<Controlled schema={schema} initial={{ 'a/b~c': 'before' }} onValueChange={onChange} />);
-    fireEvent.change(screen.getByLabelText('Odd key'), { target: { value: 'after' } });
-    expect(onChange).toHaveBeenLastCalledWith({ 'a/b~c': 'after' });
-  });
-
-  it('associates labels/help/errors and reports validation after render', async () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'object',
-      properties: {
-        title: { type: 'string', title: 'Title', description: 'A useful title' },
-      },
-    };
-    const onValidate = vi.fn();
-    render(
-      <JsonEditor
-        schema={schema}
-        value={{ title: '' }}
-        onChange={() => {}}
-        validate={() => [{ path: '/title', message: 'Required' }]}
-        onValidate={onValidate}
-      />,
-    );
-    const input = screen.getByLabelText('Title');
-    expect(input.getAttribute('aria-invalid')).toBe('true');
-    const described = input.getAttribute('aria-describedby') ?? '';
-    expect(described).toContain('-help');
-    expect(described).toContain('-error');
-    expect(screen.getByRole('alert').textContent).toBe('Required');
-    await waitFor(() =>
-      expect(onValidate).toHaveBeenCalledWith([{ path: '/title', message: 'Required' }]),
-    );
-  });
-
-  it('adds ARIA state and keyboard navigation to segmented/tabs controls', () => {
-    const schema: SquisqAnnotatedSchema = {
-      oneOf: [
-        { type: 'string', title: 'Text option' },
-        { type: 'number', title: 'Number option' },
-      ],
-      squisq: { control: 'tabs', label: 'Value type' },
-    };
-    render(<JsonEditor schema={schema} value="hello" onChange={() => {}} />);
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs[0].getAttribute('aria-selected')).toBe('true');
-    fireEvent.keyDown(tabs[0], { key: 'ArrowRight' });
-    expect(tabs[1].getAttribute('aria-selected')).toBe('true');
-    expect(screen.getByRole('tabpanel')).toBeTruthy();
-  });
-});

package/src/__tests__/layersPanel.test.tsx

@@ -1,167 +0,0 @@
-/**
- * @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';
-
-const ignoreAddLayer = () => {};
-
-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}
-        onAddLayer={ignoreAddLayer}
-      />,
-    );
-    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}
-        onAddLayer={ignoreAddLayer}
-      />,
-    );
-    fireEvent.click(screen.getByText('Middle'));
-    expect(dispatch).toHaveBeenCalledWith({ type: 'select', layerId: 'b' });
-  });
-
-  it('exposes the full layer name as a tooltip when the row is truncated', () => {
-    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    render(
-      <LayersPanel
-        doc={buildDoc()}
-        selectedLayerId={null}
-        dispatch={dispatch}
-        onAddLayer={ignoreAddLayer}
-      />,
-    );
-    expect(screen.getByTitle('Middle').textContent).toContain('Middle');
-  });
-
-  it('opens the add-layer menu and reports the selected layer kind', () => {
-    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    const onAddLayer = vi.fn();
-    render(
-      <LayersPanel
-        doc={buildDoc()}
-        selectedLayerId={null}
-        dispatch={dispatch}
-        onAddLayer={onAddLayer}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: 'Add layer' }));
-    expect(screen.getByRole('menu')).toBeTruthy();
-    fireEvent.click(screen.getByRole('menuitem', { name: 'Text layer' }));
-    expect(onAddLayer).toHaveBeenCalledWith('text');
-    expect(screen.queryByRole('menu')).toBeNull();
-  });
-
-  it('toggling visibility dispatches an update-layer action', () => {
-    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    render(
-      <LayersPanel
-        doc={buildDoc()}
-        selectedLayerId={null}
-        dispatch={dispatch}
-        onAddLayer={ignoreAddLayer}
-      />,
-    );
-    // 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}
-        onAddLayer={ignoreAddLayer}
-      />,
-    );
-    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}
-        onAddLayer={ignoreAddLayer}
-      />,
-    );
-    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}
-        onAddLayer={ignoreAddLayer}
-      />,
-    );
-    expect(screen.getByText(/no layers yet/i)).toBeTruthy();
-  });
-});

package/src/__tests__/layoutChildRoundTrip.test.ts

@@ -1,71 +0,0 @@
-/**
- * Layout child sub-blocks round-trip through the markdown ↔ Tiptap bridge.
- *
- * Layouts now persist each layer as a readable `### {#id} {[type …]}` child
- * heading (no base64 `layers=` blob); a text layer's content is the child's
- * markdown body. These tests pin that serialization seam — the same
- * `data-template` / `data-template-params` / `data-block-attrs` attributes the
- * LayoutAdapter reads back — without standing up a full editor.
- */
-
-import { describe, it, expect } from 'vitest';
-import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
-
-// Parent title "Pricing" (not "Layout") avoids the bridge's template-label
-// de-dup heuristic, which would strip a title equal to the template's label.
-const LAYOUT = [
-  '## Pricing {[layout]}',
-  '',
-  '### {#text-1} {[text x=360 y=380 width=1200 height=320 align=center]}',
-  '',
-  'Welcome to the **bold** layout',
-  '',
-  '- first point',
-  '- second point',
-  '',
-  '### {#box-1} {[rectangle x=760 y=390 width=400 height=300 fill="#e0e7ff"]}',
-  '',
-  '### {#pic-1} {[image x=40 y=40 width=320 height=240 src=cover.png alt="Cover"]}',
-].join('\n');
-
-describe('Layout child sub-block round-trip', () => {
-  it('extracts a text layer annotation into the template + block-attr attributes', () => {
-    const html = markdownToTiptap('### {#text-1} {[text x=360 y=380 width=1200 height=320]}');
-    expect(html).toContain('data-template="text"');
-    expect(html).toContain('data-template-params="x=360 y=380 width=1200 height=320"');
-    expect(html).toContain('data-block-attrs="#text-1"');
-    expect(html).not.toContain('{[text'); // raw annotation text stripped
-  });
-
-  it('keeps a text layer body (marks + list) as sibling blocks, not in the heading', () => {
-    const html = markdownToTiptap(
-      ['### {#text-1} {[text x=0 y=0]}', '', 'Hello **world**', '', '- a', '- b'].join('\n'),
-    );
-    // Heading is empty; the body is its own paragraph + list.
-    expect(html).toContain('<strong>world</strong>');
-    expect(html).toContain('<ul>');
-    expect(html).toContain('<li>');
-  });
-
-  it('round-trips a full layout (text + box + image) losslessly and idempotently', () => {
-    const back = tiptapToMarkdown(markdownToTiptap(LAYOUT));
-    expect(back).toContain('## Pricing {[layout]}');
-    // Child sub-blocks keep their id + annotation (empty-text headings get an
-    // extra space after `###`, which re-parses identically — assert spacing-free).
-    expect(back).toContain('{#text-1} {[text x=360 y=380 width=1200 height=320 align=center]}');
-    expect(back).toContain(
-      '{#box-1} {[rectangle x=760 y=390 width=400 height=300 fill="#e0e7ff"]}',
-    );
-    expect(back).toContain(
-      '{#pic-1} {[image x=40 y=40 width=320 height=240 src=cover.png alt="Cover"]}',
-    );
-    // The text layer's body markdown survives as readable content.
-    expect(back).toContain('Welcome to the **bold** layout');
-    expect(back).toContain('- first point');
-    expect(back).toContain('- second point');
-    // No base64 layers blob anywhere — the whole point of the change.
-    expect(back).not.toContain('layers=');
-    // Stable: a second pass reproduces the first exactly.
-    expect(tiptapToMarkdown(markdownToTiptap(back))).toBe(back);
-  });
-});