Composer: Fix freezing after multiple formatting (#1548)

src/components/middle/composer/MessageInput.tsx

@@ -398,6 +398,7 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
         isOpen={isTextFormatterOpen}
         anchorPosition={textFormatterAnchorPosition}
         selectedRange={selectedRange}
+        setSelectedRange={setSelectedRange}
         onClose={handleCloseTextFormatter}
       />
       {forcedPlaceholder && <span className="forced-placeholder">{renderText(forcedPlaceholder!)}</span>}

src/components/middle/composer/TextFormatter.tsx

@@ -20,6 +20,7 @@ export type OwnProps = {
   isOpen: boolean;
   anchorPosition?: IAnchorPosition;
   selectedRange?: Range;
+  setSelectedRange: (range: Range) => void;
   onClose: () => void;
 };
 
@@ -46,6 +47,7 @@ const TextFormatter: FC<OwnProps> = ({
   isOpen,
   anchorPosition,
   selectedRange,
+  setSelectedRange,
   onClose,
 }) => {
   // eslint-disable-next-line no-null/no-null
@@ -114,6 +116,13 @@ const TextFormatter: FC<OwnProps> = ({
     }
   }
 
+  const updateSelectedRange = useCallback(() => {
+    const selection = window.getSelection();
+    if (selection) {
+      setSelectedRange(selection.getRangeAt(0));
+    }
+  }, [setSelectedRange]);
+
   const getSelectedText = useCallback(() => {
     if (!selectedRange) {
       return undefined;
@@ -187,28 +196,31 @@ const TextFormatter: FC<OwnProps> = ({
         }
       });
 
+      updateSelectedRange();
       return {
         ...selectedFormats,
         bold: !selectedFormats.bold,
       };
     });
-  }, []);
+  }, [updateSelectedRange]);
 
   const handleItalicText = useCallback(() => {
     document.execCommand('italic');
+    updateSelectedRange();
     setSelectedTextFormats((selectedFormats) => ({
       ...selectedFormats,
       italic: !selectedFormats.italic,
     }));
-  }, []);
+  }, [updateSelectedRange]);
 
   const handleUnderlineText = useCallback(() => {
     document.execCommand('underline');
+    updateSelectedRange();
     setSelectedTextFormats((selectedFormats) => ({
       ...selectedFormats,
       underline: !selectedFormats.underline,
     }));
-  }, []);
+  }, [updateSelectedRange]);
 
   const handleStrikethroughText = useCallback(() => {
     if (selectedTextFormats.strikethrough) {