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/utils.tsx

@@ -152,10 +152,18 @@ const Mention = <Us extends DefaultUserType<Us> = DefaultUserType>(
   props: PropsWithChildren<Us>,
 ) => <span className='str-chat__message-mention'>{props.children}</span>;
 
+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?
   // translate links
@@ -188,7 +196,12 @@ 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
+        : truncate(
+            value.replace(detectHttp, ''),
+            options.truncationLimit || 20,
+          );
     newText = newText.replace(value, `[${displayLink}](${encodeURI(href)})`);
   });
 
@@ -200,6 +213,7 @@ export const renderText = <Us extends DefaultUserType<Us> = DefaultUserType>(
 
   const renderers = {
     ...markDownRenderers,
+    ...options.customMarkDownRenderers,
     mention: MentionComponent,
   };