add styling for markdown link

Author: DanC5

src/components/Message/types.ts

@@ -28,7 +28,7 @@ import type {
   RetrySendMessage,
   StreamMessage,
 } from '../../context/ChannelContext';
-import type { MentionProps, RenderTextOptions } from '../../utils';
+import type { RenderTextOptions } from '../../utils';
 
 import type {
   CustomTrigger,
@@ -282,7 +282,6 @@ export type MessageUIComponentProps<
   renderText?: (
     text?: string,
     mentioned_users?: UserResponse<Us>[],
-    MentionComponent?: React.ComponentType<MentionProps<Us>>,
     options?: RenderTextOptions,
   ) => JSX.Element | null;
   /** Whether or not the current Message is in a Thread */

src/styles/Message.scss

@@ -447,6 +447,14 @@
     font-weight: $heavy-font-weight;
   }
 
+  &-url-link {
+    display: inline-block;
+    max-width: 150px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   &--inner {
     display: flex;
     flex-direction: column;

src/utils.tsx

@@ -74,17 +74,26 @@ type MarkDownRenderers = {
 const markDownRenderers: { [nodeType: string]: React.ElementType } = {
   // eslint-disable-next-line react/display-name
   link: (props: MarkDownRenderers) => {
-    if (
-      !props.href ||
-      (!props.href.startsWith('http') && !props.href.startsWith('mailto:'))
-    ) {
-      return props.children;
+    const { children, href } = props;
+
+    const isEmail = href?.startsWith('mailto:');
+    const isUrl = href?.startsWith('http');
+
+    if (!href || (!isEmail && !isUrl)) {
+      return children;
     }
 
     return (
-      <a href={props.href} rel='nofollow noreferrer noopener' target='_blank'>
-        {props.children}
-      </a>
+      <span>
+        <a
+          className={`${isUrl ? 'str-chat__message-url-link' : ''}`}
+          href={href}
+          rel='nofollow noreferrer noopener'
+          target='_blank'
+        >
+          {children}
+        </a>
+      </span>
     );
   },
   span: 'span',
@@ -156,13 +165,11 @@ export type RenderTextOptions = {
   customMarkDownRenderers?: {
     [nodeType: string]: React.ElementType;
   };
-  truncationLimit?: number;
 };
 
 export const renderText = <Us extends DefaultUserType<Us> = DefaultUserType>(
   text?: string,
   mentioned_users?: UserResponse<Us>[],
-  MentionComponent: React.ComponentType<MentionProps<Us>> = Mention,
   options: RenderTextOptions = {},
 ) => {
   // take the @ mentions and turn them into markdown?
@@ -196,12 +203,8 @@ export const renderText = <Us extends DefaultUserType<Us> = DefaultUserType>(
     if (noParsingNeeded.length > 0 || linkIsInBlock) return;
 
     const displayLink =
-      type === 'email'
-        ? value
-        : truncate(
-            value.replace(detectHttp, ''),
-            options.truncationLimit || 20,
-          );
+      type === 'email' ? value : value.replace(detectHttp, '');
+
     newText = newText.replace(value, `[${displayLink}](${encodeURI(href)})`);
   });
 
@@ -212,9 +215,9 @@ export const renderText = <Us extends DefaultUserType<Us> = DefaultUserType>(
   }
 
   const renderers = {
+    mention: Mention,
     ...markDownRenderers,
     ...options.customMarkDownRenderers,
-    mention: MentionComponent,
   };
 
   return (