@workerdeck/ui 0.23.0 → 1.1.0

package/src/components/prompt-area/prompt-area-engine.ts

@@ -4,9 +4,7 @@
  */
 import type { Segment, ChipSegment, TriggerConfig, TriggerPosition, ActiveTrigger } from './types.ts'
 
-// ---------------------------------------------------------------------------
 // Serialization
-// ---------------------------------------------------------------------------
 
 /**
  * Converts an array of segments to a plain text string.
@@ -15,7 +13,9 @@ import type { Segment, ChipSegment, TriggerConfig, TriggerPosition, ActiveTrigge
 export function segmentsToPlainText(segments: Segment[]): string {
   return segments
     .map((seg) => {
-      if (seg.type === 'text') return seg.text
+      if (seg.type === 'text') {
+        return seg.text
+      }
       return `${seg.trigger}${seg.displayText}`
     })
     .join('')
@@ -26,7 +26,9 @@ export function segmentsToPlainText(segments: Segment[]): string {
  * Used for initial value conversion from plain strings.
  */
 export function plainTextToSegments(text: string): Segment[] {
-  if (!text) return []
+  if (!text) {
+    return []
+  }
   return [{ type: 'text', text }]
 }
 
@@ -37,12 +39,13 @@ export function plainTextToSegments(text: string): Segment[] {
  * can't be partially represented).
  */
 export function truncateSegmentsToLength(segments: Segment[], maxLength: number): Segment[] {
-  if (maxLength <= 0) return []
+  if (maxLength <= 0) {
+    return []
+  }
   const result: Segment[] = []
   let length = 0
   for (const seg of segments) {
-    const segLength =
-      seg.type === 'text' ? seg.text.length : seg.trigger.length + seg.displayText.length
+    const segLength = seg.type === 'text' ? seg.text.length : seg.trigger.length + seg.displayText.length
     if (length + segLength <= maxLength) {
       result.push(seg)
       length += segLength
@@ -54,8 +57,12 @@ export function truncateSegmentsToLength(segments: Segment[], maxLength: number)
         // Don't split a surrogate pair: if the cut lands right after a high
         // surrogate, drop the incomplete code point instead of a lone surrogate.
         const code = seg.text.charCodeAt(remaining - 1)
-        if (code >= 0xd800 && code <= 0xdbff) remaining -= 1
-        if (remaining > 0) result.push({ type: 'text', text: seg.text.slice(0, remaining) })
+        if (code >= 0xd800 && code <= 0xdbff) {
+          remaining -= 1
+        }
+        if (remaining > 0) {
+          result.push({ type: 'text', text: seg.text.slice(0, remaining) })
+        }
       }
     }
     break
@@ -63,9 +70,7 @@ export function truncateSegmentsToLength(segments: Segment[], maxLength: number)
   return result
 }
 
-// ---------------------------------------------------------------------------
 // Whitespace / word boundaries
-// ---------------------------------------------------------------------------
 
 /**
  * Single source of truth for what counts as an inline-whitespace word boundary
@@ -88,14 +93,14 @@ export function isInlineWhitespace(char: string | undefined): boolean {
 function buildTriggerCharMap(triggers: TriggerConfig[]): Map<string, TriggerConfig> {
   const map = new Map<string, TriggerConfig>()
   for (const trigger of triggers) {
-    if (!map.has(trigger.char)) map.set(trigger.char, trigger)
+    if (!map.has(trigger.char)) {
+      map.set(trigger.char, trigger)
+    }
   }
   return map
 }
 
-// ---------------------------------------------------------------------------
 // Trigger position validation
-// ---------------------------------------------------------------------------
 
 /**
  * Checks whether a trigger character at the given position in text
@@ -105,12 +110,10 @@ function buildTriggerCharMap(triggers: TriggerConfig[]): Map<string, TriggerConf
  * @param charIndex - The index of the trigger character in the text
  * @param position - The position rule to validate against
  */
-export function isValidTriggerPosition(
-  text: string,
-  charIndex: number,
-  position: TriggerPosition,
-): boolean {
-  if (charIndex === 0) return true
+export function isValidTriggerPosition(text: string, charIndex: number, position: TriggerPosition): boolean {
+  if (charIndex === 0) {
+    return true
+  }
 
   const prevChar = text[charIndex - 1]
 
@@ -122,9 +125,7 @@ export function isValidTriggerPosition(
   return isInlineWhitespace(prevChar)
 }
 
-// ---------------------------------------------------------------------------
 // Trigger detection
-// ---------------------------------------------------------------------------
 
 /**
  * Scans backwards from the cursor position to detect if the user is
@@ -136,12 +137,10 @@ export function isValidTriggerPosition(
  * @param cursorPos - The cursor position (character offset from start)
  * @param triggers - Available trigger configurations
  */
-export function detectActiveTrigger(
-  text: string,
-  cursorPos: number,
-  triggers: TriggerConfig[],
-): ActiveTrigger | null {
-  if (!text || cursorPos === 0 || triggers.length === 0) return null
+export function detectActiveTrigger(text: string, cursorPos: number, triggers: TriggerConfig[]): ActiveTrigger | null {
+  if (!text || cursorPos === 0 || triggers.length === 0) {
+    return null
+  }
 
   const triggerByChar = buildTriggerCharMap(triggers)
 
@@ -169,7 +168,6 @@ export function detectActiveTrigger(
       return null
     }
 
-    // Check if this character is a trigger character
     const matchingTrigger = triggerByChar.get(char)
     if (matchingTrigger && isValidTriggerPosition(text, i, matchingTrigger.position)) {
       return {
@@ -183,9 +181,7 @@ export function detectActiveTrigger(
   return null
 }
 
-// ---------------------------------------------------------------------------
 // Chip resolution
-// ---------------------------------------------------------------------------
 
 /**
  * Resolves an active trigger into a chip within the segments array.
@@ -204,7 +200,6 @@ export function resolveChip(
   const triggerStart = activeTrigger.startOffset
   const triggerEnd = triggerStart + 1 + activeTrigger.query.length // +1 for trigger char
 
-  // Build the new segments by mapping plain text positions back to segment boundaries
   const newSegments: Segment[] = []
   let offset = 0
 
@@ -261,7 +256,6 @@ export function resolveChip(
     }
   }
 
-  // Merge adjacent text segments
   const merged = mergeAdjacentTextSegments(newSegments)
 
   // Cursor should be placed after the chip + trailing space.
@@ -273,11 +267,7 @@ export function resolveChip(
       runningOffset += seg.text.length
     } else {
       runningOffset += seg.trigger.length + seg.displayText.length
-      if (
-        seg.value === chip.value &&
-        seg.displayText === chip.displayText &&
-        seg.trigger === activeTrigger.config.char
-      ) {
+      if (seg.value === chip.value && seg.displayText === chip.displayText && seg.trigger === activeTrigger.config.char) {
         lastChipEndOffset = runningOffset
       }
     }
@@ -315,7 +305,9 @@ export function resolveText(
       const chipEnd = offset + `${seg.trigger}${seg.displayText}`.length
       // A trigger range can never overlap a chip — chips are atomic — so a chip
       // is either wholly before or wholly after, and is kept either way.
-      if (chipEnd <= triggerStart || offset >= triggerEnd) newSegments.push(seg)
+      if (chipEnd <= triggerStart || offset >= triggerEnd) {
+        newSegments.push(seg)
+      }
       offset = chipEnd
       continue
     }
@@ -326,9 +318,13 @@ export function resolveText(
     } else {
       const before = seg.text.slice(0, Math.max(0, triggerStart - textStart))
       const after = seg.text.slice(Math.min(seg.text.length, triggerEnd - textStart))
-      if (before) newSegments.push({ type: 'text', text: before })
+      if (before) {
+        newSegments.push({ type: 'text', text: before })
+      }
       newSegments.push({ type: 'text', text })
-      if (after) newSegments.push({ type: 'text', text: after })
+      if (after) {
+        newSegments.push({ type: 'text', text: after })
+      }
     }
     offset = textEnd
   }
@@ -337,13 +333,13 @@ export function resolveText(
   // Clamp: a trigger detected against a stale document could otherwise leave the
   // caret past the end, which renders as no caret at all.
   const total = segmentsToPlainText(merged).length
-  if (cursorOffset > total) cursorOffset = total
+  if (cursorOffset > total) {
+    cursorOffset = total
+  }
   return { segments: merged, cursorOffset }
 }
 
-// ---------------------------------------------------------------------------
 // Chip removal
-// ---------------------------------------------------------------------------
 
 /**
  * Removes a chip at the given segment index and merges adjacent text segments.
@@ -353,8 +349,12 @@ export function resolveText(
  * @returns New segments array with the chip removed
  */
 export function removeChipAtIndex(segments: Segment[], index: number): Segment[] {
-  if (index < 0 || index >= segments.length) return segments
-  if (segments[index].type !== 'chip') return segments
+  if (index < 0 || index >= segments.length) {
+    return segments
+  }
+  if (segments[index].type !== 'chip') {
+    return segments
+  }
 
   const result = [...segments.slice(0, index), ...segments.slice(index + 1)]
   return mergeAdjacentTextSegments(result)
@@ -368,26 +368,21 @@ export function removeChipAtIndex(segments: Segment[], index: number): Segment[]
  * @param index - The segment index to revert
  * @returns New segments with the chip replaced by text, or null if not applicable
  */
-export function revertChipAtIndex(
-  segments: Segment[],
-  index: number,
-): { segments: Segment[]; revertedText: string } | null {
-  if (index < 0 || index >= segments.length) return null
+export function revertChipAtIndex(segments: Segment[], index: number): { segments: Segment[]; revertedText: string } | null {
+  if (index < 0 || index >= segments.length) {
+    return null
+  }
   const seg = segments[index]
-  if (seg.type !== 'chip' || !seg.autoResolved) return null
+  if (seg.type !== 'chip' || !seg.autoResolved) {
+    return null
+  }
 
   const revertedText = `${seg.trigger}${seg.displayText}`
-  const result = [
-    ...segments.slice(0, index),
-    { type: 'text' as const, text: revertedText },
-    ...segments.slice(index + 1),
-  ]
+  const result = [...segments.slice(0, index), { type: 'text' as const, text: revertedText }, ...segments.slice(index + 1)]
   return { segments: mergeAdjacentTextSegments(result), revertedText }
 }
 
-// ---------------------------------------------------------------------------
 // Paste: resolve trigger patterns in segments
-// ---------------------------------------------------------------------------
 
 /**
  * Scans text segments for trigger patterns and auto-resolves them into chips.
@@ -397,12 +392,11 @@ export function revertChipAtIndex(
  * whitespace, or after a newline. This avoids false positives like email
  * addresses (user@example.com).
  */
-export function resolveTriggersInSegments(
-  segments: Segment[],
-  triggers: TriggerConfig[],
-): Segment[] {
+export function resolveTriggersInSegments(segments: Segment[], triggers: TriggerConfig[]): Segment[] {
   const autoResolveTriggers = triggers.filter((t) => t.resolveOnSpace)
-  if (autoResolveTriggers.length === 0) return segments
+  if (autoResolveTriggers.length === 0) {
+    return segments
+  }
 
   const triggerByChar = buildTriggerCharMap(autoResolveTriggers)
   const result: Segment[] = []
@@ -425,11 +419,10 @@ export function resolveTriggersInSegments(
  * A trigger pattern is: (start-of-string | whitespace) + trigger_char + word_chars
  * followed by whitespace or end-of-string.
  */
-function splitTextByTriggerPatterns(
-  text: string,
-  triggerByChar: Map<string, TriggerConfig>,
-): Segment[] {
-  if (!text) return []
+function splitTextByTriggerPatterns(text: string, triggerByChar: Map<string, TriggerConfig>): Segment[] {
+  if (!text) {
+    return []
+  }
 
   const segments: Segment[] = []
   let i = 0
@@ -479,9 +472,7 @@ function splitTextByTriggerPatterns(
   return segments
 }
 
-// ---------------------------------------------------------------------------
 // Text range replacement
-// ---------------------------------------------------------------------------
 
 /**
  * Replaces a range of plain text within the segments array.
@@ -493,12 +484,7 @@ function splitTextByTriggerPatterns(
  * @param replacement - The replacement text
  * @returns New segments array with the replacement applied
  */
-export function replaceTextRange(
-  segments: Segment[],
-  start: number,
-  end: number,
-  replacement: string,
-): Segment[] {
+export function replaceTextRange(segments: Segment[], start: number, end: number, replacement: string): Segment[] {
   const newSegments: Segment[] = []
   let offset = 0
   let inserted = false
@@ -518,13 +504,11 @@ export function replaceTextRange(
       if (chipEnd <= start || chipStart >= end) {
         newSegments.push(seg)
       }
-      // Chips within the range are removed
       offset = chipEnd
     } else {
       const textStart = offset
       const textEnd = offset + seg.text.length
 
-      // Check if this segment contains the insertion/replacement point
       const isBefore = start === end ? textEnd < start : textEnd <= start
       const isAfter = start === end ? textStart > end : textStart >= end
 
@@ -564,9 +548,7 @@ export function replaceTextRange(
   return mergeAdjacentTextSegments(newSegments)
 }
 
-// ---------------------------------------------------------------------------
 // Markdown formatting shortcuts
-// ---------------------------------------------------------------------------
 
 /**
  * Toggles markdown wrap markers around a selected text range.
@@ -585,28 +567,24 @@ export function toggleMarkdownWrap(
   selectionEnd: number,
   marker: string,
 ): { segments: Segment[]; selectionStart: number; selectionEnd: number } | null {
-  if (selectionStart === selectionEnd) return null
+  if (selectionStart === selectionEnd) {
+    return null
+  }
 
   const plainText = segmentsToPlainText(segments)
   const markerLen = marker.length
 
-  // Check if already wrapped
-  const hasOpeningMarker =
-    selectionStart >= markerLen &&
-    plainText.slice(selectionStart - markerLen, selectionStart) === marker
+  const hasOpeningMarker = selectionStart >= markerLen && plainText.slice(selectionStart - markerLen, selectionStart) === marker
   const hasClosingMarker =
-    selectionEnd + markerLen <= plainText.length &&
-    plainText.slice(selectionEnd, selectionEnd + markerLen) === marker
+    selectionEnd + markerLen <= plainText.length && plainText.slice(selectionEnd, selectionEnd + markerLen) === marker
 
   let isWrapped = hasOpeningMarker && hasClosingMarker
 
   // For single-char markers (e.g., '*'), ensure we're not matching
   // inside a multi-char marker (e.g., '**')
   if (isWrapped && markerLen === 1) {
-    const charBeforeOpening =
-      selectionStart > markerLen ? plainText[selectionStart - markerLen - 1] : ''
-    const charAfterClosing =
-      selectionEnd + markerLen < plainText.length ? plainText[selectionEnd + markerLen] : ''
+    const charBeforeOpening = selectionStart > markerLen ? plainText[selectionStart - markerLen - 1] : ''
+    const charAfterClosing = selectionEnd + markerLen < plainText.length ? plainText[selectionEnd + markerLen] : ''
     if (charBeforeOpening === marker || charAfterClosing === marker) {
       isWrapped = false
     }
@@ -615,12 +593,7 @@ export function toggleMarkdownWrap(
   if (isWrapped) {
     // Unwrap: remove closing marker first (preserves start offsets), then opening
     const afterClosing = replaceTextRange(segments, selectionEnd, selectionEnd + markerLen, '')
-    const afterOpening = replaceTextRange(
-      afterClosing,
-      selectionStart - markerLen,
-      selectionStart,
-      '',
-    )
+    const afterOpening = replaceTextRange(afterClosing, selectionStart - markerLen, selectionStart, '')
     return {
       segments: afterOpening,
       selectionStart: selectionStart - markerLen,
@@ -638,9 +611,7 @@ export function toggleMarkdownWrap(
   }
 }
 
-// ---------------------------------------------------------------------------
 // Inline markdown parsing
-// ---------------------------------------------------------------------------
 
 export type MarkdownToken =
   | { type: 'plain'; text: string }
@@ -654,7 +625,9 @@ export type MarkdownToken =
  * Does NOT handle block-level markdown (lists, headings, etc.).
  */
 export function parseInlineMarkdown(text: string): MarkdownToken[] {
-  if (!text) return []
+  if (!text) {
+    return []
+  }
 
   const tokens: MarkdownToken[] = []
   // Regex patterns for inline markdown elements:
@@ -668,7 +641,6 @@ export function parseInlineMarkdown(text: string): MarkdownToken[] {
   let match: RegExpExecArray | null
 
   while ((match = pattern.exec(text)) !== null) {
-    // Add any plain text before this match
     if (match.index > lastIndex) {
       tokens.push({ type: 'plain', text: text.slice(lastIndex, match.index) })
     }
@@ -690,7 +662,6 @@ export function parseInlineMarkdown(text: string): MarkdownToken[] {
     lastIndex = match.index + match[0].length
   }
 
-  // Add any remaining plain text
   if (lastIndex < text.length) {
     tokens.push({ type: 'plain', text: text.slice(lastIndex) })
   }
@@ -698,9 +669,7 @@ export function parseInlineMarkdown(text: string): MarkdownToken[] {
   return tokens
 }
 
-// ---------------------------------------------------------------------------
 // Segment comparison
-// ---------------------------------------------------------------------------
 
 /**
  * Shallow equality check for two segment arrays.
@@ -708,15 +677,23 @@ export function parseInlineMarkdown(text: string): MarkdownToken[] {
  * Avoids JSON.stringify overhead for the common case.
  */
 export function segmentsEqual(a: Segment[], b: Segment[]): boolean {
-  if (a === b) return true
-  if (a.length !== b.length) return false
+  if (a === b) {
+    return true
+  }
+  if (a.length !== b.length) {
+    return false
+  }
 
   for (let i = 0; i < a.length; i++) {
     const sa = a[i]
     const sb = b[i]
-    if (sa.type !== sb.type) return false
+    if (sa.type !== sb.type) {
+      return false
+    }
     if (sa.type === 'text') {
-      if (sb.type !== 'text' || sa.text !== sb.text) return false
+      if (sb.type !== 'text' || sa.text !== sb.text) {
+        return false
+      }
     } else {
       if (
         sb.type !== 'chip' ||
@@ -724,16 +701,23 @@ export function segmentsEqual(a: Segment[], b: Segment[]): boolean {
         sa.value !== sb.value ||
         sa.displayText !== sb.displayText ||
         sa.autoResolved !== sb.autoResolved
-      )
+      ) {
         return false
+      }
     }
   }
   return true
 }
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
+/**
+ * Content equality regardless of how text is chunked into segments: adjacent
+ * text segments are merged (and empty ones dropped) on both sides before
+ * comparing, so a DOM read split by decorations or per-`<br>` newlines equals
+ * the merged model that rendered it.
+ */
+export function segmentsContentEqual(a: Segment[], b: Segment[]): boolean {
+  return segmentsEqual(mergeAdjacentTextSegments(a), mergeAdjacentTextSegments(b))
+}
 
 /**
  * Merges adjacent text segments into single text segments.
@@ -743,11 +727,12 @@ export function mergeAdjacentTextSegments(segments: Segment[]): Segment[] {
   const result: Segment[] = []
 
   for (const seg of segments) {
-    if (seg.type === 'text' && seg.text === '') continue
+    if (seg.type === 'text' && seg.text === '') {
+      continue
+    }
 
     const last = result[result.length - 1]
     if (seg.type === 'text' && last?.type === 'text') {
-      // Merge with previous text segment
       result[result.length - 1] = { type: 'text', text: last.text + seg.text }
     } else {
       result.push(seg)