use the new messageContent property

Author: Alun Turner

src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx

@@ -42,6 +42,11 @@ interface WysiwygAutocompleteProps {
      * a command in the autocomplete list or pressing enter on a selected item
      */
     handleCommand: FormattingFunctions["command"];
+
+    /**
+     * Handler purely for the at-room mentions special case
+     */
+    handleAtRoomMention: FormattingFunctions["mentionAtRoom"];
 }
 
 /**
@@ -53,7 +58,7 @@ interface WysiwygAutocompleteProps {
  */
 const WysiwygAutocomplete = forwardRef(
     (
-        { suggestion, handleMention, handleCommand }: WysiwygAutocompleteProps,
+        { suggestion, handleMention, handleCommand, handleAtRoomMention }: WysiwygAutocompleteProps,
         ref: ForwardedRef<Autocomplete>,
     ): JSX.Element | null => {
         const { room } = useRoomContext();
@@ -78,7 +83,7 @@ const WysiwygAutocomplete = forwardRef(
                     if (isNotUndefined(style)) {
                         attributesMap.set("style", style);
                     }
-                    handleMention("#", getMentionDisplayText(completion, client), attributesMap);
+                    handleAtRoomMention(attributesMap);
                     return;
                 }
                 case "room":

src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx

@@ -61,7 +61,7 @@ export const WysiwygComposer = memo(function WysiwygComposer({
     const autocompleteRef = useRef<Autocomplete | null>(null);
 
     const inputEventProcessor = useInputEventProcessor(onSend, autocompleteRef, initialContent, eventRelation);
-    const { ref, isWysiwygReady, content, actionStates, wysiwyg, suggestion, getMessageHTMLContent } = useWysiwyg({
+    const { ref, isWysiwygReady, content, actionStates, wysiwyg, suggestion, messageContent } = useWysiwyg({
         initialContent,
         inputEventProcessor,
     });
@@ -74,11 +74,10 @@ export const WysiwygComposer = memo(function WysiwygComposer({
     useSetCursorPosition(!isReady, ref);
 
     useEffect(() => {
-        const messageContent = getMessageHTMLContent();
         if (!disabled && isNotNull(messageContent)) {
             onChange(messageContent);
         }
-    }, [onChange, getMessageHTMLContent, disabled]);
+    }, [onChange, messageContent, disabled]);
 
     useEffect(() => {
         function handleClick(e: Event): void {
@@ -118,6 +117,7 @@ export const WysiwygComposer = memo(function WysiwygComposer({
                 ref={autocompleteRef}
                 suggestion={suggestion}
                 handleMention={wysiwyg.mention}
+                handleAtRoomMention={wysiwyg.mentionAtRoom}
                 handleCommand={wysiwyg.command}
             />
             <FormattingButtons composer={wysiwyg} actionStates={actionStates} />