@@ -24,20 +24,16 @@ import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
2424const MONO_FONT_STACK =
2525 "'JetBrains Mono', 'Fira Code', 'SFMono-Regular', ui-monospace, 'Source Code Pro', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" ;
2626
27- const TextPreview : React . FC < TextPreviewProps > = memo (
28- ( { content, loading, isSmallScreen, previewingItem, onClose } ) => {
27+ interface TextPreviewContentProps extends Omit < TextPreviewProps , "content" | "loading" > {
28+ content : string ;
29+ }
30+
31+ const TextPreviewContent : React . FC < TextPreviewContentProps > = memo (
32+ ( { content, isSmallScreen, previewingItem, onClose } ) => {
2933 const theme = useTheme ( ) ;
3034 const { t } = useI18n ( ) ;
3135 const [ wrapText , setWrapText ] = useState < boolean > ( false ) ;
32- const { copied, copy, reset } = useCopyToClipboard ( ) ;
33- const [ prevContent , setPrevContent ] = useState ( content ) ;
34-
35- // 当 content 变化时,重置 UI 状态
36- if ( content !== prevContent ) {
37- setPrevContent ( content ) ;
38- setWrapText ( false ) ;
39- reset ( ) ;
40- }
36+ const { copied, copy } = useCopyToClipboard ( ) ;
4137
4238 const normalizedLines = useMemo ( ( ) => {
4339 if ( typeof content !== "string" ) {
@@ -175,28 +171,6 @@ const TextPreview: React.FC<TextPreviewProps> = memo(
175171 }
176172 } , [ prismTheme , theme . palette . text . primary ] ) ;
177173
178- if ( loading ) {
179- return (
180- < Box
181- sx = { {
182- display : "flex" ,
183- alignItems : "center" ,
184- justifyContent : "center" ,
185- width : "100%" ,
186- height : "100%" ,
187- minHeight : "220px" ,
188- } }
189- data-oid = "text-preview-loading"
190- >
191- < CircularProgress size = { 28 } />
192- </ Box >
193- ) ;
194- }
195-
196- if ( typeof content !== "string" ) {
197- return null ;
198- }
199-
200174 return (
201175 < Box sx = { { position : "relative" , width : "100%" , height : "100%" } } data-oid = "text-preview" >
202176 < GlobalStyles
@@ -555,6 +529,50 @@ const TextPreview: React.FC<TextPreviewProps> = memo(
555529 } ,
556530) ;
557531
532+ TextPreviewContent . displayName = "TextPreviewContent" ;
533+
534+ const TextPreview : React . FC < TextPreviewProps > = memo (
535+ ( { content, loading, isSmallScreen, previewingItem, onClose } ) => {
536+ const contentKey = useMemo ( ( ) => {
537+ const safeContent = typeof content === "string" ? content : "" ;
538+ const pathKey = previewingItem ?. path ?? "" ;
539+ return `${ pathKey } ::${ safeContent } ` ;
540+ } , [ content , previewingItem ?. path ] ) ;
541+
542+ if ( loading ) {
543+ return (
544+ < Box
545+ sx = { {
546+ display : "flex" ,
547+ alignItems : "center" ,
548+ justifyContent : "center" ,
549+ width : "100%" ,
550+ height : "100%" ,
551+ minHeight : "220px" ,
552+ } }
553+ data-oid = "text-preview-loading"
554+ >
555+ < CircularProgress size = { 28 } />
556+ </ Box >
557+ ) ;
558+ }
559+
560+ if ( typeof content !== "string" ) {
561+ return null ;
562+ }
563+
564+ return (
565+ < TextPreviewContent
566+ key = { contentKey }
567+ content = { content }
568+ isSmallScreen = { isSmallScreen }
569+ previewingItem = { previewingItem ?? null }
570+ { ...( onClose !== undefined ? { onClose } : { } ) }
571+ />
572+ ) ;
573+ } ,
574+ ) ;
575+
558576TextPreview . displayName = "TextPreview" ;
559577
560578export default TextPreview ;
0 commit comments