([])
+ const [activeLineNumber, setActiveLineNumber] = useState(1)
const {
data: fetchedContent,
isLoading,
error,
- dataUpdatedAt,
- } = useWorkspaceFileContent(workspaceId, file.id, file.key, file.type === 'text/x-pptxgenjs')
+ } = useWorkspaceFileContent(
+ workspaceId,
+ file.id,
+ file.key,
+ file.type === 'text/x-pptxgenjs' ||
+ file.type === 'text/x-docxjs' ||
+ file.type === 'text/x-pdflibjs'
+ )
const updateContent = useUpdateWorkspaceFileContent()
const updateContentRef = useRef(updateContent)
updateContentRef.current = updateContent
- const [content, setContent] = useState('')
- const [savedContent, setSavedContent] = useState('')
- const savedContentRef = useRef('')
+ const shouldUseCodeRenderer = useCodeRendererForCodeFiles && isCodeFile(file)
+ const codeLanguage = useMemo(() => resolveCodeEditorLanguage(file), [file.name, file.type])
+ const onDirtyChangeRef = useRef(onDirtyChange)
+ const onSaveStatusChangeRef = useRef(onSaveStatusChange)
+ onDirtyChangeRef.current = onDirtyChange
+ onSaveStatusChangeRef.current = onSaveStatusChange
+
+ const {
+ content,
+ savedContent,
+ isInitialized,
+ isStreamInteractionLocked,
+ setDraftContent,
+ markSavedContent,
+ } = useTextEditorContentState({
+ canReconcileToFetchedContent: file.key.length > 0,
+ fetchedContent,
+ streamingContent,
+ streamingMode,
+ })
useEffect(() => {
- if (streamingContent !== undefined) {
- setContent(streamingContent)
- contentRef.current = streamingContent
- initializedRef.current = true
+ if (!autoFocus || !isInitialized || hasAutoFocusedRef.current) {
return
}
- if (fetchedContent === undefined) return
-
- if (!initializedRef.current) {
- setContent(fetchedContent)
- setSavedContent(fetchedContent)
- savedContentRef.current = fetchedContent
- contentRef.current = fetchedContent
- initializedRef.current = true
-
- if (autoFocus) {
- requestAnimationFrame(() => textareaRef.current?.focus())
+ hasAutoFocusedRef.current = true
+ requestAnimationFrame(() => {
+ const editorTextarea = codeEditorRef.current?.querySelector('textarea')
+ if (editorTextarea instanceof HTMLTextAreaElement) {
+ editorTextarea.focus()
+ return
}
- return
- }
-
- if (fetchedContent === savedContentRef.current) return
- const isClean = contentRef.current === savedContentRef.current
- if (isClean) {
- setContent(fetchedContent)
- setSavedContent(fetchedContent)
- savedContentRef.current = fetchedContent
- contentRef.current = fetchedContent
- }
- }, [streamingContent, fetchedContent, dataUpdatedAt, autoFocus])
+ textareaRef.current?.focus()
+ })
+ }, [autoFocus, isInitialized])
- const handleContentChange = useCallback((value: string) => {
- setContent(value)
- contentRef.current = value
- }, [])
+ const handleContentChange = useCallback(
+ (value: string) => {
+ if (value === content) {
+ return
+ }
+ setDraftContent(value)
+ },
+ [content, setDraftContent]
+ )
const onSave = useCallback(async () => {
- const currentContent = contentRef.current
- if (currentContent === savedContentRef.current) return
+ if (content === savedContent) return
await updateContentRef.current.mutateAsync({
workspaceId,
fileId: file.id,
- content: currentContent,
+ content,
})
- setSavedContent(currentContent)
- savedContentRef.current = currentContent
- }, [workspaceId, file.id])
+ markSavedContent(content)
+ }, [content, file.id, markSavedContent, savedContent, workspaceId])
const { saveStatus, saveImmediately, isDirty } = useAutosave({
content,
savedContent,
onSave,
- enabled: canEdit && initializedRef.current,
+ enabled: canEdit && isInitialized && !isStreamInteractionLocked,
})
useEffect(() => {
- onDirtyChange?.(isDirty)
- }, [isDirty, onDirtyChange])
+ onDirtyChangeRef.current?.(isDirty)
+ }, [isDirty])
useEffect(() => {
- onSaveStatusChange?.(saveStatus)
- }, [saveStatus, onSaveStatusChange])
+ onSaveStatusChangeRef.current?.(saveStatus)
+ }, [saveStatus])
- if (saveRef) saveRef.current = saveImmediately
- useEffect(
- () => () => {
- if (saveRef) saveRef.current = null
- },
- [saveRef]
- )
+ useEffect(() => {
+ if (!saveRef) {
+ return
+ }
+
+ saveRef.current = saveImmediately
+
+ return () => {
+ if (saveRef.current === saveImmediately) {
+ saveRef.current = null
+ }
+ }
+ }, [saveImmediately, saveRef])
useEffect(() => {
if (!isResizing) return
@@ -331,28 +726,186 @@ function TextEditor({
const handleCheckboxToggle = useCallback(
(checkboxIndex: number, checked: boolean) => {
- const toggled = toggleMarkdownCheckbox(contentRef.current, checkboxIndex, checked)
- if (toggled !== contentRef.current) {
+ const toggled = toggleMarkdownCheckbox(content, checkboxIndex, checked)
+ if (toggled !== content) {
handleContentChange(toggled)
}
},
- [handleContentChange]
+ [content, 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: isEditorReadOnly,
+ isStreaming: isStreaming,
+ }),
+ [isEditorReadOnly, isStreaming]
+ )
+ 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) return
+ const textarea = codeEditorRef.current?.querySelector('textarea')
+ if (!(textarea instanceof HTMLTextAreaElement)) return
+
+ const updateActiveLineNumber = () => {
+ const pos = textarea.selectionStart
+ const textBeforeCursor = renderedContent.substring(0, pos)
+ const nextActiveLineNumber = textBeforeCursor.split('\n').length
+ setActiveLineNumber((currentLineNumber) =>
+ currentLineNumber === nextActiveLineNumber ? currentLineNumber : nextActiveLineNumber
+ )
+ }
+
+ 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((currentVisualLineHeights) =>
+ areNumberArraysEqual(currentVisualLineHeights, newVisualLineHeights)
+ ? currentVisualLineHeights
+ : 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 +920,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 +947,52 @@ 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 && (
-