Add body link fallback handler for in-app navigation

This adds a fallback click handler for all links in the message to ensure that
links that were ignored as part of linkification (e.g. pills, links in message
content) will still navigate in-app where possible.

This approach preserves a side-benefit of
#7453, which kept all link
hrefs as matrix.to style links (so that they can be easily copied and shared).

Fixes element-hq/element-web#20715

Author: jryans

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 } from 'react';
+import React, { createRef, SyntheticEvent, MouseEvent } from 'react';
 import ReactDOM from 'react-dom';
 import highlight from 'highlight.js';
 import { MsgType } from "matrix-js-sdk/src/@types/event";
@@ -31,7 +31,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import ReplyChain from "../elements/ReplyChain";
 import { pillifyLinks, unmountPills } from '../../../utils/pillify';
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
-import { isPermalinkHost } from "../../../utils/permalinks/Permalinks";
+import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -418,6 +418,23 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         });
     };
 
+    /**
+     * This acts as a fallback in-app navigation handler for any body links that
+     * were ignored as part of linkification because they were already links
+     * to start with (e.g. pills, links in the content).
+     */
+    private onBodyLinkClick = (e: MouseEvent): void => {
+        const target = e.target as Element;
+        if (target.nodeName !== "A" || target.classList.contains("linkified")) return;
+        const { href } = target as HTMLLinkElement;
+        const localHref = tryTransformPermalinkToLocalHref(href);
+        if (localHref !== href) {
+            // it could be converted to a localHref -> therefore handle locally
+            e.preventDefault();
+            window.location.hash = localHref;
+        }
+    };
+
     public getEventTileOps = () => ({
         isWidgetHidden: () => {
             return this.state.widgetHidden;
@@ -606,7 +623,9 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
         if (isEmote) {
             return (
-                <div className="mx_MEmoteBody mx_EventTile_content">
+                <div className="mx_MEmoteBody mx_EventTile_content"
+                    onClick={this.onBodyLinkClick}
+                >
                     *&nbsp;
                     <span
                         className="mx_MEmoteBody_sender"
@@ -622,14 +641,18 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
         if (isNotice) {
             return (
-                <div className="mx_MNoticeBody mx_EventTile_content">
+                <div className="mx_MNoticeBody mx_EventTile_content"
+                    onClick={this.onBodyLinkClick}
+                >
                     { body }
                     { widgets }
                 </div>
             );
         }
         return (
-            <div className="mx_MTextBody mx_EventTile_content">
+            <div className="mx_MTextBody mx_EventTile_content"
+                onClick={this.onBodyLinkClick}
+            >
                 { body }
                 { widgets }
             </div>