Chore: Refactor Composer Popup

.vscode/settings.json

@@ -16,13 +16,15 @@
 	"typescript.tsdk": "./node_modules/typescript/lib",
 	"cSpell.words": [
 		"autotranslate",
+    "fname",
 		"katex",
 		"listbox",
 		"livechat",
 		"oauthapps",
 		"omnichannel",
 		"photoswipe",
 		"searchbox",
-		"tmid"
+		"tmid",
+    "tshow"
 	]
 }

apps/meteor/app/theme/client/imports/general/base_old.css

@@ -1051,38 +1051,6 @@
 	}
 }
 
-.rc-old .message-popup-position {
-	position: relative;
-
-	.message-popup {
-		display: flex;
-		flex-direction: column;
-
-		max-height: 20rem;
-		align-items: stretch;
-
-		.message-popup-items {
-			overflow-y: auto;
-
-			.popup-slash-command {
-				display: flex;
-				flex-flow: row wrap;
-
-				&-format {
-					flex-grow: 1;
-				}
-
-				&-description {
-					text-align: right;
-
-					font-style: italic;
-					flex-grow: 2;
-				}
-			}
-		}
-	}
-}
-
 .rc-old .message-popup-items.preview-items {
 	display: flex;
 	overflow-y: auto;
@@ -1111,16 +1079,6 @@
 	box-shadow: 0 -1px 10px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.16);
 }
 
-.rc-old .message-popup-title {
-	padding: 0 20px;
-
-	border-width: 0 0 1px;
-
-	font-size: 14px;
-	font-weight: 300;
-	line-height: 32px;
-}
-
 .rc-old .popup-item {
 	padding: 0 20px;
 

apps/meteor/app/ui-message/client/index.ts

@@ -1,6 +1 @@
-import './popup/customMessagePopups';
-import './popup/messagePopup';
-import './popup/messagePopupChannel';
-import './popup/messagePopupConfig';
-import './popup/messagePopupEmoji';
 import './popup/messagePopupSlashCommandPreview';

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

@@ -243,8 +243,42 @@ export const createComposerAPI = (input: HTMLTextAreaElement, storageID: string)
 
 	setText(Meteor._localStorage.getItem(storageID) ?? '');
 
+	// Gets the text that is connected to the cursor and replaces it with the given text
+	const replaceText = (text: string, selection: { readonly start: number; readonly end: number }): void => {
+		const { selectionStart, selectionEnd } = input;
+
+		// Selects the text that is connected to the cursor
+		input.setSelectionRange(selection.start ?? 0, selection.end ?? text.length);
+		const textAreaTxt = input.value;
+
+		if (!document.execCommand || !document.execCommand('insertText', false, text)) {
+			input.value = textAreaTxt.substring(0, selection.start) + text + textAreaTxt.substring(selection.end);
+		}
+
+		input.selectionStart = selectionStart + text.length;
+		input.selectionEnd = selectionStart + text.length;
+		if (selectionStart !== selectionEnd) {
+			input.selectionStart = selectionStart;
+		}
+
+		triggerEvent(input, 'input');
+		triggerEvent(input, 'change');
+
+		focus();
+	};
+
 	return {
+		replaceText,
 		insertNewLine,
+		blur: () => input.blur(),
+
+		substring: (start: number, end?: number) => {
+			return input.value.substring(start, end);
+		},
+
+		getCursorPosition: () => {
+			return input.selectionStart;
+		},
 		setCursorToEnd: () => {
 			input.selectionEnd = input.value.length;
 			input.selectionStart = input.selectionEnd;

apps/meteor/app/ui-message/client/popup/ComposerBoxPopup.tsx

@@ -0,0 +1,68 @@
+import { Box, Option, OptionSkeleton, Tile } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import type { UseQueryResult } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+type ComposerBoxPopupProps<
+	T extends {
+		_id: string;
+		sort?: number;
+	},
+> = {
+	title?: string;
+	focused?: T;
+	items: UseQueryResult<T[]>[];
+	select: (item: T) => void;
+	renderItem?: ({ item }: { item: T }) => ReactElement;
+};
+
+export const ComposerBoxPopup = <
+	T extends {
+		_id: string;
+		sort?: number;
+	},
+>({
+	title,
+	items,
+	focused,
+	select,
+	renderItem = ({ item }: { item: T }) => <>{JSON.stringify(item)}</>,
+}: ComposerBoxPopupProps<T>): ReactElement | null => {
+	const id = useUniqueId();
+	return (
+		<Box className='message-popup-position' position='relative'>
+			<Tile className='message-popup' padding={0} role='menu' mbe='x2' maxHeight='20rem' aria-labelledby={id}>
+				{title && (
+					<Box bg='tint' pi='x16' pb='x8' id={id}>
+						{title}
+					</Box>
+				)}
+				<Box pb='x8'>
+					{items
+						.flatMap((item) => {
+							if (item.isSuccess) {
+								return item.data;
+							}
+							return [];
+						})
+						.sort((a, b) => (('sort' in a && a.sort) || 0) - (('sort' in b && b.sort) || 0))
+						.map((item, index) => {
+							return (
+								<Option
+									onClick={() => select(item)}
+									selected={item === focused}
+									key={index}
+									id={`popup-item-${item._id}`}
+									tabIndex={item === focused ? 0 : -1}
+								>
+									{renderItem({ item })}
+								</Option>
+							);
+						})}
+					{items.some((item) => item.isLoading && item.fetchStatus !== 'idle') && <OptionSkeleton />}
+				</Box>
+			</Tile>
+		</Box>
+	);
+};

apps/meteor/app/ui-message/client/popup/components/ComposerBoxPopupCannedResponse.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+
+export type ComposerBoxPopupCannedResponseProps = {
+	_id: string;
+	text: string;
+	shortcut: string;
+};
+
+const ComposerPopupCannedResponse = ({ shortcut, text }: ComposerBoxPopupCannedResponseProps) => {
+	return (
+		<>
+			<OptionColumn>
+				<strong>{shortcut}</strong>
+			</OptionColumn>
+			<OptionContent>{text}</OptionContent>
+		</>
+	);
+};
+
+export default ComposerPopupCannedResponse;

apps/meteor/app/ui-message/client/popup/components/ComposerBoxPopupEmoji.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+
+import Emoji from '../../../../../client/components/Emoji';
+
+export type ComposerBoxPopupEmojiProps = {
+	_id: string;
+};
+
+const ComposerPopupEmoji = ({ _id }: ComposerBoxPopupEmojiProps) => {
+	return (
+		<>
+			<OptionColumn>
+				<Emoji emojiHandle={_id} />
+			</OptionColumn>
+			<OptionContent>{_id}</OptionContent>
+		</>
+	);
+};
+
+export default ComposerPopupEmoji;

apps/meteor/app/ui-message/client/popup/components/ComposerBoxPopupRoom.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+import type { IRoom } from '@rocket.chat/core-typings';
+
+import { RoomIcon } from '../../../../../client/components/RoomIcon';
+
+export type ComposerBoxPopupRoomProps = Pick<IRoom, 't' | 'name' | 'fname' | '_id' | 'prid' | 'teamMain' | 'u'>;
+
+const ComposerBoxPopupRoom = ({ fname, name, ...props }: ComposerBoxPopupRoomProps) => {
+	return (
+		<>
+			<OptionColumn>
+				<RoomIcon room={props} />
+			</OptionColumn>
+			<OptionContent>
+				<strong>{fname ?? name}</strong>
+			</OptionContent>
+		</>
+	);
+};
+
+export default ComposerBoxPopupRoom;

apps/meteor/app/ui-message/client/popup/components/ComposerBoxPopupSlashCommand.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+
+export type ComposerBoxPopupSlashCommandProps = {
+	_id: string;
+	description?: string;
+	params?: string;
+};
+
+const ComposerPopupSlashCommand = ({ _id, description, params }: ComposerBoxPopupSlashCommandProps) => {
+	return (
+		<>
+			<OptionColumn>
+				<strong>{_id}</strong> {params}
+			</OptionColumn>
+			<OptionContent>{description}</OptionContent>
+		</>
+	);
+};
+
+export default ComposerPopupSlashCommand;

apps/meteor/app/ui-message/client/popup/components/ComposerBoxPopupUser.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import { OptionAvatar, OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+
+import UserAvatar from '../../../../../client/components/avatar/UserAvatar';
+import ReactiveUserStatus from '../../../../../client/components/UserStatus/ReactiveUserStatus';
+
+export type ComposerBoxPopupUserProps = {
+	_id: string;
+	system?: boolean;
+	outside?: boolean;
+	suggestion?: boolean;
+	username: string;
+	name?: string;
+	nickname?: string;
+	status?: string;
+	sort?: number;
+};
+
+const ComposerBoxPopupUser = ({ _id, system, username, name, nickname, outside, suggestion }: ComposerBoxPopupUserProps) => {
+	const t = useTranslation();
+	return (
+		<>
+			{!system && (
+				<>
+					<OptionAvatar>
+						<UserAvatar size='x28' username={username} />
+					</OptionAvatar>
+					<OptionColumn>
+						<ReactiveUserStatus uid={_id} />
+					</OptionColumn>
+					<OptionContent>
+						<strong>{name ?? username}</strong> {nickname && <span className='popup-user-nickname'>({nickname})</span>}
+					</OptionContent>
+				</>
+			)}
+
+			{system && (
+				<OptionContent>
+					<strong>{username}</strong> {name}
+				</OptionContent>
+			)}
+
+			{outside && <OptionColumn>{t('Not_in_channel')}</OptionColumn>}
+			{suggestion && <OptionColumn>{t('Suggestion_from_recent_messages')}</OptionColumn>}
+		</>
+	);
+};
+
+export default ComposerBoxPopupUser;