stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -0,0 +1,100 @@
+import { parseLinksFromText } from './parseLinks';
+
+describe('parseLinksFromText', () => {
+  it.each([
+    ['www.getstream.io', 'www.getstream.io'],
+    ['getstream.io', 'getstream.io'],
+    ['scrn://team-chat', 'team-chat'],
+    ['https://localhost', 'localhost'],
+    [
+      'https://localhost/with/path?and=query&multiple=params',
+      'localhost/with/path?and=query&multiple=params',
+    ],
+    ['https://localhost/with/path?and=query#fragment', 'localhost/with/path?and=query#fragment'],
+    ['reactnative.stream', 'reactnative.stream'],
+    [
+      'https://zh.wikipedia.org/wiki/挪威牛油危機',
+      'zh.wikipedia.org/wiki/%E6%8C%AA%E5%A8%81%E7%89%9B%E6%B2%B9%E5%8D%B1%E6%A9%9F',
+    ],
+    [
+      'https://getstream.io/chat/docs/react-native/?language=javascript',
+      'getstream.io/chat/docs/react-native/?language=javascript',
+    ],
+    ['127.0.0.1/local_(development)_server', '127.0.0.1/local_(development)_server'],
+    ['https://a.co:8999/ab.php?p=12', 'a.co:8999/ab.php?p=12'],
+  ])('Returns the encoded value of %p as %p', (link, expected) => {
+    const result = parseLinksFromText(link);
+
+    expect(result[0].encoded).toBe(expected);
+  });
+
+  it('parses fqdn', () => {
+    const input = `We have put the apim bol,
+temporarily so :sj: we can later put the monitors on my grasp
+on reality right now is
+https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier
+:)`;
+
+    const result = parseLinksFromText(input);
+
+    expect(result).toEqual([
+      {
+        encoded:
+          'www.contrived-example.com:8080/sub/page.php?p1=1%F0%9F%87%B3%F0%9F%87%B4&p2=2#fragment-identifier',
+        raw: 'https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier',
+        scheme: 'https://',
+      },
+    ]);
+  });
+
+  it.each([
+    ['support+rn@getstream.io'],
+    ['support.rn@getstream.io'],
+    ['support-rn@getstream.io'],
+    ['support_rn@getstream.io'],
+  ])('Can parse the email address %p', (email) => {
+    const result = parseLinksFromText(email);
+
+    expect(result[0].encoded).toBe(email);
+    expect(result[0].scheme).toBe('mailto:');
+  });
+
+  it("doesn't double the mailto prefix", () => {
+    const input = 'mailto:support@getstream.io';
+
+    const result = parseLinksFromText(input);
+
+    expect(result[0]).toEqual({
+      encoded: 'support@getstream.io',
+      raw: input,
+      scheme: 'mailto:',
+    });
+  });
+
+  it('Does not falsely parse LINKs from text content', () => {
+    const input = `#This string exists to test that we don't produce false positives
+
+Existing links:
+[already a parsed link](https://getstream.io/blog/react-native-how-to-build-bidirectional-infinite-scroll/)
+[even a bogus one]( should not match )
+
+## These should, however, be parsed:
+www.getstream.io
+getstream.io
+`;
+    const result = parseLinksFromText(input);
+
+    expect(result).toHaveLength(2);
+  });
+
+  it('Encodes incomplete emoji unicode', () => {
+    const input = 'https://getstream.io/�';
+    const result = parseLinksFromText(input);
+
+    expect(result[0]).toEqual({
+      encoded: 'getstream.io/%EF%BF%BD',
+      raw: 'https://getstream.io/�',
+      scheme: 'https://',
+    });
+  });
+});

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -0,0 +1,95 @@
+/**
+ * 📣 Note: Do not use named capture groups, as
+ *          it is not yet available in Hermes.
+ *
+ * These helpers indend to make it easier to skim read
+ * the patterns below, but note that some are optional,
+ * specified in the patterns these are added to.
+ * */
+const emailUserName = '[\\w+\\.~$_-]+';
+const schema = `(\\w{2,15}:\\/\\/)`;
+const domain = `((?:\\w+\\.\\w+)+(?:[^:\\/\\s]+))`;
+const port = `(:[0-9]{1,5})`;
+const path = `((?:\\/)?[^?#\\s]+)`;
+const queryString = `(\\?[^#\\s]+)`;
+const fragment = `(#[\\w_-]+)`;
+
+/**
+ * Match any email address, with and without `mailto:`
+ */
+const emailPattern = `(mailto:)?((?:${emailUserName})@(?:${domain}))`;
+
+/**
+ * Match any string starting with something that seems like it's a schema.
+ * */
+const schemePrefixedLinkPattern = `${schema}(\\S+)`;
+
+/**
+ * Match as much as possible of a fqdn, at least with a domain name formed as
+ * something.tld
+ */
+const fqdnLinkPattern = `${schema}?${domain}${port}?${path}?${queryString}?${fragment}?`;
+
+interface Link {
+  encoded: string;
+  raw: string;
+  scheme: string;
+}
+
+/**
+ * This is done separately because of the version of javascript run
+ * for expo
+ * */
+const removeMarkdownLinksFromText = (input: string) => input.replace(/\[[\w\s]+\]\(.*\)/g, '');
+
+export const parseLinksFromText = (input: string): Link[] => {
+  let matches;
+
+  const inputWithoutMarkdownLinks = removeMarkdownLinksFromText(input);
+
+  const results: Link[] = [];
+
+  const emailRegExp = new RegExp(emailPattern, 'gi');
+  while ((matches = emailRegExp.exec(input)) !== null) {
+    const [raw, scheme = 'mailto:', displayValue] = matches;
+    results.push({ encoded: encodeURI(displayValue), raw, scheme });
+  }
+
+  /**
+   * The two link patterns are checked with an "or" (`|`)
+   * to avoid overlapping matches being duplicated in the output.
+   * */
+  const linkRegex = new RegExp(`${fqdnLinkPattern}|${schemePrefixedLinkPattern}`, 'gi');
+  while ((matches = linkRegex.exec(inputWithoutMarkdownLinks)) !== null) {
+    const [
+      raw,
+      fqdnScheme = '',
+      fqdnDomainName = '',
+      fqdnPort = '',
+      fqdnPath = '',
+      fqdnQueryStraing = '',
+      fqdnFragment = '',
+      schemePrefixedScheme = '',
+      schemePrefixedPath = '',
+    ] = matches;
+
+    if (schemePrefixedScheme !== '') {
+      results.push({
+        encoded: encodeURI(schemePrefixedPath),
+        raw,
+        scheme: schemePrefixedScheme,
+      });
+      continue;
+    }
+
+    results.push({
+      encoded: encodeURI(
+        [fqdnDomainName, fqdnPort, fqdnPath, fqdnQueryStraing, fqdnFragment].join(''),
+      ),
+      raw,
+      scheme: fqdnScheme,
+    });
+  }
+
+  return results;
+};

package/src/components/Message/MessageSimple/utils/renderText.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+// @ts-ignore
+import { ASTNode, SingleASTNode } from 'simple-markdown';
+
+import { ListOutput, ListOutputProps } from './renderText';
+
+describe('list', () => {
+  const createNode = ({
+    amount,
+    ordered = false,
+    start = 1,
+  }: {
+    amount: number;
+    ordered?: boolean;
+    start?: number;
+  }): SingleASTNode => ({
+    items: Array.from(Array(amount).keys()),
+    ordered,
+    start,
+    type: 'text',
+  });
+
+  const mockOutput = (node: ASTNode) => <Text>{node}</Text>;
+  const MockText = ({ node, output, state }: ListOutputProps) => (
+    <>
+      <ListOutput node={node} output={output} state={state} styles={{}} />
+    </>
+  );
+
+  it('renders numbered items', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 1 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders numbered items from a start index', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 3 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('4. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('5. ')).toBeTruthy());
+  });
+
+  it('does not throw an error if an item is empty', async () => {
+    const node = {
+      ...createNode({ amount: 3, ordered: true }),
+      items: ['Not empty', null, 'Not empty'],
+    };
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders an unordered list', async () => {
+    const node = createNode({ amount: 3 });
+    const { getAllByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getAllByText('\u2022 ')).toHaveLength(3));
+  });
+});

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { GestureResponderEvent, Linking, Text } from 'react-native';
-import anchorme from 'anchorme';
-import truncate from 'lodash/truncate';
+import React, { PropsWithChildren } from 'react';
+import { GestureResponderEvent, Linking, Text, TextProps, View, ViewProps } from 'react-native';
+
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
+
+import truncate from 'lodash/truncate';
 import {
   DefaultRules,
   defaultRules,
@@ -11,22 +12,17 @@ import {
   ParseFunction,
   parseInline,
   ReactNodeOutput,
+  ReactOutput,
+  SingleASTNode,
+  State,
 } from 'simple-markdown';
 
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
+import { parseLinksFromText } from './parseLinks';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../../types/types';
 import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
 const defaultMarkdownStyles: MarkdownStyle = {
   inlineCode: {
@@ -34,10 +30,22 @@ const defaultMarkdownStyles: MarkdownStyle = {
     padding: 3,
     paddingHorizontal: 5,
   },
+  list: {
+    marginBottom: 8,
+    marginTop: 8,
+  },
+  listItemNumber: {
+    fontWeight: 'bold',
+  },
+  listItemText: {
+    flex: 0,
+  },
+  listRow: {
+    flexDirection: 'row',
+  },
   mentions: {
     fontWeight: '700',
   },
-  // unfortunately marginVertical doesn't override the defaults for these within the 3rd party lib
   paragraph: {
     marginBottom: 8,
     marginTop: 8,
@@ -59,35 +67,24 @@ const parse: ParseFunction = (capture, parse, state) => ({
 export type MarkdownRules = Partial<DefaultRules>;
 
 export type RenderTextParams<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<
-  Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'onLongPress' | 'onPress' | 'preventPress'>
+  Pick<MessageContextValue<StreamChatGenerics>, 'onLongPress' | 'onPress' | 'preventPress'>
 > & {
   colors: typeof Colors;
-  message: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+  message: MessageType<StreamChatGenerics>;
   markdownRules?: MarkdownRules;
   markdownStyles?: MarkdownStyle;
   messageOverlay?: boolean;
+  messageTextNumberOfLines?: number;
   onLink?: (url: string) => Promise<void>;
   onlyEmojis?: boolean;
 };
 
 export const renderText = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  params: RenderTextParams<At, Ch, Co, Ev, Me, Re, Us>,
+  params: RenderTextParams<StreamChatGenerics>,
 ) => {
   const {
     colors,
@@ -95,6 +92,7 @@ export const renderText = <
     markdownStyles,
     message,
     messageOverlay,
+    messageTextNumberOfLines,
     onLink: onLinkParams,
     onLongPress: onLongPressParam,
     onlyEmojis,
@@ -109,20 +107,19 @@ export const renderText = <
   if (!text) return null;
 
   let newText = text.trim();
-  const urls = anchorme(newText, {
-    list: true,
-  });
+  const urls = parseLinksFromText(newText);
 
   for (const urlInfo of urls) {
-    const displayLink = truncate(urlInfo.encoded.replace(/^(www\.)/, ''), {
+    const displayLink = truncate(urlInfo.encoded, {
       length: 200,
       omission: '...',
     });
-    const markdown = `[${displayLink}](${urlInfo.protocol}${urlInfo.encoded})`;
+    const markdown = `[${displayLink}](${urlInfo.scheme}${urlInfo.encoded})`;
     newText = newText.replace(urlInfo.raw, markdown);
   }
 
   newText = newText.replace(/[<&"'>]/g, '\\$&');
+
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
     ...markdownStyles,
@@ -155,7 +152,7 @@ export const renderText = <
       ? onLinkParams(url)
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
 
-  const react: ReactNodeOutput = (node, output, { ...state }) => {
+  const link: ReactNodeOutput = (node, output, { ...state }) => {
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
@@ -175,22 +172,25 @@ export const renderText = <
       }
     };
 
-    state.withinLink = true;
-    const link = React.createElement(
-      Text,
-      {
-        key: state.key,
-        onLongPress,
-        onPress,
-        style: styles.autolink,
-        suppressHighlighting: true,
-      },
-      output(node.content, state),
+    return (
+      <Text
+        key={state.key}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        style={styles.autolink}
+        suppressHighlighting={true}
+      >
+        {output(node.content, { ...state, withinLink: true })}
+      </Text>
     );
-    state.withinLink = false;
-    return link;
   };
 
+  const paragraphText: ReactNodeOutput = (node, output, { ...state }) => (
+    <Text key={state.key} numberOfLines={messageTextNumberOfLines} style={styles.paragraph}>
+      {output(node.content, state)}
+    </Text>
+  );
+
   const mentionedUsers = Array.isArray(mentioned_users)
     ? mentioned_users.reduce((acc, cur) => {
         const userName = cur.name || cur.id || '';
@@ -223,22 +223,31 @@ export const renderText = <
       }
     };
 
-    return React.createElement(
-      Text,
-      {
-        key: state.key,
-        onLongPress,
-        onPress,
-        style: styles.mentions,
-      },
-      Array.isArray(node.content) ? node.content[0]?.content || '' : output(node.content, state),
+    return (
+      <Text key={state.key} onLongPress={onLongPress} onPress={onPress} style={styles.mentions}>
+        {Array.isArray(node.content) ? node.content[0].content || '' : output(node.content, state)}
+      </Text>
     );
   };
 
+  const list: ReactNodeOutput = (node, output, state) => (
+    <ListOutput
+      key={`list-${state.key}`}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+    />
+  );
+
   const customRules = {
-    link: { react },
+    link: { link },
+    list: { react: list },
+    // Truncate long text content in the message overlay
+    paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
+    sublist: { react: list },
     ...(mentionedUsers
       ? {
           mentions: {
@@ -255,7 +264,7 @@ export const renderText = <
     <Markdown
       key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
         messageOverlay ? JSON.stringify(markdownStyles) : undefined
-      }`}
+      }-${JSON.stringify(colors)}`}
       onLink={onLink}
       rules={{
         ...customRules,
@@ -267,3 +276,69 @@ export const renderText = <
     </Markdown>
   );
 };
+
+export interface ListOutputProps {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: State;
+  styles?: Partial<MarkdownStyle>;
+}
+
+/**
+ * For lists and sublists, the default behavior of the markdown library we use is
+ * to always renumber any list, so all ordered lists start from 1.
+ *
+ * This custom rule overrides this behavior both for top level lists and sublists,
+ * in order to start the numbering from the number of the first list item provided.
+ */
+export const ListOutput = ({ node, output, state, styles }: ListOutputProps) => {
+  let isSublist = state.withinList;
+  const parentTypes = ['text', 'paragraph', 'strong'];
+
+  return (
+    <View key={state.key} style={isSublist ? styles?.sublist : styles?.list}>
+      {node.items.map((item: SingleASTNode, index: number) => {
+        const indexAfterStart = node.start + index;
+
+        if (item === null) {
+          return (
+            <ListRow key={index} style={styles?.listRow} testID='list-item'>
+              <Bullet index={node.ordered && indexAfterStart} />
+            </ListRow>
+          );
+        }
+
+        isSublist = item.length > 1 && item[1].type === 'list';
+        const isSublistWithinText = parentTypes.includes((item[0] ?? {}).type) && isSublist;
+        const style = isSublistWithinText ? { marginBottom: 0 } : {};
+
+        return (
+          <ListRow key={index} style={styles?.listRow} testID='list-item'>
+            <Bullet index={node.ordered && indexAfterStart} />
+            <ListItem key={1} style={[styles?.listItemText, style]}>
+              {output(item, state)}
+            </ListItem>
+          </ListRow>
+        );
+      })}
+    </View>
+  );
+};
+
+interface BulletProps extends TextProps {
+  index?: number;
+}
+
+const Bullet = ({ index, style }: BulletProps) => (
+  <Text key={0} style={[style, defaultMarkdownStyles.listItemNumber]}>
+    {index ? `${index}. ` : '\u2022 '}
+  </Text>
+);
+
+const ListRow = (props: PropsWithChildren<ViewProps>) => (
+  <Text style={[props.style, defaultMarkdownStyles.listRow]}>{props.children}</Text>
+);
+
+const ListItem = ({ children, style }: PropsWithChildren<TextProps>) => (
+  <Text style={style}>{children}</Text>
+);

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -1,31 +1,14 @@
 import { useMemo } from 'react';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
 export const useCreateMessageContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   actionsEnabled,
   alignment,
-  canModifyMessage,
   channel,
   disabled,
   files,
@@ -55,12 +38,11 @@ export const useCreateMessageContext = <
   otherAttachments,
   preventPress,
   reactions,
-  readEventsEnabled,
   showAvatar,
   showMessageOverlay,
   showMessageStatus,
   threadList,
-}: MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>) => {
+}: MessageContextValue<StreamChatGenerics>) => {
   const groupStylesLength = groupStyles.length;
   const reactionsValue = reactions.map(({ own, type }) => `${own}${type}`).join();
   const latestReactions = message.latest_reactions ? message.latest_reactions : undefined;
@@ -74,11 +56,10 @@ export const useCreateMessageContext = <
 
   const quotedMessageDeletedValue = message.quoted_message?.deleted_at;
 
-  const messageContext: MessageContextValue<At, Ch, Co, Ev, Me, Re, Us> = useMemo(
+  const messageContext: MessageContextValue<StreamChatGenerics> = useMemo(
     () => ({
       actionsEnabled,
       alignment,
-      canModifyMessage,
       channel,
       disabled,
       files,
@@ -108,7 +89,6 @@ export const useCreateMessageContext = <
       otherAttachments,
       preventPress,
       reactions,
-      readEventsEnabled,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,
@@ -127,7 +107,6 @@ export const useCreateMessageContext = <
       membersValue,
       messageValue,
       reactionsValue,
-      readEventsEnabled,
       showAvatar,
       showMessageStatus,
       threadList,