mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-07 13:59:28 +08:00
fix: message editor doesn't resize (#6924)
* fix: message editor doesn't resize * fix: remove console log * fix: optimize useEffect dependencies and improve textarea resizing logic --------- Co-authored-by: Pleasurecruise <3196812536@qq.com>
This commit is contained in:
parent
dc21dd1802
commit
f033a73187
@ -45,16 +45,6 @@ const MessageBlockEditor: FC<Props> = ({ message, onSave, onResend, onCancel })
|
|||||||
const textareaRef = useRef<TextAreaRef>(null)
|
const textareaRef = useRef<TextAreaRef>(null)
|
||||||
const attachmentButtonRef = useRef<AttachmentButtonRef>(null)
|
const attachmentButtonRef = useRef<AttachmentButtonRef>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resizeTextArea()
|
|
||||||
if (textareaRef.current) {
|
|
||||||
textareaRef.current.focus({ cursor: 'end' })
|
|
||||||
}
|
|
||||||
}, 0)
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const resizeTextArea = useCallback(() => {
|
const resizeTextArea = useCallback(() => {
|
||||||
const textArea = textareaRef.current?.resizableTextArea?.textArea
|
const textArea = textareaRef.current?.resizableTextArea?.textArea
|
||||||
if (textArea) {
|
if (textArea) {
|
||||||
@ -63,6 +53,15 @@ const MessageBlockEditor: FC<Props> = ({ message, onSave, onResend, onCancel })
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resizeTextArea()
|
||||||
|
if (textareaRef.current) {
|
||||||
|
textareaRef.current.focus({ cursor: 'end' })
|
||||||
|
}
|
||||||
|
}, 0)
|
||||||
|
}, [resizeTextArea])
|
||||||
|
|
||||||
const onPaste = useCallback(
|
const onPaste = useCallback(
|
||||||
async (event: ClipboardEvent) => {
|
async (event: ClipboardEvent) => {
|
||||||
return await PasteService.handlePaste(
|
return await PasteService.handlePaste(
|
||||||
@ -84,13 +83,9 @@ const MessageBlockEditor: FC<Props> = ({ message, onSave, onResend, onCancel })
|
|||||||
|
|
||||||
// 添加全局粘贴事件处理
|
// 添加全局粘贴事件处理
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 注册当前组件的粘贴处理函数
|
|
||||||
PasteService.registerHandler('messageEditor', onPaste)
|
PasteService.registerHandler('messageEditor', onPaste)
|
||||||
|
|
||||||
// 在组件加载时将焦点设置为当前组件
|
|
||||||
PasteService.setLastFocusedComponent('messageEditor')
|
PasteService.setLastFocusedComponent('messageEditor')
|
||||||
|
|
||||||
// 卸载时取消注册
|
|
||||||
return () => {
|
return () => {
|
||||||
PasteService.unregisterHandler('messageEditor')
|
PasteService.unregisterHandler('messageEditor')
|
||||||
}
|
}
|
||||||
@ -165,12 +160,6 @@ const MessageBlockEditor: FC<Props> = ({ message, onSave, onResend, onCancel })
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const autoResizeTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
const textarea = e.target
|
|
||||||
textarea.style.height = 'auto'
|
|
||||||
textarea.style.height = `${textarea.scrollHeight}px`
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EditorContainer className="message-editor" onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
|
<EditorContainer className="message-editor" onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
|
||||||
{editedBlocks
|
{editedBlocks
|
||||||
@ -184,7 +173,7 @@ const MessageBlockEditor: FC<Props> = ({ message, onSave, onResend, onCancel })
|
|||||||
value={block.content}
|
value={block.content}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
handleTextChange(block.id, e.target.value)
|
handleTextChange(block.id, e.target.value)
|
||||||
autoResizeTextArea(e)
|
resizeTextArea()
|
||||||
}}
|
}}
|
||||||
autoFocus
|
autoFocus
|
||||||
contextMenu="true"
|
contextMenu="true"
|
||||||
|
|||||||
@ -101,11 +101,9 @@ const AboutSettings: FC = () => {
|
|||||||
setVersion(appInfo.version)
|
setVersion(appInfo.version)
|
||||||
setIsPortable(appInfo.isPortable)
|
setIsPortable(appInfo.isPortable)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 初始化设置
|
|
||||||
setEarlyAccess(earlyAccess)
|
setEarlyAccess(earlyAccess)
|
||||||
setAutoCheckUpdate(autoCheckUpdate)
|
setAutoCheckUpdate(autoCheckUpdate)
|
||||||
}, [])
|
}, [autoCheckUpdate, earlyAccess, setAutoCheckUpdate, setEarlyAccess])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingContainer theme={theme}>
|
<SettingContainer theme={theme}>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user