From aba3eed8057296426e082246d680b9cfa54b2193 Mon Sep 17 00:00:00 2001
From: Saturnino Abril <5334504+saturninoabril@users.noreply.github.com>
Date: Tue, 14 Apr 2026 09:21:21 +0800
Subject: [PATCH 1/2] linktooltip: add clickable children

---
 plugin.json                                   |   2 +-
 .../components/link_tooltip/link_tooltip.jsx  | 102 +++++++++++++++---
 2 files changed, 90 insertions(+), 14 deletions(-)

diff --git a/plugin.json b/plugin.json
index f9dd3f91..399bf0fa 100644
--- a/plugin.json
+++ b/plugin.json
@@ -5,7 +5,7 @@
     "homepage_url": "https://github.com/mattermost/mattermost-plugin-demo",
     "support_url": "https://github.com/mattermost/mattermost-plugin-demo/issues",
     "icon_path": "assets/icon.svg",
-    "version": "0.10.3",
+    "version": "0.11.1",
     "min_server_version": "7.9.0",
     "server": {
         "executables": {
diff --git a/webapp/src/components/link_tooltip/link_tooltip.jsx b/webapp/src/components/link_tooltip/link_tooltip.jsx
index 8c64c958..7ab1a2bb 100644
--- a/webapp/src/components/link_tooltip/link_tooltip.jsx
+++ b/webapp/src/components/link_tooltip/link_tooltip.jsx
@@ -9,30 +9,82 @@ export default class LinkTooltip extends React.PureComponent {
     }
 
     render() {
-        if (!this.props.href.includes('www.test.com')) {
+        if (!this.props.href.includes('example.com')) {
             return null;
         }
 
         const style = getStyle(this.props.theme);
         return (
-            <div
-                style={style.configuration}
-            >
-                <i
-                    style={iconStyles}
-                    className='icon fa fa-plug'
-                />
-                <FormattedMessage
-                    id='tooltip.message'
-                    defaultMessage='This is a custom tooltip from the Demo Plugin'
-                />
+            <div style={style.container}>
+                <div style={style.header}>
+                    <i
+                        style={iconStyles}
+                        className='icon fa fa-plug'
+                    />
+                    <FormattedMessage
+                        id='tooltip.message'
+                        defaultMessage='This is a custom tooltip from the Demo Plugin'
+                    />
+                </div>
+                <div style={style.body}>
+                    <a
+                        href={this.props.href}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        style={style.titleLink}
+                        data-testid='demo-tooltip-title-link'
+                    >
+                        <FormattedMessage
+                            id='tooltip.title'
+                            defaultMessage='Demo Link Preview'
+                        />
+                    </a>
+
+                    <p style={style.sharedVia}>
+                        <FormattedMessage
+                            id='tooltip.sharedVia'
+                            defaultMessage='Shared via {link}'
+                            values={{
+                                link: (
+                                    <a
+                                        href={this.props.href}
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        data-testid='demo-tooltip-shared-via-link'
+                                    >
+                                        {'example.com'}
+                                    </a>
+                                ),
+                            }}
+                        />
+                    </p>
+
+                    <p style={style.description}>
+                        <FormattedMessage
+                            id='tooltip.description'
+                            defaultMessage='This is a sample description. Visit {link} for more details.'
+                            values={{
+                                link: (
+                                    <a
+                                        href={this.props.href}
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        data-testid='demo-tooltip-description-link'
+                                    >
+                                        {'the original page'}
+                                    </a>
+                                ),
+                            }}
+                        />
+                    </p>
+                </div>
             </div>
         );
     }
 }
 
 const getStyle = (theme) => ({
-    configuration: {
+    container: {
         borderRadius: '4px',
         boxShadow: 'rgba(61, 60, 64, 0.1) 0px 17px 50px 0px, rgba(61, 60, 64, 0.1) 0px 12px 15px 0px',
         fontSize: '14px',
@@ -42,6 +94,30 @@ const getStyle = (theme) => ({
         color: theme.centerChannelColor,
         backgroundColor: theme.centerChannelBg,
     },
+    header: {
+        marginBottom: '8px',
+    },
+    body: {
+        paddingLeft: '4px',
+    },
+    titleLink: {
+        display: 'block',
+        fontWeight: '600',
+        fontSize: '14px',
+        textDecoration: 'none',
+        color: theme.centerChannelColor,
+    },
+    sharedVia: {
+        fontSize: '12px',
+        marginTop: '4px',
+        color: hexToRGB(theme.centerChannelColor, '0.64'),
+    },
+    description: {
+        fontSize: '12px',
+        marginTop: '8px',
+        lineHeight: '1.25',
+        color: theme.centerChannelColor,
+    },
 });
 
 const iconStyles = {

From b6a435a40195e29fd68e9cc35ab6598c671d6e6e Mon Sep 17 00:00:00 2001
From: Saturnino Abril <5334504+saturninoabril@users.noreply.github.com>
Date: Tue, 14 Apr 2026 09:48:02 +0800
Subject: [PATCH 2/2] address comments

---
 webapp/i18n/en.json                                 | 3 +++
 webapp/i18n/es.json                                 | 3 +++
 webapp/src/components/link_tooltip/link_tooltip.jsx | 9 ++++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 7c22b61c..2f1e363e 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -14,7 +14,10 @@
   "submenu.menu": "Submenu Example",
   "submenu.second": "Second Item",
   "submenu.third": "Third Item",
+  "tooltip.description": "This is a sample description. Visit {link} for more details.",
   "tooltip.message": "This is a custom tooltip from the Demo Plugin",
+  "tooltip.sharedVia": "Shared via {link}",
+  "tooltip.title": "Demo Link Preview",
   "useractions.action": "Action",
   "useractions.demo": "Demo Plugin: "
 }
diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json
index 13dae662..5b21785c 100644
--- a/webapp/i18n/es.json
+++ b/webapp/i18n/es.json
@@ -8,7 +8,10 @@
   "sidebar.demo": "Complemento de Demostración:",
   "sidebar.disabled": "Discapacitado",
   "sidebar.enabled": "Habilitado",
+  "tooltip.description": "Esta es una descripción de ejemplo. Visite {link} para más detalles.",
   "tooltip.message": "Esta es una información sobre herramientas personalizada del complemento de demostración",
+  "tooltip.sharedVia": "Compartido a través de {link}",
+  "tooltip.title": "Vista previa del enlace de demostración",
   "useractions.action": "Acción",
   "useractions.demo": "Complemento de Demostración: ",
   "submenu.menu": "Ejemplo de submenú",
diff --git a/webapp/src/components/link_tooltip/link_tooltip.jsx b/webapp/src/components/link_tooltip/link_tooltip.jsx
index 7ab1a2bb..d0bf48f9 100644
--- a/webapp/src/components/link_tooltip/link_tooltip.jsx
+++ b/webapp/src/components/link_tooltip/link_tooltip.jsx
@@ -9,7 +9,14 @@ export default class LinkTooltip extends React.PureComponent {
     }
 
     render() {
-        if (!this.props.href.includes('example.com')) {
+        let hostname;
+        try {
+            hostname = new URL(this.props.href).hostname.toLowerCase();
+        } catch {
+            return null;
+        }
+
+        if (hostname !== 'example.com' && !hostname.endsWith('.example.com')) {
             return null;
         }