diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx index fe3e062f715..a7125820996 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx @@ -16,6 +16,7 @@ limitations under the License. import React, { ForwardedRef, forwardRef } from "react"; import { FormattingFunctions, MappedSuggestion } from "@matrix-org/matrix-wysiwyg"; +import { logger } from "matrix-js-sdk/src/logger"; import { useRoomContext } from "../../../../../contexts/RoomContext"; import Autocomplete from "../../Autocomplete"; @@ -97,19 +98,25 @@ const WysiwygAutocomplete = forwardRef( } } + if (!room) return null; + + const autoCompleteQuery = buildQuery(suggestion); + // debug for https://github.com/vector-im/element-web/issues/26037 + logger.log(`## 26037 ## Rendering Autocomplete for WysiwygAutocomplete with query: "${autoCompleteQuery}"`); + // TODO - determine if we show all of the /command suggestions, there are some options in the // list which don't seem to make sense in this context, specifically /html and /plain - return room ? ( + return (
- ) : null; + ); }, ); diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts index 4de5a575799..b7a7236dda9 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts @@ -15,7 +15,8 @@ limitations under the License. */ import { AllowedMentionAttributes, MappedSuggestion } from "@matrix-org/matrix-wysiwyg"; -import { SyntheticEvent, useState } from "react"; +import { SyntheticEvent, useState, SetStateAction } from "react"; +import { logger } from "matrix-js-sdk/src/logger"; import { isNotNull } from "../../../../../Typeguards"; @@ -59,7 +60,20 @@ export function useSuggestion( onSelect: (event: SyntheticEvent) => void; suggestion: MappedSuggestion | null; } { - const [suggestionData, setSuggestionData] = useState(null); + const [suggestionData, setSuggestionData0] = useState(null); + + // debug for https://github.com/vector-im/element-web/issues/26037 + const setSuggestionData = (suggestionData: SetStateAction): void => { + // setState allows either the data itself or a callback which returns the data + logger.log( + `## 26037 ## wysiwyg useSuggestion hook setting suggestion data to ${ + suggestionData === null || suggestionData instanceof Function + ? suggestionData + : suggestionData.mappedSuggestion.keyChar + suggestionData.mappedSuggestion.text + }`, + ); + setSuggestionData0(suggestionData); + }; // We create a `selectionchange` handler here because we need to know when the user has moved the cursor, // we can not depend on input events only