Add option to display tooltip on link hover (#8394)

* Add option to display tooltip on link hover

This makes it possible for platforms like Electron apps, which lack
a built-in URL preview in the status bar, to enable tooltip previews
of links.

Relates to: vector-im/element-web#6532
Signed-off-by: Johannes Marbach <johannesm@element.io>

* Gracefully handle missing platform

* Use public access modifier

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Use exact inequality

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Document getAbsoluteUrl

* Appease the linter

* Clarify performance impact in comment

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Use URL instead of anchor element hack

* Wrap anchor in tooltip target and only allow focus on anchor

* Use optional chaining

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Use double quotes for consistency

* Accumulate and unmount tooltips and extract tooltipify.tsx

* Fix indentation

* Blur tooltip target on click

* Remove space

* Mention platform flag in comment

* Add (simplistic) tests

* Fix lint errors

* Fix lint errors ... for real

* Replace snapshot tests with structural assertions

* Add missing semicolon

* Add tooltips in link previews

* Fix copyright

Co-authored-by: Travis Ralston <travpc@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/LinkWithTooltip.tsx

@@ -0,0 +1,44 @@
+/*
+ Copyright 2022 The Matrix.org Foundation C.I.C.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+
+import TextWithTooltip from './TextWithTooltip';
+
+interface IProps extends Omit<React.ComponentProps<typeof TextWithTooltip>, "tabIndex" | "onClick" > {}
+
+export default class LinkWithTooltip extends React.Component<IProps> {
+    constructor(props: IProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        const { children, tooltip, ...props } = this.props;
+
+        return (
+            <TextWithTooltip
+                // Disable focusing on the tooltip target to avoid double / nested focus. The contained anchor element
+                // itself allows focusing which also triggers the tooltip.
+                tabIndex={-1}
+                tooltip={tooltip}
+                onClick={e => (e.target as HTMLElement).blur()} // Force tooltip to hide on clickout
+                {...props}
+            >
+                { children }
+            </TextWithTooltip>
+        );
+    }
+}

src/components/views/elements/TextWithTooltip.tsx

@@ -14,12 +14,12 @@
  limitations under the License.
  */
 
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import TooltipTarget from './TooltipTarget';
 
-interface IProps {
+interface IProps extends HTMLAttributes<HTMLSpanElement> {
     class?: string;
     tooltipClass?: string;
     tooltip: React.ReactNode;

src/components/views/messages/EditHistoryMessage.tsx

@@ -22,6 +22,7 @@ import * as HtmlUtils from '../../../HtmlUtils';
 import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
 import { formatTime } from '../../../DateUtils';
 import { pillifyLinks, unmountPills } from '../../../utils/pillify';
+import { tooltipifyLinks, unmountTooltips } from '../../../utils/tooltipify';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
@@ -52,6 +53,7 @@ interface IState {
 export default class EditHistoryMessage extends React.PureComponent<IProps, IState> {
     private content = createRef<HTMLDivElement>();
     private pills: Element[] = [];
+    private tooltips: Element[] = [];
 
     constructor(props: IProps) {
         super(props);
@@ -93,12 +95,21 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
         }
     }
 
+    private tooltipifyLinks(): void {
+        // not present for redacted events
+        if (this.content.current) {
+            tooltipifyLinks(this.content.current.children, this.pills, this.tooltips);
+        }
+    }
+
     public componentDidMount(): void {
         this.pillifyLinks();
+        this.tooltipifyLinks();
     }
 
     public componentWillUnmount(): void {
         unmountPills(this.pills);
+        unmountTooltips(this.tooltips);
         const event = this.props.mxEvent;
         if (event.localRedactionEvent()) {
             event.localRedactionEvent().off(MatrixEventEvent.Status, this.onAssociatedStatusChanged);
@@ -107,6 +118,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
 
     public componentDidUpdate(): void {
         this.pillifyLinks();
+        this.tooltipifyLinks();
     }
 
     private renderActionBar(): JSX.Element {

src/components/views/messages/TextualBody.tsx

@@ -29,6 +29,7 @@ import * as ContextMenu from '../../structures/ContextMenu';
 import { ChevronFace, toRightOf } from '../../structures/ContextMenu';
 import SettingsStore from "../../../settings/SettingsStore";
 import { pillifyLinks, unmountPills } from '../../../utils/pillify';
+import { tooltipifyLinks, unmountTooltips } from '../../../utils/tooltipify';
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../../utils/strings";
@@ -63,6 +64,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
     private unmounted = false;
     private pills: Element[] = [];
+    private tooltips: Element[] = [];
 
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;
@@ -91,6 +93,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
         pillifyLinks([this.contentRef.current], this.props.mxEvent, this.pills);
         HtmlUtils.linkifyElement(this.contentRef.current);
+        tooltipifyLinks([this.contentRef.current], this.pills, this.tooltips);
         this.calculateUrlPreview();
 
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {
@@ -283,6 +286,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
     componentWillUnmount() {
         this.unmounted = true;
         unmountPills(this.pills);
+        unmountTooltips(this.tooltips);
     }
 
     shouldComponentUpdate(nextProps, nextState) {

src/components/views/rooms/LinkPreviewWidget.tsx

@@ -25,6 +25,8 @@ import Modal from "../../../Modal";
 import * as ImageUtils from "../../../ImageUtils";
 import { mediaFromMxc } from "../../../customisations/Media";
 import ImageView from '../elements/ImageView';
+import LinkWithTooltip from '../elements/LinkWithTooltip';
+import PlatformPeg from '../../../PlatformPeg';
 
 interface IProps {
     link: string;
@@ -118,13 +120,20 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
         // opaque string. This does not allow any HTML to be injected into the DOM.
         const description = AllHtmlEntities.decode(p["og:description"] || "");
 
+        const anchor = <a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>;
+        const needsTooltip = PlatformPeg.get()?.needsUrlTooltips() && this.props.link !== p["og:title"].trim();
+
         return (
             <div className="mx_LinkPreviewWidget">
                 <div className="mx_LinkPreviewWidget_wrapImageCaption">
                     { img }
                     <div className="mx_LinkPreviewWidget_caption">
                         <div className="mx_LinkPreviewWidget_title">
-                            <a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>
+                            { needsTooltip ? <LinkWithTooltip
+                                tooltip={new URL(this.props.link, window.location.href).toString()}
+                            >
+                                { anchor }
+                            </LinkWithTooltip> : anchor }
                             { p["og:site_name"] && <span className="mx_LinkPreviewWidget_siteName">
                                 { (" - " + p["og:site_name"]) }
                             </span> }