diff --git a/src/components/middle/composer/MessageInput.tsx b/src/components/middle/composer/MessageInput.tsx index f703f913..b0163fec 100644 --- a/src/components/middle/composer/MessageInput.tsx +++ b/src/components/middle/composer/MessageInput.tsx @@ -398,6 +398,7 @@ const MessageInput: FC = ({ isOpen={isTextFormatterOpen} anchorPosition={textFormatterAnchorPosition} selectedRange={selectedRange} + setSelectedRange={setSelectedRange} onClose={handleCloseTextFormatter} /> {forcedPlaceholder && {renderText(forcedPlaceholder!)}} diff --git a/src/components/middle/composer/TextFormatter.tsx b/src/components/middle/composer/TextFormatter.tsx index e2b8132c..6a99efe1 100644 --- a/src/components/middle/composer/TextFormatter.tsx +++ b/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 = ({ isOpen, anchorPosition, selectedRange, + setSelectedRange, onClose, }) => { // eslint-disable-next-line no-null/no-null @@ -114,6 +116,13 @@ const TextFormatter: FC = ({ } } + 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 = ({ } }); + 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) {