+ {isVideo ? (
+ // eslint-disable-next-line jsx-a11y/media-has-caption
+
+ ) : (
+ 
+ )}
+ {loading &&
+ );
+ }
+
+ let meta: React.ReactNode = bytesToSize(file.size);
+ if (loading) meta = `${progressPercent}%`;
+ else if (fileSizeExceeded) meta = t('Room.upload_too_large');
+ else if (failed) {
+ meta = (
+
+ );
+ }
+
+ return (
+ {progressPercent}%
}
+ {(failed || fileSizeExceeded) && (
+
+ {failed ? (
+
+ ) : (
+
+ {t('Room.upload_too_large')}
+
+ )}
+
+ )}
+ {removeBtn}
+ {!fileSizeExceeded && (
+
+ )}
+
+
+ );
+}
+
+type ComposerAttachmentsProps = {
+ selectedFiles: TUploadItem[];
+ setMetadata: (fileItem: TUploadItem, metadata: TUploadMetadata) => void;
+ onRemove: (file: TUploadContent) => void;
+};
+
+export function ComposerAttachments({
+ selectedFiles,
+ setMetadata,
+ onRemove,
+}: ComposerAttachmentsProps) {
+ if (selectedFiles.length === 0) return null;
+ return (
+
+ {file.name}
+
+ {meta}
+
+
+ {removeBtn}
+
+ {selectedFiles.map((fileItem, index) => (
+
+ );
+}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index c58335a6..3d06df08 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -9,13 +9,24 @@ import React, {
useRef,
useState,
} from 'react';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom, useStore } from 'jotai';
import { isKeyHotkey } from 'is-hotkey';
+import FocusTrap from 'focus-trap-react';
import { useTranslation } from 'react-i18next';
-import { EventType, IContent, MsgType, RelationType, Room } from 'matrix-js-sdk';
+import {
+ EventStatus,
+ EventType,
+ IContent,
+ IMentions,
+ MatrixEvent,
+ MsgType,
+ RelationType,
+ Room,
+ RoomEvent,
+} from 'matrix-js-sdk';
import type { RoomMessageEventContent } from 'matrix-js-sdk/lib/types';
import { ReactEditor } from 'slate-react';
-import { Transforms, Editor } from 'slate';
+import { Transforms, Editor, Descendant } from 'slate';
import {
Box,
Dialog,
@@ -26,7 +37,6 @@ import {
OverlayBackdrop,
OverlayCenter,
PopOut,
- Scroll,
Text,
color,
config,
@@ -56,6 +66,8 @@ import {
getBeginCommand,
trimCommand,
getMentions,
+ htmlToEditorInput,
+ plainToEditorInput,
} from '../../components/editor';
import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
import { UseStateProvider } from '../../components/UseStateProvider';
@@ -68,6 +80,7 @@ import {
mxcUrlToHttp,
} from '../../utils/matrix';
import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
+import { useAlive } from '../../hooks/useAlive';
import { useFilePicker } from '../../hooks/useFilePicker';
import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
import { useFileDropZone } from '../../hooks/useFileDrop';
@@ -75,18 +88,13 @@ import {
TUploadItem,
TUploadMetadata,
draftKey,
+ roomIdToEditDraftAtomFamily,
roomIdToMsgDraftAtomFamily,
roomIdToReplyDraftAtomFamily,
roomIdToUploadItemsAtomFamily,
roomUploadAtomFamily,
} from '../../state/room/roomInputDrafts';
-import { UploadCardRenderer } from '../../components/upload-card';
-import {
- UploadBoard,
- UploadBoardContent,
- UploadBoardHeader,
- UploadBoardImperativeHandlers,
-} from '../../components/upload-board';
+import { ComposerAttachments } from './ComposerAttachments';
import {
Upload,
UploadStatus,
@@ -94,6 +102,7 @@ import {
createUploadFamilyObserverAtom,
} from '../../state/upload';
import { getImageUrlBlob, loadImageElement } from '../../utils/dom';
+import { stopPropagation } from '../../utils/keyboard';
import { safeFile } from '../../utils/mimeTypes';
import { fulfilledPromiseSettledResult } from '../../utils/common';
import { useSetting } from '../../state/hooks/settings';
@@ -109,7 +118,13 @@ import { VoiceRecording, VoiceRecordingResult } from '../../utils/voiceRecording
import { VoiceRecorder } from './VoiceRecorderForm';
import { useStateEvent } from '../../hooks/useStateEvent';
import { StateEvent } from '../../../types/matrix/room';
-import { getMemberDisplayName, getMentionContent, trimReplyFromBody } from '../../utils/room';
+import {
+ getEditedEvent,
+ getMemberDisplayName,
+ getMentionContent,
+ trimReplyFromBody,
+ trimReplyFromFormattedBody,
+} from '../../utils/room';
import { CommandAutocomplete } from './CommandAutocomplete';
import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
import { mobileOrTablet } from '../../utils/user-agent';
@@ -264,15 +279,19 @@ export const RoomInput = forwardRef
- {selectedFiles.length > 0 && (
- setUploadBoard(!uploadBoard)}
- uploadFamilyObserverAtom={uploadFamilyObserverAtom}
- onSend={handleSendUpload}
- imperativeHandlerRef={uploadBoardHandlers}
- onCancel={handleCancelUpload}
- />
- }
- >
- {uploadBoard && (
-
-
- {Array.from(selectedFiles)
- .reverse()
- .map((fileItem, index) => (
-
-
- )}
-
- )}
(
}
top={
<>
- {dockedEmojiBoard}
+ {centeredEmojiBoard}
+ {/* Attachment strip — the in-form record of attached media
+ (replaces the old floating UploadBoard window). Visible in
+ edit mode too: the m.replace send ignores it, and the
+ attachments are still there when the edit ends. */}
+ (
)}
- {replyDraft && (
+ {/* Edit banner — Telegram-style: pencil + «Editing» + the
+ original text, with [×] to cancel (Esc does the same).
+ Same chrome slot/structure as the reply preview below. */}
+ {editDraft && (
+
(
after={
singleRow && !voiceMode ? (
<>
- {!textOnly && voiceSupported && voiceDisabledBy === undefined && micButton}
+ {/* Mic hides while editing — a recording would ship a NEW
+ message under a pending edit banner. */}
+ {!textOnly &&
+ !editDraft &&
+ voiceSupported &&
+ voiceDisabledBy === undefined &&
+ micButton}
{!textOnly && emojiButton}
{sendButton}
@@ -1059,7 +1476,13 @@ export const RoomInput = forwardRef(
>
{!textOnly && plusButton}
diff --git a/src/app/features/room/RoomTimeline.css.ts b/src/app/features/room/RoomTimeline.css.ts
index c428f470..a25a8553 100644
--- a/src/app/features/room/RoomTimeline.css.ts
+++ b/src/app/features/room/RoomTimeline.css.ts
@@ -1,5 +1,4 @@
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
-import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { DefaultReset, color, config, toRem } from 'folds';
import {
VOJO_BUBBLE_BAND_PX,
@@ -101,31 +100,6 @@ export const TimelineScroll = style({
scrollbarColor: `${color.SurfaceVariant.ContainerLine} transparent`,
});
-export const TimelineFloat = recipe({
- base: [
- DefaultReset,
- {
- position: 'absolute',
- left: '50%',
- transform: 'translateX(-50%)',
- zIndex: 1,
- minWidth: 'max-content',
- },
- ],
- variants: {
- position: {
- Top: {
- top: config.space.S400,
- },
- },
- },
- defaultVariants: {
- position: 'Top',
- },
-});
-
-export type TimelineFloatVariants = RecipeVariants;
-
// "Jump to latest" FAB. Bottom-right, circular, lavender brand accent.
// `data-hidden` encodes visibility (state inline-styled would clobber the
// `:active` press feedback). Inline `bottom` at the use site offsets for
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index bf50b01a..658a4938 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -22,12 +22,11 @@ import {
RoomEventHandlerMap,
} from 'matrix-js-sdk';
import { HTMLReactParserOptions } from 'html-react-parser';
-import classNames from 'classnames';
import { Editor } from 'slate';
import { DEFAULT_EXPIRE_DURATION, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc';
import to from 'await-to-js';
import { useAtomValue, useSetAtom } from 'jotai';
-import { Box, Chip, Icon, Icons, Text, as, config } from 'folds';
+import { Box, Icon, Icons, Text, config } from 'folds';
import { isKeyHotkey } from 'is-hotkey';
import { Opts as LinkifyOpts } from 'linkifyjs';
import { useTranslation } from 'react-i18next';
@@ -96,9 +95,14 @@ import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResize
import * as css from './RoomTimeline.css';
import { inSameDay, minuteDifference, timeDayMonYear, today, yesterday } from '../../utils/time';
import { isEmptyEditor } from '../../components/editor';
-import { draftKey, roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
+import {
+ draftKey,
+ roomIdToEditDraftAtomFamily,
+ roomIdToReplyDraftAtomFamily,
+} from '../../state/room/roomInputDrafts';
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
+import { useStateEvent } from '../../hooks/useStateEvent';
import { useKeyDown } from '../../hooks/useKeyDown';
import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
import { RenderMessageContent } from '../../components/RenderMessageContent';
@@ -127,19 +131,6 @@ import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
import { RoomTimelineTyping } from './RoomTimelineTyping';
import { MessageErrorBoundary } from './MessageErrorBoundary';
-const TimelineFloat = as<'div', css.TimelineFloatVariants>(
- ({ position, className, ...props }, ref) => (
-
{/* Day dates are the inline capsules themselves (every room class), made
sticky via real CSS `position: sticky` (engaged by the effect above) —
no separate floating pill. */}
- {unreadFloatShown && (
-
- {t('Room.jump_to_unread')}
-
-
- {t('Room.mark_as_read')}
-
-
- )}
-
-
-
-
-
-
-
+ {/* EventReaders owns its Overlay + FocusTrap (self-contained Vojo card). */}
+ {open && = (evt) => {
- if (!isBubble || edit) return;
+ if (!isBubble) return;
// Don't hijack a text selection, nor taps on interactive children (links,
// buttons, media players, the waveform slider, the action rail, reaction
// chips) — those run their own action and must not also toggle the rail.
@@ -1030,7 +1012,7 @@ const MessageInner = as<'div', MessageProps>(
// holds focus (not a child link/button), so Enter on a focused link still
// follows it. Replaces the focus-within reveal the hover rail used to give.
const handleBubbleKeyDown: KeyboardEventHandler = (evt) => {
- if (!isBubble || edit) return;
+ if (!isBubble) return;
if (evt.target !== evt.currentTarget) return;
if (evt.key === 'Enter' || evt.key === ' ') {
evt.preventDefault();
@@ -1048,20 +1030,19 @@ const MessageInner = as<'div', MessageProps>(
// a local useState here sidesteps the commit↔effect race where
// decryption fires between render and listener attach.
const isMediaMessage = msgType === MsgType.Image || msgType === MsgType.Video;
- const mediaMode = isMediaMessage && !edit;
+ const mediaMode = isMediaMessage;
// Voice notes are self-chromed cards — VoiceContent draws its own avatar +
// bubble. Collapse the asymmetric Stream bubble (DM) and drop the channel
// avatar (group) so a voice note renders identically for own/other, the only
// difference being the bubble fill. See docs/plans/voice_messages.md §5.
const isVoiceMessage = msgType === MsgType.Audio && isVoiceMessageContent(mEvent.getContent());
- const voiceMode = isVoiceMessage && !edit;
+ const voiceMode = isVoiceMessage;
if (msgType === MsgType.Image || msgType === MsgType.Video || msgType === MsgType.File) {
logMedia('Message', {
eventId: mEvent.getId(),
msgType,
isMediaMessage,
- edit,
mediaMode,
isMobile,
screenSize,
@@ -1082,29 +1063,12 @@ const MessageInner = as<'div', MessageProps>(
const msgContentJSX = (
{reply}
- {edit && onEditId ? (
- // Edit form styled as the main composer — a single rounded card
- // (`ChatComposer` paints the inner Editor with Surface.Container + 32px
- // radius). The bubble drops its own chrome while editing (see
- // BubbleLayout `editing`) so it's ONE box, not a bubble inside a bubble.
-
);
const handleContextMenu: MouseEventHandler = (evt) => {
- if (evt.altKey || !window.getSelection()?.isCollapsed || edit) return;
+ if (evt.altKey || !window.getSelection()?.isCollapsed) return;
const tag = (evt.target as Element).tagName;
if (typeof tag === 'string' && tag.toLowerCase() === 'a') return;
evt.preventDefault();
@@ -1153,8 +1117,7 @@ const MessageInner = as<'div', MessageProps>(
// bar can render in two places: as a row-anchored overlay for channel/stream
// rows, and — for the bubble layout — passed into BubbleLayout so it floats
// centred just above the bubble itself.
- const railVisible =
- !edit && ((isBubble ? railOpen : hover) || !!menuAnchor || !!emojiBoardAnchor);
+ const railVisible = (isBubble ? railOpen : hover) || !!menuAnchor || !!emojiBoardAnchor;
// The reaction emoji board, shared by the desktop anchored PopOut and the
// mobile centred Overlay (an anchored PopOut drifts off-screen on the small
// native viewport — `съезжает` — so mobile centres it instead).
@@ -1423,7 +1386,7 @@ const MessageInner = as<'div', MessageProps>(
)}
{/* Mobile: the reaction emoji board renders as a centred Overlay (an
anchored PopOut drifts off the small native viewport). */}
- {isMobile && canSendReaction && !edit && !!emojiBoardAnchor && (
+ {isMobile && canSendReaction && !!emojiBoardAnchor && (
(
// `collapsed`.
collapsed={collapse}
selected={bubbleSelected}
- // While editing, the body IS a composer card — drop the bubble chrome
- // so it reads as one box, not a composer nested in a bubble.
- editing={!!edit}
// Grouped same-minute series → timestamp below the bubble; singles keep
// it on the side (RoomTimeline computes timeBelow). Media is always below.
timeBelow={timeBelow}
@@ -1505,7 +1465,7 @@ const MessageInner = as<'div', MessageProps>(
// Read/delivery status under the user's LAST own message only — at
// the live end of the timeline (RoomTimeline computes isLatestOwn).
readStatus={
- isOwnMessage && isLatestOwn && !edit ? (
+ isOwnMessage && isLatestOwn ? (
>();
-
- const getPrevBodyAndFormattedBody = useCallback((): [
- string | undefined,
- string | undefined,
- IMentions | undefined
- ] => {
- const evtId = mEvent.getId();
- if (!evtId) return [undefined, undefined, undefined];
- const evtTimeline = room.getTimelineForEvent(evtId);
- const editedEvent =
- evtTimeline && getEditedEvent(evtId, mEvent, evtTimeline.getTimelineSet());
-
- const content: IContent = editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
- const { body, formatted_body: customHtml }: Record = content;
-
- const mMentions: IMentions | undefined = content['m.mentions'];
-
- return [
- typeof body === 'string' ? body : undefined,
- typeof customHtml === 'string' ? customHtml : undefined,
- mMentions,
- ];
- }, [room, mEvent]);
-
- const [saveState, save] = useAsyncCallback(
- useCallback(async () => {
- const plainText = toPlainText(editor.children, isMarkdown).trim();
- const customHtml = trimCustomHtml(
- toMatrixCustomHTML(editor.children, {
- allowTextFormatting: true,
- allowBlockMarkdown: isMarkdown,
- allowInlineMarkdown: isMarkdown,
- })
- );
-
- const [prevBody, prevCustomHtml, prevMentions] = getPrevBodyAndFormattedBody();
-
- if (plainText === '') return undefined;
- if (prevBody) {
- if (prevCustomHtml && trimReplyFromFormattedBody(prevCustomHtml) === customHtml) {
- return undefined;
- }
- if (
- !prevCustomHtml &&
- prevBody === plainText &&
- customHtmlEqualsPlainText(customHtml, plainText)
- ) {
- return undefined;
- }
- }
-
- const newContent: IContent = {
- msgtype: mEvent.getContent().msgtype,
- body: plainText,
- };
-
- const mentionData = getMentions(mx, roomId, editor);
-
- prevMentions?.user_ids?.forEach((prevMentionId) => {
- mentionData.users.add(prevMentionId);
- });
-
- const mMentions = getMentionContent(Array.from(mentionData.users), mentionData.room);
- newContent['m.mentions'] = mMentions;
-
- if (!customHtmlEqualsPlainText(customHtml, plainText)) {
- newContent.format = 'org.matrix.custom.html';
- newContent.formatted_body = customHtml;
- }
-
- const content: IContent = {
- ...newContent,
- body: `* ${plainText}`,
- 'm.new_content': newContent,
- 'm.relates_to': {
- event_id: mEvent.getId(),
- rel_type: RelationType.Replace,
- },
- };
-
- // Pass threadRootId so the local-echo MatrixEvent gets its
- // `.thread` pointer set via `localEvent.setThread(thread)`
- // (client.js:1872-1875) and `Thread.onEcho` re-emits
- // `ThreadEvent.Update` post-send, which the drawer subscribes
- // to. SDK `addThreadRelationIfNeeded` (client.js:1810-1820)
- // doesn't inject `m.thread` because m.replace already owns
- // `m.relates_to.rel_type` — spec-correct, edit aggregation
- // chains via the original event's relation. Element-web's
- // EditMessageComposer.tsx:349-351 uses the same pattern.
- // M4a-followup: own-send local-echo of m.replace doesn't
- // aggregate into `thread.timelineSet.relations` (canContain
- // rejects against unfilteredTimelineSet at
- // event-timeline-set.js:786-803, and the thread-side path runs
- // only on remote echo). User sees the new body only after
- // /sync round-trip — same lag as M4 receipts. Optimistic
- // local-replace via `mEvent.makeReplaced(localEvent)` is
- // tracked for follow-up.
- return mx.sendMessage(
- roomId,
- mEvent.threadRootId ?? null,
- content as RoomMessageEventContent
- );
- }, [mx, editor, roomId, mEvent, isMarkdown, getPrevBodyAndFormattedBody])
- );
-
- const handleSave = useCallback(() => {
- if (saveState.status !== AsyncStatus.Loading) {
- save();
- }
- }, [saveState, save]);
-
- const handleKeyDown: KeyboardEventHandler = useCallback(
- (evt) => {
- if (
- (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) &&
- !isComposing(evt)
- ) {
- evt.preventDefault();
- handleSave();
- }
- if (isKeyHotkey('escape', evt)) {
- evt.preventDefault();
- onCancel();
- }
- },
- [onCancel, handleSave, enterForNewline, isComposing]
- );
-
- const handleKeyUp: KeyboardEventHandler = useCallback(
- (evt) => {
- if (isKeyHotkey('escape', evt)) {
- evt.preventDefault();
- return;
- }
-
- const prevWordRange = getPrevWorldRange(editor);
- const query = prevWordRange
- ? getAutocompleteQuery(editor, prevWordRange, AUTOCOMPLETE_PREFIXES)
- : undefined;
- setAutocompleteQuery(query);
- },
- [editor]
- );
-
- const handleCloseAutocomplete = useCallback(() => {
- ReactEditor.focus(editor);
- setAutocompleteQuery(undefined);
- }, [editor]);
-
- const handleEmoticonSelect = (key: string, shortcode: string) => {
- editor.insertNode(createEmoticonElement(key, shortcode));
- moveCursor(editor);
- };
-
- useEffect(() => {
- const [body, customHtml] = getPrevBodyAndFormattedBody();
-
- const initialValue =
- typeof customHtml === 'string'
- ? htmlToEditorInput(customHtml, isMarkdown)
- : plainToEditorInput(typeof body === 'string' ? body : '', isMarkdown);
-
- Transforms.select(editor, {
- anchor: Editor.start(editor, []),
- focus: Editor.end(editor, []),
- });
-
- editor.insertFragment(initialValue);
- if (!mobileOrTablet()) ReactEditor.focus(editor);
- }, [editor, getPrevBodyAndFormattedBody, isMarkdown]);
-
- useEffect(() => {
- if (saveState.status === AsyncStatus.Success) {
- onCancel();
- }
- }, [saveState, onCancel]);
-
- return (
- ;
@@ -61,15 +65,17 @@ export type MessageInteractionHandlers = {
};
// Wiring layer for `` event-handler props, shared between
-// `RoomTimeline` (main column) and `ThreadDrawer` (thread column). Each
-// hook instance owns its own `editId` — editing in the drawer doesn't
-// flip a row in the main timeline into edit mode and vice versa, which
-// matches the user's mental model of two independent conversations.
+// `RoomTimeline` (main column) and `ThreadDrawer` (thread column). Edit
+// state lives in the per-(roomId, threadKey) edit-draft atom (the caller
+// passes the scoped setter) — editing in the drawer doesn't put a main
+// timeline row into edit mode and vice versa, which matches the user's
+// mental model of two independent conversations.
export function useMessageInteractionHandlers({
room,
editor,
composerSuspended,
setReplyDraft,
+ setEditDraft,
onOpenEvent,
channelsMode,
isBridged,
@@ -81,8 +87,6 @@ export function useMessageInteractionHandlers({
const space = useSpaceOptionally();
const openUserRoomProfile = useOpenUserRoomProfile();
- const [editId, setEditId] = useState();
-
const handleOpenReply: MouseEventHandler = useCallback(
(evt) => {
const targetId = evt.currentTarget.getAttribute('data-event-id');
@@ -171,6 +175,11 @@ export function useMessageInteractionHandlers({
navigate(getChannelsThreadPath(decodedSpace, decodedRoom, replyId));
return;
}
+ // Same orphan-draft guard as handleEdit below: while this scope's
+ // composer is hidden the reply banner could neither render nor be
+ // cleared. The thread-drawer navigation above is composer-independent
+ // and stays available.
+ if (composerSuspended) return;
const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
const { body, formatted_body: formattedBody } = content;
@@ -189,7 +198,17 @@ export function useMessageInteractionHandlers({
setTimeout(() => ReactEditor.focus(editor), 100);
}
},
- [room, setReplyDraft, editor, channelsMode, isBridged, navigate, spaceIdOrAlias, roomIdOrAlias]
+ [
+ room,
+ setReplyDraft,
+ editor,
+ channelsMode,
+ isBridged,
+ navigate,
+ spaceIdOrAlias,
+ roomIdOrAlias,
+ composerSuspended,
+ ]
);
const handleReactionToggle = useCallback(
@@ -219,19 +238,21 @@ export function useMessageInteractionHandlers({
);
const handleEdit = useCallback(
+ // Param stays optional because callers pass `mEvent.getId()` which is
+ // `string | undefined`; an id-less call is simply ignored (the old
+ // no-arg «cancel» semantics died with the in-timeline MessageEditor).
(editEvtId?: string) => {
- if (editEvtId) {
- setEditId(editEvtId);
- return;
- }
- setEditId(undefined);
- ReactEditor.focus(editor);
+ if (!editEvtId) return;
+ // The composer for this scope loads the message + shows the edit
+ // banner (RoomInput's edit-draft effect). No-op while the composer
+ // is unmounted (callers also hide the Edit affordance then).
+ if (composerSuspended) return;
+ setEditDraft({ eventId: editEvtId });
},
- [editor]
+ [setEditDraft, composerSuspended]
);
return {
- editId,
handleEdit,
handleOpenReply,
handleUserClick,
diff --git a/src/app/state/room/roomInputDrafts.ts b/src/app/state/room/roomInputDrafts.ts
index 93c9f523..0361371a 100644
--- a/src/app/state/room/roomInputDrafts.ts
+++ b/src/app/state/room/roomInputDrafts.ts
@@ -74,3 +74,20 @@ export const roomIdToReplyDraftAtomFamily = atomFamily createReplyDraftAtom(),
draftKeyEqual
);
+
+// Edit-in-composer draft (Telegram-style): set when the user picks «Edit» on
+// an own message — the composer for the SAME (roomId, threadKey) scope loads
+// the message body, shows the edit banner and sends an m.replace on submit.
+// Only the target eventId lives here; the body is re-read from the room at
+// load/submit time so the edit always chains off the LATEST replacement.
+// Scoped per draft key like the reply draft: the main composer and each
+// thread-drawer composer keep independent edit states.
+export type IEditDraft = {
+ eventId: string;
+};
+const createEditDraftAtom = () => atom(undefined);
+export type TEditDraftAtom = ReturnType;
+export const roomIdToEditDraftAtomFamily = atomFamily(
+ () => createEditDraftAtom(),
+ draftKeyEqual
+);
+
+ setEditDraft(undefined)}
+ variant="SurfaceVariant"
+ size="300"
+ radii="300"
+ aria-label={t('Room.editing_cancel')}
+ >
+
+
+
+ {t('Room.editing_message')}
+
+ }
+ >
+
+ {editTarget?.body ? trimReplyFromBody(editTarget.body) : ''}
+
+
+
+
+
+ )}
+ {/* Reply preview hides while editing (the edit owns the send);
+ the reply draft itself is preserved and returns after. */}
+ {replyDraft && !editDraft && (
- onEditId()}
- />
-
- ) : (
- children
- )}
+ {children}
- {autocompleteQuery?.prefix === AutocompletePrefix.RoomMention && (
-
-
-
- Save
-
-
- Cancel
-
-
-
- setToolbar(!toolbar)}
- >
-
-
- {(anchor: RectCords | undefined, setAnchor) => (
- {
- setAnchor((v) => {
- if (v) {
- if (!mobileOrTablet()) ReactEditor.focus(editor);
- return undefined;
- }
- return v;
- });
- }}
- />
- }
- >
-
- setAnchor(
- evt.currentTarget.getBoundingClientRect()
- )) as MouseEventHandler
- }
- variant="SurfaceVariant"
- size="300"
- radii="300"
- >
-
-
- )}
-
-
-
- {toolbar && (
-
- );
- }
-);
diff --git a/src/app/features/room/message/useMessageInteractionHandlers.ts b/src/app/features/room/message/useMessageInteractionHandlers.ts
index b96d4e76..73e64e4c 100644
--- a/src/app/features/room/message/useMessageInteractionHandlers.ts
+++ b/src/app/features/room/message/useMessageInteractionHandlers.ts
@@ -1,4 +1,4 @@
-import { MouseEvent, MouseEventHandler, useCallback, useState } from 'react';
+import { MouseEvent, MouseEventHandler, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Editor } from 'slate';
import { ReactEditor } from 'slate-react';
@@ -16,7 +16,7 @@ import {
getReactionContent,
} from '../../../utils/room';
import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../../utils/matrix';
-import { IReplyDraft } from '../../../state/room/roomInputDrafts';
+import { IEditDraft, IReplyDraft } from '../../../state/room/roomInputDrafts';
import { getChannelsThreadPath } from '../../../pages/pathUtils';
export type UseMessageInteractionHandlersOptions = {
@@ -26,16 +26,21 @@ export type UseMessageInteractionHandlersOptions = {
// insertion + reply-draft focus target this instance.
editor: Editor;
// True when the composer associated with `editor` is currently
- // unmounted/hidden. Main timeline passes `threadDrawerOpen` (drawer
- // open hides main composer); drawer passes `false`. When suspended,
- // the username-click mention insert no-ops to avoid writing into a
- // hidden Slate instance the user can't see.
+ // unmounted/hidden. Main timeline passes `mainComposerSuspended`
+ // (drawer open / no post permission / tombstoned room); drawer passes
+ // `!canMessage`. When suspended, the username-click mention insert,
+ // edit and reply-draft writes all no-op to avoid writing into a hidden
+ // Slate instance / drafts the user can't see or clear.
composerSuspended: boolean;
// Reply-draft setter targeting the right composer scope. Caller
// subscribes via `useSetAtom(roomIdToReplyDraftAtomFamily(...))` —
// main timeline scopes to `[roomId, 'main']`, drawer scopes to
// `[roomId, rootId]`.
setReplyDraft: (draft: IReplyDraft | undefined) => void;
+ // Edit-draft setter for the same composer scope — «Edit» on a message
+ // loads it into the composer (Telegram-style) instead of opening an
+ // in-timeline edit form. See roomInputDrafts.ts::IEditDraft.
+ setEditDraft: (draft: IEditDraft | undefined) => void;
// Caller-specific scroll-to-event for reply-chip clicks. Main timeline
// scrolls via virtual paginator + setFocusItem; drawer scrolls via DOM
// scrollIntoView on the matching `data-message-id` node.
@@ -51,7 +56,6 @@ export type UseMessageInteractionHandlersOptions = {
};
export type MessageInteractionHandlers = {
- editId: string | undefined;
handleEdit: (editEvtId?: string) => void;
handleOpenReply: MouseEventHandler;
handleUserClick: MouseEventHandler
-
- )}
-
- }
- />
-