[C-5278] Trimmed newlines on comments (#10386)

AudiusProject · Nov 7, 2024 · b5b4a93 · b5b4a93
1 parent a3686c6
commit b5b4a93
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/packages/common/src/utils/formatUtil.ts b/packages/common/src/utils/formatUtil.ts
@@ -111,11 +111,21 @@ export const formatShareText = (title: string, creator: string) => {
 }
 
 /**
- * Reduces multiple sequential newlines (> 3) into max `\n\n` and
+ * Reduces multiple sequential newlines (> newlineCount) into max `\n\n` and
  * trims both leading and trailing newlines
  */
-export const squashNewLines = (str: string | null) => {
-  return str ? str.replace(/\n\s*\n\s*\n/g, '\n\n').trim() : str
+export const squashNewLines = (str: string | null, newlineMax: number = 2) => {
+  return str
+    ? str
+        .replace(
+          new RegExp(
+            `\\n\\s*(\\n\\s*){${Math.max(newlineMax - 2, 1)}}\\n`,
+            'g'
+          ),
+          '\n'.repeat(newlineMax)
+        )
+        .trim()
+    : str
 }
 
 /** Trims a string to alphanumeric values only */

diff --git a/packages/mobile/src/components/core/UserGeneratedText.tsx b/packages/mobile/src/components/core/UserGeneratedText.tsx
@@ -306,11 +306,13 @@ export const UserGeneratedText = (props: UserGeneratedTextProps) => {
   }, [])
 
   const renderText = useCallback(
-    (text: string) => (
-      <Text suppressHighlighting {...other}>
-        {text}
-      </Text>
-    ),
+    (text: string) => {
+      return (
+        <Text suppressHighlighting {...other}>
+          {text}
+        </Text>
+      )
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   )
@@ -330,7 +332,7 @@ export const UserGeneratedText = (props: UserGeneratedTextProps) => {
             email
             url={false}
             style={[{ marginBottom: 3 }, style]}
-            text={squashNewLines(children) as string}
+            text={squashNewLines(children, 10) as string}
             matchers={[
               // Handle matcher e.g. @handle
               ...(mentions

diff --git a/packages/web/src/components/user-generated-text/UserGeneratedTextV2.tsx b/packages/web/src/components/user-generated-text/UserGeneratedTextV2.tsx
@@ -17,7 +17,8 @@ import {
   formatCollectionName,
   formatUserName,
   handleRegex,
-  decodeHashId
+  decodeHashId,
+  squashNewLines
 } from '@audius/common/utils'
 import { Text, TextProps } from '@audius/harmony'
 import { CommentMention, ResolveApi, Track, User, Playlist } from '@audius/sdk'
@@ -299,6 +300,7 @@ export const UserGeneratedTextV2 = forwardRef(function (
   )
 
   const matchers: Matcher[] = [
+    // link matcher
     {
       pattern:
         /https?:\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])/g,
@@ -324,7 +326,7 @@ export const UserGeneratedTextV2 = forwardRef(function (
   // Function to split the text and insert rendered elements for matched tokens
   const parseText = (text: string) => {
     // Start with the entire text as a single unprocessed string
-    let elements: ReactNode[] = [text]
+    let elements: ReactNode[] = [squashNewLines(text, 10)]
     let key = 0
 
     // Process each matcher sequentially