@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/__tests__/drawingShapeRoundTrip.test.ts

@@ -1,49 +0,0 @@
-/**
- * Drawing shape headings round-trip through the markdown ↔ Tiptap bridge.
- *
- * The drawing editor writes shapes as `### label {#id} {[shape …]}` child
- * headings; these tests pin the editor's serialization seam — the same
- * `data-template` / `data-template-params` / `data-block-attrs` attributes
- * the DrawingAdapter reads back — without standing up a full editor.
- */
-
-import { describe, it, expect } from 'vitest';
-import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
-
-const DRAWING = [
-  '## Org chart {[drawing]}',
-  '',
-  '### CEO {#ceo} {[rectangle x=21 y=25 width=100 height=100]}',
-  '',
-  '### reports to {[arrow from=ceo to=dev]}',
-  '',
-  '### Developer {#dev} {[rectangle x=21 y=190 width=100 height=100]}',
-].join('\n');
-
-describe('Drawing shape heading round-trip', () => {
-  it('extracts a shape annotation into the template + block-attr data attributes', () => {
-    const html = markdownToTiptap('### CEO {#ceo} {[rectangle x=21 y=25 width=100 height=100]}');
-    expect(html).toContain('data-template="rectangle"');
-    expect(html).toContain('data-template-params="x=21 y=25 width=100 height=100"');
-    expect(html).toContain('data-block-attrs="#ceo"');
-    expect(html).not.toContain('{[rectangle'); // raw annotation text stripped
-  });
-
-  it('extracts a connector annotation (from/to) into data-template-params', () => {
-    const html = markdownToTiptap('### reports to {[arrow from=ceo to=dev]}');
-    expect(html).toContain('data-template="arrow"');
-    expect(html).toContain('data-template-params="from=ceo to=dev"');
-  });
-
-  it('round-trips a full drawing (shapes + connector) losslessly and idempotently', () => {
-    const back = tiptapToMarkdown(markdownToTiptap(DRAWING));
-    expect(back).toContain('## Org chart {[drawing]}');
-    expect(back).toContain('### CEO {#ceo} {[rectangle x=21 y=25 width=100 height=100]}');
-    expect(back).toContain('### reports to {[arrow from=ceo to=dev]}');
-    expect(back).toContain('### Developer {#dev} {[rectangle x=21 y=190 width=100 height=100]}');
-    // No base64 layers blob anywhere.
-    expect(back).not.toContain('layers=');
-    // Stable: a second pass reproduces the first exactly.
-    expect(tiptapToMarkdown(markdownToTiptap(back))).toBe(back);
-  });
-});

package/src/__tests__/editorScrollHandoff.test.tsx

@@ -1,102 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { act, cleanup, render } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { EditorProvider, useEditorContext, type EditorContextValue } from '../EditorContext';
-
-let currentContext: EditorContextValue | null = null;
-let animationFrames: FrameRequestCallback[] = [];
-
-function ContextProbe() {
-  currentContext = useEditorContext();
-  return null;
-}
-
-function context(): EditorContextValue {
-  if (!currentContext) throw new Error('EditorContext has not mounted');
-  return currentContext;
-}
-
-function wysiwygEditor(
-  scrollTop: number,
-  scrollHeight: number,
-  clientHeight: number,
-): { editor: unknown; container: HTMLElement } {
-  const container = document.createElement('div');
-  container.className = 'squisq-wysiwyg-container';
-  Object.defineProperties(container, {
-    scrollTop: { value: scrollTop, writable: true },
-    scrollHeight: { value: scrollHeight },
-    clientHeight: { value: clientHeight },
-  });
-  const dom = document.createElement('div');
-  container.append(dom);
-  return { editor: { view: { dom } }, container };
-}
-
-function flushAnimationFrame(): void {
-  const callback = animationFrames.shift();
-  if (callback) act(() => callback(0));
-}
-
-beforeEach(() => {
-  currentContext = null;
-  animationFrames = [];
-  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
-    animationFrames.push(callback);
-    return animationFrames.length;
-  });
-  vi.stubGlobal('cancelAnimationFrame', vi.fn());
-});
-
-afterEach(() => {
-  cleanup();
-  vi.unstubAllGlobals();
-});
-
-describe('EditorProvider scroll handoff', () => {
-  it('restores proportional positions from Write to Source and back', () => {
-    render(
-      <EditorProvider initialMarkdown="# One\n\nBody" initialView="wysiwyg">
-        <ContextProbe />
-      </EditorProvider>,
-    );
-
-    const write = wysiwygEditor(300, 1100, 100);
-    act(() => context().setTiptapEditor(write.editor as never));
-
-    act(() => {
-      context().setActiveView('raw');
-      context().setTiptapEditor(null);
-    });
-
-    let sourceScrollTop = 1500;
-    const setSourceScrollTop = vi.fn();
-    const source = {
-      getScrollTop: () => sourceScrollTop,
-      getScrollHeight: () => 2100,
-      getLayoutInfo: () => ({ height: 100 }),
-      setScrollTop: setSourceScrollTop,
-    };
-    act(() => context().setMonacoEditor(source as never));
-    flushAnimationFrame();
-
-    // Write was 30% through its scrollable range, so Source lands at 30%.
-    expect(setSourceScrollTop).toHaveBeenCalledWith(600);
-
-    // A real Monaco instance reports the new position after setScrollTop.
-    sourceScrollTop = 1500;
-    act(() => {
-      context().setActiveView('wysiwyg');
-      context().setMonacoEditor(null);
-    });
-
-    const nextWrite = wysiwygEditor(0, 1300, 100);
-    act(() => context().setTiptapEditor(nextWrite.editor as never));
-    flushAnimationFrame();
-
-    // Source was 75% through; the newly mounted Write surface lands at 75%.
-    expect(nextWrite.container.scrollTop).toBe(900);
-  });
-});

package/src/__tests__/editorScrollSync.test.ts

@@ -1,65 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import {
-  readMonacoScrollRatio,
-  readWysiwygScrollRatio,
-  restoreMonacoScrollRatio,
-  restoreWysiwygScrollRatio,
-  scrollRatio,
-  scrollTopForRatio,
-} from '../editorScrollSync';
-
-function scrollElement(scrollTop: number, scrollHeight: number, clientHeight: number): HTMLElement {
-  const container = document.createElement('div');
-  container.className = 'squisq-wysiwyg-container';
-  Object.defineProperties(container, {
-    scrollTop: { value: scrollTop, writable: true },
-    scrollHeight: { value: scrollHeight },
-    clientHeight: { value: clientHeight },
-  });
-  return container;
-}
-
-describe('editor scroll synchronization', () => {
-  it('converts pixel offsets to a normalized position and back', () => {
-    expect(scrollRatio(450, 1000, 100)).toBe(0.5);
-    expect(scrollTopForRatio(0.5, 2100, 100)).toBe(1000);
-  });
-
-  it('clamps positions and handles documents that do not scroll', () => {
-    expect(scrollRatio(-20, 1000, 100)).toBe(0);
-    expect(scrollRatio(1200, 1000, 100)).toBe(1);
-    expect(scrollRatio(20, 100, 100)).toBe(0);
-    expect(scrollTopForRatio(Number.NaN, 1000, 100)).toBe(0);
-  });
-
-  it('reads and restores Monaco using its scrollable height', () => {
-    const setScrollTop = vi.fn();
-    const editor = {
-      getScrollTop: () => 450,
-      getScrollHeight: () => 1000,
-      getLayoutInfo: () => ({ height: 100 }),
-      setScrollTop,
-    };
-
-    expect(readMonacoScrollRatio(editor)).toBe(0.5);
-    restoreMonacoScrollRatio(editor, 0.25);
-    expect(setScrollTop).toHaveBeenCalledWith(225);
-  });
-
-  it('reads and restores the WYSIWYG scroll container', () => {
-    const container = scrollElement(300, 1100, 100);
-    const editorDom = document.createElement('div');
-    container.append(editorDom);
-    const editor = { view: { dom: editorDom } };
-
-    expect(readWysiwygScrollRatio(editor)).toBe(0.3);
-    expect(restoreWysiwygScrollRatio(editor, 0.8)).toBe(true);
-    expect(container.scrollTop).toBe(800);
-  });
-
-  it('declines WYSIWYG restoration when the editor is detached', () => {
-    const editor = { view: { dom: document.createElement('div') } };
-    expect(readWysiwygScrollRatio(editor)).toBeNull();
-    expect(restoreWysiwygScrollRatio(editor, 0.5)).toBe(false);
-  });
-});

package/src/__tests__/editorShellCodeContext.test.tsx

@@ -1,86 +0,0 @@
-/**
- * @vitest-environment jsdom
- *
- * Prop-contract test for `codeContext`: the shell threads it to the
- * CodeContextZones bridge in code mode only (mirrors the submitOnEnter
- * threading tests). Heavy surfaces are stubbed.
- */
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render } from '@testing-library/react';
-import type { CodeContext } from '../codeContext/types';
-
-const zoneOptions: CodeContext[] = [];
-
-vi.mock('../RawEditor', () => ({
-  RawEditor: () => <div data-testid="raw-editor-stub" />,
-}));
-vi.mock('../WysiwygEditor', () => ({
-  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
-}));
-vi.mock('../PreviewPanel', () => ({
-  PreviewPanel: () => <div data-testid="preview-stub" />,
-}));
-vi.mock('../codeContext/CodeContextZones', () => ({
-  CodeContextZones: ({ options }: { options: CodeContext }) => {
-    zoneOptions.push(options);
-    return <div data-testid="code-context-stub" />;
-  },
-}));
-
-import { EditorShell } from '../EditorShell';
-
-beforeEach(() => {
-  zoneOptions.length = 0;
-  if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      value: (query: string) => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(() => false),
-      }),
-    });
-  }
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    class ResizeObserverStub {
-      observe(): void {}
-      unobserve(): void {}
-      disconnect(): void {}
-    }
-    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
-      ResizeObserverStub;
-  }
-});
-
-const codeContext: CodeContext = {
-  sections: [{ id: 'foo@2', line: 2, summaryMarkdown: '**foo**', markdown: 'body' }],
-};
-
-describe('<EditorShell> codeContext prop', () => {
-  it('mounts CodeContextZones with the options in code mode', () => {
-    const { queryByTestId } = render(
-      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" codeContext={codeContext} />,
-    );
-    expect(queryByTestId('code-context-stub')).toBeTruthy();
-    expect(zoneOptions[0]).toBe(codeContext);
-  });
-
-  it('does not mount without the prop', () => {
-    const { queryByTestId } = render(
-      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" />,
-    );
-    expect(queryByTestId('code-context-stub')).toBeNull();
-  });
-
-  it('ignores codeContext in markdown mode', () => {
-    const { queryByTestId } = render(
-      <EditorShell initialMarkdown="# hi" fileName="a.md" codeContext={codeContext} />,
-    );
-    expect(queryByTestId('code-context-stub')).toBeNull();
-  });
-});