@bendyline/squisq-editor-react 2.0.0 → 2.0.1

package/src/timeline/__tests__/TimelineEditorWidget.test.tsx

@@ -110,6 +110,10 @@ function eventOf(editor: Editor, id: string) {
     .find((event) => event.id === id);
 }
 
+function trackOf(editor: Editor, id: string) {
+  return timelineOf(editor).tracks.find((track) => track.id === id);
+}
+
 afterEach(() => {
   cleanup();
   for (const editor of editors) editor.destroy();
@@ -117,6 +121,40 @@ afterEach(() => {
 });
 
 describe('TimelineEditorWidget', () => {
+  it('creates, renames, selects, and deletes timeline lines', async () => {
+    const editor = renderWidget();
+    expect(screen.queryByRole('textbox', { name: 'Rename line: Kernel' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Rename line: Kernel' }));
+    expect(
+      (screen.getByRole('textbox', { name: 'Rename line: Kernel' }) as HTMLInputElement).value,
+    ).toBe('Kernel');
+    fireEvent.keyDown(screen.getByRole('textbox', { name: 'Rename line: Kernel' }), {
+      key: 'Escape',
+    });
+    expect(screen.queryByRole('textbox', { name: 'Rename line: Kernel' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: /Add line/ }));
+
+    await waitFor(() => expect(trackOf(editor, 'new-line')).toBeTruthy());
+    expect(timelineOf(editor).tracks).toHaveLength(3);
+    expect(trackOf(editor, 'new-line')?.events).toHaveLength(1);
+    expect(screen.getByRole('button', { name: /Edit New event, New line/ })).toBeTruthy();
+    const lineName = screen.getByRole('textbox', {
+      name: 'Rename line: New line',
+    }) as HTMLInputElement;
+    expect(lineName.value).toBe('New line');
+
+    fireEvent.change(lineName, { target: { value: 'Release' } });
+    fireEvent.blur(lineName);
+    await waitFor(() => expect(trackOf(editor, 'new-line')?.label).toBe('Release'));
+    expect(screen.getByRole('group', { name: 'Release timeline rail' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete line: Release' }));
+    await waitFor(() => expect(trackOf(editor, 'new-line')).toBeUndefined());
+    expect(timelineOf(editor).tracks).toHaveLength(2);
+    expect(screen.getByRole('button', { name: 'Rename line: Kernel' })).toBeTruthy();
+  });
+
   it('selects different dots, including a cadence-only dot, and exposes branches', async () => {
     const editor = makeEditor();
     const rendered = render(<TimelineEditorWidget editor={editor} blockId={blockIdOf(editor)} />);
@@ -170,7 +208,7 @@ describe('TimelineEditorWidget', () => {
     ).toBe('true');
   });
 
-  it('adds and selects a point where the empty rail is clicked', async () => {
+  it('adds one point on an armed rail, then returns to selection mode', async () => {
     const editor = renderWidget();
     const rail = screen.getByRole('group', { name: 'Kernel timeline rail' });
     rail.getBoundingClientRect = () =>
@@ -186,6 +224,12 @@ describe('TimelineEditorWidget', () => {
         toJSON: () => ({}),
       }) as DOMRect;
 
+    const addPoint = screen.getByRole('button', { name: 'Add point to Kernel timeline' });
+    expect(addPoint.getAttribute('aria-pressed')).toBe('false');
+    fireEvent.click(addPoint);
+    expect(addPoint.getAttribute('aria-pressed')).toBe('true');
+    expect(screen.getByText('Click the line to add a point · Esc to cancel')).toBeTruthy();
+
     fireEvent.click(rail, { clientX: 240 });
 
     await waitFor(() => expect(eventOf(editor, 'new-event')?.column).toBe(35));
@@ -193,6 +237,13 @@ describe('TimelineEditorWidget', () => {
     expect(marker.getAttribute('aria-pressed')).toBe('true');
     expect((screen.getByLabelText('Label') as HTMLInputElement).value).toBe('New event');
     expect(screen.getByText('New timeline point added. Edit its text below.')).toBeTruthy();
+    expect(addPoint.getAttribute('aria-pressed')).toBe('false');
+    expect(screen.getByText('Use + to add a point · Drag dots to move')).toBeTruthy();
+
+    fireEvent.click(rail, { clientX: 400 });
+    await Promise.resolve();
+    expect(timelineOf(editor).tracks[0].events).toHaveLength(3);
+    expect(eventOf(editor, 'new-event-2')).toBeUndefined();
   });
 
   it('previews a dragged dot and commits its new position only on drop', async () => {
@@ -253,10 +304,14 @@ describe('TimelineEditorWidget', () => {
 
   it('always exposes a keyboard-reachable add-point control for each track', async () => {
     const editor = renderWidget();
-    fireEvent.click(screen.getByRole('button', { name: 'Add point to Kernel timeline' }));
+    const addPoint = screen.getByRole('button', { name: 'Add point to Kernel timeline' });
+    fireEvent.click(addPoint);
+    expect(addPoint.getAttribute('aria-pressed')).toBe('true');
+    fireEvent.click(screen.getByRole('button', { name: 'Add point to Kernel at 25 percent' }));
 
     await waitFor(() => expect(eventOf(editor, 'new-event')?.column).toBe(25));
     expect(screen.getByRole('button', { name: /Edit New event, Kernel/ })).toBeTruthy();
+    expect(addPoint.getAttribute('aria-pressed')).toBe('false');
   });
 
   it('keeps dots selectable but prevents every mutation in read-only mode', async () => {
@@ -278,6 +333,9 @@ describe('TimelineEditorWidget', () => {
     expect(JSON.stringify(editor.state.doc.toJSON())).toBe(before);
     expect(screen.queryByRole('button', { name: /Add point to Kernel at/ })).toBeNull();
     expect(screen.queryByRole('button', { name: 'Add point to Kernel timeline' })).toBeNull();
+    expect(screen.queryByRole('button', { name: /Add line/ })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Rename line: Kernel' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Delete line: Kernel' })).toBeNull();
   });
 
   it('reacts when a mounted editor toggles between editable and read-only', async () => {
@@ -287,6 +345,7 @@ describe('TimelineEditorWidget', () => {
     editor.setEditable(false);
     await screen.findByText('Read only');
     expect(screen.queryByRole('button', { name: 'Add point to Kernel timeline' })).toBeNull();
+    expect(screen.queryByRole('button', { name: /Add line/ })).toBeNull();
     expect(
       (screen.getByLabelText('Label').closest('fieldset') as HTMLFieldSetElement).disabled,
     ).toBe(true);

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

@@ -78,6 +78,38 @@ function fenceOf(editor: Editor): { text: string; language: string | null } {
 }
 
 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);

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

@@ -1,10 +1,14 @@
 import { describe, expect, it } from 'vitest';
 import { parseAsciiTimeline, renderAsciiTimeline, type AsciiTimeline } from '@bendyline/squisq/doc';
 import {
+  addTimelineTrackOp,
   addTimelineEventOp,
   nextTimelineEventId,
+  nextTimelineTrackId,
+  removeTimelineTrackOp,
   removeTimelineEventOp,
   sanitizeTimelineText,
+  updateTimelineTrackOp,
   updateTimelineEventOp,
 } from '../timelineOps';
 
@@ -72,6 +76,57 @@ describe('timeline editor pure operations', () => {
     const timeline = makeTimeline();
     expect(nextTimelineEventId(timeline, 'Start')).toBe('start-2');
     expect(nextTimelineEventId(timeline, 'A new point')).toBe('a-new-point');
+    expect(nextTimelineTrackId(timeline, 'Kernel')).toBe('kernel-2');
+  });
+
+  it('adds a representable line with a starter point without mutating its input', () => {
+    const timeline = makeTimeline();
+    const before = JSON.stringify(timeline);
+    const result = addTimelineTrackOp(timeline, { label: 'Release', eventLabel: 'Ready' });
+
+    expect(JSON.stringify(timeline)).toBe(before);
+    expect(result).toMatchObject({ trackId: 'release', eventId: 'ready' });
+    expect(result.timeline.tracks[2]).toMatchObject({
+      id: 'release',
+      label: 'Release',
+      row: 3,
+      startColumn: 10,
+      endColumn: 100,
+      events: [
+        {
+          id: 'ready',
+          label: 'Ready',
+          column: 55,
+          side: 'above',
+          marker: 'filled',
+        },
+      ],
+    });
+    expectFixpoint(result.timeline);
+  });
+
+  it('renames and removes a line while preserving or pruning branches as appropriate', () => {
+    const timeline = makeTimeline();
+    const renamed = updateTimelineTrackOp(timeline, 'client', '  Browser\nwork  ');
+    expect(renamed.tracks[1]).toMatchObject({ id: 'client', label: 'Browser work' });
+    expect(renamed.tracks[1].events).toEqual(timeline.tracks[1].events);
+    expect(renamed.links).toEqual(timeline.links);
+
+    const removed = removeTimelineTrackOp(renamed, 'client');
+    expect(removed.tracks.map((track) => track.id)).toEqual(['kernel']);
+    expect(removed.links).toEqual([]);
+    expectFixpoint(renamed);
+    expectFixpoint(removed);
+  });
+
+  it('rejects invalid line edits and retains the final line', () => {
+    const timeline = makeTimeline();
+    expect(updateTimelineTrackOp(timeline, 'missing', 'Nope')).toBe(timeline);
+    expect(updateTimelineTrackOp(timeline, 'kernel', '  ')).toBe(timeline);
+    expect(removeTimelineTrackOp(timeline, 'missing')).toBe(timeline);
+
+    const oneLine = { ...timeline, tracks: [timeline.tracks[0]], links: [] };
+    expect(removeTimelineTrackOp(oneLine, 'kernel')).toBe(oneLine);
   });
 
   it('adds at the globally normalized position without mutating its input', () => {

package/src/timeline/timelineCommands.ts

@@ -19,13 +19,26 @@ import {
 import { replaceAsciiFenceText } from '../asciiDiagram/asciiDiagramCommands';
 import { findTimelineBlockPos, parseTimelineForNode } from './TimelineViewExtension';
 import {
+  addTimelineTrackOp,
   addTimelineEventOp,
+  removeTimelineTrackOp,
   removeTimelineEventOp,
+  sanitizeTimelineText,
+  updateTimelineTrackOp,
   updateTimelineEventOp,
   type TimelineEventPatch,
 } from './timelineOps';
 
 export type TimelineCommand =
+  | {
+      kind: 'addTrack';
+      id?: string;
+      label?: string;
+      eventId?: string;
+      eventLabel?: string;
+    }
+  | { kind: 'updateTrack'; trackId: string; label: string }
+  | { kind: 'removeTrack'; trackId: string }
   | {
       kind: 'addEvent';
       trackId: string;
@@ -46,6 +59,8 @@ export interface TimelineCommandResult {
   applied: boolean;
   /** Present after add so the widget can select/focus the new marker. */
   eventId?: string;
+  /** Present after adding a track. */
+  trackId?: string;
   /** Why an otherwise valid semantic edit was deliberately blocked. */
   reason?: 'read-only' | 'unsafe-source';
 }
@@ -53,6 +68,7 @@ export interface TimelineCommandResult {
 interface OpResult {
   timeline: AsciiTimeline;
   eventId?: string;
+  trackId?: string;
 }
 
 const NOT_APPLIED: TimelineCommandResult = { applied: false };
@@ -67,6 +83,10 @@ function hasEvent(timeline: AsciiTimeline, eventId: string): boolean {
   return timeline.tracks.some((track) => track.events.some((event) => event.id === eventId));
 }
 
+function hasTrack(timeline: AsciiTimeline, trackId: string): boolean {
+  return timeline.tracks.some((track) => track.id === trackId);
+}
+
 /**
  * Layout rows and source dimensions are deliberately absent: canonical
  * rendering is allowed to compact hand-authored art. Everything the editor
@@ -276,6 +296,8 @@ function verifyRenderedTimeline(next: AsciiTimeline, rendered: string): AsciiTim
   const ids = new Set(
     verification.tracks.flatMap((track) => track.events.map((event) => event.id)),
   );
+  const trackIds = new Set(verification.tracks.map((track) => track.id));
+  if (trackIds.size !== verification.tracks.length) return null;
   if (ids.size !== countEvents(verification)) return null;
   if (verification.links.some((link) => !ids.has(link.source) || !ids.has(link.target))) {
     return null;
@@ -306,6 +328,7 @@ function applyOp(
   if (
     !verification ||
     (result.eventId && !hasEvent(verification, result.eventId)) ||
+    (result.trackId && !hasTrack(verification, result.trackId)) ||
     (verifyResult && !verifyResult(verification))
   ) {
     return NOT_APPLIED;
@@ -317,6 +340,7 @@ function applyOp(
   return {
     applied: true,
     ...(result.eventId ? { eventId: result.eventId } : {}),
+    ...(result.trackId ? { trackId: result.trackId } : {}),
   };
 }
 
@@ -331,6 +355,36 @@ export function applyTimelineCommand(
   if (!editor.isEditable) return READ_ONLY;
 
   switch (command.kind) {
+    case 'addTrack':
+      return applyOp(editor, blockId, (timeline) =>
+        addTimelineTrackOp(timeline, {
+          id: command.id,
+          label: command.label,
+          eventId: command.eventId,
+          eventLabel: command.eventLabel,
+        }),
+      );
+    case 'updateTrack': {
+      const expectedLabel = sanitizeTimelineText(command.label);
+      return applyOp(
+        editor,
+        blockId,
+        (timeline) => ({
+          timeline: updateTimelineTrackOp(timeline, command.trackId, command.label),
+        }),
+        (timeline) =>
+          timeline.tracks.some(
+            (track) => track.id === command.trackId && track.label === expectedLabel,
+          ),
+      );
+    }
+    case 'removeTrack':
+      return applyOp(
+        editor,
+        blockId,
+        (timeline) => ({ timeline: removeTimelineTrackOp(timeline, command.trackId) }),
+        (timeline) => !hasTrack(timeline, command.trackId),
+      );
     case 'addEvent':
       return applyOp(editor, blockId, (timeline) => {
         const result = addTimelineEventOp(timeline, command.trackId, command.position, {

package/src/timeline/timelineOps.ts

@@ -12,6 +12,7 @@ import type {
   AsciiTimelineEvent,
   AsciiTimelineMarker,
   AsciiTimelineSide,
+  AsciiTimelineTrack,
 } from '@bendyline/squisq/doc';
 
 const STRUCTURAL_MARKERS = /[●○◉◆◇•]+/gu;
@@ -47,6 +48,19 @@ export interface AddTimelineEventResult {
   eventId: string;
 }
 
+export interface AddTimelineTrackOptions {
+  id?: string;
+  label?: string;
+  eventId?: string;
+  eventLabel?: string;
+}
+
+export interface AddTimelineTrackResult {
+  timeline: AsciiTimeline;
+  trackId: string;
+  eventId: string;
+}
+
 /**
  * Normalize editable one-line prose exactly as the canonical core renderer
  * does. This prevents the verified command path from accepting a value that
@@ -70,13 +84,103 @@ export function sanitizeTimelineText(value: string): string {
 /** Return a globally unique, renderer-safe event id. */
 export function nextTimelineEventId(timeline: AsciiTimeline, base = 'event'): string {
   const used = new Set(timeline.tracks.flatMap((track) => track.events.map((event) => event.id)));
-  const safeBase = safeId(base) || 'event';
+  const safeBase = safeId(base, 'event');
   if (!used.has(safeBase)) return safeBase;
   let suffix = 2;
   while (used.has(`${safeBase}-${suffix}`)) suffix++;
   return `${safeBase}-${suffix}`;
 }
 
+/** Return a renderer-safe id that is unique among timeline tracks. */
+export function nextTimelineTrackId(timeline: AsciiTimeline, base = 'track'): string {
+  const used = new Set(timeline.tracks.map((track) => track.id));
+  const safeBase = safeId(base, 'track');
+  if (!used.has(safeBase)) return safeBase;
+  let suffix = 2;
+  while (used.has(`${safeBase}-${suffix}`)) suffix++;
+  return `${safeBase}-${suffix}`;
+}
+
+/**
+ * Add a representable track with one starter point. Empty tracks are not part
+ * of the authored ASCII grammar, so line creation and its first point are one
+ * atomic operation/undo step.
+ */
+export function addTimelineTrackOp(
+  timeline: AsciiTimeline,
+  options: AddTimelineTrackOptions = {},
+): AddTimelineTrackResult {
+  const label = sanitizeTimelineText(options.label ?? '') || 'New line';
+  const eventLabel = sanitizeTimelineText(options.eventLabel ?? '') || 'New event';
+  const trackId = nextTimelineTrackId(timeline, options.id ?? label);
+  const eventId = nextTimelineEventId(timeline, options.eventId ?? eventLabel);
+  const { start, span } = globalBounds(timeline);
+  const column = Math.round((start + span / 2) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
+  const row = timeline.tracks.reduce((maximum, track) => Math.max(maximum, track.row), -1) + 1;
+  const track: AsciiTimelineTrack = {
+    id: trackId,
+    label,
+    row,
+    startColumn: start,
+    endColumn: start + span,
+    events: [
+      {
+        id: eventId,
+        label: eventLabel,
+        column,
+        side: 'above',
+        marker: 'filled',
+      },
+    ],
+  };
+
+  return {
+    timeline: {
+      ...timeline,
+      tracks: [...timeline.tracks, track],
+      width: Math.max(timeline.width, Math.ceil(track.endColumn) + 1),
+      height: Math.max(timeline.height, row + 1),
+    },
+    trackId,
+    eventId,
+  };
+}
+
+/** Rename a track without changing its stable id, points, or branches. */
+export function updateTimelineTrackOp(
+  timeline: AsciiTimeline,
+  trackId: string,
+  label: string,
+): AsciiTimeline {
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  const nextLabel = sanitizeTimelineText(label);
+  if (!track || !nextLabel || track.label === nextLabel) return timeline;
+  return {
+    ...timeline,
+    tracks: timeline.tracks.map((candidate) =>
+      candidate.id === trackId ? { ...candidate, label: nextLabel } : candidate,
+    ),
+  };
+}
+
+/**
+ * Remove a whole track, including branches incident to any of its points.
+ * Keep the last track so the source fence remains representable and mounted.
+ */
+export function removeTimelineTrackOp(timeline: AsciiTimeline, trackId: string): AsciiTimeline {
+  if (timeline.tracks.length <= 1) return timeline;
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  if (!track) return timeline;
+  const removedEventIds = new Set(track.events.map((event) => event.id));
+  return {
+    ...timeline,
+    tracks: timeline.tracks.filter((candidate) => candidate.id !== trackId),
+    links: timeline.links.filter(
+      (link) => !removedEventIds.has(link.source) && !removedEventIds.has(link.target),
+    ),
+  };
+}
+
 /**
  * Add a visible point to `trackId` at a normalized global rail position.
  * Returns the stable id so the canvas can select/focus the new point after
@@ -243,12 +347,12 @@ function columnAtPosition(timeline: AsciiTimeline, position: number): number {
   return Math.round((start + clamped * span) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
 }
 
-function safeId(value: string): string {
+function safeId(value: string, fallback: string): string {
   return (
     sanitizeTimelineText(value)
       .toLowerCase()
       .replace(/[^a-z0-9_.~-]+/g, '-')
-      .replace(/^-+|-+$/g, '') || 'event'
+      .replace(/^-+|-+$/g, '') || fallback
   );
 }
 

package/src/tiptapBridge.ts

@@ -282,7 +282,14 @@ export function markdownToTiptap(markdown: string): string {
     // Blockquote
     if (line.startsWith('> ')) {
       flushList();
-      pushBlock(`<blockquote><p>${inlineToHtml(line.slice(2))}</p></blockquote>`);
+      const quoteLines = [line.slice(2)];
+      while (i + 1 < lines.length && lines[i + 1].startsWith('> ')) {
+        i++;
+        quoteLines.push(lines[i].slice(2));
+      }
+      pushBlock(
+        `<blockquote>${quoteLines.map((quoteLine) => `<p>${inlineToHtml(quoteLine)}</p>`).join('')}</blockquote>`,
+      );
       continue;
     }
 
@@ -470,10 +477,21 @@ export function tiptapToMarkdown(html: string): string {
     // Blockquote
     const bqMatch = remaining.match(/^<blockquote>(.*?)<\/blockquote>/s);
     if (bqMatch) {
-      const inner = htmlToInline(bqMatch[1].replace(/<\/?p>/g, ''));
-      lines.push('> ' + inner);
-      lines.push('');
-      remaining = remaining.slice(bqMatch[0].length);
+      const paragraphs = bqMatch[1]
+        .split(/<\/p>\s*<p[^>]*>/i)
+        .map((paragraph) => paragraph.replace(/^<p[^>]*>/i, '').replace(/<\/p>\s*$/i, ''));
+      for (const paragraph of paragraphs) {
+        for (const quoteLine of htmlToInline(paragraph).split('\n')) {
+          lines.push('> ' + quoteLine);
+        }
+      }
+      const next = remaining.slice(bqMatch[0].length);
+      // Older bridge output and direct Tiptap edits can still leave adjacent
+      // blockquote nodes. Keep those nodes adjacent when serializing;
+      // inserting the normal block separator here turns one quote into two
+      // paragraphs every time the document passes through WYSIWYG mode.
+      if (!/^\s*<blockquote>/.test(next)) lines.push('');
+      remaining = next;
       continue;
     }