@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/timeline/TimelineEditorWidget.tsx

@@ -56,6 +56,8 @@ const clamp01 = (value: number): number => Math.max(0, Math.min(1, value));
 export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetProps) {
   const view = useTimelineData(editor, blockId);
   const [selectedEventId, setSelectedEventId] = useState<string | null>(null);
+  const [addingTrackId, setAddingTrackId] = useState<string | null>(null);
+  const [editingTrackId, setEditingTrackId] = useState<string | null>(null);
   const [hover, setHover] = useState<{ trackId: string; position: number } | null>(null);
   const [dragged, setDragged] = useState<DraggedEvent | null>(null);
   const suppressClickEventId = useRef<string | null>(null);
@@ -86,6 +88,8 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
     // editor's cursor/selection hot path.
     [sourceText, sourceTimeline],
   );
+  const editorEditable = editor.isEditable;
+  const editable = editorEditable && sourceSafe;
 
   const positioned = useMemo(() => {
     if (!view) return [];
@@ -142,25 +146,65 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
 
+  useEffect(() => {
+    if (editable) return;
+    setAddingTrackId(null);
+    setEditingTrackId(null);
+    setHover(null);
+  }, [editable]);
+
+  useEffect(() => {
+    if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
+      return;
+    }
+    setEditingTrackId(null);
+  }, [editingTrackId, view]);
+
   if (!view) return null;
 
-  const editorEditable = editor.isEditable;
-  const editable = editorEditable && sourceSafe;
   const totalEvents = positioned.length;
+  const addTrack = () => {
+    if (!editable) return;
+    const result = dispatch({ kind: 'addTrack' });
+    if (result.applied && result.eventId && result.trackId) {
+      setAddingTrackId(null);
+      setEditingTrackId(result.trackId);
+      setHover(null);
+      setSelectedEventId(result.eventId);
+      setAnnouncement('New timeline line added. Edit its name on the line.');
+    }
+  };
+
   const addEvent = (trackId: string, position: number) => {
     if (!editable) return;
     const result = dispatch({ kind: 'addEvent', trackId, position: clamp01(position) });
     if (result.applied && result.eventId) {
+      setAddingTrackId(null);
+      setEditingTrackId(null);
+      setHover(null);
       setSelectedEventId(result.eventId);
       setAnnouncement('New timeline point added. Edit its text below.');
     }
   };
 
   const selectEvent = (event: AsciiTimelineEvent, trackLabel: string) => {
+    setAddingTrackId(null);
+    setHover(null);
     setSelectedEventId(event.id);
     setAnnouncement(`${event.label || 'Timeline point'} selected on ${trackLabel}.`);
   };
 
+  const deleteTrack = (trackId: string, trackLabel: string) => {
+    const remaining = positioned.filter((point) => point.trackId !== trackId);
+    const result = dispatch({ kind: 'removeTrack', trackId });
+    if (!result.applied) return;
+    setAddingTrackId(null);
+    setEditingTrackId((current) => (current === trackId ? null : current));
+    setHover(null);
+    if (selected?.trackId === trackId) setSelectedEventId(remaining[0]?.event.id ?? null);
+    setAnnouncement(`${trackLabel} line deleted.`);
+  };
+
   const dragPosition = (event: ReactPointerEvent<HTMLButtonElement>): number | null => {
     const rail = event.currentTarget.closest<HTMLElement>('.squisq-ascii-timeline-rail');
     if (!rail) return null;
@@ -170,18 +214,36 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
   };
 
   return (
-    <section className="squisq-ascii-timeline-editor" aria-label="Timeline editor">
+    <section
+      className="squisq-ascii-timeline-editor"
+      aria-label="Timeline editor"
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || !addingTrackId) return;
+        setAddingTrackId(null);
+        setHover(null);
+        setAnnouncement('Add point cancelled.');
+      }}
+    >
       <header className="squisq-ascii-timeline-header">
         <span>
           <Icon icon="fa-solid fa-timeline" /> Timeline
         </span>
-        {editable ? (
-          <small>Click the line to add a point · Drag dots to move</small>
-        ) : editorEditable ? (
-          <small>Source repair needed</small>
-        ) : (
-          <small>Read only</small>
-        )}
+        <div className="squisq-ascii-timeline-header-actions">
+          {editable && addingTrackId ? (
+            <small>Click the line to add a point · Esc to cancel</small>
+          ) : editable ? (
+            <small>Use + to add a point · Drag dots to move</small>
+          ) : editorEditable ? (
+            <small>Source repair needed</small>
+          ) : (
+            <small>Read only</small>
+          )}
+          {editable ? (
+            <button type="button" onClick={addTrack}>
+              <Icon icon="fa-solid fa-plus" /> Add line
+            </button>
+          ) : null}
+        </div>
       </header>
 
       <div
@@ -227,29 +289,68 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
             .sort((a, b) => a.position - b.position);
           const eventPositions = events.map((entry) => entry.position);
           const gaps = insertionGaps(eventPositions);
+          const addingPoint = editable && addingTrackId === track.id;
           return (
             <div className="squisq-ascii-timeline-track" key={track.id}>
-              <div className="squisq-ascii-timeline-track-label" title={trackLabel}>
-                <span>{trackLabel}</span>
+              <div className="squisq-ascii-timeline-track-label">
+                <InlineTrackLabel
+                  trackId={track.id}
+                  label={trackLabel}
+                  editing={editable && editingTrackId === track.id}
+                  editable={editable}
+                  dispatch={dispatch}
+                  onStart={() => {
+                    setAddingTrackId(null);
+                    setHover(null);
+                    setEditingTrackId(track.id);
+                  }}
+                  onFinish={() => setEditingTrackId(null)}
+                />
                 {editable ? (
-                  <button
-                    type="button"
-                    className="squisq-ascii-timeline-track-add"
-                    aria-label={`Add point to ${trackLabel} timeline`}
-                    title="Add point in the largest available gap"
-                    onClick={() => addEvent(track.id, largestGap(eventPositions))}
-                  >
-                    +
-                  </button>
+                  <>
+                    <button
+                      type="button"
+                      className="squisq-ascii-timeline-track-delete"
+                      aria-label={`Delete line: ${trackLabel}`}
+                      disabled={view.timeline.tracks.length <= 1}
+                      title={
+                        view.timeline.tracks.length > 1
+                          ? `Delete ${trackLabel} line and all of its points`
+                          : 'A timeline needs one line'
+                      }
+                      onClick={() => deleteTrack(track.id, trackLabel)}
+                    >
+                      <Icon icon="fa-solid fa-trash" />
+                    </button>
+                    <button
+                      type="button"
+                      className="squisq-ascii-timeline-track-add"
+                      aria-label={`Add point to ${trackLabel} timeline`}
+                      aria-pressed={addingPoint}
+                      title={addingPoint ? 'Cancel adding a point' : 'Choose where to add a point'}
+                      onClick={() => {
+                        setEditingTrackId(null);
+                        setAddingTrackId((current) => (current === track.id ? null : track.id));
+                        setHover(null);
+                        setAnnouncement(
+                          addingPoint
+                            ? 'Add point cancelled.'
+                            : `Choose where to add a point on ${trackLabel}.`,
+                        );
+                      }}
+                    >
+                      +
+                    </button>
+                  </>
                 ) : null}
               </div>
               <div
-                className={`squisq-ascii-timeline-rail${editable ? '' : ' squisq-ascii-timeline-rail--readonly'}`}
+                className={`squisq-ascii-timeline-rail${addingPoint ? ' squisq-ascii-timeline-rail--adding' : ''}${editable ? '' : ' squisq-ascii-timeline-rail--readonly'}`}
                 role="group"
                 aria-label={`${trackLabel} timeline rail`}
-                title={editable ? 'Click anywhere on the line to add a point' : undefined}
+                title={addingPoint ? 'Click anywhere on the line to add a point' : undefined}
                 onPointerMove={(event) => {
-                  if (!editable || dragged) return;
+                  if (!addingPoint || dragged) return;
                   const rect = event.currentTarget.getBoundingClientRect();
                   if (rect.width <= 0) return;
                   setHover({
@@ -261,14 +362,14 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
                   setHover((current) => (current?.trackId === track.id ? null : current))
                 }
                 onClick={(event) => {
-                  if (!editable || event.target !== event.currentTarget) return;
+                  if (!addingPoint || event.target !== event.currentTarget) return;
                   const rect = event.currentTarget.getBoundingClientRect();
                   if (rect.width <= 0) return;
                   addEvent(track.id, (event.clientX - rect.left) / rect.width);
                 }}
               >
                 <span className="squisq-ascii-timeline-rail-line" aria-hidden="true" />
-                {hover?.trackId === track.id && !dragged ? (
+                {addingPoint && hover?.trackId === track.id && !dragged ? (
                   <span
                     className="squisq-ascii-timeline-add-ghost"
                     style={{ left: `${hover.position * 100}%` }}
@@ -278,7 +379,7 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
                   </span>
                 ) : null}
 
-                {editable && !dragged
+                {addingPoint && !dragged
                   ? gaps.map((position) => (
                       <button
                         type="button"
@@ -344,6 +445,7 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
                           const point = dragPosition(pointerEvent);
                           if (point === null) return;
                           pointerEvent.stopPropagation();
+                          setAddingTrackId(null);
                           setHover(null);
                           setSelectedEventId(event.id);
                           suppressClickEventId.current = null;
@@ -505,6 +607,77 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
   );
 }
 
+function InlineTrackLabel({
+  trackId,
+  label,
+  editing,
+  editable,
+  dispatch,
+  onStart,
+  onFinish,
+}: {
+  trackId: string;
+  label: string;
+  editing: boolean;
+  editable: boolean;
+  dispatch: (command: TimelineCommand) => TimelineCommandResult;
+  onStart: () => void;
+  onFinish: () => void;
+}) {
+  const [draft, setDraft] = useState(label);
+
+  useEffect(() => {
+    if (editing) setDraft(label);
+  }, [editing, label]);
+
+  const commitLabel = () => {
+    const next = draft.trim();
+    if (!next) {
+      setDraft(label);
+    } else if (next !== label) {
+      const result = dispatch({ kind: 'updateTrack', trackId, label: next });
+      if (!result.applied) setDraft(label);
+    }
+    onFinish();
+  };
+
+  if (!editable) return <span className="squisq-ascii-timeline-track-name">{label}</span>;
+
+  return editing ? (
+    <input
+      className="squisq-ascii-timeline-track-name-input"
+      aria-label={`Rename line: ${label}`}
+      value={draft}
+      autoFocus
+      onFocus={(event) => event.currentTarget.select()}
+      onChange={(event) => setDraft(event.target.value)}
+      onBlur={commitLabel}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          event.stopPropagation();
+          commitLabel();
+        } else if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          setDraft(label);
+          onFinish();
+        }
+      }}
+    />
+  ) : (
+    <button
+      type="button"
+      className="squisq-ascii-timeline-track-name"
+      aria-label={`Rename line: ${label}`}
+      title={`Rename ${label}`}
+      onClick={onStart}
+    >
+      {label}
+    </button>
+  );
+}
+
 function EventInspector({
   selected,
   editable,
@@ -664,20 +837,6 @@ function insertionGaps(positions: readonly number[]): number[] {
   return gaps;
 }
 
-function largestGap(positions: readonly number[]): number {
-  if (positions.length === 0) return 0.5;
-  const sorted = [0, ...positions.map(clamp01).sort((a, b) => a - b), 1];
-  let start = sorted[0];
-  let end = sorted[1];
-  for (let index = 1; index < sorted.length - 1; index++) {
-    if (sorted[index + 1] - sorted[index] > end - start) {
-      start = sorted[index];
-      end = sorted[index + 1];
-    }
-  }
-  return (start + end) / 2;
-}
-
 function navigateTrackPoints(event: KeyboardEvent<HTMLButtonElement>): void {
   if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
   const rail = event.currentTarget.closest('.squisq-ascii-timeline-rail');

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', () => {