chore: markdown composer improvements

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -365,7 +365,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('``````', undefined);
+				expect(onSendMessage).toHaveBeenCalledWith('```\n\n```', undefined);
 				expect(screen.toJSON()).toMatchSnapshot();
 			});
 
@@ -384,7 +384,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```', undefined);
+				expect(onSendMessage).toHaveBeenCalledWith('```\ntest\n```', undefined);
 				expect(screen.toJSON()).toMatchSnapshot();
 			});
 		});

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -45,6 +45,36 @@ import useIOSBackSwipeHandler from '../hooks/useIOSBackSwipeHandler';
 
 const defaultSelection: IInputSelection = { start: 0, end: 0 };
 
+function calculateLength(startingText: string, markdown: string, isCodeBlock: boolean) {
+	if (isCodeBlock) {
+		if (startingText.length > 0) {
+			return markdown.length + 2;
+		}
+
+		return markdown.length + 1;
+	}
+
+	const endWithSpace = startingText.endsWith(' ');
+
+	return markdown.length + (startingText.length > 0 ? 1 : 0) + (endWithSpace ? -1 : 0);
+}
+
+function getSeparator(startingText: string, isCodeBlock: boolean) {
+	if (startingText.length === 0) {
+		return '';
+	}
+
+	if (isCodeBlock) {
+		if (/```(\s*)$/.test(startingText)) {
+			return '';
+		}
+
+		return '\n';
+	}
+
+	return startingText.endsWith(' ') ? '' : ' ';
+}
+
 export const ComposerInput = memo(
 	forwardRef<IComposerInput, IComposerInputProps>(({ inputRef }, ref) => {
 		const { colors, theme } = useTheme();
@@ -129,10 +159,21 @@ export const ComposerInput = memo(
 						const { start, end } = selectionRef.current;
 						const text = textRef.current;
 						const markdown = MARKDOWN_STYLES[style];
-						const newText = `${text.substr(0, start)}${markdown}${text.substr(start, end - start)}${markdown}${text.substr(end)}`;
+						const isCodeBlock = style === 'code-block';
+						const startingText = text.substr(0, start);
+
+						const separator = getSeparator(startingText, isCodeBlock);
+						const beforeMarkdownClose = isCodeBlock ? '\n' : '';
+
+						const newText = `${startingText}${separator}${markdown}${beforeMarkdownClose}${text.substr(
+							start,
+							end - start
+						)}${beforeMarkdownClose}${markdown}${text.substr(end)}`;
+						const length = calculateLength(startingText, markdown, isCodeBlock);
+
 						setInput(newText, {
-							start: start + markdown.length,
-							end: start === end ? start + markdown.length : end + markdown.length
+							start: start + length,
+							end: start === end ? start + length : end + length
 						});
 					});
 					emitter.on('toolbarMention', () => {
@@ -157,7 +198,7 @@ export const ComposerInput = memo(
 		useImperativeHandle(ref, () => ({
 			getTextAndClear: () => {
 				const text = textRef.current;
-				setInput('', undefined, true);
+				setInput('', { start: 0, end: 0 }, true);
 				return text;
 			},
 			getText: () => textRef.current,
@@ -168,7 +209,7 @@ export const ComposerInput = memo(
 		}));
 
 		const setInput: TSetInput = (text, selection, forceUpdateDraftMessage) => {
-			const message = text.trim();
+			const message = text;
 			textRef.current = message;
 
 			if (forceUpdateDraftMessage) {
@@ -287,7 +328,7 @@ export const ComposerInput = memo(
 				default:
 					mention = '';
 			}
-			const newText = `${result}${mention} ${text.slice(cursor)}`;
+			const newText = `${result}${mention} ${text.slice(cursor)}`.trim();
 
 			const newCursor = result.length + mention.length + 1;
 			setInput(newText, { start: newCursor, end: newCursor });