Skip to content

Commit

Permalink
feat: Add support to cancel editing message action (#31347)
Browse files Browse the repository at this point in the history
Co-authored-by: Hugo Costa <20212776+hugocostadev@users.noreply.github.com>
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
  • Loading branch information
3 people authored Jan 16, 2024
1 parent cced9b5 commit e1fa2b8
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 32 deletions.
6 changes: 6 additions & 0 deletions .changeset/message-composer-hint.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@rocket.chat/meteor": minor
"@rocket.chat/ui-composer": minor
---

New feature to support cancel message editing message and hints for shortcuts.
85 changes: 53 additions & 32 deletions apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable complexity */
import type { IMessage, ISubscription } from '@rocket.chat/core-typings';
import { Button, Tag, Box } from '@rocket.chat/fuselage';
import { useContentBoxSize, useMutableCallback } from '@rocket.chat/fuselage-hooks';
import {
MessageComposerAction,
Expand All @@ -10,11 +9,22 @@ import {
MessageComposerToolbar,
MessageComposerActionsDivider,
MessageComposerToolbarSubmit,
MessageComposerHint,
MessageComposerButton,
} from '@rocket.chat/ui-composer';
import { useTranslation, useUserPreference, useLayout } from '@rocket.chat/ui-contexts';
import { useMutation } from '@tanstack/react-query';
import type { ReactElement, MouseEventHandler, FormEvent, KeyboardEventHandler, KeyboardEvent, ClipboardEventHandler } from 'react';
import type {
ReactElement,
MouseEventHandler,
FormEvent,
KeyboardEventHandler,
KeyboardEvent,
ClipboardEventHandler,
MouseEvent,
} from 'react';
import React, { memo, useRef, useReducer, useCallback } from 'react';
import { Trans } from 'react-i18next';
import { useSubscription } from 'use-subscription';

import { createComposerAPI } from '../../../../../app/ui-message/client/messageBox/createComposerAPI';
Expand Down Expand Up @@ -169,6 +179,19 @@ const MessageBox = ({
});
});

const closeEditing = (event: KeyboardEvent | MouseEvent<HTMLElement>) => {
if (chat.currentEditing) {
event.preventDefault();
event.stopPropagation();

chat.currentEditing.reset().then((reset) => {
if (!reset) {
chat.currentEditing?.cancel();
}
});
}
};

const handler: KeyboardEventHandler<HTMLTextAreaElement> = useMutableCallback((event) => {
const { which: keyCode } = event;

Expand Down Expand Up @@ -199,19 +222,7 @@ const MessageBox = ({

switch (event.key) {
case 'Escape': {
if (chat.currentEditing) {
event.preventDefault();
event.stopPropagation();

chat.currentEditing.reset().then((reset) => {
if (!reset) {
chat.currentEditing?.cancel();
}
});

return;
}

closeEditing(event);
if (!input.value.trim()) onEscape?.();
return;
}
Expand Down Expand Up @@ -349,7 +360,6 @@ const MessageBox = ({
return (
<>
{chat.composer?.quotedMessages && <MessageBoxReplies />}

{shouldPopupPreview && popup && (
<ComposerBoxPopup select={select} items={items} focused={focused} title={popup.title} renderItem={popup.renderItem} />
)}
Expand All @@ -371,13 +381,21 @@ const MessageBox = ({
suspended={suspended}
/>
)}

{readOnly && (
<Box mbe={4} display='flex'>
<Tag title={t('Only_people_with_permission_can_send_messages_here')}>{t('This_room_is_read_only')}</Tag>
</Box>
{isEditing && (
<MessageComposerHint
icon='pencil'
helperText={
!isMobile ? (
<Trans i18nKey='Editing_message_hint'>
<strong>esc</strong> to cancel · <strong>enter</strong> to save
</Trans>
) : undefined
}
>
{t('Editing_message')}
</MessageComposerHint>
)}

{readOnly && !isEditing && <MessageComposerHint>{t('This_room_is_read_only')}</MessageComposerHint>}
{isRecordingVideo && <VideoMessageRecorder reference={messageComposerRef} rid={room._id} tmid={tmid} />}
<MessageComposer ref={messageComposerRef} variant={isEditing ? 'editing' : undefined}>
{isRecordingAudio && <AudioMessageRecorder rid={room._id} isMicrophoneDenied={isMicrophoneDenied} />}
Expand Down Expand Up @@ -423,19 +441,22 @@ const MessageBox = ({
</MessageComposerToolbarActions>
<MessageComposerToolbarSubmit>
{!canSend && (
<Button small primary onClick={onJoin} loading={joinMutation.isLoading}>
<MessageComposerButton primary onClick={onJoin} loading={joinMutation.isLoading}>
{t('Join')}
</Button>
</MessageComposerButton>
)}
{canSend && (
<MessageComposerAction
aria-label={t('Send')}
icon='send'
disabled={!canSend || (!typing && !isEditing)}
onClick={handleSendMessage}
secondary={typing || isEditing}
info={typing || isEditing}
/>
<>
{isEditing && <MessageComposerButton onClick={closeEditing}>{t('Cancel')}</MessageComposerButton>}
<MessageComposerAction
aria-label={t('Send')}
icon='send'
disabled={!canSend || (!typing && !isEditing)}
onClick={handleSendMessage}
secondary={typing || isEditing}
info={typing || isEditing}
/>
</>
)}
</MessageComposerToolbarSubmit>
</MessageComposerToolbar>
Expand Down
2 changes: 2 additions & 0 deletions apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -1831,6 +1831,8 @@
"edit-omnichannel-contact_description": "Permission to edit Omnichannel Contact",
"Edit_Contact_Profile": "Edit Contact Profile",
"edited": "edited",
"Editing_message": "Editing message",
"Editing_message_hint": "<strong>esc</strong> to cancel · <strong>enter</strong> to save",
"Editing_room": "Editing room",
"Editing_user": "Editing user",
"Editor": "Editor",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Button } from '@rocket.chat/fuselage';
import type { ComponentProps, ReactElement } from 'react';

const MessageComposerButton = (props: ComponentProps<typeof Button>): ReactElement => <Button small {...props} />;

export default MessageComposerButton;
21 changes: 21 additions & 0 deletions packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { IconProps } from '@rocket.chat/fuselage';
import { Box, Icon, Tag } from '@rocket.chat/fuselage';
import type { ReactElement, ReactNode } from 'react';

type MessageComposerHintProps = {
children: string;
icon?: IconProps['name'];
helperText?: ReactNode;
};

const MessageComposerHint = ({ icon, children, helperText }: MessageComposerHintProps): ReactElement => (
<Box pbs={0} pbe={4} display='flex' flexDirection='row' justifyContent='space-between' alignItems='center'>
<Tag icon={icon ? <Icon mie={4} name={icon} size='x12' /> : undefined}>{children}</Tag>
{helperText && (
<Box fontScale='c1' color='font-hint'>
{helperText}
</Box>
)}
</Box>
);
export default MessageComposerHint;
4 changes: 4 additions & 0 deletions packages/ui-composer/src/MessageComposer/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import MessageComposer from './MessageComposer';
import MessageComposerAction from './MessageComposerAction';
import MessageComposerActionsDivider from './MessageComposerActionsDivider';
import MessageComposerButton from './MessageComposerButton';
import MessageComposerHint from './MessageComposerHint';
import MessageComposerIcon from './MessageComposerIcon';
import MessageComposerInput from './MessageComposerInput';
import MessageComposerSkeleton from './MessageComposerSkeleton';
Expand All @@ -18,4 +20,6 @@ export {
MessageComposerToolbarSubmit,
MessageComposerSkeleton,
MessageComposerIcon,
MessageComposerHint,
MessageComposerButton,
};

0 comments on commit e1fa2b8

Please sign in to comment.