{children}
diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx
index 9a5639074438..498e13991911 100644
--- a/ts/components/conversation/Quote.stories.tsx
+++ b/ts/components/conversation/Quote.stories.tsx
@@ -83,6 +83,7 @@ const defaultMessageProps: TimelineMessagesProps = {
id: 'some-id',
title: 'Person X',
}),
+ canEditMessage: true,
canReact: true,
canReply: true,
canRetry: true,
@@ -125,6 +126,7 @@ const defaultMessageProps: TimelineMessagesProps = {
renderEmojiPicker: () =>
,
renderReactionPicker: () =>
,
renderAudioAttachment: () =>
*AudioAttachment*
,
+ setMessageToEdit: action('setMessageToEdit'),
setQuoteByMessageId: action('default--setQuoteByMessageId'),
retryMessageSend: action('default--retryMessageSend'),
retryDeleteForEveryone: action('default--retryDeleteForEveryone'),
diff --git a/ts/components/conversation/Timeline.stories.tsx b/ts/components/conversation/Timeline.stories.tsx
index 3a5a692a85c8..1d5685d42cb9 100644
--- a/ts/components/conversation/Timeline.stories.tsx
+++ b/ts/components/conversation/Timeline.stories.tsx
@@ -49,6 +49,7 @@ function mockMessageTimelineItem(
author: getDefaultConversation({}),
canDeleteForEveryone: false,
canDownload: true,
+ canEditMessage: true,
canReact: true,
canReply: true,
canRetry: true,
@@ -279,6 +280,7 @@ const actions = () => ({
updateSharedGroups: action('updateSharedGroups'),
reactToMessage: action('reactToMessage'),
+ setMessageToEdit: action('setMessageToEdit'),
setQuoteByMessageId: action('setQuoteByMessageId'),
retryDeleteForEveryone: action('retryDeleteForEveryone'),
retryMessageSend: action('retryMessageSend'),
diff --git a/ts/components/conversation/TimelineItem.stories.tsx b/ts/components/conversation/TimelineItem.stories.tsx
index 96e0e1e3ff7b..09c51e44e2b5 100644
--- a/ts/components/conversation/TimelineItem.stories.tsx
+++ b/ts/components/conversation/TimelineItem.stories.tsx
@@ -67,6 +67,7 @@ const getDefaultProps = () => ({
reactToMessage: action('reactToMessage'),
checkForAccount: action('checkForAccount'),
clearTargetedMessage: action('clearTargetedMessage'),
+ setMessageToEdit: action('setMessageToEdit'),
setQuoteByMessageId: action('setQuoteByMessageId'),
retryDeleteForEveryone: action('retryDeleteForEveryone'),
retryMessageSend: action('retryMessageSend'),
diff --git a/ts/components/conversation/TimelineItem.tsx b/ts/components/conversation/TimelineItem.tsx
index 94fb17f40a3e..3b84a336306e 100644
--- a/ts/components/conversation/TimelineItem.tsx
+++ b/ts/components/conversation/TimelineItem.tsx
@@ -197,6 +197,7 @@ export const TimelineItem = memo(function TimelineItem({
renderUniversalTimerNotification,
returnToActiveCall,
targetMessage,
+ setMessageToEdit,
shouldCollapseAbove,
shouldCollapseBelow,
shouldHideMetadata,
@@ -223,6 +224,7 @@ export const TimelineItem = memo(function TimelineItem({
{...item.data}
isTargeted={isTargeted}
targetMessage={targetMessage}
+ setMessageToEdit={setMessageToEdit}
shouldCollapseAbove={shouldCollapseAbove}
shouldCollapseBelow={shouldCollapseBelow}
shouldHideMetadata={shouldHideMetadata}
diff --git a/ts/components/conversation/TimelineMessage.stories.tsx b/ts/components/conversation/TimelineMessage.stories.tsx
index 76c0943e2bf2..cbd457042760 100644
--- a/ts/components/conversation/TimelineMessage.stories.tsx
+++ b/ts/components/conversation/TimelineMessage.stories.tsx
@@ -245,6 +245,7 @@ const createProps = (overrideProps: Partial
= {}): Props => ({
attachments: overrideProps.attachments,
author: overrideProps.author || getDefaultConversation(),
bodyRanges: overrideProps.bodyRanges,
+ canEditMessage: true,
canReact: true,
canReply: true,
canDownload: true,
@@ -330,6 +331,7 @@ const createProps = (overrideProps: Partial = {}): Props => ({
overrideProps.toggleSelectMessage == null
? action('toggleSelectMessage')
: overrideProps.toggleSelectMessage,
+ setMessageToEdit: action('setMessageToEdit'),
shouldCollapseAbove: isBoolean(overrideProps.shouldCollapseAbove)
? overrideProps.shouldCollapseAbove
: false,
@@ -878,6 +880,13 @@ Error.args = {
text: 'I hope you get this.',
};
+export const EditError = Template.bind({});
+EditError.args = {
+ status: 'error',
+ isEditedMessage: true,
+ text: 'I hope you get this.',
+};
+
export const Paused = Template.bind({});
Paused.args = {
status: 'paused',
diff --git a/ts/components/conversation/TimelineMessage.tsx b/ts/components/conversation/TimelineMessage.tsx
index 5a44d16c91ff..28d4075a760b 100644
--- a/ts/components/conversation/TimelineMessage.tsx
+++ b/ts/components/conversation/TimelineMessage.tsx
@@ -32,6 +32,7 @@ import type { DeleteMessagesPropsType } from '../../state/ducks/globalModals';
export type PropsData = {
canDownload: boolean;
+ canEditMessage: boolean;
canRetry: boolean;
canRetryDeleteForEveryone: boolean;
canReact: boolean;
@@ -50,6 +51,7 @@ export type PropsActions = {
) => void;
retryMessageSend: (id: string) => void;
retryDeleteForEveryone: (id: string) => void;
+ setMessageToEdit: (conversationId: string, messageId: string) => unknown;
setQuoteByMessageId: (conversationId: string, messageId: string) => void;
toggleSelectMessage: (
conversationId: string,
@@ -80,6 +82,7 @@ export function TimelineMessage(props: Props): JSX.Element {
attachments,
author,
canDownload,
+ canEditMessage,
canReact,
canReply,
canRetry,
@@ -107,6 +110,7 @@ export function TimelineMessage(props: Props): JSX.Element {
saveAttachment,
selectedReaction,
setQuoteByMessageId,
+ setMessageToEdit,
text,
timestamp,
toggleDeleteMessagesModal,
@@ -350,6 +354,11 @@ export function TimelineMessage(props: Props): JSX.Element {
triggerId={triggerId}
shouldShowAdditional={shouldShowAdditional}
onDownload={handleDownload}
+ onEdit={
+ canEditMessage
+ ? () => setMessageToEdit(conversationId, id)
+ : undefined
+ }
onReplyToMessage={handleReplyToMessage}
onReact={handleReact}
onRetryMessageSend={canRetry ? () => retryMessageSend(id) : undefined}
@@ -540,6 +549,7 @@ type MessageContextProps = {
shouldShowAdditional: boolean;
onDownload: (() => void) | undefined;
+ onEdit: (() => void) | undefined;
onReplyToMessage: (() => void) | undefined;
onReact: (() => void) | undefined;
onRetryMessageSend: (() => void) | undefined;
@@ -555,6 +565,7 @@ const MessageContextMenu = ({
triggerId,
shouldShowAdditional,
onDownload,
+ onEdit,
onReplyToMessage,
onReact,
onMoreInfo,
@@ -686,6 +697,22 @@ const MessageContextMenu = ({
{i18n('icu:forwardMessage')}
)}
+ {onEdit && (
+
+ )}