Regression: Text wrap in MarkdownTextEditor and PreviewText

client/components/MarkdownText.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import dompurify from 'dompurify';
 import marked from 'marked';
-import React, { FC, useMemo } from 'react';
+import React, { ComponentProps, FC, useMemo } from 'react';
 
 import { renderMessageEmoji } from '../lib/renderMessageEmoji';
 
@@ -11,7 +11,7 @@ type MarkdownTextParams = {
 	preserveHtml: boolean;
 	parseEmoji: boolean;
 	withTruncatedText: boolean;
-};
+} & ComponentProps<typeof Box>;
 
 const documentRenderer = new marked.Renderer();
 const inlineRenderer = new marked.Renderer();

ee/client/omnichannel/components/CannedResponse/TextEditor/Textarea.tsx

@@ -9,6 +9,7 @@ const Textarea = forwardRef<Element, TextareaProps>(function Textarea(props, ref
 			is='textarea'
 			ref={ref}
 			w='full'
+			style={{ wordBreak: 'normal' }}
 			rcx-box--animated
 			rcx-input-box--type={'textarea'}
 			rcx-input-box--undecorated

ee/client/omnichannel/components/CannedResponse/modals/CreateCannedResponse/PreviewText.tsx

@@ -3,19 +3,23 @@ import React, { FC, memo } from 'react';
 
 import MarkdownText from '../../../../../../../client/components/MarkdownText';
 
-const PreviewText: FC<{ text: string }> = ({ text }) => (
-	<Box
-		rows={10}
-		display='flex'
-		flexDirection='column'
-		pbs='12px'
-		pi='16px'
-		pbe='16px'
-		rcx-box--animated
-		rcx-input-box__wrapper
-	>
-		<MarkdownText content={text} parseEmoji={true} />
-	</Box>
-);
+const PreviewText: FC<{ text: string }> = ({ text }) => {
+	const textM = text.split(/\n/).join('  \n');
+
+	return (
+		<Box
+			style={{ wordBreak: 'normal' }}
+			display='flex'
+			flexDirection='column'
+			pbs='12px'
+			pi='16px'
+			pbe='16px'
+			rcx-box--animated
+			rcx-input-box__wrapper
+		>
+			<MarkdownText w='full' flexGrow={1} content={textM} parseEmoji={true} />
+		</Box>
+	);
+};
 
 export default memo(PreviewText);