fix: an issue in the HistoryView component where keywords in copied content contain html code (#1662)

* fix: an issue in the HistoryView component where keywords in copied content contain html code

* Update webview-ui/src/components/history/HistoryView.tsx

* Fix test

---------

Co-authored-by: Matt Rubens <[email protected]>

Author: im47cn

webview-ui/src/components/history/CopyButton.tsx

@@ -16,7 +16,10 @@ export const CopyButton = ({ itemTask }: CopyButtonProps) => {
 	const onCopy = useCallback(
 		(e: React.MouseEvent) => {
 			e.stopPropagation()
-			!isCopied && copy(itemTask)
+			const tempDiv = document.createElement('div');
+			tempDiv.innerHTML = itemTask;
+			const text = tempDiv.textContent || tempDiv.innerText || "";
+			!isCopied && copy(text)
 		},
 		[isCopied, copy, itemTask],
 	)

webview-ui/src/components/history/HistoryView.tsx

@@ -104,6 +104,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					}}
 					data={tasks}
 					data-testid="virtuoso-container"
+					initialTopMostItemIndex={0}
 					components={{
 						List: React.forwardRef((props, ref) => (
 							<div {...props} ref={ref} data-testid="virtuoso-item-list" />
@@ -172,6 +173,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 										wordBreak: "break-word",
 										overflowWrap: "anywhere",
 									}}
+									data-testid="task-content"
 									dangerouslySetInnerHTML={{ __html: item.task }}
 								/>
 								<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>

webview-ui/src/components/history/__tests__/HistoryView.test.tsx

@@ -8,7 +8,6 @@ import { vscode } from "../../../utils/vscode"
 jest.mock("../../../context/ExtensionStateContext")
 jest.mock("../../../utils/vscode")
 jest.mock("../../../i18n/TranslationContext")
-
 jest.mock("react-virtuoso", () => ({
 	Virtuoso: ({ data, itemContent }: any) => (
 		<div data-testid="virtuoso-container">
@@ -71,6 +70,12 @@ describe("HistoryView", () => {
 	})
 
 	it("handles search functionality", () => {
+		// Setup clipboard mock that resolves immediately
+		const mockClipboard = {
+			writeText: jest.fn().mockResolvedValue(undefined),
+		}
+		Object.assign(navigator, { clipboard: mockClipboard })
+
 		const onDone = jest.fn()
 		render(<HistoryView onDone={onDone} />)
 
@@ -97,6 +102,14 @@ describe("HistoryView", () => {
 		// Verify radio button is checked
 		const updatedRadio = within(radioGroup).getByTestId("radio-most-relevant")
 		expect(updatedRadio).toBeInTheDocument()
+
+		// Verify copy the plain text content of the task when the copy button is clicked
+		const taskContainer = screen.getByTestId("virtuoso-item-1")
+		fireEvent.mouseEnter(taskContainer)
+		const copyButton = within(taskContainer).getByTestId("copy-prompt-button")
+		fireEvent.click(copyButton)
+		const taskContent = within(taskContainer).getByTestId("task-content")
+		expect(navigator.clipboard.writeText).toHaveBeenCalledWith(taskContent.textContent)
 	})
 
 	it("handles sort options correctly", async () => {