pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 12:21:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add overflowWrap anywhere to force wrap long words (file paths) to avoid overflowing container

Browse Source
This commit is contained in:
Saoud Rizwan
2024-07-31 14:24:04 -04:00
parent dc97689836
commit c70e14c298
3 changed files with 105 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ClaudeDev.ts
View File

@@ -383,6 +383,7 @@ export class ClaudeDev {
}) })
.join("") .join("")
vscode.window.showTextDocument(vscode.Uri.file(filePath), { preview: false })
const { response, text } = await this.ask( const { response, text } = await this.ask(
"tool", "tool",
JSON.stringify({ JSON.stringify({
@@ -415,6 +416,7 @@ export class ClaudeDev {
} }
await fs.mkdir(path.dirname(filePath), { recursive: true }) await fs.mkdir(path.dirname(filePath), { recursive: true })
await fs.writeFile(filePath, newContent) await fs.writeFile(filePath, newContent)
vscode.window.showTextDocument(vscode.Uri.file(filePath), { preview: false })
return `New file created and content written to ${filePath}` return `New file created and content written to ${filePath}`
} }
} catch (error) { } catch (error) {

174
webview-ui/src/components/ChatRow.tsx
View File

@@ -123,77 +123,106 @@ const ChatRow: React.FC<ChatRowProps> = ({
const renderMarkdown = (markdown: string = "") => { const renderMarkdown = (markdown: string = "") => {
// react-markdown lets us customize elements, so here we're using their example of replacing code blocks with SyntaxHighlighter. However when there are no language matches (` or ``` without a language specifier) then we default to a normal code element for inline code. Code blocks without a language specifier shouldn't be a common occurrence as we prompt Claude to always use a language specifier. // react-markdown lets us customize elements, so here we're using their example of replacing code blocks with SyntaxHighlighter. However when there are no language matches (` or ``` without a language specifier) then we default to a normal code element for inline code. Code blocks without a language specifier shouldn't be a common occurrence as we prompt Claude to always use a language specifier.
return ( return (
<Markdown <div style={{ wordBreak: "break-word", overflowWrap: "anywhere" }}>
children={markdown} <Markdown
components={{ children={markdown}
p(props) { components={{
const { style, ...rest } = props p(props) {
return ( const { style, ...rest } = props
<p return (
style={{ <p
...style, style={{
margin: 0, ...style,
marginTop: 0, margin: 0,
marginBottom: 0, marginTop: 0,
whiteSpace: "pre-wrap", marginBottom: 0,
wordBreak: "break-word", whiteSpace: "pre-wrap",
}} wordBreak: "break-word",
{...rest} overflowWrap: "anywhere",
/> }}
) {...rest}
}, />
ol(props) { )
const { style, ...rest } = props },
return <ol style={{ ...style, padding: "0 0 0 20px", margin: "10px 0" }} {...rest} /> ol(props) {
}, const { style, ...rest } = props
ul(props) { return (
const { style, ...rest } = props <ol
return <ul style={{ ...style, padding: "0 0 0 20px", margin: "10px 0" }} {...rest} /> style={{
}, ...style,
// https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight padding: "0 0 0 20px",
code(props) { margin: "10px 0",
const { children, className, node, ...rest } = props wordBreak: "break-word",
const match = /language-(\w+)/.exec(className || "") overflowWrap: "anywhere",
return match ? ( }}
<SyntaxHighlighter {...rest}
{...(rest as any)} // will be passed down to pre />
PreTag="div" )
children={String(children).replace(/\n$/, "")} },
language={match[1]} ul(props) {
style={{ const { style, ...rest } = props
...syntaxHighlighterStyle, return (
'code[class*="language-"]': { <ul
background: "var(--vscode-editor-background)", style={{
}, ...style,
'pre[class*="language-"]': { padding: "0 0 0 20px",
background: "var(--vscode-editor-background)", margin: "10px 0",
}, wordBreak: "break-word",
}} overflowWrap: "anywhere",
customStyle={{ }}
overflowX: "auto", {...rest}
overflowY: "hidden", />
maxWidth: "100%", )
margin: 0, },
padding: "10px", // https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
// important to note that min-width: max-content is not required here how it is in CodeBlock.tsx code(props) {
borderRadius: 3, const { children, className, node, ...rest } = props
border: "1px solid var(--vscode-sideBar-border)", const match = /language-(\w+)/.exec(className || "")
fontSize: "var(--vscode-editor-font-size)", return match ? (
lineHeight: "var(--vscode-editor-line-height)", <SyntaxHighlighter
fontFamily: "var(--vscode-editor-font-family)", {...(rest as any)} // will be passed down to pre
}} PreTag="div"
/> children={String(children).replace(/\n$/, "")}
) : ( language={match[1]}
<code style={{
{...rest} ...syntaxHighlighterStyle,
className={className} 'code[class*="language-"]': {
style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}> background: "var(--vscode-editor-background)",
{children} },
</code> 'pre[class*="language-"]': {
) background: "var(--vscode-editor-background)",
}, },
}} }}
/> customStyle={{
overflowX: "auto",
overflowY: "hidden",
maxWidth: "100%",
margin: 0,
padding: "10px",
// important to note that min-width: max-content is not required here how it is in CodeBlock.tsx
borderRadius: 3,
border: "1px solid var(--vscode-sideBar-border)",
fontSize: "var(--vscode-editor-font-size)",
lineHeight: "var(--vscode-editor-line-height)",
fontFamily: "var(--vscode-editor-font-family)",
}}
/>
) : (
<code
{...rest}
className={className}
style={{
whiteSpace: "pre-line",
wordBreak: "break-word",
overflowWrap: "anywhere",
}}>
{children}
</code>
)
},
}}
/>
</div>
) )
} }
@@ -209,8 +238,9 @@ const ChatRow: React.FC<ChatRowProps> = ({
const pStyle: React.CSSProperties = { const pStyle: React.CSSProperties = {
margin: 0, margin: 0,
whiteSpace: "pre-line", whiteSpace: "pre-wrap",
wordBreak: "break-word", wordBreak: "break-word",
overflowWrap: "anywhere",
} }
switch (message.type) { switch (message.type) {

1
webview-ui/src/components/TaskHeader.tsx
View File

@@ -109,6 +109,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut,
fontSize: "var(--vscode-font-size)", fontSize: "var(--vscode-font-size)",
overflowY: isExpanded ? "auto" : "hidden", overflowY: isExpanded ? "auto" : "hidden",
wordBreak: "break-word", wordBreak: "break-word",
overflowWrap: "anywhere",
}}> }}>
<TextTruncate <TextTruncate
key={textTruncateKey} key={textTruncateKey}