@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/prompt-area/cursor-helpers.ts

@@ -28,17 +28,22 @@ export type SavedCursor = {
 
 export function saveCursorPosition(editor: HTMLElement): SavedCursor | null {
   const range = getSelectionRange()
-  if (!range) return null
-  if (!editor.contains(range.startContainer)) return null
+  if (!range) {
+    return null
+  }
+  if (!editor.contains(range.startContainer)) {
+    return null
+  }
 
   const node = range.startContainer
   if (node === editor) {
     return { nodeIndex: range.startOffset, offset: 0 }
   }
 
-  // Walk up to find the direct child of editor using type-safe helper
   const directChild = getDirectChildContaining(editor, node)
-  if (!directChild) return null
+  if (!directChild) {
+    return null
+  }
 
   const nodeIndex = indexOfChildNode(editor, directChild)
   return { nodeIndex, offset: range.startOffset }
@@ -46,10 +51,14 @@ export function saveCursorPosition(editor: HTMLElement): SavedCursor | null {
 
 export function restoreCursorPosition(editor: HTMLElement, saved: SavedCursor): void {
   const sel = window.getSelection()
-  if (!sel) return
+  if (!sel) {
+    return
+  }
 
   const childNodes = editor.childNodes
-  if (childNodes.length === 0) return
+  if (childNodes.length === 0) {
+    return
+  }
 
   const range = document.createRange()
 
@@ -77,8 +86,12 @@ export function restoreCursorPosition(editor: HTMLElement, saved: SavedCursor):
 
 export function getCursorOffset(editor: HTMLElement): number | null {
   const range = getSelectionRange()
-  if (!range) return null
-  if (!editor.contains(range.startContainer)) return null
+  if (!range) {
+    return null
+  }
+  if (!editor.contains(range.startContainer)) {
+    return null
+  }
 
   const preRange = document.createRange()
   preRange.selectNodeContents(editor)
@@ -93,7 +106,9 @@ export function getCursorOffset(editor: HTMLElement): number | null {
  */
 export function createRangeAtOffset(editor: HTMLElement, targetOffset: number): Range | null {
   const pos = findDOMPosition(editor, targetOffset)
-  if (!pos) return null
+  if (!pos) {
+    return null
+  }
 
   const range = document.createRange()
   range.setStart(pos.node, pos.offset)
@@ -118,18 +133,26 @@ export function createRangeAtOffset(editor: HTMLElement, targetOffset: number):
  */
 function caretRect(range: Range): DOMRect | null {
   const direct = range.getBoundingClientRect()
-  if (direct.height > 0) return direct
+  if (direct.height > 0) {
+    return direct
+  }
 
   const node = range.startContainer
-  if (node.nodeType !== Node.ELEMENT_NODE) return null
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return null
+  }
   const children = (node as Element).childNodes
   const neighbours = [children[range.startOffset], children[range.startOffset - 1]]
   for (const neighbour of neighbours) {
-    if (!neighbour) continue
+    if (!neighbour) {
+      continue
+    }
     const probe = document.createRange()
     probe.selectNode(neighbour)
     const rect = probe.getBoundingClientRect()
-    if (rect.height > 0) return rect
+    if (rect.height > 0) {
+      return rect
+    }
   }
   return null
 }
@@ -152,21 +175,32 @@ function caretRect(range: Range): DOMRect | null {
  */
 export function scrollCaretIntoView(editor: HTMLElement): void {
   const sel = window.getSelection()
-  if (!sel || sel.rangeCount === 0) return
+  if (!sel || sel.rangeCount === 0) {
+    return
+  }
   const range = sel.getRangeAt(0)
-  if (!editor.contains(range.startContainer)) return
+  if (!editor.contains(range.startContainer)) {
+    return
+  }
 
   const rect = caretRect(range)
-  if (!rect) return
+  if (!rect) {
+    return
+  }
 
   const box = editor.getBoundingClientRect()
-  if (rect.bottom > box.bottom) editor.scrollTop += rect.bottom - box.bottom
-  else if (rect.top < box.top) editor.scrollTop -= box.top - rect.top
+  if (rect.bottom > box.bottom) {
+    editor.scrollTop += rect.bottom - box.bottom
+  } else if (rect.top < box.top) {
+    editor.scrollTop -= box.top - rect.top
+  }
 }
 
 export function setCursorAtOffset(editor: HTMLElement, targetOffset: number): void {
   const sel = window.getSelection()
-  if (!sel) return
+  if (!sel) {
+    return
+  }
 
   const pos = findDOMPosition(editor, targetOffset)
   if (pos) {
@@ -198,7 +232,9 @@ export function getTextLengthInRange(range: Range): number {
     } else if (isChipElement(node)) {
       length += chipNodeTextLength(node)
     } else if (isHTMLElement(node) && node.tagName === 'BR') {
-      if (node.dataset.sentinel) return // skip sentinel <br>
+      if (node.dataset.sentinel) {
+        return
+      } // skip sentinel <br>
       length += 1
     } else if (isHTMLElement(node)) {
       node.childNodes.forEach(walk)
@@ -215,15 +251,21 @@ export function getTextLengthInRange(range: Range): number {
  */
 export function getSelectionOffsets(editor: HTMLElement): { start: number; end: number } | null {
   const range = getSelectionRange()
-  if (!range) return null
-  if (!editor.contains(range.startContainer)) return null
+  if (!range) {
+    return null
+  }
+  if (!editor.contains(range.startContainer)) {
+    return null
+  }
 
   const startRange = document.createRange()
   startRange.selectNodeContents(editor)
   startRange.setEnd(range.startContainer, range.startOffset)
   const start = getTextLengthInRange(startRange)
 
-  if (range.collapsed) return { start, end: start }
+  if (range.collapsed) {
+    return { start, end: start }
+  }
 
   const endRange = document.createRange()
   endRange.selectNodeContents(editor)
@@ -237,13 +279,11 @@ export function getSelectionOffsets(editor: HTMLElement): { start: number; end:
  * Sets a (potentially non-collapsed) selection at the given plain-text offsets.
  * Used to restore selection after markdown wrap/unwrap operations.
  */
-export function setSelectionAtOffsets(
-  editor: HTMLElement,
-  startOffset: number,
-  endOffset: number,
-): void {
+export function setSelectionAtOffsets(editor: HTMLElement, startOffset: number, endOffset: number): void {
   const sel = window.getSelection()
-  if (!sel) return
+  if (!sel) {
+    return
+  }
 
   if (startOffset === endOffset) {
     setCursorAtOffset(editor, startOffset)
@@ -252,7 +292,9 @@ export function setSelectionAtOffsets(
 
   const startPos = findDOMPosition(editor, startOffset)
   const endPos = findDOMPosition(editor, endOffset)
-  if (!startPos || !endPos) return
+  if (!startPos || !endPos) {
+    return
+  }
 
   const range = document.createRange()
   range.setStart(startPos.node, startPos.offset)
@@ -265,10 +307,7 @@ export function setSelectionAtOffsets(
  * Maps a plain-text offset to a DOM node + offset pair.
  * Recurses into decoration elements (markdown spans, URL anchors).
  */
-export function findDOMPosition(
-  container: HTMLElement,
-  targetOffset: number,
-): { node: Node; offset: number } | null {
+export function findDOMPosition(container: HTMLElement, targetOffset: number): { node: Node; offset: number } | null {
   let remaining = targetOffset
 
   for (let i = 0; i < container.childNodes.length; i++) {
@@ -283,12 +322,13 @@ export function findDOMPosition(
     } else if (isChipElement(child)) {
       const chipLen = chipNodeTextLength(child)
       if (remaining <= chipLen) {
-        // Position after the chip element
         return { node: container, offset: i + 1 }
       }
       remaining -= chipLen
     } else if (isBRElement(child)) {
-      if (child.dataset.sentinel) continue // skip sentinel <br>
+      if (child.dataset.sentinel) {
+        continue
+      } // skip sentinel <br>
       if (remaining <= 1) {
         return { node: container, offset: i + 1 }
       }
@@ -298,7 +338,9 @@ export function findDOMPosition(
       const textLen = (child.textContent ?? '').length
       if (remaining <= textLen) {
         const result = findDOMPosition(child, remaining)
-        if (result) return result
+        if (result) {
+          return result
+        }
       }
       remaining -= textLen
     }

package/src/components/prompt-area/dom-helpers.ts

@@ -7,9 +7,17 @@
 
 import type { ChipSegment } from './types.ts'
 
-// ---------------------------------------------------------------------------
+/** URL pattern for detecting URLs in text content. */
+const URL_PATTERN = /https?:\/\/[^\s),]+/g
+/** Matches ***bold-italic***, **bold**, and *italic* spans. */
+const MARKDOWN_INLINE_PATTERN = /(\*{3})(.+?)\*{3}|(\*{2})(.+?)\*{2}|(\*)(.+?)\*/g
+/** Matches a `•` bullet glyph at the start of a line (optionally indented). */
+const LIST_BULLET_PATTERN = /(^|\n)([ \t]*)•/g
+/** A list line's leading indentation; the lookahead keeps the prefix itself out of the
+ * capture, so only the indentation is wrapped. */
+const LIST_INDENT_PATTERN = /(^|\n)([ \t]+)(?=(?:[•\-*] |\d+\. ))/g
+
 // Type Guards
-// ---------------------------------------------------------------------------
 
 /**
  * Type guard: checks if a DOM node is an HTMLElement.
@@ -56,9 +64,7 @@ export function isLinkElement(node: Node): node is HTMLAnchorElement {
   return node instanceof HTMLAnchorElement && node.dataset.url === 'true'
 }
 
-// ---------------------------------------------------------------------------
 // Safe JSON
-// ---------------------------------------------------------------------------
 
 /**
  * Safely parses a JSON string, returning `unknown` instead of `any`.
@@ -86,16 +92,16 @@ export function safeJsonStringify(value: unknown): string | undefined {
   }
 }
 
-// ---------------------------------------------------------------------------
 // DOM reading helpers
-// ---------------------------------------------------------------------------
 
 /**
  * Reads the chip trigger character from a chip element's dataset.
  * Returns undefined if the node is not a chip element.
  */
 export function getChipTrigger(node: Node): string | undefined {
-  if (!isChipElement(node)) return undefined
+  if (!isChipElement(node)) {
+    return undefined
+  }
   return node.dataset.chipTrigger
 }
 
@@ -103,7 +109,9 @@ export function getChipTrigger(node: Node): string | undefined {
  * Reads the chip value from a chip element's dataset.
  */
 export function getChipValue(node: Node): string | undefined {
-  if (!isChipElement(node)) return undefined
+  if (!isChipElement(node)) {
+    return undefined
+  }
   return node.dataset.chipValue
 }
 
@@ -111,7 +119,9 @@ export function getChipValue(node: Node): string | undefined {
  * Reads the chip display text from a chip element's dataset.
  */
 export function getChipDisplay(node: Node): string | undefined {
-  if (!isChipElement(node)) return undefined
+  if (!isChipElement(node)) {
+    return undefined
+  }
   return node.dataset.chipDisplay ?? node.textContent ?? undefined
 }
 
@@ -119,9 +129,13 @@ export function getChipDisplay(node: Node): string | undefined {
  * Reads and safely parses the chip data from a chip element's dataset.
  */
 export function getChipData(node: Node): unknown {
-  if (!isChipElement(node)) return undefined
+  if (!isChipElement(node)) {
+    return undefined
+  }
   const raw = node.dataset.chipData
-  if (!raw) return undefined
+  if (!raw) {
+    return undefined
+  }
   return safeJsonParse(raw)
 }
 
@@ -149,12 +163,16 @@ export function chipNodeTextLength(node: HTMLElement): number {
  * fields are required or how optional `data` / `autoResolved` are attached.
  */
 export function chipNodeToSegment(node: Node): ChipSegment | null {
-  if (!isChipElement(node)) return null
+  if (!isChipElement(node)) {
+    return null
+  }
 
   const trigger = getChipTrigger(node)
   const value = getChipValue(node)
   const displayText = getChipDisplay(node)
-  if (!trigger || value === undefined || !displayText) return null
+  if (!trigger || value === undefined || !displayText) {
+    return null
+  }
 
   const data = getChipData(node)
   const autoResolved = getChipAutoResolved(node)
@@ -169,9 +187,7 @@ export function chipNodeToSegment(node: Node): ChipSegment | null {
   }
 }
 
-// ---------------------------------------------------------------------------
 // DOM manipulation helpers
-// ---------------------------------------------------------------------------
 
 /**
  * Finds the index of a direct child node within a parent element.
@@ -180,7 +196,9 @@ export function chipNodeToSegment(node: Node): ChipSegment | null {
 export function indexOfChildNode(parent: HTMLElement, child: Node): number {
   const children = parent.childNodes
   for (let i = 0; i < children.length; i++) {
-    if (children[i] === child) return i
+    if (children[i] === child) {
+      return i
+    }
   }
   return -1
 }
@@ -198,10 +216,18 @@ export function indexOfChildNode(parent: HTMLElement, child: Node): number {
  * chip missing a required attribute (trigger/value/display), so this must too.
  */
 export function childProducesSegment(child: Node): boolean {
-  if (child.nodeType === Node.TEXT_NODE) return (child.textContent ?? '') !== ''
-  if (isBRElement(child)) return !child.dataset.sentinel
-  if (isChipElement(child)) return chipNodeToSegment(child) !== null
-  if (isHTMLElement(child)) return (child.textContent ?? '') !== ''
+  if (child.nodeType === Node.TEXT_NODE) {
+    return (child.textContent ?? '') !== ''
+  }
+  if (isBRElement(child)) {
+    return !child.dataset.sentinel
+  }
+  if (isChipElement(child)) {
+    return chipNodeToSegment(child) !== null
+  }
+  if (isHTMLElement(child)) {
+    return (child.textContent ?? '') !== ''
+  }
   return false
 }
 
@@ -216,7 +242,9 @@ export function childProducesSegment(child: Node): boolean {
 export function domChildIndexToSegmentIndex(editor: HTMLElement, childIndex: number): number {
   let segIdx = 0
   for (let i = 0; i < childIndex; i++) {
-    if (childProducesSegment(editor.childNodes[i])) segIdx++
+    if (childProducesSegment(editor.childNodes[i])) {
+      segIdx++
+    }
   }
   return segIdx
 }
@@ -229,7 +257,9 @@ export function domChildIndexToSegmentIndex(editor: HTMLElement, childIndex: num
 export function getDirectChildContaining(ancestor: HTMLElement, descendant: Node): Node | null {
   let node: Node | null = descendant
   while (node !== null) {
-    if (node.parentNode === ancestor) return node
+    if (node.parentNode === ancestor) {
+      return node
+    }
     node = node.parentNode
   }
   return null
@@ -242,12 +272,10 @@ export function getDirectChildContaining(ancestor: HTMLElement, descendant: Node
 export function unwrapBlockElement(parent: HTMLElement, block: HTMLElement): void {
   const fragment = document.createDocumentFragment()
 
-  // Move all children to fragment
   while (block.firstChild) {
     fragment.appendChild(block.firstChild)
   }
 
-  // Add a BR after the unwrapped content
   fragment.appendChild(document.createElement('br'))
 
   parent.replaceChild(fragment, block)
@@ -274,10 +302,15 @@ export function normalizeEditorDOM(editor: HTMLElement): boolean {
   for (let i = editor.childNodes.length - 1; i >= 0; i--) {
     const child = editor.childNodes[i]
 
-    // Skip non-element nodes, chip elements, and BR elements
-    if (!(child instanceof HTMLElement)) continue
-    if (child.dataset.chipTrigger !== undefined) continue
-    if (child instanceof HTMLBRElement) continue
+    if (!(child instanceof HTMLElement)) {
+      continue
+    }
+    if (child.dataset.chipTrigger !== undefined) {
+      continue
+    }
+    if (child instanceof HTMLBRElement) {
+      continue
+    }
 
     const tag = child.tagName
     if (blockTags.has(tag)) {
@@ -304,18 +337,12 @@ export function normalizeEditorDOM(editor: HTMLElement): boolean {
     }
   }
 
-  // Merge adjacent text nodes
   editor.normalize()
 
   return changed
 }
 
-// ---------------------------------------------------------------------------
 // URL decoration
-// ---------------------------------------------------------------------------
-
-/** URL pattern for detecting URLs in text content */
-const URL_PATTERN = /https?:\/\/[^\s),]+/g
 
 /**
  * Walks direct-child text nodes in the editor and wraps URL text in
@@ -357,10 +384,14 @@ export function decorateURLsInEditor(editor: HTMLElement): boolean {
       }
     }
 
-    if (matches.length === 0) continue
+    if (matches.length === 0) {
+      continue
+    }
 
     const parent = textNode.parentNode
-    if (!parent) continue
+    if (!parent) {
+      continue
+    }
 
     // Validate URLs upfront – only keep those with safe protocols (CWE-79)
     const safeMatches: Array<{ url: string; href: string; index: number }> = []
@@ -375,19 +406,19 @@ export function decorateURLsInEditor(editor: HTMLElement): boolean {
       }
     }
 
-    if (safeMatches.length === 0) continue
+    if (safeMatches.length === 0) {
+      continue
+    }
 
     decorated = true
     const fragment = document.createDocumentFragment()
     let lastIndex = 0
 
     for (const { url, href, index } of safeMatches) {
-      // Text before this URL
       if (index > lastIndex) {
         fragment.appendChild(document.createTextNode(text.slice(lastIndex, index)))
       }
 
-      // Create the link element
       const anchor = document.createElement('a')
       anchor.href = href
       anchor.target = '_blank'
@@ -400,7 +431,6 @@ export function decorateURLsInEditor(editor: HTMLElement): boolean {
       lastIndex = index + url.length
     }
 
-    // Text after the last URL
     if (lastIndex < text.length) {
       fragment.appendChild(document.createTextNode(text.slice(lastIndex)))
     }
@@ -411,12 +441,7 @@ export function decorateURLsInEditor(editor: HTMLElement): boolean {
   return decorated
 }
 
-// ---------------------------------------------------------------------------
 // Markdown inline decoration
-// ---------------------------------------------------------------------------
-
-/** Pattern to find ***bold-italic***, **bold**, and *italic* markdown spans */
-const MARKDOWN_INLINE_PATTERN = /(\*{3})(.+?)\*{3}|(\*{2})(.+?)\*{2}|(\*)(.+?)\*/g
 
 /**
  * Walks direct-child text nodes in the editor and wraps markdown-formatted
@@ -486,17 +511,20 @@ export function decorateMarkdownInEditor(editor: HTMLElement): boolean {
       }
     }
 
-    if (matches.length === 0) continue
+    if (matches.length === 0) {
+      continue
+    }
 
     decorated = true
     const parent = textNode.parentNode
-    if (!parent) continue
+    if (!parent) {
+      continue
+    }
 
     const fragment = document.createDocumentFragment()
     let lastIndex = 0
 
     for (const { fullMatch, marker, content, index, className } of matches) {
-      // Text before this match
       if (index > lastIndex) {
         fragment.appendChild(document.createTextNode(text.slice(lastIndex, index)))
       }
@@ -510,7 +538,6 @@ export function decorateMarkdownInEditor(editor: HTMLElement): boolean {
       openMarker.className = 'prompt-area-md-marker'
       openMarker.textContent = marker
 
-      // Styled content
       const styledContent = document.createElement('span')
       styledContent.className = className
       styledContent.textContent = content
@@ -528,7 +555,6 @@ export function decorateMarkdownInEditor(editor: HTMLElement): boolean {
       lastIndex = index + fullMatch.length
     }
 
-    // Text after the last match
     if (lastIndex < text.length) {
       fragment.appendChild(document.createTextNode(text.slice(lastIndex)))
     }
@@ -539,9 +565,6 @@ export function decorateMarkdownInEditor(editor: HTMLElement): boolean {
   return decorated
 }
 
-/** Matches a `•` bullet glyph at the start of a line (optionally indented). */
-const LIST_BULLET_PATTERN = /(^|\n)([ \t]*)•/g
-
 /**
  * Walks direct-child text nodes and wraps each line-leading `•` bullet glyph in
  * a `<span class="prompt-area-list-bullet">` so CSS can size it up (the raw
@@ -574,11 +597,15 @@ export function decorateBulletsInEditor(editor: HTMLElement): boolean {
       bulletIndices.push(match.index + match[1].length + match[2].length)
     }
 
-    if (bulletIndices.length === 0) continue
+    if (bulletIndices.length === 0) {
+      continue
+    }
 
     decorated = true
     const parent = textNode.parentNode
-    if (!parent) continue
+    if (!parent) {
+      continue
+    }
 
     const fragment = document.createDocumentFragment()
     let lastIndex = 0
@@ -605,13 +632,6 @@ export function decorateBulletsInEditor(editor: HTMLElement): boolean {
   return decorated
 }
 
-/**
- * Matches the line-leading whitespace run of an indented list line (bullet or
- * numbered). The lookahead keeps the list prefix itself out of the capture, so
- * only the indentation is wrapped.
- */
-const LIST_INDENT_PATTERN = /(^|\n)([ \t]+)(?=(?:[•\-*] |\d+\. ))/g
-
 /**
  * Wraps each list line's leading indentation in an inline-block
  * `<span class="prompt-area-list-indent">` sized per nesting level, so nested
@@ -634,7 +654,9 @@ export function decorateListIndentInEditor(editor: HTMLElement): boolean {
   const textNodes: Text[] = []
   for (let i = 0; i < editor.childNodes.length; i++) {
     const node = editor.childNodes[i]
-    if (isTextNode(node)) textNodes.push(node)
+    if (isTextNode(node)) {
+      textNodes.push(node)
+    }
   }
 
   for (const textNode of textNodes) {
@@ -647,11 +669,15 @@ export function decorateListIndentInEditor(editor: HTMLElement): boolean {
       runs.push({ start, end: start + match[2].length })
     }
 
-    if (runs.length === 0) continue
+    if (runs.length === 0) {
+      continue
+    }
 
     decorated = true
     const parent = textNode.parentNode
-    if (!parent) continue
+    if (!parent) {
+      continue
+    }
 
     const fragment = document.createDocumentFragment()
     let lastIndex = 0
@@ -703,12 +729,12 @@ export function decorateEditor(editor: HTMLElement, markdownEnabled: boolean): v
     decorateBulletsInEditor(editor)
   }
   decorateURLsInEditor(editor)
-  if (markdownEnabled) decorateMarkdownInEditor(editor)
+  if (markdownEnabled) {
+    decorateMarkdownInEditor(editor)
+  }
 }
 
-// ---------------------------------------------------------------------------
 // Selection helpers
-// ---------------------------------------------------------------------------
 
 /**
  * Returns the first Range from the current window selection, or null if
@@ -716,6 +742,8 @@ export function decorateEditor(editor: HTMLElement, markdownEnabled: boolean): v
  */
 export function getSelectionRange(): Range | null {
   const sel = window.getSelection()
-  if (!sel || sel.rangeCount === 0) return null
+  if (!sel || sel.rangeCount === 0) {
+    return null
+  }
   return sel.getRangeAt(0)
 }