[C-2987] Add UserGeneratedText

packages/web/src/components/collection/desktop/CollectionHeader.module.css

@@ -157,19 +157,8 @@
 }
 
 .description {
-  user-select: none;
-  min-height: 22px;
-  white-space: pre-line;
-  color: var(--neutral);
-  font-size: var(--font-xs);
-  font-weight: var(--font-medium);
-  line-height: 18px;
-  margin-top: 14px;
-  margin-bottom: 6px;
-}
-
-.description a {
-  color: var(--primary);
+  margin-top: var(--unit-3);
+  margin-bottom: var(--unit-2);
 }
 
 /* Filter Input */

packages/web/src/components/collection/desktop/CollectionHeader.tsx

@@ -1,15 +1,8 @@
-import { ChangeEvent, useCallback, useState, MouseEvent } from 'react'
+import { ChangeEvent, useCallback, useState } from 'react'
 
-import {
-  squashNewLines,
-  formatSecondsAsText,
-  formatDate,
-  getPathFromAudiusUrl,
-  isAudiusUrl
-} from '@audius/common'
+import { formatSecondsAsText, formatDate } from '@audius/common'
 import { IconHidden, IconPencil } from '@audius/stems'
 import cn from 'classnames'
-import Linkify from 'linkify-react'
 import { useDispatch } from 'react-redux'
 
 import { ReactComponent as IconFilter } from 'assets/img/iconFilter.svg'
@@ -18,6 +11,7 @@ import { UserLink } from 'components/link'
 import RepostFavoritesStats from 'components/repost-favorites-stats/RepostFavoritesStats'
 import Skeleton from 'components/skeleton/Skeleton'
 import InfoLabel from 'components/track/InfoLabel'
+import { UserGeneratedText } from 'components/user-generated-text'
 import { open as openEditCollectionModal } from 'store/application/ui/editPlaylistModal/slice'
 
 import { Artwork } from './Artwork'
@@ -47,8 +41,6 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
     tracksLoading,
     loading,
     playing,
-    onClickDescriptionExternalLink,
-    onClickDescriptionInternalLink,
     onPlay,
     variant,
     gradient,
@@ -172,30 +164,13 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
               labelValue={numTracks}
             />
           </div>
-          <div className={cn(styles.description, fadeIn)}>
-            <Linkify
-              options={{
-                attributes: {
-                  onClick: (event: MouseEvent<HTMLAnchorElement>) => {
-                    const url = event.currentTarget.href
-
-                    if (isAudiusUrl(url)) {
-                      const path = getPathFromAudiusUrl(url)
-                      event.nativeEvent.preventDefault()
-                      onClickDescriptionInternalLink(path ?? '/')
-                    } else {
-                      onClickDescriptionExternalLink(event)
-                    }
-                  }
-                },
-                target: (href: string) => {
-                  return isAudiusUrl(href) ? '' : '_blank'
-                }
-              }}
-            >
-              {squashNewLines(description)}
-            </Linkify>
-          </div>
+          <UserGeneratedText
+            size='xSmall'
+            className={cn(styles.description, fadeIn)}
+            linkSource='collection page'
+          >
+            {description}
+          </UserGeneratedText>
           <div className={cn(styles.statsRow, fadeIn)}>
             {renderStatsRow(isLoading)}
           </div>

packages/web/src/components/collection/mobile/CollectionHeader.js

@@ -1,24 +1,21 @@
-import { memo, useCallback } from 'react'
+import { memo } from 'react'
 
 import {
-  Name,
   Variant,
   SquareSizes,
   formatCount,
-  squashNewLines,
   formatSecondsAsText,
   formatDate,
   OverflowAction
 } from '@audius/common'
 import { Button, ButtonType, IconPause, IconPlay } from '@audius/stems'
 import cn from 'classnames'
-import Linkify from 'linkify-react'
 import PropTypes from 'prop-types'
 
-import { make, useRecord } from 'common/store/analytics/actions'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
 import { UserLink } from 'components/link'
 import Skeleton from 'components/skeleton/Skeleton'
+import { UserGeneratedText } from 'components/user-generated-text'
 import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt'
 import ActionButtonRow from 'pages/track-page/components/mobile/ActionButtonRow'
 import StatsButtonRow from 'pages/track-page/components/mobile/StatsButtonRow'
@@ -139,19 +136,6 @@ const CollectionHeader = ({
     SquareSizes.SIZE_1000_BY_1000
   )
 
-  const record = useRecord()
-  const onDescriptionExternalLink = useCallback(
-    (event) => {
-      record(
-        make(Name.LINK_CLICKING, {
-          url: event.target.href,
-          source: 'collection page'
-        })
-      )
-    },
-    [record]
-  )
-
   const collectionLabels = [
     {
       label: 'Tracks',
@@ -269,13 +253,12 @@ const CollectionHeader = ({
             {renderCollectionLabels()}
           </div>
           {description ? (
-            <Linkify
-              options={{ attributes: { onClick: onDescriptionExternalLink } }}
+            <UserGeneratedText
+              className={styles.description}
+              linkSource='collection page'
             >
-              <div className={styles.description}>
-                {squashNewLines(description)}
-              </div>
-            </Linkify>
+              {description}
+            </UserGeneratedText>
           ) : null}
         </>
       )}

packages/web/src/components/collection/mobile/CollectionHeader.module.css

@@ -155,21 +155,9 @@
 }
 
 .description {
-  color: var(--neutral);
-  font-family: var(--font-family);
-  font-size: var(--font-m);
-  font-weight: var(--font-medium);
-  white-space: pre-line;
-  line-height: 26px;
   text-align: left;
   width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  margin-bottom: 24px;
-}
-
-.description > a {
-  color: var(--primary);
+  margin-bottom: var(--unit-6);
 }
 
 /* Loading */

packages/web/src/components/link/ExternalLink.tsx

@@ -1,5 +1,45 @@
-type ExternalLinkProps = JSX.IntrinsicElements['a']
+import { MouseEvent, useCallback } from 'react'
+
+import { Name } from '@audius/common'
+
+import { make, useRecord } from 'common/store/analytics/actions'
+
+import { Link, LinkProps } from './Link'
+
+type ExternalLinkProps = LinkProps & {
+  source?: 'profile page' | 'track page' | 'collection page'
+}
 
 export const ExternalLink = (props: ExternalLinkProps) => {
-  return <a {...props} target='_blank' rel='noopener noreferrer' />
+  const { to, onClick, source, ...other } = props
+
+  const record = useRecord()
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      onClick?.(event)
+      if (source) {
+        record(
+          make(Name.LINK_CLICKING, {
+            // @ts-expect-error
+            url: event.target.href,
+            source
+          })
+        )
+      }
+    },
+    [onClick, record, source]
+  )
+
+  return (
+    // @ts-expect-error
+    <Link
+      as='a'
+      href={to as string}
+      onClick={handleClick}
+      {...other}
+      target='_blank'
+      rel='noopener noreferrer'
+    />
+  )
 }

packages/web/src/components/track/GiantTrackTile.module.css

@@ -346,18 +346,10 @@
 }
 
 .description {
-  padding-top: 13px;
-  white-space: pre-line;
-  color: var(--neutral);
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
+  padding-top: var(--unit-3);
   line-height: 26px;
 }
 
-.description > a {
-  color: var(--primary);
-}
-
 .tagSection {
   padding-top: 13px;
   display: flex;

packages/web/src/components/track/GiantTrackTile.tsx

@@ -1,14 +1,11 @@
 import { useCallback, useState } from 'react'
 
 import {
-  squashNewLines,
   getCanonicalName,
   formatDate,
   formatSeconds,
   Genre,
   FeatureFlags,
-  isAudiusUrl,
-  getPathFromAudiusUrl,
   Nullable,
   Remix,
   CoverArtSizes,
@@ -28,7 +25,6 @@ import {
   IconKebabHorizontal
 } from '@audius/stems'
 import cn from 'classnames'
-import Linkify from 'linkify-react'
 
 import { ReactComponent as IconRobot } from 'assets/img/robot.svg'
 import DownloadButtons from 'components/download-buttons/DownloadButtons'
@@ -43,6 +39,7 @@ import { Tile } from 'components/tile'
 import Toast from 'components/toast/Toast'
 import Tooltip from 'components/tooltip/Tooltip'
 import { ComponentPlacement } from 'components/types'
+import { UserGeneratedText } from 'components/user-generated-text'
 import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { moodMap } from 'utils/Moods'
 
@@ -61,7 +58,6 @@ const BUTTON_COLLAPSE_WIDTHS = {
   second: 1190,
   third: 1286
 }
-
 // Toast timeouts in ms
 const REPOST_TIMEOUT = 1000
 const SAVED_TIMEOUT = 1000
@@ -106,8 +102,6 @@ export type GiantTrackTileProps = {
   onClickFavorites: () => void
   onClickReposts: () => void
   onDownload: (trackId: ID, category?: string, parentTrackId?: ID) => void
-  onExternalLinkClick: (event: React.MouseEvent<HTMLAnchorElement>) => void
-  onInternalLinkClick: (url: string) => void
   onMakePublic: (trackId: ID) => void
   onFollow: () => void
   onPlay: () => void
@@ -153,9 +147,7 @@ export const GiantTrackTile = ({
   onClickFavorites,
   onClickReposts,
   onDownload,
-  onExternalLinkClick,
   onFollow,
-  onInternalLinkClick,
   onMakePublic,
   onPlay,
   onSave,
@@ -643,30 +635,13 @@ export const GiantTrackTile = ({
           ) : null}
         </div>
         {description ? (
-          <Linkify
-            options={{
-              attributes: {
-                onClick: (event: React.MouseEvent<HTMLAnchorElement>) => {
-                  const url = event.currentTarget.href
-
-                  if (isAudiusUrl(url)) {
-                    const path = getPathFromAudiusUrl(url)
-                    event.nativeEvent.preventDefault()
-                    onInternalLinkClick(path ?? '/')
-                  } else {
-                    onExternalLinkClick(event)
-                  }
-                }
-              },
-              target: (href, type, tokens) => {
-                return isAudiusUrl(href) ? '' : '_blank'
-              }
-            }}
+          <UserGeneratedText
+            component='h3'
+            size='small'
+            className={styles.description}
           >
-            <h3 className={styles.description}>
-              {squashNewLines(description)}
-            </h3>
-          </Linkify>
+            {description}
+          </UserGeneratedText>
         ) : null}
         {renderTags()}
         {renderDownloadButtons()}