Merge pull request #807 from GetStream/renderText-options

Add renderText options

Author: DanC5

examples/typescript-app/src/App.tsx

@@ -38,6 +38,7 @@ if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
 chatClient.connectUser({ id: userId }, userToken);
 
 const App = () => (
+  // @ts-expect-error TODO: find out why this occurs linked, but not with an npm version
   <Chat client={chatClient} theme={`messaging ${theme}`}>
     <ChannelList
       List={ChannelListMessenger}

src/components/Message/types.ts

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

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,16 +74,23 @@ 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
+        className={`${isUrl ? 'str-chat__message-url-link' : ''}`}
+        href={href}
+        rel='nofollow noreferrer noopener'
+        target='_blank'
+      >
+        {children}
       </a>
     );
   },
@@ -144,18 +151,24 @@ const mentionsMarkdownPlugin = <
   return transform;
 };
 
-type MentionProps<Us extends DefaultUserType<Us> = DefaultUserType> = {
+export type MentionProps<Us extends DefaultUserType<Us> = DefaultUserType> = {
   mentioned_user: UserResponse<Us>;
 };
 
 const Mention = <Us extends DefaultUserType<Us> = DefaultUserType>(
   props: PropsWithChildren<Us>,
 ) => <span className='str-chat__message-mention'>{props.children}</span>;
 
+export type RenderTextOptions = {
+  customMarkDownRenderers?: {
+    [nodeType: string]: React.ElementType;
+  };
+};
+
 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?
   // translate links
@@ -188,7 +201,8 @@ export const renderText = <Us extends DefaultUserType<Us> = DefaultUserType>(
     if (noParsingNeeded.length > 0 || linkIsInBlock) return;
 
     const displayLink =
-      type === 'email' ? value : truncate(value.replace(detectHttp, ''), 20);
+      type === 'email' ? value : value.replace(detectHttp, '');
+
     newText = newText.replace(value, `[${displayLink}](${encodeURI(href)})`);
   });
 
@@ -199,8 +213,9 @@ export const renderText = <Us extends DefaultUserType<Us> = DefaultUserType>(
   }
 
   const renderers = {
+    mention: Mention,
     ...markDownRenderers,
-    mention: MentionComponent,
+    ...options.customMarkDownRenderers,
   };
 
   return (