;
+ children: ReactElement;
+}
+
+/**
+ * A key drawback of this component is that it gets attached to all links in the app if any installed plugin
+ * supports link previews. Ideally plugins should have provided a regex matcher upfront, allowing us to
+ * conditionally render the component only when needed.
+ */
+export default function PluginLinkTooltip(props: Props) {
+ const [isOpen, setOpen] = useState(false);
+
+ const {refs: {setReference, setFloating}, floatingStyles, context: floatingContext} = useFloating({
+ open: isOpen,
+ onOpenChange: setOpen,
+ whileElementsMounted: autoUpdate,
+ middleware: [
+ inline(),
+ autoPlacement({
+ allowedPlacements: ['top', 'bottom'],
+ }),
+ ],
+ });
+
+ const {isMounted, styles: transitionStyles} = useTransitionStyles(floatingContext, TRANSITION_STYLE_PROPS);
+
+ const hoverInteractions = useHover(floatingContext, HOVER_PROPS);
+ const focusInteractions = useFocus(floatingContext);
+ const dismissInteraction = useDismiss(floatingContext);
+
+ const {getReferenceProps, getFloatingProps} = useInteractions([
+ hoverInteractions,
+ focusInteractions,
+ dismissInteraction,
+ ]);
+
+ return (
+ <>
+
+ {props.children}
+
+
+ {isMounted && (
+
+
+
+
+
+
+
+ )}
+
+ );
+}
+
+const TRANSITION_STYLE_PROPS = {
+ duration: {
+ open: OverlaysTimings.FADE_IN_DURATION,
+ close: OverlaysTimings.FADE_OUT_DURATION,
+ },
+ initial: OverlayTransitionStyles.START,
+};
+
+const HOVER_PROPS = {
+ restMs: OverlaysTimings.CURSOR_REST_TIME_BEFORE_OPEN,
+ move: false,
+ handleClose: safePolygon({
+ requireIntent: false,
+ blockPointerEvents: true,
+ }),
+};
diff --git a/webapp/channels/src/components/plugin_link_tooltip/plugin_link_tooltip.scss b/webapp/channels/src/components/plugin_link_tooltip/plugin_link_tooltip.scss
new file mode 100644
index 0000000000..164584dcc7
--- /dev/null
+++ b/webapp/channels/src/components/plugin_link_tooltip/plugin_link_tooltip.scss
@@ -0,0 +1,20 @@
+@use 'utils/variables';
+
+.plugin-link-tooltip-floating-overlay {
+ z-index: variables.$z-index-popover;
+}
+
+// This is as per UX guidelines what the container of the
+// plugin link tooltip should be, not included currently
+// as it will be a breaking change for the plugin's implemented
+//link tooltips with styling
+.plugin-link-tooltip-container {
+ border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+ border-radius: 4px;
+ background: var(--center-channel-bg);
+ box-shadow: var(--elevation-4);
+
+ .plugin-link-tooltip-arrow {
+ fill: var(--center-channel-bg);
+ }
+}
diff --git a/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap b/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap
index 2f3c35e49d..af71c5e7a7 100644
--- a/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap
+++ b/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap
@@ -144,26 +144,18 @@ Array [
exports[`messageHtmlToComponent link with enabled a tooltip plugin 1`] = `
lorem ipsum
-
-
- www.dolor.com
-
-
+ }
+ >
+ www.dolor.com
+
sit amet
`;
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 9e5c8f02b6..f8b75dfaec 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -2009,8 +2009,6 @@ export const Constants = {
COMMAND_SUGGESTION_CHANNEL: 'channel',
COMMAND_SUGGESTION_USER: 'user',
},
- OVERLAY_TIME_DELAY_SMALL: 100,
- OVERLAY_TIME_DELAY: 400,
PERMALINK_FADEOUT: 5000,
DEFAULT_MAX_USERS_PER_TEAM: 50,
DEFAULT_MAX_CHANNELS_PER_TEAM: 2000,
diff --git a/webapp/channels/src/utils/message_html_to_component.tsx b/webapp/channels/src/utils/message_html_to_component.tsx
index daecfd1ed3..15eb7fb702 100644
--- a/webapp/channels/src/utils/message_html_to_component.tsx
+++ b/webapp/channels/src/utils/message_html_to_component.tsx
@@ -10,8 +10,8 @@ import AtSumOfMembersMention from 'components/at_sum_members_mention';
import CodeBlock from 'components/code_block/code_block';
import LatexBlock from 'components/latex_block';
import LatexInline from 'components/latex_inline';
-import LinkTooltip from 'components/link_tooltip/link_tooltip';
import MarkdownImage from 'components/markdown_image';
+import PluginLinkTooltip from 'components/plugin_link_tooltip';
import PostEmoji from 'components/post_emoji';
import PostEditedIndicator from 'components/post_view/post_edited_indicator';
@@ -107,18 +107,14 @@ export function messageHtmlToComponent(html: string, options: Options = {}) {
];
if (options.hasPluginTooltips) {
- const hrefAttrib = 'href';
processingInstructions.push({
- replaceChildren: true,
- shouldProcessNode: (node: any) => node.type === 'tag' && node.name === 'a' && node.attribs[hrefAttrib],
+ replaceChildren: false,
+ shouldProcessNode: (node: any) => node.type === 'tag' && node.name === 'a' && node.attribs.href,
processNode: (node: any, children: any) => {
return (
-
+
{children}
-
+
);
},
});