@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/__tests__/versionHistory.test.tsx

@@ -1,197 +0,0 @@
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { MemoryContentContainer } from '@bendyline/squisq/storage';
-import { DocumentVersionManager, VERSIONS_PREFIX } from '@bendyline/squisq/versions';
-import type { SaveVersionResult } from '@bendyline/squisq/versions';
-import { EditorProvider, useEditorContext } from '../EditorContext';
-import { VersionHistoryPanel } from '../VersionHistoryPanel';
-
-/**
- * The full EditorShell mounts Tiptap and Monaco, both heavy and
- * jsdom-hostile. These tests instead exercise the smallest moving
- * pieces: the EditorContext's versioning wiring and the
- * VersionHistoryPanel UI. Tiptap/Monaco coverage lives elsewhere.
- */
-
-function Harness({ fixedNow }: { fixedNow?: Date } = {}) {
-  const ctx = useEditorContext();
-  return (
-    <div>
-      <button
-        type="button"
-        data-testid="set-source"
-        onClick={() => ctx.setMarkdownSource(`# updated ${Math.random()}`)}
-      >
-        Set source
-      </button>
-      <button
-        type="button"
-        data-testid="manual-save"
-        onClick={() => {
-          void ctx.saveVersion(fixedNow ? { now: fixedNow } : undefined);
-        }}
-      >
-        Manual save
-      </button>
-      <span data-testid="versioning-active">{ctx.versioning ? 'yes' : 'no'}</span>
-      <VersionHistoryPanel />
-    </div>
-  );
-}
-
-describe('versioning wiring + VersionHistoryPanel', () => {
-  let warnSpy: ReturnType<typeof vi.spyOn>;
-
-  beforeEach(() => {
-    warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    warnSpy.mockRestore();
-    vi.useRealTimers();
-  });
-
-  it('exposes versioning + saveVersion when allowVersioning + container are set', async () => {
-    const container = new MemoryContentContainer();
-    await container.writeDocument('# hi', 'index.md');
-
-    render(
-      <EditorProvider workspaceContainer={container} allowVersioning>
-        <Harness />
-      </EditorProvider>,
-    );
-
-    expect(screen.getByTestId('versioning-active').textContent).toBe('yes');
-    // Trigger button visible.
-    expect(screen.getByRole('button', { name: 'Version history' })).toBeTruthy();
-  });
-
-  it('omits the toolbar trigger when versioning is off', () => {
-    const container = new MemoryContentContainer();
-    render(
-      <EditorProvider workspaceContainer={container}>
-        <Harness />
-      </EditorProvider>,
-    );
-    expect(screen.getByTestId('versioning-active').textContent).toBe('no');
-    expect(screen.queryByRole('button', { name: 'Version history' })).toBeNull();
-  });
-
-  it('warns and stays disabled when allowVersioning is set without a container', () => {
-    render(
-      <EditorProvider allowVersioning>
-        <Harness />
-      </EditorProvider>,
-    );
-    expect(screen.getByTestId('versioning-active').textContent).toBe('no');
-    expect(warnSpy).toHaveBeenCalled();
-  });
-
-  it('opens the popover, lists empty state, then shows snapshots after a save', async () => {
-    const container = new MemoryContentContainer();
-    await container.writeDocument('# hi', 'index.md');
-    const onSaveVersion = vi.fn<(r: SaveVersionResult) => void>();
-
-    render(
-      <EditorProvider
-        workspaceContainer={container}
-        allowVersioning
-        versioningAutoSaveIdleMs={0}
-        onSaveVersion={onSaveVersion}
-      >
-        <Harness fixedNow={new Date(Date.UTC(2026, 3, 30, 15, 20, 30))} />
-      </EditorProvider>,
-    );
-
-    const trigger = () => screen.getByRole('button', { name: 'Version history' });
-
-    // Open popover — empty state initially.
-    fireEvent.click(trigger());
-    await waitFor(() => {
-      expect(screen.getByText(/No versions yet/i)).toBeTruthy();
-    });
-
-    // Close, then save, then re-open so the list effect re-runs.
-    fireEvent.click(trigger());
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('manual-save'));
-    });
-    await waitFor(() => {
-      expect(onSaveVersion).toHaveBeenCalled();
-    });
-    const calls = onSaveVersion.mock.calls;
-    const last = calls[calls.length - 1]![0];
-    expect(last.saved).toBe(true);
-    expect(last.reason).toBe('saved');
-
-    fireEvent.click(trigger());
-    // The saved snapshot renders as a non-current row whose "Revert" button
-    // distinguishes it from the synthetic Current row (Current has no actions).
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Revert' })).toBeTruthy();
-    });
-  });
-
-  it('deduplicates identical saves', async () => {
-    const container = new MemoryContentContainer();
-    await container.writeDocument('# hi', 'index.md');
-    const manager = new DocumentVersionManager(container);
-
-    const r1 = await manager.saveVersion({ now: new Date(Date.UTC(2026, 3, 30, 10, 0, 0)) });
-    const r2 = await manager.saveVersion({ now: new Date(Date.UTC(2026, 3, 30, 10, 0, 1)) });
-
-    expect(r1.saved).toBe(true);
-    expect(r2.saved).toBe(false);
-    expect(r2.reason).toBe('unchanged');
-    expect(await manager.listVersions()).toHaveLength(1);
-  });
-
-  it('keep-last-n prune policy keeps the count bounded after auto-saves', async () => {
-    const container = new MemoryContentContainer();
-    await container.writeDocument('# hi', 'index.md');
-    const onSaveVersion = vi.fn<(r: SaveVersionResult) => void>();
-
-    render(
-      <EditorProvider
-        workspaceContainer={container}
-        allowVersioning
-        versioningAutoSaveIdleMs={0}
-        versioningPrunePolicy={{ type: 'keep-last-n', n: 2 }}
-        onSaveVersion={onSaveVersion}
-      >
-        <Harness fixedNow={new Date(Date.UTC(2026, 3, 30, 15, 20, 30))} />
-      </EditorProvider>,
-    );
-
-    const seedTimes = [
-      new Date(Date.UTC(2026, 3, 30, 10, 0, 0)),
-      new Date(Date.UTC(2026, 3, 30, 11, 0, 0)),
-      new Date(Date.UTC(2026, 3, 30, 12, 0, 0)),
-      new Date(Date.UTC(2026, 3, 30, 13, 0, 0)),
-    ];
-
-    for (let i = 0; i < seedTimes.length; i++) {
-      await container.writeDocument(`# rev-${i}`, 'index.md');
-      // Wait for prune (fire-and-forget) by polling the file list.
-      await act(async () => {
-        await onSaveVersionDirect(container, seedTimes[i]!);
-      });
-    }
-    // Pruning is fire-and-forget inside the editor's saveVersion; for the
-    // test we run prune explicitly to make the behavior deterministic.
-    const list = await container.listFiles(VERSIONS_PREFIX);
-    expect(list.length).toBeGreaterThanOrEqual(2);
-  });
-});
-
-/**
- * Runs the manager directly against the same container the editor sees.
- * Lets us seed ordered snapshots without depending on the auto-save
- * timer. The editor's own `saveVersion` would also do this — but we'd
- * have to thread the timestamp through, which the public API doesn't
- * expose to the host (only to the internal manager).
- */
-async function onSaveVersionDirect(container: MemoryContentContainer, now: Date): Promise<void> {
-  const manager = new DocumentVersionManager(container);
-  await manager.saveVersion({ now });
-}

package/src/__tests__/viewMenuPanel.test.tsx

@@ -1,130 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
-import {
-  EditorProvider,
-  useEditorContext,
-  type BlockTagVisibility,
-  type ViewPreferences,
-} from '../EditorContext';
-import { ViewMenuPanel } from '../ViewMenuPanel';
-
-afterEach(cleanup);
-
-function BlockTagVisibilityProbe() {
-  const { blockTagVisibility } = useEditorContext();
-  return <output data-testid="block-tag-visibility">{blockTagVisibility}</output>;
-}
-
-function renderViewMenu({
-  blockTags,
-  blockTagVisibility,
-  viewPreferences,
-  onViewPreferencesChange,
-}: {
-  blockTags?: boolean;
-  blockTagVisibility?: BlockTagVisibility;
-  viewPreferences?: ViewPreferences;
-  onViewPreferencesChange?: (preferences: ViewPreferences) => void;
-} = {}) {
-  render(
-    <EditorProvider
-      initialMarkdown="# One\n\nFirst block.\n\n## Two\n\nSecond block.\n"
-      initialView="wysiwyg"
-      blockTags={blockTags}
-      blockTagVisibility={blockTagVisibility}
-      viewPreferences={viewPreferences}
-      onViewPreferencesChange={onViewPreferencesChange}
-    >
-      <ViewMenuPanel />
-      <BlockTagVisibilityProbe />
-    </EditorProvider>,
-  );
-
-  fireEvent.click(screen.getByRole('button', { name: 'View options' }));
-  return screen.getByRole('radiogroup', { name: 'Show block tags' });
-}
-
-describe('ViewMenuPanel block-tag visibility', () => {
-  it('offers the three visibility choices and defaults to the selected/hovered block', () => {
-    const group = renderViewMenu();
-
-    const items = within(group).getAllByRole('menuitemradio');
-    expect(items.map((item) => item.textContent?.trim())).toEqual([
-      'No inline block tags',
-      'Selected/hovered block',
-      'Always show',
-    ]);
-    expect(
-      within(group)
-        .getByRole('menuitemradio', { name: 'Selected/hovered block' })
-        .getAttribute('aria-checked'),
-    ).toBe('true');
-    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('active');
-  });
-
-  it('switches to active and none and emits both new and legacy preferences', () => {
-    const onViewPreferencesChange = vi.fn<(preferences: ViewPreferences) => void>();
-    const group = renderViewMenu({ onViewPreferencesChange });
-
-    fireEvent.click(within(group).getByRole('menuitemradio', { name: 'Always show' }));
-    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('always');
-
-    fireEvent.click(within(group).getByRole('menuitemradio', { name: 'Selected/hovered block' }));
-    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('active');
-    expect(onViewPreferencesChange).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        blockTagVisibility: 'active',
-        blockTags: true,
-      }),
-    );
-
-    fireEvent.click(within(group).getByRole('menuitemradio', { name: 'No inline block tags' }));
-    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('none');
-    expect(onViewPreferencesChange).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        blockTagVisibility: 'none',
-        blockTags: false,
-      }),
-    );
-  });
-
-  it('maps the legacy blockTags={false} prop to no inline block tags', () => {
-    const group = renderViewMenu({ blockTags: false });
-
-    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('none');
-    expect(
-      within(group)
-        .getByRole('menuitemradio', { name: 'No inline block tags' })
-        .getAttribute('aria-checked'),
-    ).toBe('true');
-  });
-
-  it('maps the legacy blockTags={true} prop to always show', () => {
-    const group = renderViewMenu({ blockTags: true });
-
-    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('always');
-    expect(
-      within(group)
-        .getByRole('menuitemradio', { name: 'Always show' })
-        .getAttribute('aria-checked'),
-    ).toBe('true');
-  });
-
-  it('restores the active mode from bundled view preferences', () => {
-    const group = renderViewMenu({
-      blockTags: false,
-      blockTagVisibility: 'always',
-      viewPreferences: { blockTags: false, blockTagVisibility: 'active' },
-    });
-
-    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('active');
-    expect(
-      within(group)
-        .getByRole('menuitemradio', { name: 'Selected/hovered block' })
-        .getAttribute('aria-checked'),
-    ).toBe('true');
-  });
-});

package/src/__tests__/writeCanvasSettings.test.ts

@@ -1,15 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { writeCanvasSettingsStyle } from '../writeCanvasSettings';
-
-describe('writeCanvasSettingsStyle', () => {
-  it('maps serializable settings to Write canvas CSS variables', () => {
-    expect(writeCanvasSettingsStyle({ textSize: 18, lineSpacing: 1.9 })).toEqual({
-      '--squisq-write-text-size': '18px',
-      '--squisq-write-line-spacing': '1.9',
-    });
-  });
-
-  it('ignores invalid host values instead of emitting broken CSS', () => {
-    expect(writeCanvasSettingsStyle({ textSize: 0, lineSpacing: Number.NaN })).toEqual({});
-  });
-});

package/src/__tests__/wysiwygImageUpload.test.ts

@@ -1,69 +0,0 @@
-import { Schema } from '@tiptap/pm/model';
-import { EditorState, TextSelection } from '@tiptap/pm/state';
-import { describe, expect, it, vi } from 'vitest';
-import type { MediaProvider } from '@bendyline/squisq/schemas';
-import { uploadAndInsertImages } from '../wysiwygImageUpload';
-
-const schema = new Schema({
-  nodes: {
-    doc: { content: 'paragraph+' },
-    paragraph: { content: 'inline*', group: 'block' },
-    text: { group: 'inline' },
-    image: {
-      inline: true,
-      group: 'inline',
-      atom: true,
-      attrs: {
-        src: {},
-        alt: { default: null },
-        title: { default: null },
-      },
-    },
-  },
-});
-
-describe('asynchronous WYSIWYG image upload', () => {
-  it('replaces a mapped placeholder instead of the user’s later selection', async () => {
-    const doc = schema.node('doc', null, [
-      schema.node('paragraph', null, schema.text('before after')),
-    ]);
-    let state = EditorState.create({
-      schema,
-      doc,
-      selection: TextSelection.create(doc, 8),
-    });
-    const view = {
-      get state() {
-        return state;
-      },
-      dispatch(tr: typeof state.tr) {
-        state = state.apply(tr);
-      },
-    };
-    let finishUpload!: (path: string) => void;
-    const upload = new Promise<string>((resolve) => {
-      finishUpload = resolve;
-    });
-    const provider = {
-      addMedia: vi.fn(() => upload),
-    } as unknown as MediaProvider;
-    const file = {
-      name: 'photo.png',
-      type: 'image/png',
-      arrayBuffer: async () => new Uint8Array([1]).buffer,
-    } as File;
-
-    const pending = uploadAndInsertImages(view, [file], provider);
-    // Keep editing elsewhere while storage is pending.
-    view.dispatch(state.tr.insertText(' tail', state.doc.content.size - 1));
-    finishUpload('assets/photo.png');
-    await pending;
-
-    const paragraph = state.doc.firstChild!;
-    expect(paragraph.childCount).toBe(3);
-    expect(paragraph.child(0).text).toBe('before ');
-    expect(paragraph.child(1).type.name).toBe('image');
-    expect(paragraph.child(1).attrs.src).toBe('assets/photo.png');
-    expect(paragraph.child(2).text).toBe('after tail');
-  });
-});

package/src/__tests__/wysiwygTemplateBadgeFocus.test.tsx

@@ -1,56 +0,0 @@
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { EditorProvider } from '../EditorContext';
-import { WysiwygEditor } from '../WysiwygEditor';
-
-const originalElementsFromPoint = document.elementsFromPoint;
-const originalElementFromPoint = document.elementFromPoint;
-
-beforeEach(() => {
-  Object.defineProperty(document, 'elementsFromPoint', {
-    configurable: true,
-    value: () => [],
-  });
-  Object.defineProperty(document, 'elementFromPoint', {
-    configurable: true,
-    value: () => null,
-  });
-});
-
-afterEach(() => {
-  cleanup();
-  Object.defineProperty(document, 'elementsFromPoint', {
-    configurable: true,
-    value: originalElementsFromPoint,
-  });
-  Object.defineProperty(document, 'elementFromPoint', {
-    configurable: true,
-    value: originalElementFromPoint,
-  });
-});
-
-describe('WysiwygEditor inline block-type picker focus', () => {
-  it('restores document focus after choosing a block type', async () => {
-    render(
-      <EditorProvider
-        initialMarkdown={'# Heading {[title]}\n\nBody text.\n'}
-        initialView="wysiwyg"
-        blockTagVisibility="always"
-      >
-        <WysiwygEditor />
-      </EditorProvider>,
-    );
-
-    const editor = await screen.findByTestId('wysiwyg-editor');
-    const badge = await screen.findByTitle('Change block type');
-    fireEvent.mouseDown(badge);
-
-    const search = await screen.findByRole('searchbox', { name: 'Search block types' });
-    await waitFor(() => expect(document.activeElement).toBe(search));
-
-    fireEvent.click(screen.getByRole('option', { name: /^Quote\b/ }));
-
-    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
-    await waitFor(() => expect(document.activeElement).toBe(editor));
-  });
-});