chore: messagebox split

Author: MartinSchoeler

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

@@ -1,47 +1,34 @@
 /* eslint-disable complexity */
 import { isRoomFederated, isRoomNativeFederated, type IMessage, type ISubscription } from '@rocket.chat/core-typings';
 import { useContentBoxSize, useStableCallback, useMediaQuery, useSafeRefCallback } from '@rocket.chat/fuselage-hooks';
-import {
-	MessageComposerAction,
-	MessageComposerToolbarActions,
-	MessageComposer,
-	MessageComposerToolbar,
-	MessageComposerActionsDivider,
-	MessageComposerToolbarSubmit,
-	MessageComposerButton,
-	MessageComposerInputExpandable,
-} from '@rocket.chat/ui-composer';
+import { MessageComposerInputExpandable } from '@rocket.chat/ui-composer';
 import { useTranslation, useUserPreference, useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type { MouseEvent, ClipboardEvent, ChangeEvent } from 'react';
 import { memo, useRef, useReducer, useCallback, useSyncExternalStore } from 'react';
 
-import MessageBoxActionsToolbar from './MessageBoxActionsToolbar';
-import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
-import MessageBoxHint from './MessageBoxHint';
-import MessageBoxReplies from './MessageBoxReplies';
+import MessageBoxBase from './MessageBoxBase';
 import MessageComposerFiles from './MessageComposerFiles';
+import {
+	emptySubscribe,
+	getEmptyFalse,
+	getEmptyArray,
+	handleFormattingShortcut,
+	extractImageFilesFromClipboard,
+} from './messageBoxHelpers';
 import { handleSelectionWrapping } from './wrapSelection';
 import { emoji } from '../../../../../app/emoji/client';
 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 type { ComposerAPI } from '../../../../lib/chats/ChatAPI';
 import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
 import { keyCodes } from '../../../../lib/utils/keyCodes';
 import { Subscriptions } from '../../../../stores';
-import AudioMessageRecorder from '../../../composer/AudioMessageRecorder';
-import VideoMessageRecorder from '../../../composer/VideoMessageRecorder';
 import { useFileUpload } from '../../body/hooks/useFileUpload';
 import { useChat } from '../../contexts/ChatContext';
 import { useComposerPopupOptions } from '../../contexts/ComposerPopupContext';
 import { useRoom, useRoomSubscription } from '../../contexts/RoomContext';
-import ComposerBoxPopup from '../ComposerBoxPopup';
-import ComposerBoxPopupPreview from '../ComposerBoxPopupPreview';
-import ComposerUserActionIndicator from '../ComposerUserActionIndicator';
 import { useAutoGrow } from '../RoomComposer/hooks/useAutoGrow';
 import { useComposerBoxPopup } from '../hooks/useComposerBoxPopup';
 import { useEnablePopupPreview } from '../hooks/useEnablePopupPreview';
@@ -56,31 +43,6 @@ const reducer = (_: unknown, event: ChangeEvent<HTMLInputElement>): boolean => {
 	return Boolean(target.value.trim());
 };
 
-const handleFormattingShortcut = (event: KeyboardEvent, formattingButtons: FormattingButton[], composer: ComposerAPI) => {
-	const isMacOS = navigator.platform.indexOf('Mac') !== -1;
-	const isCmdOrCtrlPressed = (isMacOS && event.metaKey) || (!isMacOS && event.ctrlKey);
-
-	if (!isCmdOrCtrlPressed) {
-		return false;
-	}
-
-	const key = event.key.toLowerCase();
-
-	const formatter = formattingButtons.find((formatter) => 'command' in formatter && formatter.command === key);
-
-	if (!formatter || !('pattern' in formatter)) {
-		return false;
-	}
-
-	composer.wrapSelection(formatter.pattern);
-	return true;
-};
-
-const emptySubscribe = () => () => undefined;
-const getEmptyFalse = () => false;
-const a: any[] = [];
-const getEmptyArray = () => a;
-
 export type MessageBoxProps = {
 	tmid?: IMessage['_id'];
 	onSend?: (params: { value: string; tshow?: boolean; previewUrls?: string[]; isSlashCommandAllowed?: boolean }) => Promise<void>;
@@ -335,38 +297,7 @@ const MessageBox = ({
 	});
 
 	const handlePaste = useStableCallback((event: ClipboardEvent<HTMLTextAreaElement>) => {
-		const { clipboardData } = event;
-
-		if (!clipboardData) {
-			return;
-		}
-
-		const items = Array.from(clipboardData.items);
-
-		if (items.some(({ kind, type }) => kind === 'string' && type === 'text/plain')) {
-			return;
-		}
-
-		const files = items
-			.filter((item) => item.kind === 'file' && item.type.indexOf('image/') !== -1)
-			.map((item) => {
-				const fileItem = item.getAsFile();
-
-				if (!fileItem) {
-					return;
-				}
-
-				const imageExtension = fileItem ? getImageExtensionFromMime(fileItem.type) : undefined;
-
-				const extension = imageExtension ? `.${imageExtension}` : '';
-
-				Object.defineProperty(fileItem, 'name', {
-					writable: true,
-					value: `Clipboard - ${format(new Date())}${extension}`,
-				});
-				return fileItem;
-			})
-			.filter((file): file is File => !!file);
+		const files = extractImageFilesFromClipboard(event, format);
 
 		if (files.length) {
 			event.preventDefault();
@@ -418,45 +349,33 @@ const MessageBox = ({
 	const shouldPopupPreview = useEnablePopupPreview(popup.filter, popup.option);
 
 	return (
-		<>
-			{chat.composer?.quotedMessages && <MessageBoxReplies />}
-			{shouldPopupPreview && popup.option && (
-				<ComposerBoxPopup
-					select={popup.select}
-					items={popup.items}
-					focused={popup.focused}
-					title={popup.option.title}
-					renderItem={popup.option.renderItem}
-				/>
-			)}
-			{/*
-				SlashCommand Preview popup works in a weird way
-				There is only one trigger for all the commands: "/"
-				After that we need to the slashcommand list and check if the command exists and provide the preview
-				if not the query is `suspend` which means the slashcommand is not found or doesn't have a preview
-			*/}
-			{popup.option?.preview && (
-				<ComposerBoxPopupPreview
-					select={popup.select}
-					items={popup.items as any}
-					focused={popup.focused as any}
-					title={popup.option.title}
-					renderItem={popup.option.renderItem}
-					ref={popup.commandsRef}
-					rid={room._id}
-					tmid={tmid}
-					suspended={popup.suspended}
-				/>
-			)}
-			<MessageBoxHint
-				isEditing={isEditing}
-				e2eEnabled={e2eEnabled}
-				unencryptedMessagesAllowed={unencryptedMessagesAllowed}
-				isMobile={isMobile}
-			/>
-			{isRecordingVideo && <VideoMessageRecorder reference={messageComposerRef} rid={room._id} tmid={tmid} />}
-			<MessageComposer ref={messageComposerRef} variant={isEditing ? 'editing' : undefined}>
-				{isRecordingAudio && <AudioMessageRecorder rid={room._id} isMicrophoneDenied={isMicrophoneDenied} />}
+		<MessageBoxBase
+			rid={room._id}
+			tmid={tmid}
+			composer={chat.composer}
+			messageComposerRef={messageComposerRef}
+			popup={popup}
+			shouldPopupPreview={shouldPopupPreview}
+			isEditing={isEditing}
+			isRecording={isRecording}
+			isRecordingAudio={isRecordingAudio}
+			isRecordingVideo={isRecordingVideo}
+			isMicrophoneDenied={isMicrophoneDenied}
+			formatters={formatters}
+			canSend={canSend}
+			useEmojis={useEmojis}
+			sendEnabled={canSend && !isUploading && !isProcessingUploads && (typing || isEditing || hasUploads)}
+			sendActive={typing || isEditing || hasUploads}
+			inlineSize={sizes.inlineSize}
+			e2eEnabled={e2eEnabled}
+			unencryptedMessagesAllowed={unencryptedMessagesAllowed}
+			isMobile={isMobile}
+			joinPending={joinMutation.isPending}
+			onEmojiClick={handleOpenEmojiPicker}
+			onSend={handleSendMessage}
+			onJoin={onJoin}
+			closeEditing={closeEditing}
+			input={
 				<MessageComposerInputExpandable
 					dimensions={sizes}
 					ref={mergedRefs}
@@ -469,58 +388,9 @@ const MessageBox = ({
 					onPaste={handlePaste}
 					aria-activedescendant={popup.focused ? `popup-item-${popup.focused._id}` : undefined}
 				/>
-				<MessageComposerFiles />
-				<MessageComposerToolbar>
-					<MessageComposerToolbarActions aria-label={t('Message_composer_toolbox_primary_actions')}>
-						<MessageComposerAction
-							icon='emoji'
-							disabled={!useEmojis || isRecording || !canSend}
-							onClick={handleOpenEmojiPicker}
-							title={t('Emoji')}
-						/>
-						<MessageComposerActionsDivider />
-						{chat.composer && formatters.length > 0 && (
-							<MessageBoxFormattingToolbar
-								composer={chat.composer}
-								variant={sizes.inlineSize < 480 ? 'small' : 'large'}
-								items={formatters}
-								disabled={isRecording || !canSend}
-							/>
-						)}
-						<MessageBoxActionsToolbar
-							canSend={canSend}
-							isMicrophoneDenied={isMicrophoneDenied}
-							rid={room._id}
-							tmid={tmid}
-							isRecording={isRecording}
-							variant={sizes.inlineSize < 480 ? 'small' : 'large'}
-							isEditing={isEditing}
-						/>
-					</MessageComposerToolbarActions>
-					<MessageComposerToolbarSubmit>
-						{!canSend && (
-							<MessageComposerButton primary onClick={onJoin} loading={joinMutation.isPending}>
-								{t('Join')}
-							</MessageComposerButton>
-						)}
-						{canSend && (
-							<>
-								{isEditing && <MessageComposerButton onClick={closeEditing}>{t('Cancel')}</MessageComposerButton>}
-								<MessageComposerAction
-									aria-label={t('Send')}
-									icon='send'
-									disabled={!canSend || isUploading || isProcessingUploads || (!typing && !isEditing && !hasUploads)}
-									onClick={handleSendMessage}
-									secondary={typing || isEditing || hasUploads}
-									info={typing || isEditing || hasUploads}
-								/>
-							</>
-						)}
-					</MessageComposerToolbarSubmit>
-				</MessageComposerToolbar>
-			</MessageComposer>
-			<ComposerUserActionIndicator rid={room._id} tmid={tmid} />
-		</>
+			}
+			files={<MessageComposerFiles />}
+		/>
 	);
 };