Improve text formatting in CodeBlock component
- Imported Container from "@mantine/core" for better layout control in CodeBlock. - Wrapped the preformatted text in a Container to apply additional styles. - Added 'whiteSpace: 'pre-wrap'' and 'wordBreak: 'break-word'' to preserve white spaces, line breaks and ensure long words do not overflow the container.
This commit is contained in:
parent
2d12c8978d
commit
f58e2fe333
@ -1,4 +1,4 @@
|
|||||||
import { Tooltip, ActionIcon, CopyButton, Flex } from "@mantine/core";
|
import { Tooltip, ActionIcon, CopyButton, Flex, Container } from "@mantine/core";
|
||||||
import { IconCheck, IconGitCommit, IconFileDiff, IconColumnInsertRight, IconReplace, IconCopy } from "@tabler/icons-react";
|
import { IconCheck, IconGitCommit, IconFileDiff, IconColumnInsertRight, IconReplace, IconCopy } from "@tabler/icons-react";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
@ -147,7 +147,17 @@ const CodeBlock = (props: any) => {
|
|||||||
>
|
>
|
||||||
{messageText}
|
{messageText}
|
||||||
</ReactMarkdown >
|
</ReactMarkdown >
|
||||||
: <pre>{messageText}</pre>
|
: <Container
|
||||||
|
sx={{
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
pre: {
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
},
|
||||||
|
}}>
|
||||||
|
<pre>{messageText}</pre>
|
||||||
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user