feat: auto-wrap selected text in composer with matching delimiters (RocketChat#39393)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>

Author: Copilot

.changeset/warm-cups-dress.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Added auto-wrap selected text in composer with matching delimiters

apps/meteor/app/ui-message/client/messageBox/createComposerAPI.ts

@@ -224,7 +224,7 @@ export const createComposerAPI = (
 		stopFormatterTracker.stop();
 	};
 
-	const wrapSelection = (pattern: string): void => {
+	const wrapSelection = (pattern: string): { selectionStart: number; selectionEnd: number; value: string } => {
 		const { selectionEnd = input.value.length, selectionStart = 0 } = input;
 		const initText = input.value.slice(0, selectionStart);
 		const selectedText = input.value.slice(selectionStart, selectionEnd);
@@ -254,7 +254,11 @@ export const createComposerAPI = (
 				triggerEvent(input, 'change');
 
 				focus();
-				return;
+				return {
+					selectionStart: input.selectionStart,
+					selectionEnd: input.selectionEnd,
+					value: input.value,
+				};
 			}
 		}
 
@@ -268,6 +272,12 @@ export const createComposerAPI = (
 		triggerEvent(input, 'change');
 
 		focus();
+
+		return {
+			selectionStart: input.selectionStart,
+			selectionEnd: input.selectionEnd,
+			value: input.value,
+		};
 	};
 
 	const insertNewLine = (): void => insertText('\n');

apps/meteor/client/lib/chats/ChatAPI.ts

@@ -23,7 +23,11 @@ export type ComposerAPI = {
 				| ((previous: { readonly start: number; readonly end: number }) => { readonly start?: number; readonly end?: number });
 		},
 	): void;
-	wrapSelection(pattern: string): void;
+	wrapSelection(pattern: string): {
+		selectionStart: number;
+		selectionEnd: number;
+		value: string;
+	};
 	insertText(text: string): void;
 	insertNewLine(): void;
 	clear(): void;

apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx

@@ -21,11 +21,13 @@ import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
 import MessageBoxHint from './MessageBoxHint';
 import MessageBoxReplies from './MessageBoxReplies';
 import MessageComposerFiles from './MessageComposerFiles';
+import { handleSelectionWrapping } from './wrapSelection';
 import { createComposerAPI } from '../../../../../app/ui-message/client/messageBox/createComposerAPI';
 import type { FormattingButton } from '../../../../../app/ui-message/client/messageBox/messageBoxFormatting';
 import { formattingButtons } from '../../../../../app/ui-message/client/messageBox/messageBoxFormatting';
 import { getImageExtensionFromMime } from '../../../../../lib/getImageExtensionFromMime';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+import { useIsFederationEnabled } from '../../../../hooks/useIsFederationEnabled';
 import { useReactiveValue } from '../../../../hooks/useReactiveValue';
 import type { ComposerAPI } from '../../../../lib/chats/ChatAPI';
 import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
@@ -45,7 +47,6 @@ import { useEnablePopupPreview } from '../hooks/useEnablePopupPreview';
 import { useMessageComposerMergedRefs } from '../hooks/useMessageComposerMergedRefs';
 import { useMessageBoxAutoFocus } from './hooks/useMessageBoxAutoFocus';
 import { useMessageBoxPlaceholder } from './hooks/useMessageBoxPlaceholder';
-import { useIsFederationEnabled } from '../../../../hooks/useIsFederationEnabled';
 
 const reducer = (_: unknown, event: FormEvent<HTMLInputElement>): boolean => {
 	const target = event.target as HTMLInputElement;
@@ -379,13 +380,28 @@ const MessageBox = ({
 		),
 	);
 
+	const beforeInputHandlerCallbackRef = useSafeRefCallback(
+		useCallback(
+			(node: HTMLTextAreaElement) => {
+				const eventHandler = (e: Event) => handleSelectionWrapping(e as InputEvent, chat);
+				node.addEventListener('beforeinput', eventHandler);
+
+				return () => {
+					node.removeEventListener('beforeinput', eventHandler);
+				};
+			},
+			[chat],
+		),
+	);
+
 	const mergedRefs = useMessageComposerMergedRefs(
 		popup.callbackRef,
 		textareaRef,
 		autoGrowRef,
 		callbackRef,
 		autofocusRef,
 		keyDownHandlerCallbackRef,
+		beforeInputHandlerCallbackRef,
 	);
 
 	const shouldPopupPreview = useEnablePopupPreview(popup.filter, popup.option);

apps/meteor/client/views/room/composer/messageBox/wrapSelection.ts

@@ -0,0 +1,58 @@
+import type { ChatAPI } from '../../../../lib/chats/ChatAPI';
+
+const wrapSelectionPatterns: Record<string, string> = {
+	'`': '`{{text}}`',
+	'"': '"{{text}}"',
+	"'": "'{{text}}'",
+	'(': '({{text}})',
+	'<': '<{{text}}>',
+	'{': '{{{text}}}',
+	'[': '[{{text}}]',
+	'*': '*{{text}}*',
+	'_': '_{{text}}_',
+	'~': '~{{text}}~',
+	'˜': '~{{text}}~',
+};
+
+const once = (target: EventTarget, eventName: string, callback: (event: Event) => void) => {
+	const handleEvent = (e: Event) => {
+		callback(e);
+		target.removeEventListener(eventName, handleEvent);
+	};
+	target.addEventListener(eventName, handleEvent);
+};
+
+export const handleSelectionWrapping = (event: InputEvent, chat: ChatAPI): boolean => {
+	const { composer } = chat;
+	if (!composer) {
+		return false;
+	}
+	const input = event.target as HTMLTextAreaElement;
+	const { selectionStart, selectionEnd } = input;
+
+	if (selectionStart === selectionEnd) {
+		return false;
+	}
+
+	const key = event.data;
+	if (!key) {
+		return false;
+	}
+	const pattern = wrapSelectionPatterns[key];
+	if (!pattern) {
+		return false;
+	}
+
+	const selection = composer.wrapSelection(pattern);
+	// this is a workaround when we are using MAC
+	if (event.isComposing) {
+		once(input, 'input', (event) => {
+			input.value = selection.value;
+			input.setSelectionRange(selection.selectionStart, selection.selectionEnd);
+			event.preventDefault();
+		});
+	}
+
+	event.preventDefault();
+	return true;
+};