From 9fb7d94c2bc844b95d39ccb6938efa4a9a37f9f6 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Date: Thu, 24 Aug 2023 12:36:57 +0100 Subject: [PATCH] Add debug to diagnose flaky composer test (#11467) Part of my attempts to fix https://github.com/vector-im/element-web/issues/26037. Nobody seems to know how this currently works, so let's add a load of debugging. --- .../components/WysiwygAutocomplete.tsx | 13 ++++++++++--- .../wysiwyg_composer/hooks/useSuggestion.ts | 18 ++++++++++++++++-- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx index fe3e062f71..a712582099 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 4de5a57579..b7a7236dda 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