Fix search highlighting scroll issue and improve color contrast
- Remove overlay-based highlighting that stayed in place during scroll - Switch between read-only highlighted view and editable textarea based on search state - Enhance color contrast: current match (red text + yellow bg), other matches (blue text + light blue bg) - Use font-bold for better visibility of search results - Ensure highlights follow text content during scrolling
This commit is contained in:
@@ -240,10 +240,10 @@ export function FileViewer({
|
|||||||
<span
|
<span
|
||||||
key={`match-${index}`}
|
key={`match-${index}`}
|
||||||
className={cn(
|
className={cn(
|
||||||
"font-semibold",
|
"font-bold",
|
||||||
isCurrentMatch
|
isCurrentMatch
|
||||||
? "text-orange-500"
|
? "text-red-600 bg-yellow-200"
|
||||||
: "text-blue-600"
|
: "text-blue-800 bg-blue-100"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{text.substring(match.start, match.end)}
|
{text.substring(match.start, match.end)}
|
||||||
@@ -522,32 +522,29 @@ export function FileViewer({
|
|||||||
{shouldShowAsText && !showLargeFileWarning && (
|
{shouldShowAsText && !showLargeFileWarning && (
|
||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
{isEditable ? (
|
{isEditable ? (
|
||||||
<div className="relative h-full">
|
<div className="h-full">
|
||||||
{/* 高亮背景层 */}
|
{searchText && searchMatches.length > 0 ? (
|
||||||
{searchText && (
|
// 当有搜索结果时,显示只读的高亮文本
|
||||||
<div
|
<div className={cn(
|
||||||
className={cn(
|
"h-full p-4 font-mono text-sm whitespace-pre-wrap overflow-auto",
|
||||||
"absolute inset-0 p-4 font-mono text-sm whitespace-pre-wrap overflow-auto pointer-events-none",
|
fileTypeInfo.type === 'code' ? "bg-muted text-foreground" : "bg-background text-foreground"
|
||||||
"text-transparent z-0",
|
)}>
|
||||||
fileTypeInfo.type === 'code' && "bg-muted"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{renderHighlightedText(editedContent)}
|
{renderHighlightedText(editedContent)}
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
// 没有搜索时显示可编辑的textarea
|
||||||
|
<textarea
|
||||||
|
value={editedContent}
|
||||||
|
onChange={(e) => handleContentChange(e.target.value)}
|
||||||
|
className={cn(
|
||||||
|
"w-full h-full p-4 border-none resize-none outline-none",
|
||||||
|
"font-mono text-sm overflow-auto bg-background text-foreground",
|
||||||
|
fileTypeInfo.type === 'code' && "bg-muted text-foreground"
|
||||||
|
)}
|
||||||
|
placeholder="Start typing..."
|
||||||
|
spellCheck={false}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{/* 编辑器文本区域 */}
|
|
||||||
<textarea
|
|
||||||
value={editedContent}
|
|
||||||
onChange={(e) => handleContentChange(e.target.value)}
|
|
||||||
className={cn(
|
|
||||||
"relative w-full h-full p-4 border-none resize-none outline-none z-10",
|
|
||||||
"font-mono text-sm overflow-auto",
|
|
||||||
searchText ? "bg-transparent text-foreground" : "bg-background text-foreground",
|
|
||||||
fileTypeInfo.type === 'code' && !searchText && "bg-muted text-foreground"
|
|
||||||
)}
|
|
||||||
placeholder="Start typing..."
|
|
||||||
spellCheck={false}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
|
|||||||
Reference in New Issue
Block a user