chore: upgrade stream-chat-react to v13.5.1

Author: MartinCupela

gaming-livestream/package.json

@@ -10,8 +10,8 @@
     "emoji-mart": "^5.5.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "stream-chat": "^9.6.0",
-    "stream-chat-react": "^13.1.0"
+    "stream-chat": "^9.17.0",
+    "stream-chat-react": "^13.5.1"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",

gaming-livestream/yarn.lock

@@ -12,8 +12,8 @@
     "lodash.debounce": "^4.0.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "stream-chat": "^9.6.0",
-    "stream-chat-react": "^13.1.0"
+    "stream-chat": "^9.17.0",
+    "stream-chat-react": "^13.5.1"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",

social-messenger-ts/package.json

@@ -19,8 +19,8 @@
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.2.3",
     "react-popper": "^2.3.0",
-    "stream-chat": "^9.6.0",
-    "stream-chat-react": "^13.1.0"
+    "stream-chat": "^9.17.0",
+    "stream-chat-react": "^13.5.1"
   },
   "devDependencies": {
     "@types/emoji-mart": "^3.0.9",

social-messenger-ts/yarn.lock

@@ -14,7 +14,6 @@ import {
   createGiphyCommandInjectionMiddleware
 } from "./middleware/composition/giphyCommandInjectionMiddleware";
 import {createGiphyCommandControlMiddleware} from "./middleware/textComposition/giphyCommandControl";
-import {createFormattingMarkdownInjectionMiddleware} from "./middleware/textComposition/formattingMarkdownInjection";
 
 const urlParams = new URLSearchParams(window.location.search);
 
@@ -52,12 +51,6 @@ const App = () => {
         ],
         position: {before: 'stream-io/text-composer/pre-validation-middleware'}
       })
-      composer.textComposer.middlewareExecutor.insert({
-        middleware: [
-          createFormattingMarkdownInjectionMiddleware(composer),
-        ],
-        position: {after: 'stream-io/text-composer/pre-validation-middleware'}
-      })
     });
   }, []);
 

team-ts/package.json

@@ -6,7 +6,7 @@ const mdToFormattingType: Record<string, MessageInputFormattingType> = {
   '**': 'bold',
   '*': 'italics',
   '~~': 'strikethrough',
-  '``': 'code',
+  '`': 'code',
 }
 
 export const formattingTypeToMarkdown: Record<MessageInputFormattingType, string> = {
@@ -47,29 +47,36 @@ export const useMessageInputCompositionControls = () => {
     const textarea = textareaRef.current;
     if (!textarea) return;
 
+    let newSelection;
     const {activeFormatting} = customDataManager.customComposerData;
     if (!activeFormatting) {
       textComposer.wrapSelection({head: wrappingMarkdown, tail: wrappingMarkdown});
       customDataManager.setCustomData({activeFormatting: mdToFormattingType[wrappingMarkdown]});
-      textarea.selectionStart = textComposer.selection.start;
-      textarea.selectionEnd = textComposer.selection.end;
-      textarea.focus();
-      return;
-    }
-    const activeMarkdown = formattingTypeToMarkdown[activeFormatting];
-    const newSelection = {
-      start: textComposer.selection.start + activeMarkdown.length,
-      end: textComposer.selection.end + + activeMarkdown.length,
-    };
-    textarea.selectionStart = newSelection.start;
-    textarea.selectionEnd = newSelection.end;
-    if (wrappingMarkdown === activeMarkdown) {
-      customDataManager.setCustomData({activeFormatting: null});
+      newSelection = {
+        start:textComposer.selection.start,
+        end: textComposer.selection.end,
+      };
     } else {
-      customDataManager.setCustomData({activeFormatting: mdToFormattingType[wrappingMarkdown]});
-      textComposer.wrapSelection({head: wrappingMarkdown, selection: newSelection, tail: wrappingMarkdown});
+      const activeMarkdown = formattingTypeToMarkdown[activeFormatting];
+      newSelection = {
+        start: textComposer.selection.start + activeMarkdown.length + wrappingMarkdown.length,
+        end: textComposer.selection.end + +activeMarkdown.length + wrappingMarkdown.length,
+      };
+      if (wrappingMarkdown === activeMarkdown) {
+        customDataManager.setCustomData({activeFormatting: null});
+      } else {
+        customDataManager.setCustomData({activeFormatting: mdToFormattingType[wrappingMarkdown]});
+        textComposer.wrapSelection({head: wrappingMarkdown, selection: newSelection, tail: wrappingMarkdown});
+      }
     }
     textarea.focus();
+    /**
+     * Some browsers (especially Chrome/Edge/WebKit) will move the caret to the end of the text after focus as part of their default focus-handling.
+     * That happens after our JS runs, so it overwrites the position we set - browser invokes the event with the selection at the end of the textarea string
+     */
+    setTimeout(() => {
+      textarea.setSelectionRange(newSelection.start, newSelection.end)
+    }, 0);
   }, [customDataManager, textareaRef, textComposer])
 
   const formatter = useMemo<Record<MessageInputFormattingType, () => void>>(() => ({