fix: insert multiline code block as a fenced block on its own lines

The code-block formatting button wrapped the selection inline, but fenced code blocks are only parsed when the ``` markers are alone on a line. Tapping the button therefore produced six backticks around the cursor on a single line, which does not render as a code block.

Insert the opening and closing fences on their own lines instead, adding a leading newline when the cursor is not already at the start of a line, and leave the cursor on the (possibly empty) content line between the fences. Any selected text is wrapped inside the block.

The logic is extracted into a pure wrapCodeBlock helper with unit tests.

Closes #7099

Author: Shevilll

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -403,7 +403,7 @@ describe('MessageComposer', () => {
 				await user.press(screen.getByTestId('message-composer-code-block'));
 				await user.press(screen.getByTestId('message-composer-send'));
 				expect(onSendMessage).toHaveBeenCalledTimes(1);
-				expect(onSendMessage).toHaveBeenCalledWith('``````', false);
+				expect(onSendMessage).toHaveBeenCalledWith('```\n\n```', false);
 				expect(screen.toJSON()).toMatchSnapshot();
 			});
 
@@ -422,7 +422,7 @@ describe('MessageComposer', () => {
 				await user.press(screen.getByTestId('message-composer-code-block'));
 				await user.press(screen.getByTestId('message-composer-send'));
 				expect(onSendMessage).toHaveBeenCalledTimes(1);
-				expect(onSendMessage).toHaveBeenCalledWith('```test```', false);
+				expect(onSendMessage).toHaveBeenCalledWith('```\ntest\n```', false);
 				expect(screen.toJSON()).toMatchSnapshot();
 			});
 		});

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -14,7 +14,7 @@ import {
 	type TSetInput
 } from '../interfaces';
 import { useAutocompleteParams, useFocused, useMessageComposerApi, useMicOrSend } from '../context';
-import { fetchIsAllOrHere, getMentionRegexp } from '../helpers';
+import { fetchIsAllOrHere, getMentionRegexp, wrapCodeBlock } from '../helpers';
 import { useAutoSaveDraft } from '../hooks';
 import sharedStyles from '../../../views/Styles';
 import { useTheme } from '../../../theme';
@@ -131,6 +131,11 @@ export const ComposerInput = memo(
 					emitter.on('addMarkdown', ({ style }) => {
 						const { start, end } = selectionRef.current;
 						const text = textRef.current;
+						if (style === 'code-block') {
+							const { updatedText, selection } = wrapCodeBlock(text, start, end);
+							setInput(updatedText, selection);
+							return;
+						}
 						const markdown = MARKDOWN_STYLES[style];
 						const newText = `${text.substr(0, start)}${markdown}${text.substr(start, end - start)}${markdown}${text.substr(end)}`;
 						setInput(newText, {

app/containers/MessageComposer/helpers/index.ts

@@ -3,3 +3,4 @@ export * from './forceJpgExtension';
 export * from './getMentionRegexp';
 export * from './prepareQuoteMessage';
 export * from './insertEmojiAtCursor';
+export * from './wrapCodeBlock';

app/containers/MessageComposer/helpers/wrapCodeBlock.test.ts

@@ -0,0 +1,38 @@
+import { wrapCodeBlock } from './wrapCodeBlock';
+
+describe('wrapCodeBlock', () => {
+	it('inserts an empty fenced block with the cursor on the middle line', () => {
+		expect(wrapCodeBlock('', 0, 0)).toEqual({
+			updatedText: '```\n\n```',
+			selection: { start: 4, end: 4 }
+		});
+	});
+
+	it('adds a leading newline when the cursor is not at the start of a line', () => {
+		expect(wrapCodeBlock('comment', 7, 7)).toEqual({
+			updatedText: 'comment\n```\n\n```',
+			selection: { start: 12, end: 12 }
+		});
+	});
+
+	it('does not add a leading newline when already at the start of a line', () => {
+		expect(wrapCodeBlock('comment\n', 8, 8)).toEqual({
+			updatedText: 'comment\n```\n\n```',
+			selection: { start: 12, end: 12 }
+		});
+	});
+
+	it('wraps the selected text inside the block and keeps it selected', () => {
+		expect(wrapCodeBlock('comment\nfoo', 8, 11)).toEqual({
+			updatedText: 'comment\n```\nfoo\n```',
+			selection: { start: 12, end: 15 }
+		});
+	});
+
+	it('adds a trailing newline so the closing fence stays on its own line', () => {
+		expect(wrapCodeBlock('abc', 0, 0)).toEqual({
+			updatedText: '```\n\n```\nabc',
+			selection: { start: 4, end: 4 }
+		});
+	});
+});

app/containers/MessageComposer/helpers/wrapCodeBlock.ts

@@ -0,0 +1,25 @@
+// Wraps the current selection (or the cursor when nothing is selected) in a fenced code block.
+// Fenced code blocks are only parsed when the ``` markers sit alone on their own line, so the
+// opening and closing fences are placed on dedicated lines and separated from the surrounding
+// text. The cursor is left on the (possibly empty) content line between the fences.
+// See https://github.com/RocketChat/Rocket.Chat.ReactNative/issues/7099
+export const wrapCodeBlock = (
+	text: string,
+	start: number,
+	end: number
+): { updatedText: string; selection: { start: number; end: number } } => {
+	const before = text.substring(0, start);
+	const selected = text.substring(start, end);
+	const after = text.substring(end);
+
+	const prefix = before.length > 0 && !before.endsWith('\n') ? '\n```\n' : '```\n';
+	const suffix = after.length > 0 && !after.startsWith('\n') ? '\n```\n' : '\n```';
+
+	const updatedText = `${before}${prefix}${selected}${suffix}${after}`;
+	const cursor = before.length + prefix.length;
+
+	return {
+		updatedText,
+		selection: { start: cursor, end: cursor + selected.length }
+	};
+};