fix(composer): detect autocomplete from onChange for mobile keyboards

src-tauri/Cargo.toml

@@ -41,7 +41,7 @@ percent-encoding = "2"
 # Enables `stream` (for native_upload's `Body::wrap_stream`) on the reqwest that
 # tauri-plugin-http pulls in without it. default-features = false keeps
 # openssl-sys out of the Android cross-compile.
-reqwest = { version = "0.13", default-features = false, features = ["stream"] }
+reqwest = { version = "0.12", default-features = false, features = ["stream"] }
 async-stream = "0.3"
 base64 = "0.23"
 tokio-util = { version = "0.7", features = ["codec"] }

src-tauri/src/network/native_upload.rs

@@ -7,12 +7,12 @@ use std::{
 
 use base64::Engine;
 use futures_util::StreamExt;
-use reqwest::{
+use serde::Serialize;
+use tauri::{ipc::Channel, AppHandle, Manager, Runtime};
+use tauri_plugin_http::reqwest::{
     header::{AUTHORIZATION, CONTENT_LENGTH, CONTENT_TYPE},
     Body, Client, ClientBuilder, Method, Url,
 };
-use serde::Serialize;
-use tauri::{ipc::Channel, AppHandle, Manager, Runtime};
 use tokio::{
     fs::{File, OpenOptions},
     io::AsyncWriteExt,

src/app/features/room/RoomInput.tsx

@@ -607,16 +607,50 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const dropZoneVisible = useFileDropZone(fileDropContainerRef, handleFiles);
     const [hasText, setHasText] = useState(false);
     const lastEncryptionPreparationAt = useRef(0);
+    const detectAutocomplete = useCallback(() => {
+      const firstPosition = Editor.start(editor, []);
+      const secondChar = Editor.after(editor, firstPosition, {
+        distance: 2,
+        unit: 'character',
+      });
+      const quickReactPrefix = Editor.string(
+        editor,
+        Editor.range(editor, firstPosition, secondChar)
+      );
+      if (quickReactPrefix === '+#') {
+        setQuickTextReact(true);
+        setAutocompleteQuery(undefined);
+        return;
+      }
+      setQuickTextReact(false);
+
+      const prevWordRange = getPrevWorldRange(editor);
+      if (!prevWordRange) {
+        setAutocompleteQuery(undefined);
+        return;
+      }
+
+      const isRangeAtBeginning = !Point.isAfter(Range.start(prevWordRange), firstPosition);
+      const query =
+        (isRangeAtBeginning
+          ? getAutocompleteQuery(editor, prevWordRange, BEGINNING_AUTOCOMPLETE_PREFIXES)
+          : undefined) ??
+        getAutocompleteQuery(editor, prevWordRange, ANYWHERE_AUTOCOMPLETE_PREFIXES);
+
+      setAutocompleteQuery(query);
+    }, [editor]);
+
     const handleEditorChange = useCallback(() => {
       setHasText(!isEmptyEditor(editor));
+      detectAutocomplete();
       if (!room.hasEncryptionStateEvent()) return;
 
       const now = Date.now();
       if (now - lastEncryptionPreparationAt.current < ENCRYPTION_PREPARATION_INTERVAL_MS) return;
 
       lastEncryptionPreparationAt.current = now;
       mx.getCrypto()?.prepareToEncrypt(room);
-    }, [editor, mx, room]);
+    }, [editor, detectAutocomplete, mx, room]);
     const hasContent = hasText || selectedFiles.length > 0;
 
     const isComposing = useComposingCheck();
@@ -1774,38 +1808,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           sendTypingStatus(!isEmptyEditor(editor));
         }
 
-        const firstPosition = Editor.start(editor, []);
-        const secondChar = Editor.after(editor, firstPosition, {
-          distance: 2,
-          unit: 'character',
-        });
-        const quickReactPrefix = Editor.string(
-          editor,
-          Editor.range(editor, firstPosition, secondChar)
-        );
-        if (quickReactPrefix === '+#') {
-          setQuickTextReact(true);
-          setAutocompleteQuery(undefined);
-          return;
-        }
-        setQuickTextReact(false);
-
-        const prevWordRange = getPrevWorldRange(editor);
-        if (!prevWordRange) {
-          setAutocompleteQuery(undefined);
-          return;
-        }
-
-        const isRangeAtBeginning = !Point.isAfter(Range.start(prevWordRange), firstPosition);
-        const query =
-          (isRangeAtBeginning
-            ? getAutocompleteQuery(editor, prevWordRange, BEGINNING_AUTOCOMPLETE_PREFIXES)
-            : undefined) ??
-          getAutocompleteQuery(editor, prevWordRange, ANYWHERE_AUTOCOMPLETE_PREFIXES);
-
-        setAutocompleteQuery(query);
+        detectAutocomplete();
       },
-      [editor, sendTypingStatus, hideActivity]
+      [editor, sendTypingStatus, hideActivity, detectAutocomplete]
     );
 
     const handleEmoticonSelect = (key: string, shortcode: string) => {

src/app/features/room/message/MessageEditor.tsx

@@ -337,20 +337,24 @@ export const MessageEditor = as<'div', MessageEditorProps>(
       [enterForNewline, isComposing, editor, handleSave, onCancel]
     );
 
+    const detectAutocomplete = useCallback(() => {
+      const prevWordRange = getPrevWorldRange(editor);
+      const query = prevWordRange
+        ? getAutocompleteQuery(editor, prevWordRange, ANYWHERE_AUTOCOMPLETE_PREFIXES)
+        : undefined;
+      setAutocompleteQuery(query);
+    }, [editor]);
+
     const handleKeyUp: KeyboardEventHandler = useCallback(
       (evt) => {
         if (isKeyHotkey('escape', evt)) {
           evt.preventDefault();
           return;
         }
 
-        const prevWordRange = getPrevWorldRange(editor);
-        const query = prevWordRange
-          ? getAutocompleteQuery(editor, prevWordRange, ANYWHERE_AUTOCOMPLETE_PREFIXES)
-          : undefined;
-        setAutocompleteQuery(query);
+        detectAutocomplete();
       },
-      [editor]
+      [detectAutocomplete]
     );
 
     const handleCloseAutocomplete = useCallback(() => {