@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/timeline/__tests__/TimelineViewExtension.test.ts

@@ -0,0 +1,163 @@
+/**
+ * Registry and ownership behavior for TimelineViewExtension. These tests
+ * exercise the stable position registry that keeps the mounted editor alive
+ * across unrelated edits and its own canonical fence rewrites.
+ */
+
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { markdownToTiptap } from '../../tiptapBridge';
+import { HeadingWithTemplate } from '../../TemplateAnnotation';
+import {
+  TimelineViewExtension,
+  TIMELINE_VIEW_KEY,
+  findTimelineBlockPos,
+} from '../TimelineViewExtension';
+import { AsciiDiagramExtension, ASCII_DIAGRAM_KEY } from '../../asciiDiagram/AsciiDiagramExtension';
+import { replaceAsciiFenceText } from '../../asciiDiagram/asciiDiagramCommands';
+import { TreeViewExtension, TREEVIEW_KEY } from '../../treeview/TreeViewExtension';
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+  }
+});
+
+const TIMELINE = 'Milestones: ● Start {#start} ─────● Review {#review} ─────● Ship {#ship} ───►';
+const TIMELINE_B = 'Releases: ● Alpha {#alpha} ─────○ Beta {#beta} ───►';
+const ONE_POINT_TIMELINE = 'Milestones: ● Start {#start} ─────►';
+const TREE = ['src/', '├── index.ts', '└── utils/', '    └── math.ts'].join('\n');
+const DIAGRAM = [
+  '┌────────┐',
+  '│ Alpha  │',
+  '└────┬───┘',
+  '     ▼',
+  '┌────────┐',
+  '│ Beta   │',
+  '└────────┘',
+].join('\n');
+
+let editors: Editor[] = [];
+
+function makeEditor(markdown: string, options?: { enabled?: boolean }): Editor {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      AsciiDiagramExtension,
+      options ? TimelineViewExtension.configure(options) : TimelineViewExtension,
+      TreeViewExtension,
+    ],
+    content: markdownToTiptap(markdown),
+  });
+  editors.push(editor);
+  return editor;
+}
+
+afterEach(() => {
+  for (const editor of editors) editor.destroy();
+  editors = [];
+});
+
+const timelineEntries = (editor: Editor) => TIMELINE_VIEW_KEY.getState(editor.state)?.entries ?? [];
+const diagramEntries = (editor: Editor) => ASCII_DIAGRAM_KEY.getState(editor.state)?.entries ?? [];
+const treeEntries = (editor: Editor) => TREEVIEW_KEY.getState(editor.state)?.entries ?? [];
+
+function fenceOf(editor: Editor): { text: string; language: string | null } {
+  let text = '';
+  let language: string | null = null;
+  editor.state.doc.descendants((node) => {
+    if (node.type.name !== 'codeBlock' || text) return true;
+    text = node.textContent;
+    language = (node.attrs as { language?: string | null }).language ?? null;
+    return false;
+  });
+  return { text, language };
+}
+
+describe('TimelineViewExtension registry', () => {
+  it('detects untagged and explicit timeline fences with distinct block ids', () => {
+    const editor = makeEditor(
+      '```\n' + TIMELINE + '\n```\n\n```timeline\n' + TIMELINE_B + '\n```\n',
+    );
+
+    const entries = timelineEntries(editor);
+    expect(entries).toHaveLength(2);
+    expect(entries[0].id).not.toBe(entries[1].id);
+  });
+
+  it('ignores real-language and non-timeline fences', () => {
+    const editor = makeEditor(
+      '```ts\n' + TIMELINE + '\n```\n\n```\nplain code\nwithout a timeline\n```\n',
+    );
+    expect(timelineEntries(editor)).toHaveLength(0);
+  });
+
+  it('is mutually exclusive with diagram and tree fence editors', () => {
+    const editor = makeEditor(
+      '```\n' + TIMELINE + '\n```\n\n```\n' + DIAGRAM + '\n```\n\n```\n' + TREE + '\n```\n',
+    );
+
+    expect(timelineEntries(editor)).toHaveLength(1);
+    expect(diagramEntries(editor)).toHaveLength(1);
+    expect(treeEntries(editor)).toHaveLength(1);
+  });
+
+  it('keeps a block id stable when content above shifts its position', () => {
+    const editor = makeEditor('Before.\n\n```\n' + TIMELINE + '\n```\n');
+    const [before] = timelineEntries(editor);
+
+    editor.commands.insertContentAt(0, '<p>Inserted above</p>');
+
+    const [after] = timelineEntries(editor);
+    expect(after.id).toBe(before.id);
+    expect(after.pos).toBeGreaterThan(before.pos);
+    expect(findTimelineBlockPos(editor, before.id)).toBe(after.pos);
+  });
+
+  it('survives a self-rewrite that promotes the fence language', () => {
+    const editor = makeEditor('```text\n' + TIMELINE + '\n```\n');
+    const [before] = timelineEntries(editor);
+    const rewritten = TIMELINE.replace('Review', 'Verify');
+
+    expect(replaceAsciiFenceText(editor, before.pos, rewritten, 'timeline')).toBe(true);
+
+    const [after] = timelineEntries(editor);
+    expect(after.id).toBe(before.id);
+    expect(findTimelineBlockPos(editor, before.id)).toBe(after.pos);
+    expect(fenceOf(editor)).toEqual({ text: rewritten, language: 'timeline' });
+  });
+
+  it('keeps an already registered fence interactive after it degrades to one point', () => {
+    const editor = makeEditor('```\n' + TIMELINE + '\n```\n');
+    const [before] = timelineEntries(editor);
+
+    expect(replaceAsciiFenceText(editor, before.pos, ONE_POINT_TIMELINE)).toBe(true);
+
+    const entries = timelineEntries(editor);
+    expect(entries).toHaveLength(1);
+    expect(entries[0].id).toBe(before.id);
+  });
+
+  it('drops a registered fence after an invalid rewrite', () => {
+    const editor = makeEditor('```\n' + TIMELINE + '\n```\n');
+    const [entry] = timelineEntries(editor);
+
+    expect(replaceAsciiFenceText(editor, entry.pos, 'plain text\nno points or rail')).toBe(true);
+    expect(timelineEntries(editor)).toHaveLength(0);
+  });
+
+  it('enabled: false leaves the extension inert', () => {
+    const editor = makeEditor('```timeline\n' + TIMELINE + '\n```\n', { enabled: false });
+    expect(TIMELINE_VIEW_KEY.getState(editor.state)).toBeUndefined();
+  });
+});

package/src/timeline/__tests__/timelineCommands.test.ts

@@ -0,0 +1,359 @@
+/** Real Tiptap coverage for parse -> op -> render -> verified fence rewrite. */
+
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { parseAsciiTimeline } from '@bendyline/squisq/doc';
+import { markdownToTiptap } from '../../tiptapBridge';
+import { HeadingWithTemplate } from '../../TemplateAnnotation';
+import { TIMELINE_VIEW_KEY, TimelineViewExtension } from '../TimelineViewExtension';
+import { applyTimelineCommand, isTimelineSourceSafeForSemanticEdit } from '../timelineCommands';
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+  }
+});
+
+const ART = [
+  'Milestones: ● Start {#start} ─────● Review {#review} ─────►',
+  '',
+  'branch: start -> review : flow',
+].join('\n');
+
+const WRAPPED_FLOW = [
+  'CLIENT                    KERNEL',
+  '──────                    ──────',
+  'input ──► command ───────► validate',
+  '                           ├─ invalid → rejected ─┐',
+  '                           └─ valid → queue      │',
+  'buffer ◄── delta ◄──────── output                │',
+  'error ◄──────────────────────────────────────────┘',
+].join('\n');
+
+let editors: Editor[] = [];
+
+function makeEditor(markdown: string): Editor {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      TimelineViewExtension,
+    ],
+    content: markdownToTiptap(markdown),
+  });
+  editors.push(editor);
+  return editor;
+}
+
+afterEach(() => {
+  for (const editor of editors) editor.destroy();
+  editors = [];
+});
+
+function firstBlockId(editor: Editor): string {
+  const state = TIMELINE_VIEW_KEY.getState(editor.state);
+  expect(state?.entries).toHaveLength(1);
+  return state!.entries[0].id;
+}
+
+function fenceOf(editor: Editor): { text: string; language: string | null } {
+  let text = '';
+  let language: string | null = null;
+  editor.state.doc.descendants((node) => {
+    if (node.type.name !== 'codeBlock' || text) return true;
+    text = node.textContent;
+    language = (node.attrs as { language?: string | null }).language ?? null;
+    return false;
+  });
+  return { text, language };
+}
+
+describe('applyTimelineCommand', () => {
+  it('creates, renames, and deletes a line through verified fence rewrites', () => {
+    const editor = makeEditor('```timeline\n' + ART + '\n```\n');
+    const blockId = firstBlockId(editor);
+
+    expect(
+      applyTimelineCommand(editor, blockId, {
+        kind: 'addTrack',
+        label: 'Release',
+        eventLabel: 'Ready',
+      }),
+    ).toEqual({ applied: true, eventId: 'ready', trackId: 'release' });
+    let timeline = parseAsciiTimeline(fenceOf(editor).text);
+    expect(timeline.tracks.map((track) => track.label)).toEqual(['Milestones', 'Release']);
+    expect(timeline.tracks[1].events[0]).toMatchObject({ id: 'ready', label: 'Ready' });
+
+    expect(
+      applyTimelineCommand(editor, blockId, {
+        kind: 'updateTrack',
+        trackId: 'release',
+        label: 'Shipping',
+      }),
+    ).toEqual({ applied: true });
+    timeline = parseAsciiTimeline(fenceOf(editor).text);
+    expect(timeline.tracks[1]).toMatchObject({ id: 'release', label: 'Shipping' });
+
+    expect(
+      applyTimelineCommand(editor, blockId, { kind: 'removeTrack', trackId: 'release' }),
+    ).toEqual({ applied: true });
+    timeline = parseAsciiTimeline(fenceOf(editor).text);
+    expect(timeline.tracks.map((track) => track.id)).toEqual(['milestones']);
+  });
+
+  it('adds a point, returns its id, and promotes the language in one rewrite', () => {
+    const editor = makeEditor('```text\n' + ART + '\n```\n');
+    const blockId = firstBlockId(editor);
+    expect(fenceOf(editor).language).toBe('text');
+
+    const result = applyTimelineCommand(editor, blockId, {
+      kind: 'addEvent',
+      trackId: 'milestones',
+      position: 0.5,
+      label: 'Build',
+    });
+
+    expect(result).toEqual({ applied: true, eventId: 'build' });
+    expect(fenceOf(editor).language).toBe('timeline');
+    const parsed = parseAsciiTimeline(fenceOf(editor).text);
+    expect(parsed.tracks[0].events.map((event) => event.id)).toContain('build');
+  });
+
+  it('updates text and keeps the selected id and branch endpoint stable', () => {
+    const editor = makeEditor('```timeline\n' + ART + '\n```\n');
+    const result = applyTimelineCommand(editor, firstBlockId(editor), {
+      kind: 'updateEvent',
+      eventId: 'start',
+      patch: { label: 'Boot', description: 'Initialize the world', marker: 'diamond' },
+    });
+
+    expect(result).toEqual({ applied: true });
+    const timeline = parseAsciiTimeline(fenceOf(editor).text);
+    expect(timeline.tracks[0].events[0]).toMatchObject({
+      id: 'start',
+      label: 'Boot',
+      description: 'Initialize the world',
+      marker: 'diamond',
+    });
+    expect(timeline.links[0]).toMatchObject({ source: 'start', target: 'review' });
+  });
+
+  it('allows a first visual edit to canonicalize a wrapped flow', () => {
+    const parsed = parseAsciiTimeline(WRAPPED_FLOW);
+    expect(isTimelineSourceSafeForSemanticEdit(WRAPPED_FLOW, parsed)).toBe(true);
+
+    const editor = makeEditor('```text\n' + WRAPPED_FLOW + '\n```\n');
+    const result = applyTimelineCommand(editor, firstBlockId(editor), {
+      kind: 'updateEvent',
+      eventId: 'input',
+      patch: { label: 'Input received' },
+    });
+
+    expect(result).toEqual({ applied: true });
+    expect(fenceOf(editor).language).toBe('timeline');
+    expect(fenceOf(editor).text).toContain('{#client start=');
+    expect(parseAsciiTimeline(fenceOf(editor).text).tracks[0].events[0]).toMatchObject({
+      id: 'input',
+      label: 'Input received',
+    });
+  });
+
+  it('removes a point and its incident branch', () => {
+    const editor = makeEditor('```timeline\n' + ART + '\n```\n');
+    const result = applyTimelineCommand(editor, firstBlockId(editor), {
+      kind: 'removeEvent',
+      eventId: 'review',
+    });
+
+    expect(result).toEqual({ applied: true });
+    const timeline = parseAsciiTimeline(fenceOf(editor).text);
+    expect(timeline.tracks[0].events.map((event) => event.id)).toEqual(['start']);
+    expect(timeline.links).toEqual([]);
+  });
+
+  it('keeps the block id stable over language promotion', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const before = firstBlockId(editor);
+    const result = applyTimelineCommand(editor, before, {
+      kind: 'updateEvent',
+      eventId: 'start',
+      patch: { label: 'Boot' },
+    });
+    expect(result.applied).toBe(true);
+    expect(firstBlockId(editor)).toBe(before);
+    expect(fenceOf(editor).language).toBe('timeline');
+  });
+
+  it('one undo restores the exact original fence bytes', () => {
+    const editor = makeEditor('```text\n' + ART + '\n```\n');
+    const blockId = firstBlockId(editor);
+    const before = fenceOf(editor);
+    expect(
+      applyTimelineCommand(editor, blockId, {
+        kind: 'updateEvent',
+        eventId: 'start',
+        patch: { label: 'Boot' },
+      }).applied,
+    ).toBe(true);
+    expect(fenceOf(editor)).not.toEqual(before);
+
+    editor.commands.undo();
+    expect(fenceOf(editor)).toEqual(before);
+  });
+
+  it('leaves the document untouched for invalid/no-op commands', () => {
+    const editor = makeEditor('```timeline\n' + ART + '\n```\n');
+    const blockId = firstBlockId(editor);
+    const before = JSON.stringify(editor.state.doc.toJSON());
+
+    expect(
+      applyTimelineCommand(editor, blockId, {
+        kind: 'addEvent',
+        trackId: 'milestones',
+        position: 0,
+      }),
+    ).toEqual({ applied: false });
+    expect(
+      applyTimelineCommand(editor, blockId, {
+        kind: 'updateEvent',
+        eventId: 'missing',
+        patch: { label: 'Nope' },
+      }),
+    ).toEqual({ applied: false });
+    expect(
+      applyTimelineCommand(editor, 'timeline-999', {
+        kind: 'removeEvent',
+        eventId: 'start',
+      }),
+    ).toEqual({ applied: false });
+    expect(JSON.stringify(editor.state.doc.toJSON())).toBe(before);
+  });
+
+  it('blocks edits when parse warnings represent unresolved source', () => {
+    const unresolved = ART + '\nbranch: review -> missing : preserve this declaration';
+    const editor = makeEditor('```timeline\n' + unresolved + '\n```\n');
+    const before = fenceOf(editor);
+
+    expect(
+      applyTimelineCommand(editor, firstBlockId(editor), {
+        kind: 'updateEvent',
+        eventId: 'start',
+        patch: { label: 'Boot' },
+      }),
+    ).toEqual({ applied: false, reason: 'unsafe-source' });
+    expect(fenceOf(editor)).toEqual(before);
+  });
+
+  it.each([
+    {
+      name: 'an ignored prose line',
+      art: ART + '\nauthor-note: preserve this raw line',
+    },
+    {
+      name: 'an unrecognized inline attribute',
+      art: ART.replace('{#start}', '{#start mood=urgent}'),
+    },
+  ])('blocks edits that would drop $name', ({ art }) => {
+    const editor = makeEditor('```timeline\n' + art + '\n```\n');
+    const before = fenceOf(editor);
+
+    expect(
+      applyTimelineCommand(editor, firstBlockId(editor), {
+        kind: 'updateEvent',
+        eventId: 'start',
+        patch: { label: 'Boot' },
+      }),
+    ).toEqual({ applied: false, reason: 'unsafe-source' });
+    expect(fenceOf(editor)).toEqual(before);
+  });
+
+  it.each([
+    {
+      name: 'punctuation after an otherwise valid id',
+      art: ART.replace('{#start}', '{#start !!!}'),
+    },
+    {
+      name: 'an invalid known attribute value made only from represented tokens',
+      art: ART.replace('{#start}', '{#start side=Start}'),
+    },
+    {
+      name: 'duplicate attributes',
+      art: ART.replace('{#start}', '{#start side=above side=below}'),
+    },
+    {
+      name: 'a malformed metadata block',
+      art: ART.replace('{#start}', '{#start side=above'),
+    },
+  ])('fails closed for $name', ({ art }) => {
+    const editor = makeEditor('```timeline\n' + art + '\n```\n');
+    const before = fenceOf(editor);
+
+    expect(
+      applyTimelineCommand(editor, firstBlockId(editor), {
+        kind: 'updateEvent',
+        eventId: 'start',
+        patch: { label: 'Boot' },
+      }),
+    ).toEqual({ applied: false, reason: 'unsafe-source' });
+    expect(fenceOf(editor)).toEqual(before);
+  });
+
+  it.each([
+    { name: 'a punctuation-only row', suffix: '!!!' },
+    { name: 'ignored prose whose token already exists', suffix: 'Start' },
+  ])('fails closed for $name', ({ suffix }) => {
+    const art = `${ART}\n${suffix}`;
+    const editor = makeEditor('```timeline\n' + art + '\n```\n');
+    const before = fenceOf(editor);
+
+    expect(
+      applyTimelineCommand(editor, firstBlockId(editor), {
+        kind: 'updateEvent',
+        eventId: 'review',
+        patch: { label: 'Gate' },
+      }),
+    ).toEqual({ applied: false, reason: 'unsafe-source' });
+    expect(fenceOf(editor)).toEqual(before);
+  });
+
+  it('audits the supported 400-line maximum without quadratic reparsing', () => {
+    const art = Array.from(
+      { length: 400 },
+      (_, index) =>
+        `Track ${index}: ● A${index} {#a${index}} ─────────● B${index} {#b${index}} ─────►`,
+    ).join('\n');
+    const timeline = parseAsciiTimeline(art);
+    const started = performance.now();
+
+    expect(isTimelineSourceSafeForSemanticEdit(art, timeline)).toBe(true);
+    // The former line-deletion probe took >1 s locally at this size. Leave a
+    // generous CI margin while still guarding against reintroducing O(n²)
+    // whole-document parsing into the synchronous editor path.
+    expect(performance.now() - started).toBeLessThan(1_000);
+  });
+
+  it('rejects stale commands after the editor becomes read-only', () => {
+    const editor = makeEditor('```timeline\n' + ART + '\n```\n');
+    const blockId = firstBlockId(editor);
+    editor.setEditable(false);
+    const before = fenceOf(editor);
+
+    expect(
+      applyTimelineCommand(editor, blockId, {
+        kind: 'updateEvent',
+        eventId: 'start',
+        patch: { label: 'Boot' },
+      }),
+    ).toEqual({ applied: false, reason: 'read-only' });
+    expect(fenceOf(editor)).toEqual(before);
+  });
+});