@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/timeline/timelineOps.ts

@@ -0,0 +1,381 @@
+/**
+ * Pure edits over the authored ASCII timeline model.
+ *
+ * The code fence remains the source of truth. Canvas coordinates are
+ * normalized to the same global, shared scale used by
+ * `asciiTimelineToTemplateData`; commands render the edited model back into
+ * canonical fence text after applying one of these operations.
+ */
+
+import type {
+  AsciiTimeline,
+  AsciiTimelineEvent,
+  AsciiTimelineMarker,
+  AsciiTimelineSide,
+  AsciiTimelineTrack,
+} from '@bendyline/squisq/doc';
+
+const STRUCTURAL_MARKERS = /[●○◉◆◇•]+/gu;
+const LEADING_RAILS = /^[─━═╌╍┄┅┈┉-]+/u;
+const COORDINATE_PRECISION = 1_000;
+const COLUMN_EPSILON = 1 / COORDINATE_PRECISION / 2;
+
+export interface TimelineEventPatch {
+  label?: string;
+  /** `null` clears the optional description. */
+  description?: string | null;
+  side?: AsciiTimelineSide;
+  /** `null` restores the label side/default placement. */
+  descriptionSide?: AsciiTimelineSide | null;
+  callout?: boolean;
+  marker?: AsciiTimelineMarker;
+  /** Normalized position on the global timeline scale. */
+  position?: number;
+}
+
+export interface AddTimelineEventOptions {
+  id?: string;
+  label?: string;
+  description?: string;
+  side?: AsciiTimelineSide;
+  descriptionSide?: AsciiTimelineSide;
+  callout?: boolean;
+  marker?: AsciiTimelineMarker;
+}
+
+export interface AddTimelineEventResult {
+  timeline: AsciiTimeline;
+  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
+ * is silently reinterpreted as timeline syntax on its first render.
+ */
+export function sanitizeTimelineText(value: string): string {
+  const normalized = value
+    .normalize('NFC')
+    .replace(/[\r\n\t]+/g, ' ')
+    .replace(STRUCTURAL_MARKERS, '·')
+    .replace(/\*/g, '∗')
+    .replace(/::/g, '∶')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return normalized.replace(LEADING_RAILS, (run) =>
+    Array.from(run, (character) => (character === '-' ? '−' : '–')).join(''),
+  );
+}
+
+/** 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');
+  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
+ * the fence rewrite.
+ */
+export function addTimelineEventOp(
+  timeline: AsciiTimeline,
+  trackId: string,
+  position: number,
+  options: AddTimelineEventOptions = {},
+): AddTimelineEventResult | null {
+  if (!Number.isFinite(position)) return null;
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  if (!track) return null;
+
+  const column = columnAtPosition(timeline, position);
+  // Two coincident markers cannot be independently hit on the canvas. A
+  // marker click should select the existing point rather than adding atop it.
+  if (track.events.some((event) => Math.abs(event.column - column) <= COLUMN_EPSILON)) return null;
+
+  const label = sanitizeTimelineText(options.label ?? '') || 'New event';
+  const description = sanitizeTimelineText(options.description ?? '');
+  const eventId = nextTimelineEventId(timeline, options.id ?? label);
+  const insertionIndex = track.events.filter((event) => event.column < column).length;
+  const side = options.side ?? (insertionIndex % 2 === 0 ? 'above' : 'below');
+  const event: AsciiTimelineEvent = {
+    id: eventId,
+    label,
+    ...(description ? { description } : {}),
+    column,
+    side,
+    ...(description && options.descriptionSide ? { descriptionSide: options.descriptionSide } : {}),
+    ...(options.callout === false ? { callout: false } : {}),
+    marker: options.marker ?? 'filled',
+  };
+
+  const events = [...track.events, event].sort(
+    (left, right) => left.column - right.column || left.id.localeCompare(right.id),
+  );
+  const tracks = timeline.tracks.map((candidate) =>
+    candidate.id === trackId ? { ...candidate, events } : candidate,
+  );
+  // ASCII art has no distinct diamond glyph. Promote the authored vocabulary
+  // when the inspector explicitly requests one rather than silently folding
+  // the user's choice back to a filled point in the renderer.
+  const style = options.marker === 'diamond' ? 'unicode' : timeline.style;
+  return { timeline: { ...timeline, tracks, style }, eventId };
+}
+
+/** Update one point without changing its stable id or branch endpoints. */
+export function updateTimelineEventOp(
+  timeline: AsciiTimeline,
+  eventId: string,
+  patch: TimelineEventPatch,
+): AsciiTimeline {
+  const location = findEvent(timeline, eventId);
+  if (!location || Object.keys(patch).length === 0) return timeline;
+
+  const hasLabel = Object.prototype.hasOwnProperty.call(patch, 'label');
+  const hasDescription = Object.prototype.hasOwnProperty.call(patch, 'description');
+  const hasDescriptionSide = Object.prototype.hasOwnProperty.call(patch, 'descriptionSide');
+  const hasPosition = Object.prototype.hasOwnProperty.call(patch, 'position');
+  const label = hasLabel ? sanitizeTimelineText(patch.label ?? '') : location.event.label;
+  if (!label) return timeline;
+
+  let description = hasDescription
+    ? sanitizeTimelineText(patch.description ?? '')
+    : location.event.description;
+  if (!description) description = undefined;
+
+  let column = location.event.column;
+  if (hasPosition) {
+    if (!Number.isFinite(patch.position)) return timeline;
+    column = columnAtPosition(timeline, patch.position as number);
+    const collision = location.track.events.some(
+      (event) => event.id !== eventId && Math.abs(event.column - column) <= COLUMN_EPSILON,
+    );
+    if (collision) return timeline;
+  }
+
+  const editedText = hasLabel || hasDescription;
+  const callout =
+    patch.callout !== undefined
+      ? patch.callout
+      : editedText && location.event.callout === false
+        ? true
+        : location.event.callout;
+  const descriptionSide = !description
+    ? undefined
+    : hasDescriptionSide
+      ? (patch.descriptionSide ?? undefined)
+      : location.event.descriptionSide;
+
+  const nextEvent: AsciiTimelineEvent = {
+    ...location.event,
+    label,
+    column,
+    ...(description ? { description } : {}),
+    ...(patch.side ? { side: patch.side } : {}),
+    ...(descriptionSide ? { descriptionSide } : {}),
+    ...(callout !== undefined ? { callout } : {}),
+    ...(patch.marker ? { marker: patch.marker } : {}),
+  };
+  if (!description) delete nextEvent.description;
+  if (!descriptionSide) delete nextEvent.descriptionSide;
+
+  if (eventsEqual(location.event, nextEvent)) return timeline;
+  const events = location.track.events
+    .map((event) => (event.id === eventId ? nextEvent : event))
+    .sort((left, right) => left.column - right.column || left.id.localeCompare(right.id));
+  // A point authored exactly on a track boundary anchors that edge. Let the
+  // old scale remain stable throughout a drag preview, then move/reassign the
+  // boundary in the single drop transaction. Crossing the next point hands
+  // the edge to that point; moving any point outside a shorter track expands
+  // the track so every marker remains inside its authored bounds.
+  const movedPosition = hasPosition && nextEvent.column !== location.event.column;
+  const anchoredStart =
+    movedPosition && Math.abs(location.event.column - location.track.startColumn) <= COLUMN_EPSILON;
+  const anchoredEnd =
+    movedPosition && Math.abs(location.event.column - location.track.endColumn) <= COLUMN_EPSILON;
+  const eventStart = Math.min(...events.map((event) => event.column));
+  const eventEnd = Math.max(...events.map((event) => event.column));
+  const startColumn = anchoredStart ? eventStart : Math.min(location.track.startColumn, eventStart);
+  const endColumn = anchoredEnd ? eventEnd : Math.max(location.track.endColumn, eventEnd);
+  const tracks = timeline.tracks.map((track) =>
+    track.id === location.track.id ? { ...track, startColumn, endColumn, events } : track,
+  );
+  const style = patch.marker === 'diamond' ? 'unicode' : timeline.style;
+  return { ...timeline, tracks, style };
+}
+
+/**
+ * Remove a point and every incident branch. Empty tracks are removed because
+ * the canonical renderer cannot represent them. The last point in the whole
+ * timeline is retained so an edit cannot erase its own source fence/widget.
+ */
+export function removeTimelineEventOp(timeline: AsciiTimeline, eventId: string): AsciiTimeline {
+  const location = findEvent(timeline, eventId);
+  if (!location) return timeline;
+  const eventCount = timeline.tracks.reduce((sum, track) => sum + track.events.length, 0);
+  if (eventCount <= 1) return timeline;
+
+  const tracks = timeline.tracks
+    .map((track) =>
+      track.id === location.track.id
+        ? { ...track, events: track.events.filter((event) => event.id !== eventId) }
+        : track,
+    )
+    .filter((track) => track.events.length > 0);
+  const links = timeline.links.filter((link) => link.source !== eventId && link.target !== eventId);
+  return { ...timeline, tracks, links };
+}
+
+function globalBounds(timeline: AsciiTimeline): { start: number; span: number } {
+  if (timeline.tracks.length === 0) return { start: 0, span: 1 };
+  const start = Math.min(...timeline.tracks.map((track) => track.startColumn));
+  const end = Math.max(...timeline.tracks.map((track) => track.endColumn));
+  return { start, span: Math.max(1, end - start) };
+}
+
+function columnAtPosition(timeline: AsciiTimeline, position: number): number {
+  const { start, span } = globalBounds(timeline);
+  const clamped = Math.max(0, Math.min(1, position));
+  return Math.round((start + clamped * span) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
+}
+
+function safeId(value: string, fallback: string): string {
+  return (
+    sanitizeTimelineText(value)
+      .toLowerCase()
+      .replace(/[^a-z0-9_.~-]+/g, '-')
+      .replace(/^-+|-+$/g, '') || fallback
+  );
+}
+
+function findEvent(
+  timeline: AsciiTimeline,
+  eventId: string,
+): { track: AsciiTimeline['tracks'][number]; event: AsciiTimelineEvent } | null {
+  for (const track of timeline.tracks) {
+    const event = track.events.find((candidate) => candidate.id === eventId);
+    if (event) return { track, event };
+  }
+  return null;
+}
+
+function eventsEqual(left: AsciiTimelineEvent, right: AsciiTimelineEvent): boolean {
+  return (
+    left.id === right.id &&
+    left.label === right.label &&
+    left.description === right.description &&
+    left.column === right.column &&
+    left.side === right.side &&
+    left.descriptionSide === right.descriptionSide &&
+    left.callout === right.callout &&
+    left.marker === right.marker
+  );
+}

package/src/timeline/timelinePaste.ts

@@ -0,0 +1,8 @@
+/** Paste gate for bare, high-confidence Unicode timeline art. */
+
+import { detectAsciiTimeline } from '@bendyline/squisq/doc';
+
+export function shouldPasteAsTimelineFence(text: string): boolean {
+  if (!text.trim() || /^\s*```/m.test(text)) return false;
+  return detectAsciiTimeline(text).isTimeline;
+}

package/src/tiptapBridge.ts

@@ -11,7 +11,6 @@
  * using squisq's own parser.
  */
 
-import { templateLabel } from './TemplatePicker';
 import { resolveIcon } from '@bendyline/squisq/icons';
 import {
   matchTrailingTemplateAnnotation,
@@ -251,6 +250,11 @@ export function markdownToTiptap(markdown: string): string {
         // tokens are stored raw — quotes included — so tiptapToMarkdown
         // can re-join them into the annotation verbatim.
         const tokens = tokenizeAttrTokens(templateInner);
+        if (tokens.length === 0) {
+          // Preserve an authored `{[]}` through the editable Tiptap document
+          // while keeping the raw marker out of the visible heading text.
+          attrs += ' data-template-empty="true"';
+        }
         const firstIsParam = tokens.length > 0 && tokens[0].indexOf('=') > 0;
         if (!firstIsParam && tokens[0]) {
           attrs += ` data-template="${escapeHtml(tokens[0])}"`;
@@ -278,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;
     }
 
@@ -409,7 +420,16 @@ export function tiptapToMarkdown(html: string): string {
     if (headingMatch) {
       const level = parseInt(headingMatch[1], 10);
       const attrs = headingMatch[2];
-      let text = htmlToInline(headingMatch[3]);
+      const headingHtml = headingMatch[3];
+      // Template/property badges are editor chrome, not heading content. Strip
+      // them structurally before converting the inline HTML. Older builds
+      // briefly rendered the template label as real badge text; using the
+      // markup boundary preserves that cleanup without mistaking a legitimate
+      // heading suffix (for example "A Famous Quote") for the badge label.
+      const chromeStart = headingHtml.search(
+        /<span\b[^>]*\bclass="[^"]*\bsquisq-(?:template|props)-badge\b[^"]*"[^>]*>/i,
+      );
+      let text = htmlToInline(chromeStart >= 0 ? headingHtml.slice(0, chromeStart) : headingHtml);
 
       // Re-inject heading annotations from data attributes. Canonical
       // emit order: Pandoc `{#…}` first, then squisq `{[…]}` annotation
@@ -417,15 +437,7 @@ export function tiptapToMarkdown(html: string): string {
       const blockAttrsMatch = attrs.match(/data-block-attrs="([^"]*)"/);
       const tmplMatch = attrs.match(/data-template="([^"]+)"/);
       const paramsMatch = attrs.match(/data-template-params="([^"]+)"/);
-      if (tmplMatch) {
-        // Strip an accidental trailing copy of the template label that an
-        // earlier broken build briefly rendered as real text inside the
-        // badge. Existing documents self-heal on save.
-        const label = templateLabel(tmplMatch[1]);
-        if (label && text.endsWith(label)) {
-          text = text.slice(0, -label.length).trimEnd();
-        }
-      }
+      const hasEmptyTemplateAnnotation = /\sdata-template-empty(?:="[^"]*")?/.test(attrs);
       if (blockAttrsMatch) {
         const inner = unescapeHtml(blockAttrsMatch[1]);
         text += ` {${inner}}`;
@@ -436,6 +448,8 @@ export function tiptapToMarkdown(html: string): string {
           annotation += (annotation ? ' ' : '') + unescapeHtml(paramsMatch[1]);
         }
         text += ` {[${annotation}]}`;
+      } else if (hasEmptyTemplateAnnotation) {
+        text += ' {[]}';
       }
 
       lines.push('#'.repeat(level) + ' ' + text);
@@ -444,12 +458,13 @@ export function tiptapToMarkdown(html: string): string {
       continue;
     }
 
-    // Code blocks
-    const codeMatch = remaining.match(
-      /^<pre><code(?:\s+class="language-([^"]*)")?>(.*?)<\/code><\/pre>/s,
-    );
+    // Code blocks — tolerate attributes on <pre> and <code>: real
+    // editor.getHTML() output carries class="squisq-code-block" on the
+    // <pre> (StarterKit codeBlock HTMLAttributes), which a bare
+    // `<pre><code` anchor never matches, silently dropping the fence.
+    const codeMatch = remaining.match(/^<pre\b[^>]*><code\b([^>]*)>(.*?)<\/code><\/pre>/s);
     if (codeMatch) {
-      const lang = codeMatch[1] || '';
+      const lang = /\bclass="language-([^"]*)"/.exec(codeMatch[1] ?? '')?.[1] ?? '';
       const code = unescapeHtml(codeMatch[2]);
       lines.push('```' + lang);
       lines.push(code);
@@ -462,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;
     }
 

package/src/transformStyleId.ts

@@ -0,0 +1,17 @@
+import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
+
+const VALID_TRANSFORM_IDS = new Set(getTransformStyleSummaries().map((summary) => summary.id));
+
+/**
+ * Normalize a transform id read from document frontmatter.
+ *
+ * `dataDriven` was written by older Squisq versions. It remains accepted as a
+ * wire-format compatibility value, but every editor surface exposes and writes
+ * only the canonical `data-driven` id.
+ */
+export function resolvePersistedTransformStyleId(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const normalized = value.trim().toLowerCase().replace(/\s+/g, '-');
+  if (normalized === 'datadriven') return 'data-driven';
+  return VALID_TRANSFORM_IDS.has(normalized) ? normalized : null;
+}