@workerdeck/ui 0.23.0 → 1.1.0

package/src/components/prompt-area/use-prompt-area-events.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useRef } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import type { Segment, ChipSegment, TriggerConfig } from './types.ts'
 import { resolveTriggersInSegments } from './prompt-area-engine.ts'
 import { normalizeEditorDOM, safeJsonStringify, getSelectionRange } from './dom-helpers.ts'
@@ -11,15 +11,7 @@ import {
   insertSegmentsAtCursor,
 } from './clipboard-helpers.ts'
 import { htmlToMarkdown } from './html-to-markdown.ts'
-import {
-  normalizeListPrefixText,
-  renumberOrderedListLines,
-  hasOrderedListRun,
-} from './prompt-area-list-ops.ts'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
+import { normalizeListPrefixText, renumberOrderedListLines, hasOrderedListRun } from './prompt-area-list-ops.ts'
 
 type EventHandlerDeps = {
   editorRef: React.RefObject<HTMLDivElement | null>
@@ -56,10 +48,6 @@ type PromptAreaEventHandlers = {
   isComposing: React.RefObject<boolean>
 }
 
-// ---------------------------------------------------------------------------
-// Undo/Redo Stack
-// ---------------------------------------------------------------------------
-
 const MAX_UNDO_HISTORY = 100
 
 /** Delay before dismissing trigger on blur, so popover clicks register first */
@@ -70,10 +58,6 @@ type UndoState = {
   redoStack: Segment[][]
 }
 
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
-
 /**
  * Encapsulates all edge-case event handlers for the prompt area component:
  * paste, copy, cut, drag/drop, IME composition, blur, and undo/redo.
@@ -99,14 +83,12 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
 
   const isComposing = useRef(false)
 
-  // -----------------------------------------------------------------------
   // Undo/redo stack (MAX_UNDO_HISTORY entries; clears redo on new push).
   // Invariants: stacks live in refs (not useState) so pushUndo /
   // resetUndoHistory / handleKeyDownForUndoRedo keep stable identity.
   // Destabilizing this would re-create handleInput / handleKeyDown /
   // imperative handle on every render and silently regress IME + debounced
   // undo in the parent hook.
-  // -----------------------------------------------------------------------
   const undoState = useRef<UndoState>({ undoStack: [], redoStack: [] })
 
   const pushUndo = useCallback((segments: Segment[]) => {
@@ -115,7 +97,6 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
     if (state.undoStack.length > MAX_UNDO_HISTORY) {
       state.undoStack.shift()
     }
-    // Clear redo stack on new change
     state.redoStack = []
   }, [])
 
@@ -123,22 +104,23 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
     undoState.current = { undoStack: [], redoStack: [] }
   }, [])
 
-  // -----------------------------------------------------------------------
   // Paste: strip HTML, insert plain text only
-  // -----------------------------------------------------------------------
 
   const handlePaste = useCallback(
     (e: React.ClipboardEvent<HTMLDivElement>) => {
       // Let a consumer take over the paste entirely (e.g. divert large text or
       // arbitrary files to an upload pipeline) by calling preventDefault().
       onRawPaste?.(e)
-      if (e.defaultPrevented) return
+      if (e.defaultPrevented) {
+        return
+      }
       e.preventDefault()
 
       const editor = editorRef.current
-      if (!editor) return
+      if (!editor) {
+        return
+      }
 
-      // Check for image files in clipboard before processing text
       // Some browsers/OSes provide pasted images via `items` instead of `files` (e.g. screenshots)
       const imageFile =
         Array.from(e.clipboardData.files).find((f) => f.type.startsWith('image/')) ??
@@ -151,28 +133,25 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
         return
       }
 
-      // Record undo snapshot
       const currentSegments = readSegmentsFromDOM()
       pushUndo(currentSegments)
 
-      // Check for internal segment data (copy/paste within the editor)
       const segmentJson = e.clipboardData.getData('text/prompt-area-segments')
       if (segmentJson) {
         const parsed = parseSegmentsFromClipboard(segmentJson)
         if (parsed && parsed.length > 0) {
-          // Insert the copied segments at cursor position
           const range = getSelectionRange()
-          if (!range) return
+          if (!range) {
+            return
+          }
 
           range.deleteContents()
 
-          // Merge pasted segments into current segments at cursor position
           const beforePaste = readSegmentsFromDOM()
           const merged = insertSegmentsAtCursor(beforePaste, parsed, editor)
           onChange(merged)
           renderSegmentsToDOM(merged)
 
-          // Notify: internal paste with chip data preserved
           onPasteCallback?.({ segments: merged, source: 'internal' })
           for (const seg of parsed) {
             if (seg.type === 'chip') {
@@ -212,8 +191,12 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
           }
         }
       }
-      if (!text) text = e.clipboardData.getData('text/plain')
-      if (!text) return
+      if (!text) {
+        text = e.clipboardData.getData('text/plain')
+      }
+      if (!text) {
+        return
+      }
 
       // Normalize pasted list markers ("- " → "•") so pasted bullets match
       // typed input. Applies to both the HTML→markdown and plain-text paths.
@@ -230,9 +213,10 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
         text = renumberOrderedListLines(text).text
       }
 
-      // Insert plain text at cursor position using Selection API
       const range = getSelectionRange()
-      if (!range) return
+      if (!range) {
+        return
+      }
 
       range.deleteContents()
 
@@ -251,13 +235,11 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
 
       range.insertNode(fragment)
 
-      // Move cursor to end of pasted content
       range.collapse(false)
       const sel = window.getSelection()
       sel?.removeAllRanges()
       sel?.addRange(range)
 
-      // Normalize DOM, sync model, detect triggers
       normalizeEditorDOM(editor)
       const newSegments = readSegmentsFromDOM()
 
@@ -268,16 +250,11 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
         onChange(resolvedSegments)
         renderSegmentsToDOM(resolvedSegments)
 
-        // Notify about auto-resolved chips from pasted text
         for (const seg of resolvedSegments) {
           if (
             seg.type === 'chip' &&
             !newSegments.some(
-              (s) =>
-                s.type === 'chip' &&
-                s.trigger === seg.trigger &&
-                s.value === seg.value &&
-                s.displayText === seg.displayText,
+              (s) => s.type === 'chip' && s.trigger === seg.trigger && s.value === seg.value && s.displayText === seg.displayText,
             )
           ) {
             onChipAdd?.(seg)
@@ -307,23 +284,21 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
     ],
   )
 
-  // -----------------------------------------------------------------------
   // Copy: serialize chips into plain text
-  // -----------------------------------------------------------------------
 
   const handleCopy = useCallback((e: React.ClipboardEvent<HTMLDivElement>) => {
     e.preventDefault()
 
     const range = getSelectionRange()
-    if (!range) return
+    if (!range) {
+      return
+    }
 
     const fragment = range.cloneContents()
 
-    // Walk fragment and serialize, converting chips to their text representation
     const plainText = serializeFragmentToPlainText(fragment)
     e.clipboardData.setData('text/plain', plainText)
 
-    // Also serialize chip segments as JSON for internal paste
     const fragmentSegments = serializeFragmentToSegments(fragment)
     const hasChips = fragmentSegments.some((s) => s.type === 'chip')
     if (hasChips) {
@@ -334,18 +309,16 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
     }
   }, [])
 
-  // -----------------------------------------------------------------------
   // Cut: copy + delete
-  // -----------------------------------------------------------------------
 
   const handleCut = useCallback(
     (e: React.ClipboardEvent<HTMLDivElement>) => {
-      // First, do the copy
       handleCopy(e)
 
-      // Then delete the selection
       const range = getSelectionRange()
-      if (!range) return
+      if (!range) {
+        return
+      }
 
       const currentSegments = readSegmentsFromDOM()
       pushUndo(currentSegments)
@@ -364,9 +337,7 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
     [handleCopy, editorRef, readSegmentsFromDOM, onChange, pushUndo, runTriggerDetection],
   )
 
-  // -----------------------------------------------------------------------
   // Drag & Drop: prevent to avoid unpredictable DOM mutations
-  // -----------------------------------------------------------------------
 
   const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault()
@@ -376,9 +347,7 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
     e.preventDefault()
   }, [])
 
-  // -----------------------------------------------------------------------
   // IME Composition: track state, defer trigger detection
-  // -----------------------------------------------------------------------
 
   const handleCompositionStart = useCallback(() => {
     isComposing.current = true
@@ -386,46 +355,50 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
 
   const handleCompositionEnd = useCallback(() => {
     isComposing.current = false
-    // Run trigger detection after composition ends
     runTriggerDetection()
   }, [runTriggerDetection])
 
-  // -----------------------------------------------------------------------
   // Blur: dismiss trigger dropdown with delay (so popover clicks work)
-  // -----------------------------------------------------------------------
 
   const handleBlur = useCallback(() => {
     setTimeout(() => {
       const editor = editorRef.current
-      if (!editor) return
+      if (!editor) {
+        return
+      }
 
       // Only dismiss if focus didn't move to an element within the editor container
       const activeEl = document.activeElement
-      if (activeEl && editor.parentElement?.contains(activeEl)) return
+      if (activeEl && editor.parentElement?.contains(activeEl)) {
+        return
+      }
 
       dismissTrigger()
     }, BLUR_DELAY_MS)
   }, [editorRef, dismissTrigger])
 
-  // -----------------------------------------------------------------------
   // Undo/Redo: intercept Ctrl+Z / Ctrl+Shift+Z
-  // -----------------------------------------------------------------------
 
   const handleKeyDownForUndoRedo = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>): boolean => {
       const isMeta = e.metaKey || e.ctrlKey
 
-      if (!isMeta || e.key !== 'z') return false
+      if (!isMeta || e.key !== 'z') {
+        return false
+      }
 
       e.preventDefault()
       const state = undoState.current
 
       if (e.shiftKey) {
-        // Redo: Ctrl+Shift+Z
-        if (state.redoStack.length === 0) return true
+        if (state.redoStack.length === 0) {
+          return true
+        }
 
         const segments = state.redoStack.pop()
-        if (!segments) return true
+        if (!segments) {
+          return true
+        }
 
         const current = readSegmentsFromDOM()
         state.undoStack.push(current)
@@ -434,11 +407,14 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
         renderSegmentsToDOM(segments)
         onRedo?.(segments)
       } else {
-        // Undo: Ctrl+Z
-        if (state.undoStack.length === 0) return true
+        if (state.undoStack.length === 0) {
+          return true
+        }
 
         const segments = state.undoStack.pop()
-        if (!segments) return true
+        if (!segments) {
+          return true
+        }
 
         const current = readSegmentsFromDOM()
         state.redoStack.push(current)
@@ -453,18 +429,36 @@ export function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHand
     [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onUndo, onRedo],
   )
 
-  return {
-    handlePaste,
-    handleCopy,
-    handleCut,
-    handleDrop,
-    handleDragOver,
-    handleCompositionStart,
-    handleCompositionEnd,
-    handleBlur,
-    handleKeyDownForUndoRedo,
-    pushUndo,
-    resetUndoHistory,
-    isComposing,
-  }
+  // Memoized so the container is only as unstable as its members: the parent
+  // hook keys handleInput and the imperative handle on this object, and a fresh
+  // literal per render would re-create both on every render.
+  return useMemo(
+    () => ({
+      handlePaste,
+      handleCopy,
+      handleCut,
+      handleDrop,
+      handleDragOver,
+      handleCompositionStart,
+      handleCompositionEnd,
+      handleBlur,
+      handleKeyDownForUndoRedo,
+      pushUndo,
+      resetUndoHistory,
+      isComposing,
+    }),
+    [
+      handlePaste,
+      handleCopy,
+      handleCut,
+      handleDrop,
+      handleDragOver,
+      handleCompositionStart,
+      handleCompositionEnd,
+      handleBlur,
+      handleKeyDownForUndoRedo,
+      pushUndo,
+      resetUndoHistory,
+    ],
+  )
 }