@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/__tests__/outlinePanel.test.tsx

@@ -1,169 +0,0 @@
-import { describe, expect, it, beforeAll, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { EditorProvider, useEditorContext } 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>,
-  );
-}
-
-function SourceProbe() {
-  const { markdownSource } = useEditorContext();
-  return <output data-testid="markdown-source">{markdownSource}</output>;
-}
-
-function renderOutlineWithSource(markdown: string, readOnly = false) {
-  return render(
-    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
-      <OutlinePanel readOnly={readOnly} />
-      <SourceProbe />
-    </EditorProvider>,
-  );
-}
-
-function makeDataTransfer(): DataTransfer {
-  const values = new Map<string, string>();
-  return {
-    effectAllowed: 'uninitialized',
-    dropEffect: 'none',
-    setData: vi.fn((type: string, value: string) => values.set(type, value)),
-    getData: vi.fn((type: string) => values.get(type) ?? ''),
-    get types() {
-      return [...values.keys()];
-    },
-  } as unknown as DataTransfer;
-}
-
-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');
-  });
-
-  it('drags a section after a sibling and rewrites the underlying markdown', async () => {
-    const source = '# Alpha\n\nalpha\n\n# Bravo\n\nbravo\n';
-    const expected = '# Bravo\n\nbravo\n\n# Alpha\n\nalpha\n';
-    const { container } = renderOutlineWithSource(source);
-    const alpha = await screen.findByRole('button', { name: 'Alpha' });
-    const bravo = await screen.findByRole('button', { name: 'Bravo' });
-    const bravoWrap = bravo.closest<HTMLElement>('.squisq-outline-row-wrap');
-    expect(bravoWrap).not.toBeNull();
-    vi.spyOn(bravoWrap!, 'getBoundingClientRect').mockReturnValue({
-      x: 0,
-      y: 0,
-      top: 0,
-      right: 200,
-      bottom: 20,
-      left: 0,
-      width: 200,
-      height: 20,
-      toJSON: () => ({}),
-    });
-    const transfer = makeDataTransfer();
-
-    fireEvent.dragStart(alpha, { dataTransfer: transfer });
-    expect(transfer.effectAllowed).toBe('move');
-    expect(transfer.setData).toHaveBeenCalledWith('text/plain', expect.any(String));
-
-    fireEvent.dragOver(bravoWrap!, { dataTransfer: transfer, clientY: 18 });
-    expect(transfer.dropEffect).toBe('move');
-    expect(bravo.closest('.squisq-outline-item')?.classList).toContain(
-      'squisq-outline-item--drop-after',
-    );
-
-    fireEvent.drop(bravoWrap!, { dataTransfer: transfer, clientY: 18 });
-    expect(container.querySelector('.squisq-outline-item--drop-after')).toBeNull();
-
-    await waitFor(() => {
-      expect(screen.getByTestId('markdown-source').textContent).toBe(expected);
-      const labels = Array.from(container.querySelectorAll('.squisq-outline-row-text')).map(
-        (row) => row.textContent,
-      );
-      expect(labels).toEqual(['Bravo', 'Alpha']);
-    });
-  });
-
-  it('disables outline mutations in read-only mode', async () => {
-    const source = '# Alpha\n\nalpha\n\n# Bravo\n\nbravo\n';
-    renderOutlineWithSource(source, true);
-    const alpha = await screen.findByRole('button', { name: 'Alpha' });
-    const bravo = await screen.findByRole('button', { name: 'Bravo' });
-    const bravoWrap = bravo.closest<HTMLElement>('.squisq-outline-row-wrap');
-    const transfer = makeDataTransfer();
-
-    expect(alpha.getAttribute('draggable')).toBe('false');
-    expect(
-      screen
-        .getAllByRole('button', { name: /demote heading \(currently h1\)/i })[0]
-        .hasAttribute('disabled'),
-    ).toBe(true);
-    fireEvent.dragStart(alpha, { dataTransfer: transfer });
-    fireEvent.drop(bravoWrap!, { dataTransfer: transfer, clientY: 100 });
-
-    expect(screen.getByTestId('markdown-source').textContent).toBe(source);
-  });
-});

package/src/__tests__/outlineSource.test.ts

@@ -1,217 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { moveHeadingSectionInSource } from '../outlineSource';
-
-function lineOf(source: string, heading: string): number {
-  const index = source.indexOf(heading);
-  if (index < 0) throw new Error(`Missing heading: ${heading}`);
-  return source.slice(0, index).split(/\r\n|\r|\n/).length;
-}
-
-describe('moveHeadingSectionInSource', () => {
-  it('moves a parent section with its body and nested subsections', () => {
-    const source = [
-      '# Document',
-      '',
-      'Intro.',
-      '',
-      '## First',
-      '',
-      'First body.',
-      '',
-      '### First child',
-      '',
-      'Child body.',
-      '',
-      '## Second',
-      '',
-      'Second body.',
-      '',
-      '### Second child',
-      '',
-      'Second child body.',
-      '',
-      '## Third',
-      '',
-      'Third body.',
-      '',
-    ].join('\n');
-
-    const next = moveHeadingSectionInSource(
-      source,
-      lineOf(source, '## First'),
-      lineOf(source, '## Second'),
-      'after',
-    );
-
-    expect(next).toBe(
-      [
-        '# Document',
-        '',
-        'Intro.',
-        '',
-        '## Second',
-        '',
-        'Second body.',
-        '',
-        '### Second child',
-        '',
-        'Second child body.',
-        '',
-        '## First',
-        '',
-        'First body.',
-        '',
-        '### First child',
-        '',
-        'Child body.',
-        '',
-        '## Third',
-        '',
-        'Third body.',
-        '',
-      ].join('\n'),
-    );
-  });
-
-  it('moves a later section before an earlier sibling', () => {
-    const source = '# A\n\na\n\n# B\n\nb\n\n# C\n\nc\n';
-    expect(
-      moveHeadingSectionInSource(source, lineOf(source, '# C'), lineOf(source, '# A'), 'before'),
-    ).toBe('# C\n\nc\n\n# A\n\na\n\n# B\n\nb\n');
-  });
-
-  it('preserves CRLF and the absence of a final newline', () => {
-    const source = '# A\r\n\r\na\r\n\r\n# B\r\n\r\nb';
-    expect(
-      moveHeadingSectionInSource(source, lineOf(source, '# B'), lineOf(source, '# A'), 'before'),
-    ).toBe('# B\r\n\r\nb\r\n\r\n# A\r\n\r\na');
-  });
-
-  it('leaves frontmatter and preamble bytes in place', () => {
-    const source = [
-      '---',
-      'title: Example',
-      '---',
-      '',
-      'Preamble stays here.',
-      '',
-      '# A {[sectionHeader]}',
-      '',
-      'a',
-      '',
-      '# B {#custom .wide}',
-      '',
-      'b',
-      '',
-    ].join('\n');
-    const prefix = source.slice(0, source.indexOf('# A'));
-
-    const next = moveHeadingSectionInSource(
-      source,
-      lineOf(source, '# B'),
-      lineOf(source, '# A'),
-      'before',
-    );
-
-    expect(next?.startsWith(prefix)).toBe(true);
-    expect(next).toContain('# B {#custom .wide}\n\nb\n\n# A {[sectionHeader]}\n\na\n');
-  });
-
-  it('ignores heading lookalikes inside fenced code', () => {
-    const source = ['# A', '', '```md', '# not an outline heading', '```', '', '# B', '', 'b'].join(
-      '\n',
-    );
-
-    const next = moveHeadingSectionInSource(
-      source,
-      lineOf(source, '# A'),
-      lineOf(source, '# B'),
-      'after',
-    );
-
-    expect(next).toBe(
-      ['# B', '', 'b', '', '# A', '', '```md', '# not an outline heading', '```'].join('\n'),
-    );
-    expect(
-      moveHeadingSectionInSource(
-        source,
-        lineOf(source, '# not an outline heading'),
-        lineOf(source, '# B'),
-        'before',
-      ),
-    ).toBeNull();
-  });
-
-  it('supports duplicate heading text and Setext headings by source line', () => {
-    const source = [
-      'Document',
-      '========',
-      '',
-      'First duplicate',
-      '---------------',
-      '',
-      'one',
-      '',
-      'First duplicate',
-      '---------------',
-      '',
-      'two',
-    ].join('\n');
-    const firstLine = lineOf(source, 'First duplicate');
-    const secondLine = source
-      .slice(0, source.lastIndexOf('First duplicate'))
-      .split(/\r\n|\r|\n/).length;
-
-    const next = moveHeadingSectionInSource(source, secondLine, firstLine, 'before');
-
-    expect(next).toBe(
-      [
-        'Document',
-        '========',
-        '',
-        'First duplicate',
-        '---------------',
-        '',
-        'two',
-        '',
-        'First duplicate',
-        '---------------',
-        '',
-        'one',
-      ].join('\n'),
-    );
-  });
-
-  it('rejects hierarchy changes, stale lines, self-drops, and adjacent no-ops', () => {
-    const source = [
-      '# Parent A',
-      '',
-      '## Child A',
-      '',
-      '### Detail',
-      '',
-      '# Parent B',
-      '',
-      '## Child B',
-      '',
-      '### Skipped sibling',
-      '',
-      '## Last child',
-    ].join('\n');
-    const parentA = lineOf(source, '# Parent A');
-    const parentB = lineOf(source, '# Parent B');
-    const childA = lineOf(source, '## Child A');
-    const childB = lineOf(source, '## Child B');
-    const detail = lineOf(source, '### Detail');
-    const skipped = lineOf(source, '### Skipped sibling');
-    const lastChild = lineOf(source, '## Last child');
-
-    expect(moveHeadingSectionInSource(source, parentA, parentA, 'before')).toBeNull();
-    expect(moveHeadingSectionInSource(source, childA, detail, 'before')).toBeNull();
-    expect(moveHeadingSectionInSource(source, childA, childB, 'before')).toBeNull();
-    expect(moveHeadingSectionInSource(source, skipped, lastChild, 'before')).toBeNull();
-    expect(moveHeadingSectionInSource(source, parentA, parentB, 'before')).toBeNull();
-    expect(moveHeadingSectionInSource(source, parentB, parentA, 'after')).toBeNull();
-    expect(moveHeadingSectionInSource(source, 999, parentA, 'before')).toBeNull();
-  });
-});

package/src/__tests__/plainHtmlPreview.test.tsx

@@ -1,125 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import type { MediaProvider } from '@bendyline/squisq/schemas';
-import { resolveTheme } from '@bendyline/squisq/schemas';
-import { PlainHtmlPreview } from '../PlainHtmlPreview';
-
-function getIframeSrcDoc(): string {
-  const iframe = screen.getByTestId('plain-html-preview') as HTMLIFrameElement;
-  return iframe.srcdoc;
-}
-
-describe('PlainHtmlPreview', () => {
-  it('renders the markdown into the iframe srcDoc', async () => {
-    render(<PlainHtmlPreview markdown={'# Hello\n\nWorld'} />);
-    await waitFor(() => expect(getIframeSrcDoc()).toContain('<!DOCTYPE html>'));
-    const srcdoc = getIframeSrcDoc();
-    expect(srcdoc).toContain('<h1>Hello</h1>');
-    expect(srcdoc).toContain('<p>World</p>');
-  });
-
-  it('refuses scripts via sandbox attribute (allow-same-origin only)', () => {
-    render(<PlainHtmlPreview markdown={'hi'} />);
-    const iframe = screen.getByTestId('plain-html-preview') as HTMLIFrameElement;
-    const sandbox = iframe.getAttribute('sandbox') ?? '';
-    expect(sandbox).toContain('allow-same-origin');
-    expect(sandbox).not.toContain('allow-scripts');
-  });
-
-  it('globally scrolls the iframe with up and down arrows when enabled', () => {
-    render(<PlainHtmlPreview markdown={'# Scroll me'} globalKeyboardShortcuts />);
-    const iframe = screen.getByTestId('plain-html-preview') as HTMLIFrameElement;
-    const scrollBy = vi.fn();
-    Object.defineProperty(iframe.contentWindow, 'scrollBy', {
-      configurable: true,
-      value: scrollBy,
-    });
-
-    fireEvent.keyDown(document, { key: 'ArrowDown' });
-    fireEvent.keyDown(document, { key: 'ArrowUp' });
-
-    expect(scrollBy).toHaveBeenNthCalledWith(1, { top: 64, behavior: 'smooth' });
-    expect(scrollBy).toHaveBeenNthCalledWith(2, { top: -64, behavior: 'smooth' });
-  });
-
-  it('applies pre-resolved images via the images prop', async () => {
-    render(
-      <PlainHtmlPreview
-        markdown={'![a](a.jpg)'}
-        images={new Map([['a.jpg', 'data:image/png;base64,AAA']])}
-      />,
-    );
-    await waitFor(() => expect(getIframeSrcDoc()).toContain('src="data:image/png;base64,AAA"'));
-  });
-
-  it('resolves image URLs through the supplied mediaProvider', async () => {
-    const provider: MediaProvider = {
-      resolveUrl: vi.fn(async (ref: string) => `blob:resolved/${ref}`),
-      listMedia: vi.fn(async () => []),
-      addMedia: vi.fn(async () => ''),
-      removeMedia: vi.fn(async () => {}),
-      dispose: vi.fn(() => {}),
-    };
-    render(<PlainHtmlPreview markdown={'![a](cat.jpg)'} mediaProvider={provider} />);
-    await waitFor(() => {
-      expect(getIframeSrcDoc()).toContain('src="blob:resolved/cat.jpg"');
-    });
-    expect(provider.resolveUrl).toHaveBeenCalledWith('cat.jpg');
-  });
-
-  it('does not resolve external URLs through the provider', async () => {
-    const provider: MediaProvider = {
-      resolveUrl: vi.fn(async (ref: string) => `blob:should-not-fire/${ref}`),
-      listMedia: vi.fn(async () => []),
-      addMedia: vi.fn(async () => ''),
-      removeMedia: vi.fn(async () => {}),
-      dispose: vi.fn(() => {}),
-    };
-    render(
-      <PlainHtmlPreview markdown={'![ext](https://example.com/x.jpg)'} mediaProvider={provider} />,
-    );
-    await waitFor(() => {
-      expect(getIframeSrcDoc()).toContain('src="https://example.com/x.jpg"');
-    });
-    expect(provider.resolveUrl).not.toHaveBeenCalled();
-  });
-
-  it('applies the supplied theme to the iframe document', async () => {
-    const theme = resolveTheme('warm-earth');
-    render(<PlainHtmlPreview markdown={'# Hi'} theme={theme} />);
-    await waitFor(() =>
-      expect(getIframeSrcDoc()).toContain(`--plain-bg: ${theme.colors.background};`),
-    );
-    const srcdoc = getIframeSrcDoc();
-    expect(srcdoc).toContain(`--plain-primary: ${theme.colors.primary};`);
-    expect(srcdoc).toContain('--plain-body-font:');
-  });
-
-  it('loads Google Fonts for themes that reference google-hosted faces', async () => {
-    const theme = resolveTheme('documentary');
-    render(<PlainHtmlPreview markdown={'# Hi'} theme={theme} />);
-    await waitFor(() => expect(getIframeSrcDoc()).toContain('https://fonts.googleapis.com/css2?'));
-  });
-
-  it('resolves raw HTML <img> tags too (resized image case)', async () => {
-    // Resized images round-trip through the markdown source as raw
-    // HTML, which the preview must scan to keep the iframe's <img>
-    // pointing at a fetchable blob URL.
-    const provider: MediaProvider = {
-      resolveUrl: vi.fn(async (ref: string) => `blob:r/${ref}`),
-      listMedia: vi.fn(async () => []),
-      addMedia: vi.fn(async () => ''),
-      removeMedia: vi.fn(async () => {}),
-      dispose: vi.fn(() => {}),
-    };
-    render(
-      <PlainHtmlPreview
-        markdown={'<img alt="resized" src="resized.png" width="194">'}
-        mediaProvider={provider}
-      />,
-    );
-    await waitFor(() => {
-      expect(getIframeSrcDoc()).toContain('src="blob:r/resized.png"');
-    });
-  });
-});