Add URL preview (#1511)

* URL preview - WIP

* fix url preview regex

* update url match regex

* add url preview components

* add scroll btn url preview holder

* add message body component

* add url preview toggle in settings

* update url regex

* improve url regex

* increase thumbnail size in url preview

* hide url preview in encrypted rooms

* add encrypted room url preview toggle

src/app/components/message/layout/Base.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { as } from 'folds';
+import { Text, as } from 'folds';
 import classNames from 'classnames';
 import * as css from './layout.css';
 
@@ -23,3 +23,16 @@ export const AvatarBase = as<'span'>(({ className, ...props }, ref) => (
 export const Username = as<'span'>(({ as: AsUsername = 'span', className, ...props }, ref) => (
   <AsUsername className={classNames(css.Username, className)} {...props} ref={ref} />
 ));
+
+export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?: boolean }>(
+  ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
+    <Text
+      as={asComp}
+      size="T400"
+      priority={notice ? '300' : '400'}
+      className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
+      {...props}
+      ref={ref}
+    />
+  )
+);

src/app/components/message/layout/layout.css.ts

@@ -153,3 +153,30 @@ export const Username = style({
     },
   },
 });
+
+export const MessageTextBody = recipe({
+  base: {
+    wordBreak: 'break-word',
+  },
+  variants: {
+    preWrap: {
+      true: {
+        whiteSpace: 'pre-wrap',
+      },
+    },
+    jumboEmoji: {
+      true: {
+        fontSize: '1.504em',
+        lineHeight: '1.4962em',
+      },
+    },
+    emote: {
+      true: {
+        color: color.Success.Main,
+        fontStyle: 'italic',
+      },
+    },
+  },
+});
+
+export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;