Fix pinned messages not re-linkifying on edit (#9042)

* Fix pinned messages not re-linkifying on edit

* Fix tests

src/components/views/messages/IBodyProps.ts

@@ -26,10 +26,10 @@ export interface IBodyProps {
     mxEvent: MatrixEvent;
 
     /* a list of words to highlight */
-    highlights: string[];
+    highlights?: string[];
 
     /* link URL for the highlights */
-    highlightLink: string;
+    highlightLink?: string;
 
     /* callback called when dynamic content in events are loaded */
     onHeightChanged: () => void;

src/components/views/messages/MessageEvent.tsx

@@ -67,7 +67,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
     public context!: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props);
+        super(props, context);
 
         if (MediaEventHelper.isEligible(this.props.mxEvent)) {
             this.mediaHelper = new MediaEventHelper(this.props.mxEvent);

src/components/views/messages/TextualBody.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, SyntheticEvent, MouseEvent } from 'react';
+import React, { createRef, SyntheticEvent, MouseEvent, ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 import highlight from 'highlight.js';
 import { MsgType } from "matrix-js-sdk/src/@types/event";
@@ -565,7 +565,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
         // only strip reply if this is the original replying event, edits thereafter do not have the fallback
         const stripReply = !mxEvent.replacingEvent() && !!getParentEventId(mxEvent);
-        let body;
+        let body: ReactNode;
         if (SettingsStore.isEnabled("feature_extensible_events")) {
             const extev = this.props.mxEvent.unstableExtensibleEvent as MessageEvent;
             if (extev?.isEquivalentTo(M_MESSAGE)) {

src/components/views/right_panel/PinnedMessagesCard.tsx

@@ -33,9 +33,11 @@ import { useRoomState } from "../../../hooks/useRoomState";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { ReadPinsEventId } from "./types";
 import Heading from '../typography/Heading';
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 
 interface IProps {
     room: Room;
+    permalinkCreator: RoomPermalinkCreator;
     onClose(): void;
 }
 
@@ -78,7 +80,7 @@ export const useReadPinnedEvents = (room: Room): Set<string> => {
     return readPinnedEvents;
 };
 
-const PinnedMessagesCard = ({ room, onClose }: IProps) => {
+const PinnedMessagesCard = ({ room, onClose, permalinkCreator }: IProps) => {
     const cli = useContext(MatrixClientContext);
     const roomContext = useContext(RoomContext);
     const canUnpin = useRoomState(room, state => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
@@ -152,6 +154,7 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
                 key={ev.getId()}
                 event={ev}
                 onUnpinClicked={canUnpin ? () => onUnpinClicked(ev) : undefined}
+                permalinkCreator={permalinkCreator}
             />
         ));
     } else {

src/components/views/rooms/PinnedEventTile.tsx

@@ -33,9 +33,11 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 
 interface IProps {
     event: MatrixEvent;
+    permalinkCreator: RoomPermalinkCreator;
     onUnpinClicked?(): void;
 }
 
@@ -140,6 +142,8 @@ export default class PinnedEventTile extends React.Component<IProps> {
                     className="mx_PinnedEventTile_body"
                     maxImageHeight={150}
                     onHeightChanged={() => {}} // we need to give this, apparently
+                    permalinkCreator={this.props.permalinkCreator}
+                    replacingEventId={this.props.event.replacingEventId()}
                 />
             </div>