Browse Source

Fix Copy button logic (#4458)

* refactor: streamline text copying by removing history highlight spans

* refactor: improve regex for stripping history highlight spans to handle all content types

---------

Co-authored-by: Daniel Riccio <[email protected]>
Sam Hoang Van 7 months ago
parent
commit
19108f7136
1 changed files with 16 additions and 5 deletions
  1. 16 5
      webview-ui/src/components/history/CopyButton.tsx

+ 16 - 5
webview-ui/src/components/history/CopyButton.tsx

@@ -10,6 +10,19 @@ type CopyButtonProps = {
 	className?: string
 }
 
+/**
+ * Strips only history highlight spans from text while preserving other HTML
+ * Targets: <span class="history-item-highlight">content</span>
+ * @param text - Text that may contain highlight spans
+ * @returns Text with highlight spans removed but content preserved
+ */
+const stripHistoryHighlightSpans = (text: string): string => {
+	// Match opening tag, capture content until closing tag
+	// The [\s\S]*? pattern matches any character (including newlines) non-greedily,
+	// which properly handles content with < characters
+	return text.replace(/<span\s+class="history-item-highlight">([\s\S]*?)<\/span>/g, "$1")
+}
+
 export const CopyButton = ({ itemTask, className }: CopyButtonProps) => {
 	const { isCopied, copy } = useClipboard()
 	const { t } = useAppTranslation()
@@ -17,12 +30,10 @@ export const CopyButton = ({ itemTask, className }: CopyButtonProps) => {
 	const onCopy = useCallback(
 		(e: React.MouseEvent) => {
 			e.stopPropagation()
-			const tempDiv = document.createElement("div")
-			tempDiv.innerHTML = itemTask
-			const text = tempDiv.textContent || tempDiv.innerText || ""
-
 			if (!isCopied) {
-				copy(text)
+				// Strip only history highlight spans before copying to clipboard
+				const cleanText = stripHistoryHighlightSpans(itemTask)
+				copy(cleanText)
 			}
 		},
 		[isCopied, copy, itemTask],