{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "prompt-area", "title": "Prompt Area", "description": "A contentEditable rich text input with trigger-based chips (@mentions, /commands, #tags), inline markdown, undo/redo, and list auto-formatting.", "registryDependencies": [], "files": [ { "path": "packages/prompt-area/src/prompt-area/prompt-area.tsx", "content": "'use client'\n\nimport { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { cn } from '@/lib/utils'\nimport type { PromptAreaProps, PromptAreaHandle } from './types'\nimport { usePromptArea } from './use-prompt-area'\nimport { BLUR_DELAY_MS } from './use-prompt-area-events'\nimport { TriggerPopover } from './trigger-popover'\nimport { AnimatedPlaceholder } from './animated-placeholder'\nimport { ImageStrip } from './image-strip'\nimport { FileStrip } from './file-strip'\n\n/**\n * PromptArea - A lightweight rich text input with trigger support.\n *\n * Uses contentEditable to support inline chips (immutable pills) for\n * mentions, commands, and other triggered tokens. Each trigger character\n * can be configured to show a dropdown or fire a callback.\n *\n * @example\n * ```tsx\n * const [segments, setSegments] = useState([])\n *\n * \n * ```\n */\nexport function PromptArea({\n value,\n onChange,\n triggers,\n placeholder,\n className,\n disabled = false,\n markdown,\n markdownHeadings,\n normalizeBullets,\n onSubmit,\n onEscape,\n onChipClick,\n onChipAdd,\n onChipDelete,\n onLinkClick,\n onPaste,\n onUndo,\n onRedo,\n minHeight = 80,\n maxHeight,\n autoFocus = false,\n autoGrow = false,\n 'aria-label': ariaLabel,\n 'data-test-id': dataTestId,\n images = [],\n imagePosition = 'above',\n onImagePaste,\n onImageRemove,\n onImageClick,\n files = [],\n filePosition = 'above',\n onFileRemove,\n onFileClick,\n onKeyDown,\n onBlur,\n onRawPaste,\n submitOnEnter,\n spellCheck,\n maxLength,\n 'aria-describedby': ariaDescribedBy,\n ref,\n}: PromptAreaProps & { ref?: React.Ref }) {\n const {\n editorRef,\n activeTrigger,\n suggestions,\n suggestionsLoading,\n suggestionsError,\n selectedSuggestionIndex,\n handleInput,\n handleKeyDown,\n handleClick,\n handleMouseDown,\n selectSuggestion,\n dismissTrigger,\n handle,\n triggerRect,\n eventHandlers,\n } = usePromptArea({\n value,\n onChange,\n triggers,\n disabled,\n onSubmit,\n onEscape,\n onChipClick,\n onChipAdd,\n onChipDelete,\n onLinkClick,\n onPaste,\n onRawPaste,\n onUndo,\n onRedo,\n onImagePaste,\n markdown,\n markdownHeadings,\n normalizeBullets,\n submitOnEnter,\n maxLength,\n })\n\n // Expose imperative handle via ref\n useImperativeHandle(ref, () => handle, [handle])\n\n // Auto-focus on mount\n useEffect(() => {\n if (autoFocus) {\n editorRef.current?.focus()\n }\n }, [autoFocus, editorRef])\n\n // -----------------------------------------------------------------------\n // Auto-grow: expand on focus/input, shrink on blur\n // -----------------------------------------------------------------------\n\n const [isFocused, setIsFocused] = useState(false)\n const [editorHeight, setEditorHeight] = useState(undefined)\n\n const syncHeight = useCallback(() => {\n const el = editorRef.current\n if (!el) return\n // Temporarily set height to auto so scrollHeight reflects true content height\n el.style.height = 'auto'\n const contentHeight = el.scrollHeight\n el.style.height = `${contentHeight}px`\n setEditorHeight(contentHeight)\n }, [editorRef])\n\n // One height measurement per frame: the input handler and the value-change\n // effect both request a sync on every keystroke, and each measurement is a\n // forced reflow of the whole editor (the height:auto dance invalidates\n // layout, then scrollHeight reads it). Coalescing them into a single\n // pre-paint rAF callback halves the per-keystroke reflows without a\n // visible frame at a stale height.\n const heightRaf = useRef(null)\n const scheduleSyncHeight = useCallback(() => {\n if (heightRaf.current !== null) return\n heightRaf.current = requestAnimationFrame(() => {\n heightRaf.current = null\n syncHeight()\n })\n }, [syncHeight])\n\n useEffect(() => {\n return () => {\n if (heightRaf.current !== null) {\n cancelAnimationFrame(heightRaf.current)\n // Clear the guard too: StrictMode's dev double-mount runs this\n // cleanup and re-runs the effect on the same component instance, and\n // a stale id would latch scheduleSyncHeight closed forever.\n heightRaf.current = null\n }\n }\n }, [])\n\n const handleFocus = useCallback(() => {\n if (!autoGrow) return\n setIsFocused(true)\n syncHeight()\n }, [autoGrow, syncHeight])\n\n const handleBlurWithShrink = useCallback(() => {\n eventHandlers.onBlur()\n if (!autoGrow) return\n setTimeout(() => {\n const editor = editorRef.current\n if (!editor) return\n // Only shrink if focus truly left the component\n const activeEl = document.activeElement\n if (activeEl && editor.parentElement?.contains(activeEl)) return\n setIsFocused(false)\n setEditorHeight(undefined)\n }, BLUR_DELAY_MS)\n }, [eventHandlers, autoGrow, editorRef])\n\n const handleInputWithGrow = useCallback(() => {\n handleInput()\n if (autoGrow && isFocused) {\n scheduleSyncHeight()\n }\n }, [handleInput, autoGrow, isFocused, scheduleSyncHeight])\n\n // Re-measure on value changes (chip insertion, undo/redo, programmatic updates)\n useEffect(() => {\n if (autoGrow && isFocused) {\n scheduleSyncHeight()\n }\n }, [value, autoGrow, isFocused, scheduleSyncHeight])\n\n // -----------------------------------------------------------------------\n // Overflow indicator: detect when collapsed content is clipped\n // -----------------------------------------------------------------------\n\n const [hasOverflow, setHasOverflow] = useState(false)\n const overflowTimerRef = useRef | null>(null)\n\n useEffect(() => {\n if (!autoGrow) return\n\n const checkOverflow = () => {\n if (isFocused) {\n setHasOverflow(false)\n return\n }\n const el = editorRef.current\n if (!el) return\n setHasOverflow(el.scrollHeight > el.clientHeight)\n }\n\n // Delay the check so the CSS height transition (150ms) finishes first;\n // on initial mount there is no transition so the check still runs quickly.\n const delay = isFocused ? 0 : 160\n overflowTimerRef.current = setTimeout(checkOverflow, delay)\n return () => {\n if (overflowTimerRef.current !== null) {\n clearTimeout(overflowTimerRef.current)\n }\n }\n }, [autoGrow, isFocused, value, editorRef])\n\n // -----------------------------------------------------------------------\n // Compute editor style\n // -----------------------------------------------------------------------\n\n const editorStyle = useMemo((): React.CSSProperties => {\n if (!autoGrow) {\n const style: React.CSSProperties = { minHeight: `${minHeight}px` }\n if (maxHeight) {\n style.maxHeight = `${maxHeight}px`\n style.overflowY = 'auto'\n }\n return style\n }\n return {\n height: isFocused && editorHeight ? `${editorHeight}px` : `${minHeight}px`,\n minHeight: `${minHeight}px`,\n // Respect an explicit maxHeight; otherwise fall back to a viewport-relative\n // cap so the editor never grows past the screen.\n maxHeight: maxHeight ? `${maxHeight}px` : '70dvh',\n overflowY: isFocused ? 'auto' : 'hidden',\n // `min-height` is eased so consumers that animate it (e.g. the compact\n // prompt area's collapse/expand) morph smoothly instead of snapping.\n transition: 'height 150ms ease-out, min-height 240ms cubic-bezier(0.33, 1, 0.68, 1)',\n }\n }, [autoGrow, minHeight, maxHeight, isFocused, editorHeight])\n\n // Run a consumer's onKeyDown first; if it calls preventDefault, skip all of\n // PromptArea's built-in key handling (submit, trigger nav, etc.).\n const handleKeyDownCombined = useCallback(\n (e: React.KeyboardEvent) => {\n onKeyDown?.(e)\n if (e.defaultPrevented) return\n handleKeyDown(e)\n },\n [onKeyDown, handleKeyDown],\n )\n\n // Forward blur to the consumer (with relatedTarget) alongside the internal\n // trigger-dismiss / auto-grow-shrink handling.\n const handleBlurCombined = useCallback(\n (e: React.FocusEvent) => {\n onBlur?.(e)\n // handleBlurWithShrink already calls eventHandlers.onBlur() and only\n // shrinks when autoGrow is on, so it covers both modes.\n handleBlurWithShrink()\n },\n [onBlur, handleBlurWithShrink],\n )\n\n const isEmpty =\n value.length === 0 || (value.length === 1 && value[0].type === 'text' && value[0].text === '')\n\n const imageStrip =\n images.length > 0 ? (\n \n ) : null\n\n const fileStrip =\n files.length > 0 ? (\n \n ) : null\n\n // Typography (font-size/line-height) lives on the container, not the editor, so\n // it cascades to the editor AND the placeholder overlays — and a consumer can\n // override all three at once via `className` (e.g. `text-base leading-6`).\n return (\n
\n {imagePosition === 'above' && imageStrip}\n {filePosition === 'above' && fileStrip}\n\n {/* Editor + placeholder wrapper */}\n
\n \n\n {/* Overflow gradient indicator – visible when auto-grow is collapsed and content is clipped */}\n {autoGrow && hasOverflow && !isFocused && (\n editorRef.current?.focus()}>\n \n
\n )}\n\n {/* Placeholder overlay */}\n {isEmpty &&\n placeholder &&\n (Array.isArray(placeholder) ? (\n \n ) : (\n \n {placeholder}\n
\n ))}\n \n\n {filePosition === 'below' && fileStrip}\n {imagePosition === 'below' && imageStrip}\n\n {/* Trigger suggestion popover */}\n {activeTrigger && activeTrigger.config.mode === 'dropdown' && (\n \n )}\n \n )\n}\n", "type": "registry:component" }, { "path": "packages/prompt-area/src/prompt-area/trigger-popover.tsx", "content": "'use client'\n\nimport { useEffect, useRef } from 'react'\nimport { cn } from '@/lib/utils'\nimport type { TriggerSuggestion } from './types'\n\ntype TriggerPopoverProps = {\n suggestions: TriggerSuggestion[]\n loading: boolean\n error?: string | null\n emptyMessage?: string\n selectedIndex: number\n onSelect: (suggestion: TriggerSuggestion) => void\n onDismiss: () => void\n triggerRect: DOMRect | null\n triggerChar: string\n}\n\n// Single source of truth for the popover height: drives both the flip-above\n// calculation and the maxHeight style.\nconst POPOVER_MAX_HEIGHT = 240\n\n/**\n * Floating popover that displays trigger suggestions.\n * Positioned relative to the trigger character location in the editor.\n */\nexport function TriggerPopover({\n suggestions,\n loading,\n error,\n emptyMessage,\n selectedIndex,\n onSelect,\n onDismiss,\n triggerRect,\n triggerChar,\n}: TriggerPopoverProps) {\n const popoverRef = useRef(null)\n const selectedRef = useRef(null)\n\n // Scroll selected item into view\n useEffect(() => {\n selectedRef.current?.scrollIntoView({ block: 'nearest' })\n }, [selectedIndex])\n\n // Click outside to dismiss\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target\n if (popoverRef.current && target instanceof Node && !popoverRef.current.contains(target)) {\n onDismiss()\n }\n }\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }, [onDismiss])\n\n if (!triggerRect) return null\n if (suggestions.length === 0 && !loading && !error && !emptyMessage) return null\n\n // Position the popover relative to the trigger character, clamped to the\n // viewport. Flip above the trigger when there isn't enough room below, so the\n // suggestion list stays on-screen near the bottom edge.\n const popoverMaxWidth = Math.min(320, window.innerWidth - 16)\n const left = Math.min(triggerRect.left, window.innerWidth - popoverMaxWidth - 8)\n const spaceBelow = window.innerHeight - triggerRect.bottom\n const positionAbove = spaceBelow < POPOVER_MAX_HEIGHT && triggerRect.top > spaceBelow\n const style: React.CSSProperties = {\n position: 'fixed',\n left: `${Math.max(8, left)}px`,\n zIndex: 50,\n maxWidth: `${popoverMaxWidth}px`,\n maxHeight: `${POPOVER_MAX_HEIGHT}px`,\n ...(positionAbove\n ? { bottom: `${window.innerHeight - triggerRect.top + 4}px` }\n : { top: `${triggerRect.bottom + 4}px` }),\n }\n\n return (\n \n {loading ? (\n \n Loading suggestions...\n \n ) : error ? (\n
\n {error}\n
\n ) : suggestions.length === 0 && emptyMessage ? (\n \n {emptyMessage}\n \n ) : (\n suggestions.map((suggestion, index) => (\n {\n e.preventDefault() // Prevent blur on the editor\n onSelect(suggestion)\n }}>\n {suggestion.icon && {suggestion.icon}}\n
\n
{suggestion.label}
\n {suggestion.description && (\n
\n {suggestion.description}\n
\n )}\n
\n \n ))\n )}\n \n )\n}\n", "type": "registry:component" }, { "path": "packages/prompt-area/src/prompt-area/use-prompt-area.ts", "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport type {\n Segment,\n TriggerConfig,\n ActiveTrigger,\n TriggerSuggestion,\n ChipSegment,\n PromptAreaHandle,\n} from './types'\nimport {\n detectActiveTrigger,\n isValidTriggerPosition,\n segmentsToPlainText,\n plainTextToSegments,\n segmentsEqual,\n resolveChip,\n removeChipAtIndex,\n revertChipAtIndex,\n replaceTextRange,\n toggleMarkdownWrap,\n truncateSegmentsToLength,\n} from './prompt-area-engine'\nimport {\n getListContext,\n autoFormatListPrefix,\n insertListContinuation,\n indentListItem,\n outdentListItem,\n removeListPrefix,\n normalizeListPrefixes,\n renumberOrderedListSegments,\n remapOffset,\n hasOrderedListRun,\n isPlainLineEdit,\n} from './prompt-area-list-ops'\nimport {\n isHTMLElement,\n isChipElement,\n isLinkElement,\n isBRElement,\n isTextNode,\n chipNodeTextLength,\n chipNodeToSegment,\n getChipAutoResolved,\n getDirectChildContaining,\n indexOfChildNode,\n domChildIndexToSegmentIndex,\n normalizeEditorDOM,\n decorateEditor,\n stripDecorationsInRange,\n safeJsonStringify,\n getSelectionRange,\n} from './dom-helpers'\nimport type { DecorateBounds } from './dom-helpers'\nimport {\n getCursorOffset,\n setCursorAtOffset,\n createRangeAtOffset,\n getSelectionOffsets,\n setSelectionAtOffsets,\n caretLineRect,\n findDOMPosition,\n getTextOffsetAtPoint,\n nodeTextContribution,\n} from './cursor-helpers'\nimport { usePromptAreaEvents } from './use-prompt-area-events'\nimport { useTriggerSearch } from './use-trigger-search'\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype UsePromptAreaOptions = {\n value: Segment[]\n onChange: (segments: Segment[]) => void\n triggers?: TriggerConfig[]\n disabled?: boolean\n onSubmit?: (segments: Segment[]) => void\n onEscape?: () => void\n onChipClick?: (chip: ChipSegment) => void\n onChipAdd?: (chip: ChipSegment) => void\n onChipDelete?: (chip: ChipSegment) => void\n onLinkClick?: (url: string) => void\n onPaste?: (data: { segments: Segment[]; source: 'internal' | 'external' }) => void\n onRawPaste?: (e: React.ClipboardEvent) => void\n onUndo?: (segments: Segment[]) => void\n onRedo?: (segments: Segment[]) => void\n onImagePaste?: (file: File) => void\n markdown?: boolean\n markdownHeadings?: boolean\n normalizeBullets?: boolean\n submitOnEnter?: boolean\n maxLength?: number\n}\n\ntype UsePromptAreaReturn = {\n editorRef: React.RefObject\n activeTrigger: ActiveTrigger | null\n suggestions: TriggerSuggestion[]\n suggestionsLoading: boolean\n suggestionsError: string | null\n selectedSuggestionIndex: number\n handleInput: () => void\n handleKeyDown: (e: React.KeyboardEvent) => void\n handleClick: (e: React.MouseEvent) => void\n handleMouseDown: (e: React.MouseEvent) => void\n selectSuggestion: (suggestion: TriggerSuggestion) => void\n dismissTrigger: () => void\n handle: PromptAreaHandle\n triggerRect: DOMRect | null\n eventHandlers: {\n onPaste: (e: React.ClipboardEvent) => void\n onCopy: (e: React.ClipboardEvent) => void\n onCut: (e: React.ClipboardEvent) => void\n onDrop: (e: React.DragEvent) => void\n onDragOver: (e: React.DragEvent) => void\n onCompositionStart: () => void\n onCompositionEnd: () => void\n onBlur: () => void\n }\n}\n\n/** Debounce interval for grouping typed characters into a single undo snapshot */\nconst UNDO_DEBOUNCE_MS = 300\n\n// ---------------------------------------------------------------------------\n// Single-pass editor scan (typing hot path)\n// ---------------------------------------------------------------------------\n\nexport type EditorScan = {\n segments: Segment[]\n plainText: string\n /**\n * A direct child the scan cannot model: a block wrapper (div/p) or an\n * unknown inline element. Those change the plain text when unwrapped, so\n * the caller must fall back to `normalizeEditorDOM` + `readSegmentsFromDOM`.\n */\n sawForeignElement: boolean\n /**\n * Some text run contains a literal newline. Our own render paths only ever\n * represent newlines as `
`, so this flags DOM states where `
`-based\n * line scoping cannot be trusted.\n */\n sawNewlineInText: boolean\n /**\n * Plain-text offset of the caret, when a `selection` was handed to the scan\n * and it resolves inside the editor — otherwise null. Identical to what\n * `getCursorOffset(editor)` returns for the same DOM and selection; folding\n * it into this pass is what keeps a keystroke from walking the document\n * twice.\n */\n cursorOffset: number | null\n}\n\n/** A DOM boundary point for {@link scanEditorDOM} to resolve into an offset. */\nexport type ScanSelection = { node: Node; offset: number }\n\n/**\n * Offset of `point` from the start of the editor direct child `child` that\n * holds it, under getTextOffsetAtPoint's rules: a chip is atomic (a boundary\n * anywhere inside counts the whole chip), and a non-HTML subtree (svg,\n * MathML) maps to its own start because the root walk never descends into it.\n */\nfunction caretOffsetWithinChild(child: Node, point: ScanSelection): number {\n if (isChipElement(child)) return chipNodeTextLength(child)\n if (isTextNode(child) || isHTMLElement(child)) {\n return getTextOffsetAtPoint(child, point.node, point.offset) ?? 0\n }\n return 0\n}\n\n/**\n * Reads the editor's direct children into the segment model in one pass,\n * producing exactly what `normalizeEditorDOM(editor)` followed by\n * `readSegmentsFromDOM()` produces — without mutating the DOM and without\n * a second serialization for the plain text.\n *\n * Decoration elements (the markdown/bullet/indent/heading ``s\n * and URL ``s) contribute their textContent to the surrounding\n * text run, mirroring how `normalizeEditorDOM` inlines them to text nodes and\n * `editor.normalize()` merges the results. Chips and `
`s break runs the\n * same way real elements break `editor.normalize()`'s merging.\n */\nexport function scanEditorDOM(editor: HTMLElement, selection?: ScanSelection | null): EditorScan {\n const segments: Segment[] = []\n let plainText = ''\n let buffer = ''\n let hasRealContent = false\n let hasSentinel = false\n let sawForeignElement = false\n let sawNewlineInText = false\n\n // Caret resolution, folded into the same walk. `consumed` is the offset\n // length of everything already passed, counted by nodeTextContribution's\n // rules (which getTextOffsetAtPoint uses for the prefix) rather than by\n // plainText's — the two differ only on a malformed chip, and matching the\n // offset rules is what keeps this identical to getCursorOffset.\n let cursorOffset: number | null = null\n let consumed = 0\n // The direct child holding the caret, or — when the selection is anchored on\n // the editor itself — the child index the caret sits before.\n let caretDirect: Node | null = null\n let caretChildIndex = -1\n if (selection && editor.contains(selection.node)) {\n if (selection.node === editor) {\n caretChildIndex = Math.min(selection.offset, editor.childNodes.length)\n } else {\n caretDirect = getDirectChildContaining(editor, selection.node)\n }\n }\n\n const flushBuffer = (): void => {\n if (!buffer) return\n segments.push({ type: 'text', text: buffer })\n plainText += buffer\n hasRealContent = true\n buffer = ''\n }\n\n let childIndex = 0\n for (let node = editor.firstChild; node !== null; node = node.nextSibling, childIndex++) {\n if (childIndex === caretChildIndex) cursorOffset = consumed\n if (selection && node === caretDirect) {\n cursorOffset = consumed + caretOffsetWithinChild(node, selection)\n }\n // One counting rule for the caret prefix, shared with getCursorOffset's\n // walk, so the two can never drift apart per node type.\n consumed += nodeTextContribution(node)\n\n if (isTextNode(node)) {\n const text = node.data\n if (text) {\n if (text.includes('\\n')) sawNewlineInText = true\n buffer += text\n }\n } else if (isChipElement(node)) {\n // A chip breaks the text run even when malformed (chipNodeToSegment\n // null): normalize skips chip elements, so the element still separates\n // its neighboring text nodes.\n flushBuffer()\n const chip = chipNodeToSegment(node)\n if (chip) {\n segments.push(chip)\n plainText += `${chip.trigger}${chip.displayText}`\n hasRealContent = true\n }\n } else if (isBRElement(node)) {\n flushBuffer()\n if (node.getAttribute('data-sentinel')) {\n hasSentinel = true\n } else {\n segments.push({ type: 'text', text: '\\n' })\n plainText += '\\n'\n }\n } else if (\n isHTMLElement(node) &&\n ((node.tagName === 'SPAN' && node.hasAttribute('data-md')) || isLinkElement(node))\n ) {\n const text = node.textContent ?? ''\n if (text) {\n if (text.includes('\\n')) sawNewlineInText = true\n buffer += text\n }\n } else {\n sawForeignElement = true\n }\n }\n if (childIndex === caretChildIndex) cursorOffset = consumed\n flushBuffer()\n\n // Same emptiness rule as readSegmentsFromDOM: without real content or our\n // sentinel, any
s present are the browser's filler for an emptied\n // editor and must not read back as newline content.\n if (!hasRealContent && !hasSentinel) {\n return { segments: [], plainText: '', sawForeignElement, sawNewlineInText, cursorOffset }\n }\n\n return { segments, plainText, sawForeignElement, sawNewlineInText, cursorOffset }\n}\n\n/**\n * The `
`-delimited line around a caret boundary point, as exclusive\n * {@link DecorateBounds} over the editor's flat child list. This is the range\n * a native single-caret edit can have touched: typing lands in one line, and\n * a deletion that merged lines leaves all mutated content on the caret's\n * single merged line. Returns null when the container isn't anchored in the\n * editor's direct-child structure.\n */\nexport function findLineBounds(\n editor: HTMLElement,\n container: Node,\n offset: number,\n): DecorateBounds | null {\n let leftFrom: Node | null\n let rightFrom: Node | null\n\n if (container === editor) {\n const index = Math.min(offset, editor.childNodes.length)\n leftFrom = index > 0 ? editor.childNodes[index - 1] : null\n rightFrom = index < editor.childNodes.length ? editor.childNodes[index] : null\n } else {\n const direct = getDirectChildContaining(editor, container)\n if (!direct) return null\n leftFrom = direct.previousSibling\n rightFrom = direct\n }\n\n let after: Node | null = null\n for (let node = leftFrom; node; node = node.previousSibling) {\n if (isBRElement(node)) {\n after = node\n break\n }\n }\n\n let before: Node | null = null\n for (let node = rightFrom; node; node = node.nextSibling) {\n if (isBRElement(node)) {\n before = node\n break\n }\n }\n\n return { after, before }\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function usePromptArea({\n value,\n onChange,\n triggers = [],\n disabled = false,\n onSubmit,\n onEscape,\n onChipClick,\n onChipAdd,\n onChipDelete,\n onLinkClick,\n onPaste,\n onRawPaste,\n onUndo,\n onRedo,\n onImagePaste,\n markdown: markdownEnabled = true,\n markdownHeadings: headingsEnabled = false,\n normalizeBullets = true,\n submitOnEnter = true,\n maxLength,\n}: UsePromptAreaOptions): UsePromptAreaReturn {\n const editorRef = useRef(null)\n const [activeTrigger, setActiveTrigger] = useState(null)\n const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(0)\n const [triggerRect, setTriggerRect] = useState(null)\n\n // Chip whose dropdown was reopened via `reopenOnChipClick`. While set, the\n // active dropdown edits this chip in place instead of resolving typed text.\n // Cleared on dismiss and by any fresh trigger detection (typing).\n //\n // `segIndex` is the segment index at CLICK time (computed from the live DOM,\n // so it's always accurate then) — deliberately not the DOM node itself,\n // which can detach if `renderSegmentsToDOM` re-renders while the dropdown is\n // open (external value update, undo/redo). At selection time we re-verify\n // this index still holds the same chip and fall back to a trigger+value\n // search if the model shifted underneath, instead of silently no-op'ing.\n const editingChip = useRef<{ chip: ChipSegment; segIndex: number } | null>(null)\n\n // The DOM node of the chip currently being edited via `reopenOnChipClick`,\n // kept in lockstep with `editingChip`/`activeTrigger` (set when opened,\n // cleared by `dismissTrigger`). Used only to answer \"is THIS exact chip\n // element the one whose dropdown is open right now\" by reference identity —\n // never by trigger+value, which can't distinguish two chips that happen to\n // share the same value.\n const openChipNode = useRef(null)\n\n // Set by `handleMouseDown` to the chip node a mousedown landed on, but only\n // when that node === `openChipNode.current` at that instant; read and\n // cleared by the following `handleClick` to distinguish \"reopen\" from\n // \"toggle closed\" for that one click. A real `onMouseDown` (bubble-phase,\n // attached to the editor root) is used instead of piggybacking on\n // `dismissTrigger` because DOM bubbling reaches the editor root before it\n // reaches `document` (where TriggerPopover's outside-click dismiss listens),\n // so this always observes `openChipNode` before that dismiss clears it —\n // and unlike a `dismissTrigger`-driven flag, it is scoped to mousedowns on\n // this exact node, so Escape/blur/an unrelated dismiss can never poison a\n // later, unrelated click on the same chip.\n const suppressReopenChip = useRef(null)\n\n const {\n suggestions,\n suggestionsLoading,\n suggestionsError,\n search: runSearch,\n reset: resetSearch,\n } = useTriggerSearch()\n\n // Guard against circular DOM <-> model syncs\n const isSyncing = useRef(false)\n const lastRenderedValue = useRef([])\n\n // The last model handleInput's ordered-list check settled (renumbered, or\n // proven run-free), with its plain text. Keyed on the segments reference:\n // any other path that writes lastRenderedValue (external value, paste,\n // Enter/Tab, truncation) leaves a different array behind, which invalidates\n // this without every such path having to know about it.\n const settledListRun = useRef<{ segments: Segment[]; plainText: string } | null>(null)\n\n // IME-composed input skips the decoration cycle entirely (mutating the DOM\n // mid-composition breaks the composition), so the composed line is stale\n // until a decorate reaches it. The baseline repaired it because the next\n // keystroke re-decorated the whole document; with line scoping, this flag\n // forces that next decorate to be a full pass wherever the caret is.\n const imeDirty = useRef(false)\n\n // Debounced undo: groups consecutive keystrokes into a single undo snapshot\n const undoTimer = useRef | null>(null)\n const undoBaseState = useRef(null)\n // Undo base for the IME session in flight: the segments as they were when\n // the composition began. Written at compositionstart (from the DOM) and by\n // the value-sync effect when an external value lands mid-composition; read\n // and cleared at compositionend, where it becomes the session's single undo\n // entry and seeds postCompositionUndo below; dropped on blur, since an\n // interrupted composition may never get its compositionend.\n const compositionBaseState = useRef(null)\n // After compositionend, Chromium can fire one more non-composing input\n // event carrying the committed mutation. That event belongs to the\n // composition that just ended, not to a new typing session: this ref hands\n // the composition's undo base (and whether compositionend already pushed\n // it) to handleInput so the trailing event folds into the same single undo\n // entry instead of seeding a second one. Set at compositionend and consumed\n // by the next non-composing input; revoked by any real keydown, a new\n // compositionstart, a blur, an external value render, or a mousedown — each\n // means the next input cannot be the composition's trailing event.\n const postCompositionUndo = useRef<{ base: Segment[]; pushed: boolean } | null>(null)\n\n // -----------------------------------------------------------------------\n // DOM -> Model: read segments from the contentEditable DOM\n // -----------------------------------------------------------------------\n\n const readSegmentsFromDOM = useCallback((): Segment[] => {\n const editor = editorRef.current\n if (!editor) return []\n\n const segments: Segment[] = []\n // Track whether the editor holds any real content (text/chip) or a sentinel\n //
that renderSegmentsToDOM added. When it holds neither, any
nodes\n // present are the browser's filler
(see the empty-editor check below).\n let hasRealContent = false\n let hasSentinel = false\n\n for (let i = 0; i < editor.childNodes.length; i++) {\n const node = editor.childNodes[i]\n\n if (node.nodeType === Node.TEXT_NODE) {\n const text = node.textContent ?? ''\n if (text) {\n segments.push({ type: 'text', text })\n hasRealContent = true\n }\n } else if (isChipElement(node)) {\n const chip = chipNodeToSegment(node)\n if (chip) {\n segments.push(chip)\n hasRealContent = true\n }\n } else if (isBRElement(node)) {\n if (node.dataset.sentinel) {\n hasSentinel = true\n continue // skip sentinel
\n }\n segments.push({ type: 'text', text: '\\n' })\n } else if (isHTMLElement(node)) {\n // Unknown element — extract text content\n const text = node.textContent ?? ''\n if (text) {\n segments.push({ type: 'text', text })\n hasRealContent = true\n }\n }\n }\n\n // When the user empties the editor (types something, then deletes it all),\n // the browser leaves a lone filler
so the contentEditable block stays\n // visible and focusable. Reading that
as a \"\\n\" text segment would make\n // `value` permanently non-empty and keep the placeholder hidden forever.\n // A newline we actually rendered always carries surrounding text/chip\n // content or a trailing sentinel
, so when neither is present the only\n //
nodes are filler and the editor is genuinely empty.\n if (!hasRealContent && !hasSentinel) return []\n\n return segments\n }, [])\n\n // -----------------------------------------------------------------------\n // Model -> DOM: render segments into the contentEditable div\n // -----------------------------------------------------------------------\n\n const renderSegmentsToDOM = useCallback(\n (segments: Segment[]) => {\n const editor = editorRef.current\n if (!editor) return\n\n isSyncing.current = true\n\n // Save the caret as a plain-text offset, never as a child-node index:\n // the rebuild below ends with `decorateEditor`, whose passes each swap\n // one text node for a text//text run, so the editor holds a\n // different number of direct children than when the caret was captured.\n // An index would land wherever that shifted count points (mid-document\n // after a decoration-heavy paste); an offset survives because\n // findDOMPosition maps it back through the decorations.\n const savedCursor = getCursorOffset(editor)\n const savedScrollTop = editor.scrollTop\n\n // Clear DOM safely (no innerHTML assignment)\n while (editor.firstChild) {\n editor.removeChild(editor.firstChild)\n }\n\n for (const seg of segments) {\n if (seg.type === 'text') {\n const lines = seg.text.split('\\n')\n for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {\n if (lines[lineIdx]) {\n editor.appendChild(document.createTextNode(lines[lineIdx]))\n }\n if (lineIdx < lines.length - 1) {\n editor.appendChild(document.createElement('br'))\n }\n }\n } else {\n // Render chip as non-editable span\n const chip = document.createElement('span')\n chip.contentEditable = 'false'\n chip.dataset.chipTrigger = seg.trigger\n chip.dataset.chipValue = seg.value\n chip.dataset.chipDisplay = seg.displayText\n if (seg.data !== undefined) {\n const json = safeJsonStringify(seg.data)\n if (json) {\n chip.dataset.chipData = json\n }\n }\n if (seg.autoResolved) {\n chip.dataset.chipAutoResolved = 'true'\n }\n const triggerConfig = triggers.find((t) => t.char === seg.trigger)\n const chipStyle = triggerConfig?.chipStyle ?? 'pill'\n chip.dataset.chipStyle = chipStyle\n chip.className = cn(\n 'prompt-area-chip',\n chipStyle === 'inline' && 'prompt-area-chip--inline',\n triggerConfig?.chipClassName,\n )\n chip.textContent = `${seg.trigger}${seg.displayText}`\n chip.setAttribute('role', 'button')\n chip.setAttribute('tabindex', '-1')\n editor.appendChild(chip)\n }\n }\n\n // Append sentinel
so trailing newlines are visible in contentEditable\n if (editor.lastChild && isBRElement(editor.lastChild)) {\n const sentinel = document.createElement('br')\n sentinel.dataset.sentinel = 'true'\n editor.appendChild(sentinel)\n }\n\n // Decorate URLs, markdown formatting, and list bullets in text nodes\n decorateEditor(editor, markdownEnabled, headingsEnabled)\n imeDirty.current = false\n\n // The child-clear above collapsed scrollHeight, which clamped scrollTop\n // to 0. Put the viewport back before the caret restore so an in-view\n // caret keeps its screen position (the restore then only nudges when\n // the caret genuinely left the box) — and so re-renders without a\n // selection to follow (blurred editor, external value updates) don't\n // silently reset the user's scroll.\n editor.scrollTop = savedScrollTop\n\n // `!== null` — offset 0 is a real caret position, and would be falsy.\n if (savedCursor !== null) {\n setCursorAtOffset(editor, savedCursor)\n }\n\n lastRenderedValue.current = segments\n isSyncing.current = false\n },\n [triggers, markdownEnabled, headingsEnabled],\n )\n\n // -----------------------------------------------------------------------\n // Trigger detection (extracted so events module can call it)\n // -----------------------------------------------------------------------\n\n // Builds the insertChip handed to callback/launch activations: replaces the\n // trigger's range with a chip and notifies onChipAdd.\n const buildInsertChip = useCallback(\n (segments: Segment[], trigger: ActiveTrigger) => (chip: Omit) => {\n const chipResult = resolveChip(segments, trigger, {\n value: chip.value,\n displayText: chip.displayText,\n data: chip.data,\n })\n onChange(chipResult.segments)\n renderSegmentsToDOM(chipResult.segments)\n onChipAdd?.({\n type: 'chip',\n trigger: trigger.config.char,\n value: chip.value,\n displayText: chip.displayText,\n ...(chip.data !== undefined ? { data: chip.data } : {}),\n })\n const editor = editorRef.current\n if (editor) setCursorAtOffset(editor, chipResult.cursorOffset)\n },\n [onChange, renderSegmentsToDOM, onChipAdd],\n )\n\n const runTriggerDetection = useCallback(\n // The typing hot path passes the segments/plainText/cursor it already\n // computed; zero-arg callers (paste, chip ops, composition end) let the\n // detection read the DOM itself.\n (ctx?: { segments: Segment[]; plainText: string; cursorPos: number | null }) => {\n const editor = editorRef.current\n if (!editor) return\n\n const segments = ctx ? ctx.segments : readSegmentsFromDOM()\n const plainText = ctx ? ctx.plainText : segmentsToPlainText(segments)\n const cursorPos = ctx ? ctx.cursorPos : getCursorOffset(editor)\n\n if (cursorPos === null) return\n\n const detected = detectActiveTrigger(plainText, cursorPos, triggers)\n\n // Typing supersedes a chip-click dropdown: whichever branch we take next,\n // the popover no longer edits the clicked chip.\n editingChip.current = null\n openChipNode.current = null\n\n if (detected) {\n setActiveTrigger(detected)\n setSelectedSuggestionIndex(0)\n\n // Position the popover at the trigger character, not the cursor.\n // Build a range at detected.startOffset so the dropdown anchors to\n // the trigger char even when the cursor has moved past it.\n const triggerRange = createRangeAtOffset(editor, detected.startOffset)\n if (triggerRange) {\n // caretLineRect measures element-boundary positions too (a trigger\n // typed right after a chip or
), so the popover anchors at the\n // real trigger position instead of skipping the update. It returns\n // null only when no geometry exists at all (jsdom) — keep the last\n // valid rect rather than anchoring at the origin.\n const rect = caretLineRect(triggerRange)\n if (rect) {\n setTriggerRect(rect)\n }\n }\n\n // Fetch suggestions for dropdown mode\n if (detected.config.mode === 'dropdown' && detected.config.onSearch) {\n runSearch(detected.query, detected.config)\n }\n\n // Fire callback for callback mode\n if (detected.config.mode === 'callback' && detected.config.onActivate) {\n detected.config.onActivate({\n text: plainText,\n cursorPosition: cursorPos,\n insertChip: buildInsertChip(segments, detected),\n })\n }\n } else {\n setActiveTrigger(null)\n resetSearch()\n }\n },\n [triggers, readSegmentsFromDOM, buildInsertChip, resetSearch, runSearch],\n )\n\n // -----------------------------------------------------------------------\n // Dismiss trigger\n // -----------------------------------------------------------------------\n\n const dismissTrigger = useCallback(() => {\n editingChip.current = null\n openChipNode.current = null\n setActiveTrigger(null)\n setSelectedSuggestionIndex(0)\n resetSearch()\n }, [resetSearch])\n\n // -----------------------------------------------------------------------\n // Wire up edge-case event handlers\n // -----------------------------------------------------------------------\n\n const events = usePromptAreaEvents({\n editorRef,\n readSegmentsFromDOM,\n onChange,\n renderSegmentsToDOM,\n runTriggerDetection,\n dismissTrigger,\n triggers,\n markdownEnabled,\n normalizeBullets,\n onPaste,\n onRawPaste,\n onUndo,\n onRedo,\n onChipAdd,\n onImagePaste,\n })\n\n // -----------------------------------------------------------------------\n // Sync value prop -> DOM on external changes\n // -----------------------------------------------------------------------\n\n useEffect(() => {\n if (isSyncing.current) return\n if (segmentsEqual(value, lastRenderedValue.current)) return\n\n // Normalize list prefixes (e.g., \"- \" → \"• \" when markdown is on)\n // so externally-provided segments render bullet characters correctly.\n if (markdownEnabled && normalizeBullets) {\n const normalized = normalizeListPrefixes(value, true)\n if (normalized !== value) {\n onChange(normalized)\n return // onChange will trigger a re-render with the normalized value\n }\n }\n\n renderSegmentsToDOM(value)\n // An authoritative external render invalidates the trailing-input handoff:\n // the next input edits this value, not the ended composition's commit.\n postCompositionUndo.current = null\n if (events.isComposing.current) compositionBaseState.current = value\n // eslint-disable-next-line react-hooks/exhaustive-deps -- events.isComposing is a ref: identity-stable, and .current reads must not re-run the effect\n }, [value, renderSegmentsToDOM, markdownEnabled, normalizeBullets, onChange])\n\n // Re-render when markdown mode changes to apply/strip decorations\n // Also convert bullet characters: • ↔ - in text segments\n const prevMarkdown = useRef(markdownEnabled)\n useEffect(() => {\n if (prevMarkdown.current === markdownEnabled) return\n prevMarkdown.current = markdownEnabled\n\n const converted = normalizeBullets ? normalizeListPrefixes(value, markdownEnabled) : value\n if (converted !== value) {\n onChange(converted)\n } else {\n renderSegmentsToDOM(value)\n }\n }, [markdownEnabled, normalizeBullets, renderSegmentsToDOM, value, onChange])\n\n // Clean up undo debounce timer on unmount\n useEffect(() => {\n return () => {\n if (undoTimer.current) clearTimeout(undoTimer.current)\n }\n }, [])\n\n // -----------------------------------------------------------------------\n // Handle input events\n // -----------------------------------------------------------------------\n\n const handleInput = useCallback(() => {\n if (isSyncing.current) return\n\n // During IME composition, sync model but skip trigger detection\n if (events.isComposing.current) {\n imeDirty.current = true\n const segments = readSegmentsFromDOM()\n lastRenderedValue.current = segments\n onChange(segments)\n return\n }\n\n // A just-ended composition claims this one input event (the trailing\n // input Chromium fires after compositionend), so detach the claim here,\n // ahead of every early return below: whichever branch ends up handling\n // this event owes the composition its undo entry, and no later unrelated\n // input may inherit the claim.\n const afterComposition = postCompositionUndo.current\n postCompositionUndo.current = null\n\n // The branches that return early still have to settle that claim: push\n // the base when compositionend did not already and the content really\n // moved away from it. The base was read by readSegmentsFromDOM, which\n // splits decoration elements into their own segments where the scanner\n // merges them, so identical content compares equal only as plain text.\n const settleClaimedUndo = (finalText: string) => {\n if (!afterComposition || afterComposition.pushed) return\n if (segmentsToPlainText(afterComposition.base) !== finalText) {\n events.pushUndo(afterComposition.base)\n }\n }\n\n const editor = editorRef.current\n\n // One snapshot of the selection, read BEFORE any DOM mutation below —\n // stripping the decoration elements detaches the selection's anchor node\n // and would lose the position. The scan resolves it into an offset and the\n // scoped-decoration branch reuses the same boundary point, so a keystroke\n // reads the selection once.\n const selRange = editor ? getSelectionRange() : null\n\n // One scan produces the segment model, the plain text, and the caret\n // offset every branch below needs. Only when the browser inserted an\n // element the scan cannot model (a block wrapper, an unknown inline tag)\n // does the legacy normalize-then-read path run — it rewrites the DOM to\n // the flat shape first, because unwrapping those elements changes the\n // plain text.\n let segments: Segment[] = []\n let plainText = ''\n let savedCursorOffset: number | null = null\n let domNormalized = false\n // Line scoping is only trustworthy when the DOM holds nothing but our own\n // flat shapes and every newline is a real
(a literal \"\\n\" inside a\n // text node would put line content out of the caret line's node range).\n let scopedEligible = false\n if (editor) {\n const scan = scanEditorDOM(\n editor,\n selRange ? { node: selRange.startContainer, offset: selRange.startOffset } : null,\n )\n savedCursorOffset = scan.cursorOffset\n if (scan.sawForeignElement) {\n normalizeEditorDOM(editor)\n domNormalized = true\n segments = readSegmentsFromDOM()\n plainText = segmentsToPlainText(segments)\n } else {\n segments = scan.segments\n plainText = scan.plainText\n scopedEligible = !scan.sawNewlineInText\n }\n }\n\n // Enforce maxLength: if the edit pushed the editor past the cap, truncate\n // back to maxLength characters and keep the caret where the user was\n // editing (clamped to the cap) rather than forcing it to the end. On the\n // clean-scan path the selection hasn't moved since savedCursorOffset was\n // captured, so re-reading it would return the same offset; after the\n // foreign-element normalize, the DOM (and possibly the text, via block\n // unwrapping) changed, so measure the caret fresh — as the pre-scan\n // implementation did.\n if (maxLength != null && editor && plainText.length > maxLength) {\n const caret = domNormalized ? getCursorOffset(editor) : savedCursorOffset\n const truncated = truncateSegmentsToLength(segments, maxLength)\n const truncatedText = segmentsToPlainText(truncated)\n settleClaimedUndo(truncatedText)\n lastRenderedValue.current = truncated\n onChange(truncated)\n renderSegmentsToDOM(truncated)\n const clamped = caret != null ? Math.min(caret, maxLength) : maxLength\n setCursorAtOffset(editor, clamped)\n runTriggerDetection({\n segments: truncated,\n plainText: truncatedText,\n cursorPos: clamped,\n })\n return\n }\n\n // Check for list auto-formatting (e.g., \"- \" -> \"bullet \")\n if (markdownEnabled && normalizeBullets && editor && savedCursorOffset !== null) {\n const formatted = autoFormatListPrefix(segments, savedCursorOffset, plainText)\n if (formatted) {\n const formattedText = segmentsToPlainText(formatted.segments)\n settleClaimedUndo(formattedText)\n lastRenderedValue.current = formatted.segments\n onChange(formatted.segments)\n renderSegmentsToDOM(formatted.segments)\n setCursorAtOffset(editor, formatted.cursorOffset)\n runTriggerDetection({\n segments: formatted.segments,\n plainText: formattedText,\n cursorPos: formatted.cursorOffset,\n })\n return\n }\n }\n\n // Native structural edits (e.g. a Backspace that deleted or merged a list\n // row) bypass applyEditResult, so rebuild ordered-list numbering here too.\n // handleInput fires on every keystroke, so gate on a genuine ordered-list\n // run — this renumbers a real list (1,2,4 → 1,2,3) but leaves incidental\n // numeric prose (\"1985. Born / 2020. Died\") untouched.\n let nextSegments = segments\n let nextPlainText = plainText\n let renumberedCursor: number | null = null\n if (markdownEnabled && savedCursorOffset !== null) {\n // A keystroke on a plain line of an already-settled model cannot have\n // changed the list structure, so the per-line scan of the whole\n // document is skipped: a settled model with no run stays run-free, and\n // a settled model with a run is already numbered.\n const settled = settledListRun.current\n const structureUnchanged =\n settled !== null &&\n settled.segments === lastRenderedValue.current &&\n isPlainLineEdit(settled.plainText, plainText, savedCursorOffset)\n if (!structureUnchanged && hasOrderedListRun(plainText)) {\n const renumbered = renumberOrderedListSegments(segments, plainText)\n if (renumbered.edits.length > 0) {\n nextSegments = renumbered.segments\n nextPlainText = segmentsToPlainText(renumbered.segments)\n renumberedCursor = remapOffset(savedCursorOffset, renumbered.edits)\n }\n }\n }\n\n // Debounced undo: capture the pre-edit state at the start of a typing\n // session and push it to the undo stack after UNDO_DEBOUNCE_MS of idle.\n const contentChanged = !segmentsEqual(nextSegments, lastRenderedValue.current)\n\n // The mutation a claimed event carries is part of the composition that\n // just ended, so it must not open a new undo group seeded with the\n // intermediate compositionend snapshot — the composition's own base is\n // the only entry this session gets.\n if (afterComposition) {\n if (!afterComposition.pushed && contentChanged) {\n events.pushUndo(afterComposition.base)\n }\n } else if (contentChanged) {\n if (!undoBaseState.current) undoBaseState.current = lastRenderedValue.current\n if (undoTimer.current) clearTimeout(undoTimer.current)\n undoTimer.current = setTimeout(() => {\n if (undoBaseState.current) {\n events.pushUndo(undoBaseState.current)\n undoBaseState.current = null\n }\n undoTimer.current = null\n }, UNDO_DEBOUNCE_MS)\n }\n\n lastRenderedValue.current = nextSegments\n settledListRun.current =\n markdownEnabled && savedCursorOffset !== null\n ? { segments: nextSegments, plainText: nextPlainText }\n : null\n if (contentChanged) onChange(nextSegments)\n\n // Apply the recomputed model to the DOM. A renumber rewrites text nodes,\n // so it needs a full re-render (which also re-decorates). Otherwise the\n // decoration cycle — strip stale decorations, re-apply fresh ones — runs\n // scoped to the caret's
-delimited line: a native single-caret edit\n // can only have touched that line, and every decoration is line-local, so\n // the other lines' decorations are still exactly what a full pass would\n // produce. Anything that makes the scope uncertain (foreign elements,\n // literal newlines in text, no collapsed in-editor selection) falls back\n // to the full normalize + decorate.\n let finalCursor = savedCursorOffset\n if (editor) {\n if (renumberedCursor !== null) {\n renderSegmentsToDOM(nextSegments)\n setCursorAtOffset(editor, renumberedCursor)\n finalCursor = renumberedCursor\n } else {\n let scoped = false\n // Whether the caret still has to be re-established. The browser\n // already left it at savedCursorOffset when it applied the native\n // edit, so the restore is only load-bearing when the decoration cycle\n // replaced the nodes it was anchored in — and it is not free: it walks\n // the document to map the offset back to a node, then hands the engine\n // a new selection range, both of which cost O(document).\n //\n // Skipping is only provably identical when the caret sits in a text\n // node: the offset then maps back to that same node at that same\n // offset. Any other anchor (inside a chip, at an element boundary)\n // can resolve to a different-but-equivalent spot, and re-placing it is\n // what normalizes that — so those keep the restore. A caret inside a\n // decoration is covered too: every decoration on the caret's line is\n // stripped below, which reports a mutation.\n let needsCaretRestore = true\n if (scopedEligible && !imeDirty.current) {\n if (selRange && selRange.collapsed && editor.contains(selRange.startContainer)) {\n const bounds = findLineBounds(editor, selRange.startContainer, selRange.startOffset)\n if (bounds) {\n const stripped = stripDecorationsInRange(editor, bounds)\n const decorated = decorateEditor(editor, markdownEnabled, headingsEnabled, bounds)\n scoped = true\n needsCaretRestore = stripped || decorated || !isTextNode(selRange.startContainer)\n }\n }\n }\n if (!scoped) {\n if (!domNormalized) {\n normalizeEditorDOM(editor)\n }\n decorateEditor(editor, markdownEnabled, headingsEnabled)\n imeDirty.current = false\n }\n if (savedCursorOffset !== null && needsCaretRestore) {\n // scroll: false — this placement only re-establishes the caret that\n // native editing just revealed, and the correction's layout read\n // would force a reflow on every keystroke.\n setCursorAtOffset(editor, savedCursorOffset, { scroll: false })\n }\n }\n }\n\n runTriggerDetection({\n segments: nextSegments,\n plainText: nextPlainText,\n cursorPos: finalCursor,\n })\n }, [\n onChange,\n readSegmentsFromDOM,\n runTriggerDetection,\n renderSegmentsToDOM,\n markdownEnabled,\n headingsEnabled,\n normalizeBullets,\n maxLength,\n events,\n ])\n\n // -----------------------------------------------------------------------\n // Chip click delegation\n // -----------------------------------------------------------------------\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n const target = e.target\n if (!(target instanceof Node)) return\n\n const editor = editorRef.current\n if (!editor) return\n\n // Walk from the click target up to find a link or chip element\n let node: Node | null = target\n while (node && node !== editor) {\n // Check for URL link click — only navigate on Cmd/Ctrl+Click;\n // plain click just positions the cursor for editing.\n if (isLinkElement(node)) {\n if (e.metaKey || e.ctrlKey) {\n e.preventDefault()\n onLinkClick?.(node.href)\n window.open(node.href, '_blank', 'noopener,noreferrer')\n return\n }\n // Plain click: let the browser place the cursor inside the link text\n break\n }\n\n if (isChipElement(node)) {\n // Spawn ripple effect. `isChipElement` has already narrowed `node`\n // to HTMLElement, so no cast is needed.\n const rect = node.getBoundingClientRect()\n const ripple = document.createElement('span')\n ripple.className = 'prompt-area-chip-ripple'\n const size = Math.max(rect.width, rect.height)\n ripple.style.width = `${size}px`\n ripple.style.height = `${size}px`\n ripple.style.left = `${e.clientX - rect.left - size / 2}px`\n ripple.style.top = `${e.clientY - rect.top - size / 2}px`\n node.appendChild(ripple)\n ripple.addEventListener('animationend', () => ripple.remove())\n\n const chip = chipNodeToSegment(node)\n if (chip) {\n // Native chip-click dropdown: reopen this trigger's suggestions\n // anchored to the chip so the selection can replace it in place.\n // Gated on `!disabled` — a disabled composer must not accept edits\n // through any path, including this one.\n const config = triggers.find((t) => t.char === chip.trigger)\n // A click on THIS exact chip element while its own dropdown was\n // open just closed it (see `suppressReopenChip` and\n // `handleMouseDown`) — treat that as a toggle-close, not a reopen.\n const wasOpenForThisChip = suppressReopenChip.current === node\n suppressReopenChip.current = null\n if (\n !disabled &&\n !wasOpenForThisChip &&\n config?.reopenOnChipClick &&\n config.mode === 'dropdown' &&\n config.onSearch\n ) {\n const childIdx = indexOfChildNode(editor, node)\n editingChip.current = {\n chip,\n segIndex: domChildIndexToSegmentIndex(editor, childIdx),\n }\n openChipNode.current = node\n setActiveTrigger({ config, startOffset: 0, query: '' })\n setSelectedSuggestionIndex(0)\n setTriggerRect(rect)\n runSearch('', config)\n }\n onChipClick?.(chip)\n }\n return\n }\n node = node.parentNode\n }\n },\n [onChipClick, onLinkClick, triggers, runSearch, disabled],\n )\n\n // -----------------------------------------------------------------------\n // Chip mousedown delegation — feeds `suppressReopenChip` for handleClick's\n // toggle-close detection. See `openChipNode`/`suppressReopenChip` above for\n // why this needs to be a real mousedown listener rather than piggybacking\n // on `dismissTrigger`.\n // -----------------------------------------------------------------------\n\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n // A click repositions the caret, so the next input is a fresh edit rather\n // than an ended composition's trailing event.\n postCompositionUndo.current = null\n\n const target = e.target\n const editor = editorRef.current\n if (!editor || !(target instanceof Node)) {\n suppressReopenChip.current = null\n return\n }\n\n let node: Node | null = target\n while (node && node !== editor) {\n if (isChipElement(node)) {\n suppressReopenChip.current = openChipNode.current === node ? node : null\n return\n }\n node = node.parentNode\n }\n suppressReopenChip.current = null\n }, [])\n\n // -----------------------------------------------------------------------\n // Remove a chip node from DOM and sync model\n // -----------------------------------------------------------------------\n\n const removeChipNodeFromDOM = useCallback(\n (editor: HTMLElement, chipNode: HTMLElement): boolean => {\n const segments = readSegmentsFromDOM()\n const chipIdx = indexOfChildNode(editor, chipNode)\n if (chipIdx === -1) return false\n\n const segIdx = domChildIndexToSegmentIndex(editor, chipIdx)\n const deletedChip = segments[segIdx]\n const newSegments = removeChipAtIndex(segments, segIdx)\n onChange(newSegments)\n renderSegmentsToDOM(newSegments)\n\n if (deletedChip?.type === 'chip') {\n onChipDelete?.(deletedChip)\n }\n\n return true\n },\n [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onChipDelete],\n )\n\n // -----------------------------------------------------------------------\n // Revert an auto-resolved chip back to plain text\n // -----------------------------------------------------------------------\n\n const revertChipNodeToText = useCallback(\n (editor: HTMLElement, chipNode: HTMLElement): boolean => {\n const segments = readSegmentsFromDOM()\n const chipIdx = indexOfChildNode(editor, chipNode)\n if (chipIdx === -1) return false\n\n const segIdx = domChildIndexToSegmentIndex(editor, chipIdx)\n const revertedChip = segments[segIdx]\n const result = revertChipAtIndex(segments, segIdx)\n if (!result) return false\n\n // Compute cursor target: plain text offset at end of reverted text\n let targetOffset = 0\n for (let i = 0; i < segIdx; i++) {\n const s = segments[i]\n if (s.type === 'text') {\n targetOffset += s.text.length\n } else {\n targetOffset += s.trigger.length + s.displayText.length\n }\n }\n targetOffset += result.revertedText.length\n\n onChange(result.segments)\n renderSegmentsToDOM(result.segments)\n setCursorAtOffset(editor, targetOffset)\n\n if (revertedChip?.type === 'chip') {\n onChipDelete?.(revertedChip)\n }\n\n return true\n },\n [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onChipDelete],\n )\n\n // -----------------------------------------------------------------------\n // Chip backspace (delete chip behind cursor as whole unit)\n // -----------------------------------------------------------------------\n\n const handleChipBackspace = useCallback((): boolean => {\n const editor = editorRef.current\n if (!editor) return false\n\n const range = getSelectionRange()\n if (!range || !range.collapsed) return false\n\n const node = range.startContainer\n const offset = range.startOffset\n\n // Case 1: cursor is at the editor level (between child nodes)\n if (node === editor && offset > 0) {\n const prevChild = editor.childNodes[offset - 1]\n if (prevChild && isChipElement(prevChild)) {\n if (getChipAutoResolved(prevChild)) {\n return revertChipNodeToText(editor, prevChild)\n }\n return removeChipNodeFromDOM(editor, prevChild)\n }\n }\n\n // Case 2: cursor is at start of a text node, check previous sibling\n if (node.nodeType === Node.TEXT_NODE && offset === 0) {\n const directChild = getDirectChildContaining(editor, node)\n if (!directChild) return false\n\n let prevSibling = directChild.previousSibling\n while (\n prevSibling &&\n prevSibling.nodeType === Node.TEXT_NODE &&\n prevSibling.textContent === ''\n ) {\n prevSibling = prevSibling.previousSibling\n }\n if (prevSibling && isChipElement(prevSibling)) {\n if (getChipAutoResolved(prevSibling)) {\n return revertChipNodeToText(editor, prevSibling)\n }\n return removeChipNodeFromDOM(editor, prevSibling)\n }\n }\n\n return false\n }, [removeChipNodeFromDOM, revertChipNodeToText])\n\n // -----------------------------------------------------------------------\n // Chip forward delete (delete chip in front of cursor)\n // -----------------------------------------------------------------------\n\n const handleChipForwardDelete = useCallback((): boolean => {\n const editor = editorRef.current\n if (!editor) return false\n\n const range = getSelectionRange()\n if (!range || !range.collapsed) return false\n\n const node = range.startContainer\n const offset = range.startOffset\n\n // Case 1: cursor at the editor level\n if (node === editor && offset < editor.childNodes.length) {\n const nextChild = editor.childNodes[offset]\n if (nextChild && isChipElement(nextChild)) {\n return removeChipNodeFromDOM(editor, nextChild)\n }\n }\n\n // Case 2: cursor at end of a text node, check next sibling\n if (node.nodeType === Node.TEXT_NODE && offset === (node.textContent ?? '').length) {\n const directChild = getDirectChildContaining(editor, node)\n if (!directChild) return false\n\n let nextSibling = directChild.nextSibling\n while (\n nextSibling &&\n nextSibling.nodeType === Node.TEXT_NODE &&\n nextSibling.textContent === ''\n ) {\n nextSibling = nextSibling.nextSibling\n }\n if (nextSibling && isChipElement(nextSibling)) {\n return removeChipNodeFromDOM(editor, nextSibling)\n }\n }\n\n return false\n }, [removeChipNodeFromDOM])\n\n // -----------------------------------------------------------------------\n // Auto-resolve active trigger on space\n // -----------------------------------------------------------------------\n\n const autoResolveActiveTrigger = useCallback(\n (trigger: ActiveTrigger) => {\n const segments = readSegmentsFromDOM()\n const query = trigger.query\n\n // Create a synthetic suggestion so onSelect can customize display text\n const syntheticSuggestion: TriggerSuggestion = {\n value: query,\n label: query,\n }\n\n const displayText = trigger.config.onSelect?.(syntheticSuggestion) ?? query\n\n const chipData = {\n value: query,\n displayText: displayText || query,\n autoResolved: true,\n }\n const result = resolveChip(segments, trigger, chipData)\n\n onChange(result.segments)\n renderSegmentsToDOM(result.segments)\n\n onChipAdd?.({\n type: 'chip',\n trigger: trigger.config.char,\n ...chipData,\n })\n\n // Position cursor after the auto-resolved chip + trailing space\n const editor = editorRef.current\n if (editor) {\n setCursorAtOffset(editor, result.cursorOffset)\n }\n\n dismissTrigger()\n },\n [readSegmentsFromDOM, onChange, renderSegmentsToDOM, dismissTrigger, onChipAdd],\n )\n\n // -----------------------------------------------------------------------\n // Select a suggestion from the dropdown\n // -----------------------------------------------------------------------\n\n const selectSuggestionInternal = useCallback(\n (suggestion: TriggerSuggestion) => {\n if (!activeTrigger) return\n\n const segments = readSegmentsFromDOM()\n const displayText = activeTrigger.config.onSelect?.(suggestion) ?? suggestion.label\n\n const chipData = {\n value: suggestion.value,\n displayText: displayText || suggestion.label,\n data: suggestion.data,\n }\n\n // Chip-click dropdown (`reopenOnChipClick`): replace the clicked chip in\n // place instead of resolving typed trigger text at the caret. Disabled\n // is re-checked here (not just at open time) in case the composer\n // became disabled while the popover was still open.\n const editing = editingChip.current\n if (editing) {\n const editor = editorRef.current\n if (editor && !disabled) {\n // Re-verify the click-time index still holds the same chip — the\n // model may have shifted (external value update, undo/redo) while\n // the dropdown was open. If it moved, recover ONLY when exactly one\n // chip in the document now matches trigger+value: with duplicates,\n // guessing risks silently editing the wrong instance, which is\n // worse than the no-op this falls back to.\n const atIndex = segments[editing.segIndex]\n const stillThere =\n atIndex?.type === 'chip' &&\n atIndex.trigger === editing.chip.trigger &&\n atIndex.value === editing.chip.value\n const segIdx = stillThere\n ? editing.segIndex\n : (() => {\n const matches: number[] = []\n segments.forEach((seg, i) => {\n if (\n seg.type === 'chip' &&\n seg.trigger === editing.chip.trigger &&\n seg.value === editing.chip.value\n ) {\n matches.push(i)\n }\n })\n return matches.length === 1 ? matches[0] : -1\n })()\n const oldChip = segIdx !== -1 ? segments[segIdx] : undefined\n\n if (oldChip?.type === 'chip') {\n const newChip: ChipSegment = {\n type: 'chip',\n trigger: activeTrigger.config.char,\n ...chipData,\n }\n let newSegments = segments.map((seg, i) => (i === segIdx ? newChip : seg))\n\n // Guarantee a real landing spot after the replaced chip, mirroring\n // resolveChip's trailing-space convention (prompt-area-engine.ts):\n // if the new chip is now the last segment (or directly followed by\n // another chip), the caret would land at a bare element boundary\n // with no text node, which some engines fail to render/snap a\n // visible caret at.\n const nextSeg = newSegments[segIdx + 1]\n const insertedSpace = !nextSeg || nextSeg.type !== 'text' || nextSeg.text.length === 0\n if (insertedSpace) {\n newSegments = [\n ...newSegments.slice(0, segIdx + 1),\n { type: 'text', text: ' ' },\n ...newSegments.slice(segIdx + 1),\n ]\n }\n\n events.pushUndo(segments)\n onChange(newSegments)\n renderSegmentsToDOM(newSegments)\n\n // Same value + display text + data: treat as a no-op confirmation\n // rather than a destructive delete+add — onChipDelete is\n // documented as firing on backspace/forward-delete, not on\n // re-confirming the already-selected suggestion.\n const unchanged =\n oldChip.value === newChip.value &&\n oldChip.displayText === newChip.displayText &&\n safeJsonStringify(oldChip.data) === safeJsonStringify(newChip.data)\n if (!unchanged) {\n onChipDelete?.(oldChip)\n onChipAdd?.(newChip)\n }\n\n // +1 when a space was inserted, matching resolveChip's own\n // \"+1 accounts for the trailing space after the chip\" placement —\n // landing exactly at the chip's end would put the caret at the\n // same bare element boundary the inserted space exists to avoid.\n const caretOffset =\n segmentsToPlainText(newSegments.slice(0, segIdx + 1)).length + (insertedSpace ? 1 : 0)\n setCursorAtOffset(editor, caretOffset)\n }\n }\n\n dismissTrigger()\n setTimeout(() => {\n editorRef.current?.focus()\n }, 0)\n return\n }\n\n const result = resolveChip(segments, activeTrigger, chipData)\n\n onChange(result.segments)\n renderSegmentsToDOM(result.segments)\n\n onChipAdd?.({\n type: 'chip',\n trigger: activeTrigger.config.char,\n ...chipData,\n })\n\n // Position cursor after the chip + trailing space\n const editor = editorRef.current\n if (editor) {\n setCursorAtOffset(editor, result.cursorOffset)\n }\n\n dismissTrigger()\n\n // Refocus editor after popover interaction\n setTimeout(() => {\n editorRef.current?.focus()\n }, 0)\n },\n [\n activeTrigger,\n readSegmentsFromDOM,\n onChange,\n renderSegmentsToDOM,\n dismissTrigger,\n onChipAdd,\n onChipDelete,\n events,\n disabled,\n ],\n )\n\n const selectSuggestion = selectSuggestionInternal\n\n // Chip-click dropdown: once the empty-query suggestions arrive, preselect\n // the chip's current value so the list opens \"on\" the existing choice.\n useEffect(() => {\n const editing = editingChip.current\n if (!editing || !activeTrigger?.config.reopenOnChipClick) return\n const idx = suggestions.findIndex((s) => s.value === editing.chip.value)\n if (idx > 0) setSelectedSuggestionIndex(idx)\n }, [suggestions, activeTrigger])\n\n // -----------------------------------------------------------------------\n // Handle key events\n // -----------------------------------------------------------------------\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (\n events.isComposing.current ||\n e.nativeEvent.isComposing ||\n e.nativeEvent.keyCode === 229\n ) {\n return\n }\n\n // Any real keydown bounds a just-ended composition's claim on the next\n // input event: Chromium's trailing input follows compositionend with no\n // keydown possible in between, so a keydown here means the next input\n // belongs to a new keystroke, not the ended composition. (Placed after\n // the guard above so composition keydowns don't release the claim.)\n postCompositionUndo.current = null\n\n const applyEditResult = (\n editor: HTMLDivElement,\n result: { segments: Segment[]; cursorOffset: number },\n ) => {\n // Ordered-list numbers are a projection of position: rebuild them on\n // every structural edit and remap the caret across any digit-run width\n // changes. No-op (same reference) when there are no ordered lists.\n let { segments, cursorOffset } = result\n if (markdownEnabled) {\n const renumbered = renumberOrderedListSegments(segments)\n segments = renumbered.segments\n cursorOffset = remapOffset(cursorOffset, renumbered.edits)\n }\n lastRenderedValue.current = segments\n onChange(segments)\n renderSegmentsToDOM(segments)\n setCursorAtOffset(editor, cursorOffset)\n }\n\n const tryListContinuation = (editor: HTMLDivElement): boolean => {\n if (!markdownEnabled) return false\n const segments = readSegmentsFromDOM()\n const cursorPos = getCursorOffset(editor)\n if (cursorPos === null) return false\n const plainText = segmentsToPlainText(segments)\n if (!getListContext(plainText, cursorPos)) return false\n const result = insertListContinuation(segments, cursorPos)\n if (result) applyEditResult(editor, result)\n return true\n }\n\n // 1. Flush pending undo debounce so Cmd+Z has the latest checkpoint\n if ((e.metaKey || e.ctrlKey) && e.key === 'z' && undoBaseState.current) {\n if (undoTimer.current) {\n clearTimeout(undoTimer.current)\n undoTimer.current = null\n }\n events.pushUndo(undoBaseState.current)\n undoBaseState.current = null\n }\n\n // 1a. Undo/redo intercept\n if (events.handleKeyDownForUndoRedo(e)) return\n\n // 1.5 Markdown formatting shortcuts (Cmd+B bold, Cmd+I italic)\n if (\n markdownEnabled &&\n (e.metaKey || e.ctrlKey) &&\n !e.shiftKey &&\n (e.key === 'b' || e.key === 'i')\n ) {\n e.preventDefault()\n const editor = editorRef.current\n if (!editor) return\n\n const offsets = getSelectionOffsets(editor)\n if (!offsets || offsets.start === offsets.end) return\n\n const marker = e.key === 'b' ? '**' : '*'\n const currentSegments = readSegmentsFromDOM()\n events.pushUndo(currentSegments)\n\n const result = toggleMarkdownWrap(currentSegments, offsets.start, offsets.end, marker)\n if (!result) return\n\n lastRenderedValue.current = result.segments\n onChange(result.segments)\n renderSegmentsToDOM(result.segments)\n setSelectionAtOffsets(editor, result.selectionStart, result.selectionEnd)\n return\n }\n\n // 1.75 Launch triggers: a trigger with mode 'launch' fires onActivate on\n // keydown and suppresses the char so it never enters the editor — for\n // opening an external surface (dialog, palette). The DOM read is gated on\n // the typed key actually matching a launch char, so it stays off the hot\n // path. insertChip still inserts a chip at the cursor if the consumer\n // wants one after the external selection.\n if (!e.metaKey && !e.ctrlKey && !e.altKey && e.key.length === 1) {\n const launcher = triggers.find((t) => t.mode === 'launch' && t.char === e.key)\n const editor = editorRef.current\n if (launcher?.onActivate && editor) {\n const cursorPos = getCursorOffset(editor)\n if (cursorPos !== null) {\n const segments = readSegmentsFromDOM()\n const plainText = segmentsToPlainText(segments)\n if (isValidTriggerPosition(plainText, cursorPos, launcher.position)) {\n e.preventDefault()\n launcher.onActivate({\n text: plainText,\n cursorPosition: cursorPos,\n insertChip: buildInsertChip(\n replaceTextRange(segments, cursorPos, cursorPos, launcher.char),\n { config: launcher, startOffset: cursorPos, query: '' },\n ),\n })\n return\n }\n }\n }\n }\n\n // 2. Trigger dropdown navigation. Gated on the dropdown actually being\n // ON SCREEN, which matches TriggerPopover's own render condition\n // (non-empty suggestions, OR loading/error/emptyMessage) rather than\n // just `suggestions.length > 0` — otherwise a popover left open in a\n // loading/empty state (e.g. right after a chip-click reopen, before its\n // empty-query search resolves) lets Enter fall through to onSubmit and\n // Escape fall through to onEscape while still visibly on screen.\n const dropdownVisible =\n activeTrigger &&\n activeTrigger.config.mode === 'dropdown' &&\n (suggestions.length > 0 ||\n suggestionsLoading ||\n suggestionsError !== null ||\n !!activeTrigger.config.emptyMessage)\n if (dropdownVisible) {\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n if (suggestions.length > 0) {\n setSelectedSuggestionIndex((prev) => Math.min(prev + 1, suggestions.length - 1))\n }\n return\n }\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n if (suggestions.length > 0) {\n setSelectedSuggestionIndex((prev) => Math.max(prev - 1, 0))\n }\n return\n }\n if (e.key === 'Enter' || e.key === 'Tab') {\n e.preventDefault()\n const selected = suggestions[selectedSuggestionIndex]\n if (selected) {\n selectSuggestionInternal(selected)\n }\n return\n }\n if (e.key === 'Escape') {\n e.preventDefault()\n dismissTrigger()\n return\n }\n }\n\n // 2.5. Auto-resolve on Space when trigger has resolveOnSpace\n if (e.key === ' ' && activeTrigger && activeTrigger.config.resolveOnSpace) {\n const query = activeTrigger.query.trim()\n if (query.length > 0) {\n e.preventDefault()\n autoResolveActiveTrigger(activeTrigger)\n return\n }\n }\n\n // 2.6. Tab/Shift+Tab for list indentation (only when trigger dropdown is NOT open)\n if (markdownEnabled && e.key === 'Tab' && !activeTrigger) {\n const editor = editorRef.current\n if (editor) {\n const segments = readSegmentsFromDOM()\n const plainText = segmentsToPlainText(segments)\n const cursorPos = getCursorOffset(editor)\n if (cursorPos !== null) {\n const ctx = getListContext(plainText, cursorPos)\n if (ctx) {\n e.preventDefault()\n const result = e.shiftKey\n ? outdentListItem(segments, cursorPos)\n : indentListItem(segments, cursorPos)\n if (result) applyEditResult(editor, result)\n return\n }\n }\n }\n }\n\n // Insert a newline at the model level (avoids the browser's broken\n // contentEditable behaviour near elements).\n const insertPlainNewline = (editor: HTMLDivElement): void => {\n const offsets = getSelectionOffsets(editor)\n if (!offsets) return\n const scan = scanEditorDOM(editor)\n const cleanScan = !scan.sawForeignElement && !scan.sawNewlineInText\n const currentSegments = cleanScan ? scan.segments : readSegmentsFromDOM()\n events.pushUndo(currentSegments)\n const newSegments = replaceTextRange(currentSegments, offsets.start, offsets.end, '\\n')\n\n // Surgical fast path: a full renderSegmentsToDOM tears down and\n // rebuilds (and re-decorates) the entire document, which makes every\n // newline stutter on large content. When the edit is a collapsed\n // caret in a clean flat DOM with real content, and renumbering is\n // provably a no-op, the same end state is reachable by splitting the\n // caret's text node, inserting one
, and re-decorating only that\n // line's range.\n if (\n cleanScan &&\n offsets.start === offsets.end &&\n scan.segments.length > 0 &&\n !imeDirty.current\n ) {\n const plainAfter =\n scan.plainText.slice(0, offsets.start) + '\\n' + scan.plainText.slice(offsets.start)\n // Exact parity with applyEditResult, which renumbers unconditionally:\n // the fast path is only taken when that renumber provably does\n // nothing (renumberOrderedListLines has its own cheap no-list\n // pre-gate, so this is string work only).\n let renumberNoop = true\n if (markdownEnabled) {\n renumberNoop = renumberOrderedListSegments(newSegments, plainAfter).edits.length === 0\n }\n if (renumberNoop && insertNewlineSurgically(editor, offsets.start)) {\n lastRenderedValue.current = newSegments\n onChange(newSegments)\n setCursorAtOffset(editor, offsets.start + 1)\n return\n }\n }\n\n applyEditResult(editor, { segments: newSegments, cursorOffset: offsets.start + 1 })\n }\n\n // The DOM half of the fast path above. Strips the caret line's\n // decorations (so the plain-text offset maps into a direct-child text\n // node), inserts the
, mirrors renderSegmentsToDOM's sentinel rule\n // for a trailing newline, and re-decorates the original line's range —\n // which now spans both halves of the split. Returns false to make the\n // caller fall back to the full re-render.\n const insertNewlineSurgically = (editor: HTMLDivElement, offset: number): boolean => {\n const selRange = getSelectionRange()\n if (!selRange || !selRange.collapsed || !editor.contains(selRange.startContainer)) {\n return false\n }\n const bounds = findLineBounds(editor, selRange.startContainer, selRange.startOffset)\n if (!bounds) return false\n\n stripDecorationsInRange(editor, bounds)\n\n const pos = findDOMPosition(editor, offset)\n if (!pos) return false\n // A boundary offset in front of an atomic child (a leading chip, a\n //
on an empty line) resolves BEFORE that element, which is where\n // the model puts the newline too, so those cases insert here. An\n // offset that falls INSIDE a chip has no such position — the chip is\n // atomic, so findDOMPosition answers with the spot after it, which is\n // not where the model's newline goes. Only proceed when the mapping\n // round-trips to the exact offset; otherwise the full re-render\n // handles it.\n if (getTextOffsetAtPoint(editor, pos.node, pos.offset) !== offset) return false\n\n const br = document.createElement('br')\n if (pos.node === editor) {\n editor.insertBefore(br, editor.childNodes[pos.offset] ?? null)\n } else if (isTextNode(pos.node) && pos.node.parentNode === editor) {\n const text = pos.node.textContent ?? ''\n if (pos.offset <= 0) {\n editor.insertBefore(br, pos.node)\n } else if (pos.offset >= text.length) {\n editor.insertBefore(br, pos.node.nextSibling)\n } else {\n const tail = pos.node.splitText(pos.offset)\n editor.insertBefore(br, tail)\n }\n } else {\n // A position inside a nested element — shouldn't happen after the\n // strip, so let the full re-render canonicalize instead.\n return false\n }\n\n // renderSegmentsToDOM's rule: a trailing real
needs the sentinel\n // so the final newline stays visible. Checking the actual last child\n // (not just the inserted one) also repairs a bare trailing
the\n // user exposed by deleting a previous sentinel.\n const last = editor.lastChild\n if (last && isBRElement(last) && !last.dataset.sentinel) {\n const sentinel = document.createElement('br')\n sentinel.dataset.sentinel = 'true'\n editor.appendChild(sentinel)\n }\n\n decorateEditor(editor, markdownEnabled, headingsEnabled, bounds)\n return true\n }\n\n // 2.8 Shift+Enter always inserts a newline (after a list-continuation check).\n if (e.key === 'Enter' && e.shiftKey) {\n e.preventDefault()\n const editor = editorRef.current\n if (editor && !tryListContinuation(editor)) insertPlainNewline(editor)\n return\n }\n\n // 3. Enter without Shift (skipping IME): continue a list, else submit when\n // `submitOnEnter` is set, else insert a newline.\n if (e.key === 'Enter' && !e.shiftKey) {\n const editor = editorRef.current\n if (editor && tryListContinuation(editor)) {\n e.preventDefault()\n return\n }\n if (submitOnEnter) {\n e.preventDefault()\n onSubmit?.(readSegmentsFromDOM())\n return\n }\n e.preventDefault()\n if (editor) insertPlainNewline(editor)\n return\n }\n\n // 4. Escape\n if (e.key === 'Escape' && onEscape) {\n onEscape()\n return\n }\n\n // 4.5 Non-collapsed selection delete (Backspace/Delete across boundaries)\n if (e.key === 'Backspace' || e.key === 'Delete') {\n const editor = editorRef.current\n if (editor) {\n const offsets = getSelectionOffsets(editor)\n if (offsets && offsets.start !== offsets.end) {\n e.preventDefault()\n const currentSegments = readSegmentsFromDOM()\n events.pushUndo(currentSegments)\n const newSegments = replaceTextRange(currentSegments, offsets.start, offsets.end, '')\n applyEditResult(editor, { segments: newSegments, cursorOffset: offsets.start })\n runTriggerDetection()\n return\n }\n }\n }\n\n // 5. Backspace: check list prefix removal, then chip deletion\n if (e.key === 'Backspace') {\n const editor = editorRef.current\n if (editor) {\n const segments = readSegmentsFromDOM()\n const cursorPos = getCursorOffset(editor)\n if (markdownEnabled && cursorPos !== null) {\n const result = removeListPrefix(segments, cursorPos)\n if (result) {\n e.preventDefault()\n applyEditResult(editor, result)\n runTriggerDetection()\n return\n }\n }\n }\n if (handleChipBackspace()) {\n e.preventDefault()\n runTriggerDetection()\n return\n }\n }\n\n // 6. Delete (forward): delete chip as whole unit\n if (e.key === 'Delete' && handleChipForwardDelete()) {\n e.preventDefault()\n runTriggerDetection()\n return\n }\n },\n [\n activeTrigger,\n suggestions,\n suggestionsLoading,\n suggestionsError,\n selectedSuggestionIndex,\n onSubmit,\n submitOnEnter,\n onEscape,\n readSegmentsFromDOM,\n onChange,\n renderSegmentsToDOM,\n markdownEnabled,\n headingsEnabled,\n dismissTrigger,\n handleChipBackspace,\n handleChipForwardDelete,\n autoResolveActiveTrigger,\n runTriggerDetection,\n selectSuggestionInternal,\n events,\n triggers,\n buildInsertChip,\n ],\n )\n\n // -----------------------------------------------------------------------\n // Imperative handle (memoized to avoid identity changes)\n // -----------------------------------------------------------------------\n\n const handle: PromptAreaHandle = useMemo(\n () => ({\n focus: () => editorRef.current?.focus(),\n blur: () => editorRef.current?.blur(),\n insertChip: (chip) => {\n const segments = readSegmentsFromDOM()\n const newChip: ChipSegment = { type: 'chip', ...chip }\n const newSegments: Segment[] = [...segments, newChip, { type: 'text', text: ' ' }]\n onChange(newSegments)\n renderSegmentsToDOM(newSegments)\n onChipAdd?.(newChip)\n },\n getPlainText: () => segmentsToPlainText(readSegmentsFromDOM()),\n clear: () => {\n onChange([])\n const editor = editorRef.current\n if (editor) {\n while (editor.firstChild) editor.removeChild(editor.firstChild)\n }\n events.resetUndoHistory()\n if (undoTimer.current) {\n clearTimeout(undoTimer.current)\n undoTimer.current = null\n }\n undoBaseState.current = null\n },\n setText: (text) => {\n events.pushUndo(readSegmentsFromDOM())\n const segments = plainTextToSegments(text)\n onChange(segments)\n renderSegmentsToDOM(segments)\n const editor = editorRef.current\n if (editor) setCursorAtOffset(editor, text.length)\n },\n appendText: (text) => {\n const segments = readSegmentsFromDOM()\n events.pushUndo(segments)\n // Merge into the trailing text segment so the onChange value doesn't\n // carry two adjacent un-merged text segments.\n const last = segments[segments.length - 1]\n const next: Segment[] =\n last?.type === 'text'\n ? [...segments.slice(0, -1), { type: 'text', text: last.text + text }]\n : [...segments, { type: 'text', text }]\n onChange(next)\n renderSegmentsToDOM(next)\n const editor = editorRef.current\n if (editor) setCursorAtOffset(editor, segmentsToPlainText(next).length)\n },\n getCursorPosition: () => {\n const editor = editorRef.current\n return editor ? getCursorOffset(editor) : null\n },\n setCursorPosition: (offset) => {\n const editor = editorRef.current\n if (editor) setCursorAtOffset(editor, offset)\n },\n setCursorToEnd: () => {\n const editor = editorRef.current\n if (editor) setCursorAtOffset(editor, segmentsToPlainText(readSegmentsFromDOM()).length)\n },\n getSelection: () => {\n const editor = editorRef.current\n return editor ? getSelectionOffsets(editor) : null\n },\n setSelection: (start, end) => {\n const editor = editorRef.current\n if (editor) setSelectionAtOffsets(editor, start, end)\n },\n }),\n [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onChipAdd, events],\n )\n\n // -----------------------------------------------------------------------\n // Compose event handlers\n // -----------------------------------------------------------------------\n\n const handleCompositionStart = useCallback(() => {\n if (undoTimer.current) {\n clearTimeout(undoTimer.current)\n undoTimer.current = null\n }\n if (undoBaseState.current) {\n events.pushUndo(undoBaseState.current)\n undoBaseState.current = null\n }\n // A new composition supersedes any unconsumed trailing-input claim from\n // the previous one.\n postCompositionUndo.current = null\n compositionBaseState.current = readSegmentsFromDOM()\n events.handleCompositionStart()\n }, [events, readSegmentsFromDOM])\n\n const handleCompositionEnd = useCallback(() => {\n events.handleCompositionEnd()\n handleInput()\n\n const before = compositionBaseState.current\n compositionBaseState.current = null\n if (!before) {\n // No baseline: blur already closed this session's bookkeeping and the\n // compositionend arrived late. There is no composition undo entry to\n // record, and the debounced group the handleInput above just opened\n // holds the pre-composition value — cancelling it here would make the\n // committed text un-undoable. Leave the ordinary path to record it.\n return\n }\n\n // The composition owns this session's undo entry, so the debounced group\n // handleInput opened for the commit is redundant.\n if (undoTimer.current) clearTimeout(undoTimer.current)\n undoTimer.current = null\n undoBaseState.current = null\n\n // Push the pre-composition state as the composition's single undo entry\n // (skipped when the commit didn't change anything — or hasn't reached\n // the DOM yet). Either way, hand the base to handleInput for the one\n // trailing input event Chromium may still fire for this composition.\n const pushed = !segmentsEqual(before, readSegmentsFromDOM())\n if (pushed) events.pushUndo(before)\n postCompositionUndo.current = { base: before, pushed }\n }, [events, handleInput, readSegmentsFromDOM])\n\n const handleBlur = useCallback(() => {\n // Blur ends any in-flight composition (events.handleBlur resets the flag);\n // composition undo state must not survive into a future session.\n compositionBaseState.current = null\n postCompositionUndo.current = null\n events.handleBlur()\n }, [events])\n\n const eventHandlers = useMemo(\n () => ({\n onPaste: events.handlePaste,\n onCopy: events.handleCopy,\n onCut: events.handleCut,\n onDrop: events.handleDrop,\n onDragOver: events.handleDragOver,\n onCompositionStart: handleCompositionStart,\n onCompositionEnd: handleCompositionEnd,\n onBlur: handleBlur,\n }),\n [\n events.handlePaste,\n events.handleCopy,\n events.handleCut,\n events.handleDrop,\n events.handleDragOver,\n handleCompositionStart,\n handleCompositionEnd,\n handleBlur,\n ],\n )\n\n return {\n editorRef,\n activeTrigger,\n suggestions,\n suggestionsLoading,\n suggestionsError,\n selectedSuggestionIndex,\n handleInput,\n handleKeyDown,\n handleClick,\n handleMouseDown,\n selectSuggestion,\n dismissTrigger,\n handle,\n triggerRect,\n eventHandlers,\n }\n}\n", "type": "registry:component" }, { "path": "packages/prompt-area/src/prompt-area/use-prompt-area-events.ts", "content": "'use client'\n\nimport { useCallback, useMemo, useRef } from 'react'\nimport type { Segment, ChipSegment, TriggerConfig } from './types'\nimport { resolveTriggersInSegments } from './prompt-area-engine'\nimport { normalizeEditorDOM, safeJsonStringify, getSelectionRange } from './dom-helpers'\nimport { applySelectionRange } from './cursor-helpers'\nimport {\n serializeFragmentToPlainText,\n serializeFragmentToSegments,\n parseSegmentsFromClipboard,\n insertSegmentsAtCursor,\n} from './clipboard-helpers'\nimport { htmlToMarkdown, isOfficeHtml } from './html-to-markdown'\nimport {\n normalizeListPrefixText,\n renumberOrderedListLines,\n hasOrderedListRun,\n} from './prompt-area-list-ops'\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype EventHandlerDeps = {\n editorRef: React.RefObject\n readSegmentsFromDOM: () => Segment[]\n onChange: (segments: Segment[]) => void\n renderSegmentsToDOM: (segments: Segment[]) => void\n runTriggerDetection: () => void\n dismissTrigger: () => void\n triggers: TriggerConfig[]\n /** When true, rich `text/html` on the clipboard is converted to markdown. */\n markdownEnabled: boolean\n /** When true, pasted list markers (\"- \") are normalized to the \"•\" glyph. */\n normalizeBullets: boolean\n onPaste?: (data: { segments: Segment[]; source: 'internal' | 'external' }) => void\n onUndo?: (segments: Segment[]) => void\n onRedo?: (segments: Segment[]) => void\n onChipAdd?: (chip: ChipSegment) => void\n onImagePaste?: (file: File) => void\n onRawPaste?: (e: React.ClipboardEvent) => void\n}\n\ntype PromptAreaEventHandlers = {\n handlePaste: (e: React.ClipboardEvent) => void\n handleCopy: (e: React.ClipboardEvent) => void\n handleCut: (e: React.ClipboardEvent) => void\n handleDrop: (e: React.DragEvent) => void\n handleDragOver: (e: React.DragEvent) => void\n handleCompositionStart: () => void\n handleCompositionEnd: () => void\n handleBlur: () => void\n handleKeyDownForUndoRedo: (e: React.KeyboardEvent) => boolean\n pushUndo: (segments: Segment[]) => void\n resetUndoHistory: () => void\n isComposing: React.RefObject\n}\n\n// ---------------------------------------------------------------------------\n// Undo/Redo Stack\n// ---------------------------------------------------------------------------\n\nconst MAX_UNDO_HISTORY = 100\n\n/** Delay before dismissing trigger on blur, so popover clicks register first */\nexport const BLUR_DELAY_MS = 150\n\ntype UndoState = {\n undoStack: Segment[][]\n redoStack: Segment[][]\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Encapsulates all edge-case event handlers for the prompt area component:\n * paste, copy, cut, drag/drop, IME composition, blur, and undo/redo.\n */\nexport function usePromptAreaEvents(deps: EventHandlerDeps): PromptAreaEventHandlers {\n const {\n editorRef,\n readSegmentsFromDOM,\n onChange,\n renderSegmentsToDOM,\n runTriggerDetection,\n dismissTrigger,\n triggers,\n markdownEnabled,\n normalizeBullets,\n onPaste: onPasteCallback,\n onUndo,\n onRedo,\n onChipAdd,\n onImagePaste,\n onRawPaste,\n } = deps\n\n const isComposing = useRef(false)\n\n // -----------------------------------------------------------------------\n // Undo/redo stack (MAX_UNDO_HISTORY entries; clears redo on new push).\n // Invariants: stacks live in refs (not useState) so pushUndo /\n // resetUndoHistory / handleKeyDownForUndoRedo keep stable identity.\n // Destabilizing this would re-create handleInput / handleKeyDown /\n // imperative handle on every render and silently regress IME + debounced\n // undo in the parent hook.\n // -----------------------------------------------------------------------\n const undoState = useRef({ undoStack: [], redoStack: [] })\n\n const pushUndo = useCallback((segments: Segment[]) => {\n const state = undoState.current\n state.undoStack.push(segments)\n if (state.undoStack.length > MAX_UNDO_HISTORY) {\n state.undoStack.shift()\n }\n // Clear redo stack on new change\n state.redoStack = []\n }, [])\n\n const resetUndoHistory = useCallback(() => {\n undoState.current = { undoStack: [], redoStack: [] }\n }, [])\n\n // -----------------------------------------------------------------------\n // Paste: strip HTML, insert plain text only\n // -----------------------------------------------------------------------\n\n const handlePaste = useCallback(\n (e: React.ClipboardEvent) => {\n // Let a consumer take over the paste entirely (e.g. divert large text or\n // arbitrary files to an upload pipeline) by calling preventDefault().\n onRawPaste?.(e)\n if (e.defaultPrevented) return\n e.preventDefault()\n\n const editor = editorRef.current\n if (!editor) return\n\n // Check for image files in clipboard before processing text\n // Some browsers/OSes provide pasted images via `items` instead of `files` (e.g. screenshots).\n // Exception: Office apps (Word especially, on macOS) put a bitmap RENDERING\n // of the copied selection on the clipboard alongside text/html; treating\n // that as an image paste silently dropped the text, so for Office\n // clipboards the text path wins and the image is only a last resort below.\n const html = e.clipboardData.getData('text/html')\n const imageFile =\n Array.from(e.clipboardData.files).find((f) => f.type.startsWith('image/')) ??\n (() => {\n const item = Array.from(e.clipboardData.items).find((i) => i.type.startsWith('image/'))\n return item?.getAsFile() ?? null\n })()\n if (imageFile && !isOfficeHtml(html)) {\n onImagePaste?.(imageFile)\n return\n }\n\n // Record undo snapshot\n const currentSegments = readSegmentsFromDOM()\n pushUndo(currentSegments)\n\n // Check for internal segment data (copy/paste within the editor)\n const segmentJson = e.clipboardData.getData('text/prompt-area-segments')\n if (segmentJson) {\n const parsed = parseSegmentsFromClipboard(segmentJson)\n if (parsed && parsed.length > 0) {\n // Insert the copied segments at cursor position\n const range = getSelectionRange()\n if (!range) return\n\n range.deleteContents()\n\n // Merge pasted segments into current segments at cursor position\n const beforePaste = readSegmentsFromDOM()\n const merged = insertSegmentsAtCursor(beforePaste, parsed, editor)\n onChange(merged)\n renderSegmentsToDOM(merged)\n\n // Notify: internal paste with chip data preserved\n onPasteCallback?.({ segments: merged, source: 'internal' })\n for (const seg of parsed) {\n if (seg.type === 'chip') {\n onChipAdd?.(seg)\n }\n }\n\n runTriggerDetection()\n return\n }\n }\n\n // When markdown mode is on, prefer the richest clipboard flavor:\n // 1. text/markdown — some apps (e.g. Slack) hand out markdown directly,\n // preserving nested lists that their text/plain flattens.\n // 2. text/html — convert web/Notion/Docs/GitHub/Word HTML to markdown.\n // Otherwise (markdown off, or neither present) fall back to plain text.\n let text = ''\n if (markdownEnabled) {\n text = e.clipboardData.getData('text/markdown')\n if (text) {\n // Slack over-escapes inert punctuation (e.g. `\\(` `\\)`); unescape\n // parentheses so the source reads cleanly. They carry no markdown\n // meaning, unlike `\\*` / `\\.` / `\\-` which are left intact.\n text = text.replace(/\\\\([()])/g, '$1')\n } else if (html) {\n // A converter failure (e.g. stack overflow on pathologically deep\n // nesting) must not drop the paste — leave text empty so the\n // text/plain fallback below still runs.\n try {\n text = htmlToMarkdown(html)\n } catch {\n text = ''\n }\n }\n }\n if (!text) text = e.clipboardData.getData('text/plain')\n if (!text) {\n // An Office clipboard whose html/plain flavors produced no text — e.g.\n // an image or drawing object copied inside Word (its HTML is a file:///\n // that converts to nothing). Fall back to the image flavor\n // bypassed above so image-only Office copies still reach onImagePaste.\n if (imageFile) onImagePaste?.(imageFile)\n return\n }\n\n // Normalize pasted list markers (\"- \" → \"•\") so pasted bullets match\n // typed input. Applies to both the HTML→markdown and plain-text paths.\n if (markdownEnabled && normalizeBullets) {\n text = normalizeListPrefixText(text, true)\n }\n\n // Rebuild ordered-list numbering in the pasted block so a copied list with\n // stale numbers lands sequential. Gated on `hasOrderedListRun` so incidental\n // numeric-leading prose (e.g. `1985. Born / 2020. Died`) is left untouched.\n // Done at the raw-string level (the caret collapses to end-of-content after\n // insertion, so no offset remap needed).\n //\n // `seedFromFirstNumber` — a paste carries numbering the author chose\n // elsewhere, so each run keeps its own starting number and only its\n // contiguity is rebuilt. Without it, pasting a contract's section 7 (or\n // any `
    ` a word processor emits) renumbered it to 1.\n if (markdownEnabled && hasOrderedListRun(text)) {\n text = renumberOrderedListLines(text, { seedFromFirstNumber: true }).text\n }\n\n // Insert plain text at cursor position using Selection API\n const range = getSelectionRange()\n if (!range) return\n\n range.deleteContents()\n\n // Handle multi-line paste: split into lines with BR elements\n const lines = text.split('\\n')\n const fragment = document.createDocumentFragment()\n\n for (let i = 0; i < lines.length; i++) {\n if (lines[i]) {\n fragment.appendChild(document.createTextNode(lines[i]))\n }\n if (i < lines.length - 1) {\n fragment.appendChild(document.createElement('br'))\n }\n }\n\n range.insertNode(fragment)\n\n // Move cursor to end of pasted content, committed through\n // applySelectionRange so the caret scrolls into view when the paste\n // overflows the editor's scroll box (the Selection API never\n // auto-scrolls on its own).\n range.collapse(false)\n applySelectionRange(editor, range)\n\n // Normalize DOM, sync model, detect triggers\n normalizeEditorDOM(editor)\n const newSegments = readSegmentsFromDOM()\n\n // Auto-resolve trigger patterns in pasted text (e.g., #readme -> chip)\n const resolvedSegments = resolveTriggersInSegments(newSegments, triggers)\n\n if (resolvedSegments !== newSegments) {\n onChange(resolvedSegments)\n renderSegmentsToDOM(resolvedSegments)\n\n // Notify about auto-resolved chips from pasted text\n for (const seg of resolvedSegments) {\n if (\n seg.type === 'chip' &&\n !newSegments.some(\n (s) =>\n s.type === 'chip' &&\n s.trigger === seg.trigger &&\n s.value === seg.value &&\n s.displayText === seg.displayText,\n )\n ) {\n onChipAdd?.(seg)\n }\n }\n } else {\n onChange(newSegments)\n }\n\n onPasteCallback?.({ segments: resolvedSegments, source: 'external' })\n runTriggerDetection()\n },\n [\n editorRef,\n readSegmentsFromDOM,\n onChange,\n pushUndo,\n runTriggerDetection,\n renderSegmentsToDOM,\n triggers,\n markdownEnabled,\n normalizeBullets,\n onPasteCallback,\n onChipAdd,\n onImagePaste,\n onRawPaste,\n ],\n )\n\n // -----------------------------------------------------------------------\n // Copy: serialize chips into plain text\n // -----------------------------------------------------------------------\n\n const handleCopy = useCallback((e: React.ClipboardEvent) => {\n e.preventDefault()\n\n const range = getSelectionRange()\n if (!range) return\n\n const fragment = range.cloneContents()\n\n // Walk fragment and serialize, converting chips to their text representation\n const plainText = serializeFragmentToPlainText(fragment)\n e.clipboardData.setData('text/plain', plainText)\n\n // Also serialize chip segments as JSON for internal paste\n const fragmentSegments = serializeFragmentToSegments(fragment)\n const hasChips = fragmentSegments.some((s) => s.type === 'chip')\n if (hasChips) {\n const json = safeJsonStringify(fragmentSegments)\n if (json) {\n e.clipboardData.setData('text/prompt-area-segments', json)\n }\n }\n }, [])\n\n // -----------------------------------------------------------------------\n // Cut: copy + delete\n // -----------------------------------------------------------------------\n\n const handleCut = useCallback(\n (e: React.ClipboardEvent) => {\n // First, do the copy\n handleCopy(e)\n\n // Then delete the selection\n const range = getSelectionRange()\n if (!range) return\n\n const currentSegments = readSegmentsFromDOM()\n pushUndo(currentSegments)\n\n range.deleteContents()\n\n const editor = editorRef.current\n if (editor) {\n normalizeEditorDOM(editor)\n }\n\n const newSegments = readSegmentsFromDOM()\n onChange(newSegments)\n runTriggerDetection()\n },\n [handleCopy, editorRef, readSegmentsFromDOM, onChange, pushUndo, runTriggerDetection],\n )\n\n // -----------------------------------------------------------------------\n // Drag & Drop: prevent to avoid unpredictable DOM mutations\n // -----------------------------------------------------------------------\n\n const handleDrop = useCallback((e: React.DragEvent) => {\n e.preventDefault()\n }, [])\n\n const handleDragOver = useCallback((e: React.DragEvent) => {\n e.preventDefault()\n }, [])\n\n // -----------------------------------------------------------------------\n // IME Composition: track the composing flag. Trigger detection and undo\n // bookkeeping for compositions live in usePromptArea's wrappers around\n // these handlers.\n // -----------------------------------------------------------------------\n\n const handleCompositionStart = useCallback(() => {\n isComposing.current = true\n }, [])\n\n const handleCompositionEnd = useCallback(() => {\n isComposing.current = false\n }, [])\n\n // -----------------------------------------------------------------------\n // Blur: dismiss trigger dropdown with delay (so popover clicks work)\n // -----------------------------------------------------------------------\n\n const handleBlur = useCallback(() => {\n // A blurred contentEditable cannot still be mid-composition, and the\n // browser may never deliver compositionend once focus is gone. Reset\n // synchronously — the dismiss below is deliberately delayed, this must\n // not be.\n isComposing.current = false\n\n setTimeout(() => {\n const editor = editorRef.current\n if (!editor) return\n\n // Only dismiss if focus didn't move to an element within the editor container\n const activeEl = document.activeElement\n if (activeEl && editor.parentElement?.contains(activeEl)) return\n\n dismissTrigger()\n }, BLUR_DELAY_MS)\n }, [editorRef, dismissTrigger])\n\n // -----------------------------------------------------------------------\n // Undo/Redo: intercept Ctrl+Z / Ctrl+Shift+Z\n // -----------------------------------------------------------------------\n\n const handleKeyDownForUndoRedo = useCallback(\n (e: React.KeyboardEvent): boolean => {\n const isMeta = e.metaKey || e.ctrlKey\n\n if (!isMeta || e.key !== 'z') return false\n\n e.preventDefault()\n const state = undoState.current\n\n if (e.shiftKey) {\n // Redo: Ctrl+Shift+Z\n if (state.redoStack.length === 0) return true\n\n const segments = state.redoStack.pop()\n if (!segments) return true\n\n const current = readSegmentsFromDOM()\n state.undoStack.push(current)\n\n onChange(segments)\n renderSegmentsToDOM(segments)\n onRedo?.(segments)\n } else {\n // Undo: Ctrl+Z\n if (state.undoStack.length === 0) return true\n\n const segments = state.undoStack.pop()\n if (!segments) return true\n\n const current = readSegmentsFromDOM()\n state.redoStack.push(current)\n\n onChange(segments)\n renderSegmentsToDOM(segments)\n onUndo?.(segments)\n }\n\n return true\n },\n [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onUndo, onRedo],\n )\n\n // A stable object: every member is a stable useCallback (or a ref), and\n // downstream hooks — handleInput, the imperative handle, the eventHandlers\n // memo — list `events` in their deps. A fresh literal here would rebuild all\n // of them (and re-run useImperativeHandle) on every keystroke's render.\n return useMemo(\n () => ({\n handlePaste,\n handleCopy,\n handleCut,\n handleDrop,\n handleDragOver,\n handleCompositionStart,\n handleCompositionEnd,\n handleBlur,\n handleKeyDownForUndoRedo,\n pushUndo,\n resetUndoHistory,\n isComposing,\n }),\n [\n handlePaste,\n handleCopy,\n handleCut,\n handleDrop,\n handleDragOver,\n handleCompositionStart,\n handleCompositionEnd,\n handleBlur,\n handleKeyDownForUndoRedo,\n pushUndo,\n resetUndoHistory,\n isComposing,\n ],\n )\n}\n", "type": "registry:component" }, { "path": "packages/prompt-area/src/prompt-area/html-to-markdown.ts", "content": "/**\n * Hand-rolled, dependency-free HTML -> Markdown converter.\n *\n * Used by the paste handler: when the editor is in markdown mode and the\n * clipboard carries rich `text/html` (web pages, Notion, Google Docs, GitHub,\n * Slack, Word, etc.), we convert it to markdown SOURCE text so the paste keeps its\n * formatting. The resulting string flows through the same insertion path as a\n * plain-text paste, and the editor's inline decorators render `*`/`**`/`***`\n * and bare URLs automatically.\n *\n * Design constraints (see .size-limit.json): no runtime deps. Parsing uses the\n * ambient `DOMParser`, walking is a small recursive switch. Type-safe: no\n * `any`, DOM narrowed via the guards in `dom-helpers.ts`.\n */\nimport { isHTMLElement, isTextNode } from './dom-helpers'\n\n// ---------------------------------------------------------------------------\n// Inline style / emphasis detection\n// ---------------------------------------------------------------------------\n\n/** Reads a single declaration value from an inline `style` attribute string. */\nfunction getStyleValue(style: string, prop: string): string {\n const match = new RegExp(`(?:^|;)\\\\s*${prop}\\\\s*:\\\\s*([^;]+)`, 'i').exec(style)\n return match ? match[1].trim().toLowerCase() : ''\n}\n\n/** Whether a CSS font-weight value is bold (`bold`, `bolder`, or >= 600). */\nfunction isBoldWeight(value: string): boolean {\n if (value === 'bold' || value === 'bolder') return true\n const numeric = Number.parseInt(value, 10)\n return !Number.isNaN(numeric) && numeric >= 600\n}\n\n/**\n * Computes the markdown emphasis markers for an element from BOTH its tag and\n * its inline style. Google Docs emits `` rather\n * than ``, and wraps everything in ``, so an\n * explicit `font-weight`/`font-style` always wins over the tag name.\n */\nfunction inlineEmphasis(node: HTMLElement): { prefix: string; suffix: string } {\n const tag = node.tagName\n const style = node.getAttribute('style') ?? ''\n\n const weight = getStyleValue(style, 'font-weight')\n const bold = weight ? isBoldWeight(weight) : tag === 'B' || tag === 'STRONG'\n\n const fontStyle = getStyleValue(style, 'font-style')\n const italic = fontStyle\n ? fontStyle === 'italic' || fontStyle === 'oblique'\n : tag === 'I' || tag === 'EM'\n\n const decoration = getStyleValue(style, 'text-decoration')\n const strike =\n tag === 'S' || tag === 'DEL' || tag === 'STRIKE' || decoration.includes('line-through')\n\n const prefix = (strike ? '~~' : '') + (bold ? '**' : '') + (italic ? '*' : '')\n const suffix = (italic ? '*' : '') + (bold ? '**' : '') + (strike ? '~~' : '')\n return { prefix, suffix }\n}\n\n// ---------------------------------------------------------------------------\n// Text handling\n// ---------------------------------------------------------------------------\n\n/** Collapses HTML whitespace runs (incl. ` ` -> U+00A0) to single spaces. */\nfunction collapseWhitespace(text: string): string {\n return text.replace(/\\s+/g, ' ')\n}\n\n/** Escapes literal `*` from HTML text so prose isn't re-read as emphasis. */\nfunction escapeText(text: string): string {\n return text.replace(/\\*/g, '\\\\*')\n}\n\n// ---------------------------------------------------------------------------\n// Microsoft Office clipboard HTML (Word / Outlook / Excel)\n// ---------------------------------------------------------------------------\n\n/**\n * Office fingerprints: `urn:schemas-microsoft-com:office` xmlns declarations,\n * ``, `Mso*` class names (quoted or\n * Word's unquoted `class=MsoNormal`), and `mso-*` style declarations.\n */\nconst OFFICE_HTML_MARKER =\n /urn:schemas-microsoft-com:office|name=[\"']?ProgId|class=[\"']?Mso|\\bmso-[\\w-]+\\s*:/i\n\n/**\n * Whether clipboard HTML came from a Microsoft Office app. Office apps put a\n * bitmap RENDERING of the copied selection on the clipboard alongside the\n * HTML (macOS Word especially), so the paste handler uses this to keep a\n * text copy from being mistaken for an image paste.\n */\nexport function isOfficeHtml(html: string): boolean {\n return OFFICE_HTML_MARKER.test(html)\n}\n\n/** Word's inline list metadata: `mso-list:l0 level2 lfo1` → nesting level 2. */\nconst MSO_LIST_LEVEL = /mso-list:\\s*l\\d+\\s+level(\\d+)/i\n/** `1.` / `12)` — numeric ordered marker; captures the digits. */\nconst NUMERIC_MARKER = /^(\\d+)[.)]/\n/** `a.` / `B)` / `iv.` — alphabetic/roman ordered marker. */\nconst ALPHA_MARKER = /^[a-z]{1,5}[.)]/i\n\ntype WordListItem = { p: HTMLElement; level: number }\n\n/**\n * Classifies a `

    ` as a Word list paragraph. Word clipboard HTML has no\n * `