fix(room): keep composer focused and clear undo history on send (#1854)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

Fixes #

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Author: eleboucher

src/app/components/editor/Editor.test.tsx

@@ -57,6 +57,32 @@ describe('CustomEditor', () => {
     expect(container.querySelector('[aria-label="Write a message"]')).toBeTruthy();
     expect(container.querySelector('.ProseMirror')).toBeTruthy();
   });
+
+  it('keeps focus on the editable when the document is cleared', () => {
+    const { container, editor } = renderEditor();
+    const editable = container.querySelector('.ProseMirror') as HTMLElement;
+    editable.focus();
+
+    act(() => editor.insertText('some text'));
+    act(() => editor.clear());
+
+    expect(editor.isEmpty()).toBe(true);
+    expect(document.activeElement).toBe(editable);
+  });
+
+  it('notifies document-change consumers when cleared so autocomplete closes', () => {
+    const { editor } = renderEditor();
+    const changes: string[] = [];
+    editor.subscribe(() => changes.push(editor.getText()));
+
+    act(() => editor.insertText('hello'));
+    expect(editor.getAutocompleteQuery(['h', 'he'])).toBeDefined();
+
+    act(() => editor.clear());
+
+    expect(changes).toEqual(['hello', '']);
+    expect(editor.getAutocompleteQuery(['h', 'he'])).toBeUndefined();
+  });
 });
 
 describe('CustomEditor layout', () => {

src/app/components/editor/prosemirrorController.test.tsx

@@ -234,3 +234,30 @@ describe('clipboard', () => {
     expect(controller.getDocument()).toEqual(doc('first', '', 'third'));
   });
 });
+
+describe('ProseMirrorEditorController clearHistory', () => {
+  it('keeps undo working while composing, then wipes it after the send', () => {
+    const { controller } = mount();
+
+    controller.insertText('hello');
+    controller.undo();
+    expect(controller.getDocument()).toEqual(doc(''));
+
+    controller.insertText('draft');
+    controller.clear();
+    controller.clearHistory();
+    controller.undo();
+    expect(controller.getDocument()).toEqual(doc(''));
+  });
+
+  it('reuses the focused editable so rebuilding state does not steal focus', () => {
+    const { controller, editable } = mount(doc('draft'));
+    editable.focus();
+
+    act(() => controller.clear());
+    act(() => controller.clearHistory());
+
+    expect(editable).toBe(document.activeElement);
+    expect(editable).toHaveAttribute('data-placeholder-visible', 'true');
+  });
+});

src/app/components/editor/prosemirrorController.ts

@@ -123,10 +123,8 @@ export class ProseMirrorEditorController {
     this.setDocument(this.isEmpty() ? document : [...this.document, ...document]);
   }
 
-  mount(element: HTMLElement, attributes?: Record<string, string>): () => void {
-    this.view?.destroy();
-    this.attributes = attributes ?? {};
-    const state = EditorState.create({
+  private createState(): EditorState {
+    return EditorState.create({
       doc: toProseMirrorDocument(this.document),
       plugins: [
         beginCommandPlugin,
@@ -138,6 +136,12 @@ export class ProseMirrorEditorController {
       ],
       schema: editorSchema,
     });
+  }
+
+  mount(element: HTMLElement, attributes?: Record<string, string>): () => void {
+    this.view?.destroy();
+    this.attributes = attributes ?? {};
+    const state = this.createState();
     this.view = new EditorView(
       { mount: element },
       {
@@ -186,6 +190,10 @@ export class ProseMirrorEditorController {
     this.setDocument(emptyEditorDocument());
   }
 
+  clearHistory(): void {
+    if (this.view) this.view.updateState(this.createState());
+  }
+
   blur(): void {
     (this.view?.dom as HTMLElement | undefined)?.blur();
   }

src/app/features/room/RoomInput.test.tsx

@@ -147,25 +147,29 @@ vi.mock('$components/editor', async () => {
     top,
     after,
     bottom,
-  }: any) => (
-    <div>
-      {top}
-      {before}
-      <div
-        data-editable-name={editableName}
-        data-testid={editableName === 'RoomInput' ? 'room-input-editor' : undefined}
-        data-editor-text={editableName === 'RoomInput' ? textOf(editor.children) : undefined}
-        contentEditable
-        role="textbox"
-        aria-label="Room message"
-        tabIndex={0}
-        onInput={onChange}
-        onKeyDown={onKeyDown}
-      />
-      {after}
-      {bottom}
-    </div>
-  );
+  }: any) => {
+    const [, setRevision] = useState(0);
+    useEffect(() => editor.subscribe(() => setRevision((value) => value + 1)), [editor]);
+    return (
+      <div>
+        {top}
+        {before}
+        <div
+          data-editable-name={editableName}
+          data-testid={editableName === 'RoomInput' ? 'room-input-editor' : undefined}
+          data-editor-text={editableName === 'RoomInput' ? textOf(editor.children) : undefined}
+          contentEditable
+          role="textbox"
+          aria-label="Room message"
+          tabIndex={0}
+          onInput={onChange}
+          onKeyDown={onKeyDown}
+        />
+        {after}
+        {bottom}
+      </div>
+    );
+  };
   return {
     AutocompletePrefix: {
       RoomMention: 'room-mention',
@@ -919,7 +923,6 @@ describe('RoomInput submit regressions', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Prepare two attachments' }));
     fireEvent.keyDown(screen.getByTestId('room-input-editor'), { key: 'Enter', code: 'Enter' });
 
-    // Clearing the composer remounts the editor subtree, so re-query the button.
     await waitFor(() => expect(testState.matrix.sendMessage).toHaveBeenCalledTimes(2));
     expect(sendButton()).toBeDisabled();
     fireEvent.click(sendButton());
@@ -1095,6 +1098,67 @@ describe('RoomInput submit regressions', () => {
     );
   });
 
+  it('keeps the composer focused after sending a text message', async () => {
+    render(<RoomInputHarness />);
+    fireEvent.click(screen.getByRole('button', { name: 'Compose text' }));
+    screen.getByTestId('room-input-editor').focus();
+
+    fireEvent.keyDown(screen.getByTestId('room-input-editor'), { key: 'Enter', code: 'Enter' });
+
+    await waitFor(() => expect(testState.matrix.sendMessage).toHaveBeenCalledOnce());
+    expect(document.activeElement).toBe(screen.getByTestId('room-input-editor'));
+  });
+
+  it('wipes the composer undo history when a message is sent', async () => {
+    const clearHistorySpy = vi.spyOn(ProseMirrorEditorController.prototype, 'clearHistory');
+    try {
+      render(<RoomInputHarness />);
+      fireEvent.click(screen.getByRole('button', { name: 'Compose text' }));
+
+      fireEvent.click(sendButton());
+      await waitFor(() => expect(testState.matrix.sendMessage).toHaveBeenCalledOnce());
+
+      expect(clearHistorySpy).toHaveBeenCalledOnce();
+    } finally {
+      clearHistorySpy.mockRestore();
+    }
+  });
+
+  it('keeps the composer focused when a reply is claimed by sending', async () => {
+    render(<RoomInputHarness initialReply />);
+    fireEvent.click(screen.getByRole('button', { name: 'Compose text' }));
+    screen.getByTestId('room-input-editor').focus();
+    fireEvent.keyDown(screen.getByTestId('room-input-editor'), { key: 'Enter', code: 'Enter' });
+
+    await waitFor(() => expect(testState.matrix.sendMessage).toHaveBeenCalledOnce());
+    expect(document.activeElement).toBe(screen.getByTestId('room-input-editor'));
+  });
+
+  it('keeps the composer focused when cancelling a reply on desktop', async () => {
+    render(<RoomInputHarness initialReply />);
+    screen.getByTestId('room-input-editor').focus();
+
+    fireEvent.keyDown(screen.getByTestId('room-input-editor'), { key: 'Escape', code: 'Escape' });
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+
+    expect(document.activeElement).toBe(screen.getByTestId('room-input-editor'));
+  });
+
+  it('blurs the composer when cancelling a reply on mobile to dismiss the keyboard', async () => {
+    testState.isMobile = true;
+    render(<RoomInputHarness initialReply />);
+    screen.getByTestId('room-input-editor').focus();
+
+    fireEvent.keyDown(screen.getByTestId('room-input-editor'), { key: 'Escape', code: 'Escape' });
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+
+    expect(document.activeElement).not.toBe(screen.getByTestId('room-input-editor'));
+  });
+
   it('restores composed text when a scheduled send fails', async () => {
     // Delayed events produce no local echo, so the composer is the only way back.
     testState.sendDelayedMessage.mockRejectedValueOnce(new Error('schedule failed'));

src/app/features/room/RoomInput.tsx

@@ -486,7 +486,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       };
     }, [draftKey]);
 
-    const [inputKey, setInputKey] = useState(0);
     const getUploadItemKey = useCallback((fileItem: TUploadItem): string => {
       const existingKey = uploadItemKeysRef.current.get(fileItem.originalFile);
       if (existingKey) return existingKey;
@@ -686,11 +685,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const [silentReply, setSilentReply] = useState(!mentionInReplies);
     // Clears the reply draft up front so it cannot be re-sent, keeping a snapshot to
     // restore if the send never lands.
+    const claimedReplyEventIdRef = useRef<string | undefined>();
     const claimReply = useCallback((): ReplyClaim | undefined => {
       const currentReply = replyDraftRef.current;
       if (!currentReply) return undefined;
 
       const epoch = draftEpochRef.current;
+      claimedReplyEventIdRef.current = currentReply.eventId;
       replyDraftRef.current = replyDraftBase;
       setReplyDraft(replyDraftBase);
       return { epoch, snapshot: structuredClone(currentReply), silentReply };
@@ -701,6 +702,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         if (replyDraftRef.current !== replyDraftBase) return;
         replyDraftRef.current = claim.snapshot;
         setReplyDraft(claim.snapshot);
+        claimedReplyEventIdRef.current = undefined;
       },
       [replyDraftBase, setReplyDraft]
     );
@@ -949,7 +951,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               // Ignore focus errors
             }
           });
-        } else if (!newId && prevId && prevId !== threadRootId && !editId) {
+        } else if (
+          !newId &&
+          prevId &&
+          prevId !== threadRootId &&
+          !editId &&
+          prevId !== claimedReplyEventIdRef.current
+        ) {
+          if (!isMobile) return;
           scheduleEditorRaf(() => {
             try {
               editor.blur();
@@ -960,7 +969,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           });
         }
       }
-    }, [replyDraft?.eventId, threadRootId, editId, editor, scheduleEditorRaf]);
+    }, [replyDraft?.eventId, threadRootId, editId, isMobile, editor, scheduleEditorRaf]);
 
     const handleFileMetadata = useCallback(
       (fileItem: TUploadItem, metadata: TUploadMetadata) => {
@@ -1061,7 +1070,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         };
         if (clearEditor) {
           editor.clear();
-          setInputKey((prev) => prev + 1);
+          editor.clearHistory();
           imagePacksUsedRef.current.clear();
           sendTypingStatus(false);
         }
@@ -1981,7 +1990,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         <CustomEditor
           editableName="RoomInput"
           editor={editor}
-          key={inputKey}
           placeholder="Send a message..."
           enterKeyHint={enterForNewline ? 'enter' : 'send'}
           suppressBlurRefocusRef={suppressBlurRefocusRef}
@@ -2500,7 +2508,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       return;
                     }
                     if (sentOnPointerUpRef.current) return;
-                    submit();
+                    submit().catch((error) => log.error('submit failed', { roomId }, error));
                     return;
                   }
                   if (!editorMicButton) return;
@@ -2579,7 +2587,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     return;
                   }
                   sentOnPointerUpRef.current = true;
-                  submit();
+                  submit().catch((error) => log.error('submit failed', { roomId }, error));
                 }}
                 onPointerCancel={() => {
                   if (longPressTimer.current !== null) {