feat: add word wrap flag to CodeBlock

Add wordWrap prop to CodeBlock component, defaulting to true. This flag enables future implementation to control of word wrapping behavior. Signed-off-by: Eric Wheeler <[email protected]>
RooVetGit · Mar 3, 2025 · 9fd7b32 · 9fd7b32
1 parent ab9cdb6
commit 9fd7b32
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/webview-ui/src/components/common/CodeBlock.tsx b/webview-ui/src/components/common/CodeBlock.tsx
@@ -78,7 +78,7 @@ const CodeBlockContainer = styled.div`
 	}
 `
 
-const StyledMarkdown = styled.div<{ preStyle?: React.CSSProperties }>`
+const StyledMarkdown = styled.div<{ preStyle?: React.CSSProperties; wordwrap?: boolean }>`
 	overflow-x: auto;
 	width: 100%;
 
@@ -95,9 +95,9 @@ const StyledMarkdown = styled.div<{ preStyle?: React.CSSProperties }>`
 
 	pre,
 	code {
-		white-space: pre-wrap;
-		word-break: normal;
-		overflow-wrap: break-word;
+		white-space: ${({ wordwrap }) => (wordwrap === false ? "pre" : "pre-wrap")};
+		word-break: ${({ wordwrap }) => (wordwrap === false ? "normal" : "normal")};
+		overflow-wrap: ${({ wordwrap }) => (wordwrap === false ? "normal" : "break-word")};
 	}
 
 	pre > code {
@@ -273,7 +273,9 @@ const CodeBlock = memo(({ source, language, preStyle }: CodeBlockProps) => {
 
 	return (
 		<CodeBlockContainer ref={codeBlockRef}>
-			<StyledMarkdown preStyle={preStyle}>{reactContent}</StyledMarkdown>
+			<StyledMarkdown preStyle={preStyle} wordwrap={true}>
+				{reactContent}
+			</StyledMarkdown>
 			<CopyButtonWrapper
 				onMouseEnter={() => updateCopyButtonPosition(true)}
 				onMouseLeave={() => updateCopyButtonPosition()}>