(null)
+ const shouldUseCodeRenderer = useCodeRendererForCodeFiles && isCodeFile(file)
+ const codeLanguage = useMemo(() => resolveCodeEditorLanguage(file), [file])
useEffect(() => {
+ const lastStreamed = lastStreamedContentRef.current
+ const hasPendingReconcile = wasStreamingRef.current && pendingStreamReconcileRef.current
+ const hasFetchedAdvanced =
+ fetchedContent !== undefined && fetchedContent !== savedContentRef.current
+ const fetchedMatchesLastStream =
+ fetchedContent !== undefined && lastStreamed !== null && fetchedContent === lastStreamed
+
if (streamingContent !== undefined) {
- setContent(streamingContent)
- contentRef.current = streamingContent
+ const nextContent =
+ streamingMode === 'replace' || fetchedContent === undefined
+ ? streamingContent
+ : fetchedContent.endsWith(streamingContent) ||
+ fetchedContent.endsWith(`\n${streamingContent}`)
+ ? fetchedContent
+ : `${fetchedContent}\n${streamingContent}`
+ const fetchedMatchesNextStream =
+ fetchedContent !== undefined && fetchedContent === nextContent
+
+ if (
+ hasPendingReconcile &&
+ (hasFetchedAdvanced || fetchedMatchesLastStream || fetchedMatchesNextStream)
+ ) {
+ pendingStreamReconcileRef.current = false
+ wasStreamingRef.current = false
+ lastStreamedContentRef.current = null
+ setIsStreamInteractionLocked(false)
+ setContent(fetchedContent)
+ contentRef.current = fetchedContent
+ setSavedContent(fetchedContent)
+ savedContentRef.current = fetchedContent
+ initializedRef.current = true
+ return
+ }
+
+ wasStreamingRef.current = true
+ setIsStreamInteractionLocked(true)
+ if (nextContent === contentRef.current) {
+ pendingStreamReconcileRef.current = true
+ lastStreamedContentRef.current = nextContent
+ initializedRef.current = true
+ return
+ }
+ pendingStreamReconcileRef.current = true
+ lastStreamedContentRef.current = nextContent
+ setContent(nextContent)
+ contentRef.current = nextContent
initializedRef.current = true
return
}
+ if (hasPendingReconcile) {
+ if (hasFetchedAdvanced || fetchedMatchesLastStream) {
+ pendingStreamReconcileRef.current = false
+ wasStreamingRef.current = false
+ lastStreamedContentRef.current = null
+ setIsStreamInteractionLocked(false)
+ setContent(fetchedContent)
+ contentRef.current = fetchedContent
+ setSavedContent(fetchedContent)
+ savedContentRef.current = fetchedContent
+ return
+ }
+ }
+
+ if (streamingContent === undefined) {
+ setIsStreamInteractionLocked(false)
+ }
+
if (fetchedContent === undefined) return
if (!initializedRef.current) {
@@ -247,7 +436,14 @@ function TextEditor({
initializedRef.current = true
if (autoFocus) {
- requestAnimationFrame(() => textareaRef.current?.focus())
+ requestAnimationFrame(() => {
+ const editorTextarea = codeEditorRef.current?.querySelector('textarea')
+ if (editorTextarea instanceof HTMLTextAreaElement) {
+ editorTextarea.focus()
+ return
+ }
+ textareaRef.current?.focus()
+ })
}
return
}
@@ -260,7 +456,7 @@ function TextEditor({
savedContentRef.current = fetchedContent
contentRef.current = fetchedContent
}
- }, [streamingContent, fetchedContent, dataUpdatedAt, autoFocus])
+ }, [streamingContent, fetchedContent, streamingMode, dataUpdatedAt, autoFocus])
const handleContentChange = useCallback((value: string) => {
setContent(value)
@@ -284,7 +480,7 @@ function TextEditor({
content,
savedContent,
onSave,
- enabled: canEdit && initializedRef.current,
+ enabled: canEdit && initializedRef.current && streamingContent === undefined,
})
useEffect(() => {
@@ -339,20 +535,195 @@ function TextEditor({
[handleContentChange]
)
- const isStreaming = streamingContent !== undefined
- const revealedContent = useStreamingText(content, isStreaming)
+ const isStreaming = isStreamInteractionLocked
+ const isEditorReadOnly = isStreamInteractionLocked || !canEdit
+ const renderedContent = content
+ const gutterWidthPx = useMemo(() => {
+ const lineCount = renderedContent.split('\n').length
+ return calculateGutterWidth(lineCount)
+ }, [renderedContent])
+ const sharedCodeEditorProps = useMemo(
+ () =>
+ getCodeEditorProps({
+ disabled: !canEdit,
+ }),
+ [canEdit]
+ )
+ const highlightCode = useMemo(() => {
+ return (value: string) => {
+ const grammar = languages[codeLanguage] || languages.javascript
+ return highlight(value, grammar, codeLanguage)
+ }
+ }, [codeLanguage])
+ const handleCodeContentChange = useCallback(
+ (value: string) => {
+ if (isEditorReadOnly) return
+ handleContentChange(value)
+ },
+ [handleContentChange, isEditorReadOnly]
+ )
const textareaStuckRef = useRef(true)
+ useEffect(() => {
+ if (!shouldUseCodeRenderer || !codeEditorRef.current) return
+
+ const setCodeEditorReadOnly = () => {
+ const textarea = codeEditorRef.current?.querySelector('textarea')
+ if (!(textarea instanceof HTMLTextAreaElement)) return
+ textarea.readOnly = isEditorReadOnly
+ textarea.spellcheck = false
+ }
+
+ setCodeEditorReadOnly()
+
+ const timeoutId = setTimeout(setCodeEditorReadOnly, 0)
+ const observer = new MutationObserver(setCodeEditorReadOnly)
+ observer.observe(codeEditorRef.current, {
+ childList: true,
+ subtree: true,
+ })
+
+ return () => {
+ clearTimeout(timeoutId)
+ observer.disconnect()
+ }
+ }, [isEditorReadOnly, shouldUseCodeRenderer])
+
+ useEffect(() => {
+ if (!shouldUseCodeRenderer) return
+ const textarea = codeEditorRef.current?.querySelector('textarea')
+ if (!(textarea instanceof HTMLTextAreaElement)) return
+
+ const updateActiveLineNumber = () => {
+ const pos = textarea.selectionStart
+ const textBeforeCursor = renderedContent.substring(0, pos)
+ setActiveLineNumber(textBeforeCursor.split('\n').length)
+ }
+
+ updateActiveLineNumber()
+ textarea.addEventListener('click', updateActiveLineNumber)
+ textarea.addEventListener('keyup', updateActiveLineNumber)
+ textarea.addEventListener('focus', updateActiveLineNumber)
+
+ return () => {
+ textarea.removeEventListener('click', updateActiveLineNumber)
+ textarea.removeEventListener('keyup', updateActiveLineNumber)
+ textarea.removeEventListener('focus', updateActiveLineNumber)
+ }
+ }, [renderedContent, shouldUseCodeRenderer])
+
+ useEffect(() => {
+ if (!shouldUseCodeRenderer || !codeEditorRef.current) return
+
+ const calculateVisualLines = () => {
+ const preElement = codeEditorRef.current?.querySelector('pre')
+ if (!(preElement instanceof HTMLElement)) return
+
+ const lines = renderedContent.split('\n')
+ const newVisualLineHeights: number[] = []
+
+ const tempContainer = document.createElement('div')
+ tempContainer.style.cssText = `
+ position: absolute;
+ visibility: hidden;
+ height: auto;
+ width: ${preElement.clientWidth}px;
+ font-family: ${window.getComputedStyle(preElement).fontFamily};
+ font-size: ${window.getComputedStyle(preElement).fontSize};
+ line-height: ${CODE_EDITOR_LINE_HEIGHT_PX}px;
+ padding: 8px;
+ white-space: pre-wrap;
+ word-break: break-word;
+ box-sizing: border-box;
+ `
+ document.body.appendChild(tempContainer)
+
+ lines.forEach((line) => {
+ const lineDiv = document.createElement('div')
+ lineDiv.textContent = line || ' '
+ tempContainer.appendChild(lineDiv)
+ const actualHeight = lineDiv.getBoundingClientRect().height
+ const lineUnits = Math.max(1, Math.ceil(actualHeight / CODE_EDITOR_LINE_HEIGHT_PX))
+ newVisualLineHeights.push(lineUnits)
+ tempContainer.removeChild(lineDiv)
+ })
+
+ document.body.removeChild(tempContainer)
+ setVisualLineHeights(newVisualLineHeights)
+ }
+
+ const timeoutId = setTimeout(calculateVisualLines, 50)
+ const resizeObserver = new ResizeObserver(calculateVisualLines)
+ resizeObserver.observe(codeEditorRef.current)
+
+ return () => {
+ clearTimeout(timeoutId)
+ resizeObserver.disconnect()
+ }
+ }, [renderedContent, shouldUseCodeRenderer])
+
+ const renderCodeLineNumbers = useCallback((): ReactElement[] => {
+ const numbers: ReactElement[] = []
+ let lineNumber = 1
+
+ visualLineHeights.forEach((height) => {
+ const isActive = lineNumber === activeLineNumber
+ numbers.push(
+
+ {lineNumber}
+
+ )
+
+ for (let i = 1; i < height; i++) {
+ numbers.push(
+
+ {lineNumber}
+
+ )
+ }
+
+ lineNumber++
+ })
+
+ if (numbers.length === 0) {
+ numbers.push(
+
+ 1
+
+ )
+ }
+
+ return numbers
+ }, [activeLineNumber, visualLineHeights])
+
useEffect(() => {
if (!isStreaming) return
+ if (disableStreamingAutoScroll) {
+ textareaStuckRef.current = false
+ return
+ }
textareaStuckRef.current = true
- const el = textareaRef.current
+ const el = (shouldUseCodeRenderer ? codeScrollRef.current : textareaRef.current) ?? null
if (!el) return
- const onWheel = (e: WheelEvent) => {
- if (e.deltaY < 0) textareaStuckRef.current = false
+ const onWheel = (e: Event) => {
+ if ((e as WheelEvent).deltaY < 0) textareaStuckRef.current = false
}
const onScroll = () => {
@@ -367,14 +738,20 @@ function TextEditor({
el.removeEventListener('wheel', onWheel)
el.removeEventListener('scroll', onScroll)
}
- }, [isStreaming])
+ }, [disableStreamingAutoScroll, isStreaming, shouldUseCodeRenderer])
useEffect(() => {
- if (!isStreaming || !textareaStuckRef.current) return
- const el = textareaRef.current
+ if (!isStreaming || !textareaStuckRef.current || disableStreamingAutoScroll) return
+ const el = (shouldUseCodeRenderer ? codeScrollRef.current : textareaRef.current) ?? null
if (!el) return
el.scrollTop = el.scrollHeight
- }, [isStreaming, revealedContent])
+ }, [disableStreamingAutoScroll, isStreaming, renderedContent, shouldUseCodeRenderer])
+
+ const previewType = resolvePreviewType(file.type, file.name)
+ const isIframeRendered = previewType === 'html' || previewType === 'svg'
+ const effectiveMode = isStreaming && isIframeRendered ? 'editor' : previewMode
+ const showEditor = effectiveMode !== 'preview'
+ const showPreviewPane = effectiveMode !== 'editor'
if (streamingContent === undefined) {
if (isLoading) return DOCUMENT_SKELETON
@@ -388,29 +765,51 @@ function TextEditor({
}
}
- const previewType = resolvePreviewType(file.type, file.name)
- const isIframeRendered = previewType === 'html' || previewType === 'svg'
- const effectiveMode = isStreaming && isIframeRendered ? 'editor' : previewMode
- const showEditor = effectiveMode !== 'preview'
- const showPreviewPane = effectiveMode !== 'editor'
-
return (
- {showEditor && (
-