change the logic of show more from number of lines to number characters

packages/commonwealth/client/scripts/views/components/react_quill_editor/markdown_formatted_text.tsx

@@ -21,7 +21,7 @@ import { CWIcon } from '../component_kit/cw_icons/cw_icon';
 import { getClasses } from '../component_kit/helpers';
 import { renderTruncatedHighlights } from './highlighter';
 import { QuillRendererProps } from './quill_renderer';
-import { countLinesMarkdown, fetchTwitterEmbedInfo } from './utils';
+import { fetchTwitterEmbedInfo } from './utils';
 
 const OPEN_LINKS_IN_NEW_TAB = true;
 
@@ -61,9 +61,9 @@ export const MarkdownFormattedText = ({
   doc,
   hideFormatting,
   searchTerm,
-  cutoffLines,
   customClass,
   customShowMoreButton,
+  maxChars,
 }: MarkdownFormattedTextProps) => {
   const containerRef = useRef<HTMLDivElement>();
   const [userExpand, setUserExpand] = useState<boolean>(false);
@@ -73,16 +73,15 @@ export const MarkdownFormattedText = ({
     if (userExpand) {
       return false;
     }
-    return cutoffLines && cutoffLines < countLinesMarkdown(doc);
-  }, [userExpand, cutoffLines, doc]);
+    return maxChars && maxChars < doc.length;
+  }, [userExpand, maxChars, doc]);
 
   const truncatedDoc = useMemo(() => {
     if (isTruncated) {
-      const numChars = doc.split('\n', cutoffLines).join('\n').length;
-      return doc.slice(0, numChars);
+      return doc.slice(0, maxChars) + '...'; // Truncate and append '...'
     }
     return doc;
-  }, [cutoffLines, doc, isTruncated]);
+  }, [doc, isTruncated, maxChars]);
 
   const unsanitizedHTML = marked.parse(truncatedDoc);
 

packages/commonwealth/client/scripts/views/components/react_quill_editor/quill_formatted_text.tsx

@@ -10,7 +10,7 @@ import { CWTooltip } from '../component_kit/new_designs/CWTooltip';
 import { renderTruncatedHighlights } from './highlighter';
 import { QuillRendererProps } from './quill_renderer';
 import { renderQuillDelta } from './render_quill_delta';
-import { countLinesQuill, getTextFromDelta } from './utils';
+import { getTextFromDelta } from './utils';
 
 type QuillFormattedTextProps = Omit<QuillRendererProps, 'doc'> & {
   doc: DeltaStatic;
@@ -32,10 +32,10 @@ type LinkProps = {
 export const QuillFormattedText = ({
   doc,
   hideFormatting,
-  cutoffLines,
   openLinksInNewTab,
   searchTerm,
   customShowMoreButton,
+  maxChars,
 }: QuillFormattedTextProps) => {
   const navigate = useCommonNavigate();
 
@@ -46,17 +46,17 @@ export const QuillFormattedText = ({
     if (userExpand) {
       return false;
     }
-    return cutoffLines && cutoffLines < countLinesQuill(doc);
-  }, [cutoffLines, doc, userExpand]);
+    return maxChars && maxChars < doc.length;
+  }, [maxChars, doc, userExpand]);
 
   const truncatedDoc: DeltaStatic = useMemo(() => {
     if (isTruncated) {
       return {
-        ops: [...(doc?.ops || []).slice(0, cutoffLines)],
+        ops: [...((doc?.ops || []).slice(0, maxChars) + '...')],
       } as DeltaStatic;
     }
     return doc;
-  }, [cutoffLines, doc, isTruncated]);
+  }, [maxChars, doc, isTruncated]);
 
   const finalDoc = useMemo(() => {
     // if no search term, just render the doc normally

packages/commonwealth/client/scripts/views/components/react_quill_editor/quill_renderer.tsx

@@ -9,11 +9,11 @@ export type QuillRendererProps = {
   hideFormatting?: boolean;
   openLinksInNewTab?: boolean;
   searchTerm?: string;
-  cutoffLines?: number;
   containerClass?: string;
   markdownCutoffLength?: number; // Sometimes necessary to prevent large markdown docs from slowing down pages
   customClass?: string;
   customShowMoreButton?: ReactNode;
+  maxChars?: number;
 };
 
 type RichTextDocInfo = { format: 'richtext'; content: DeltaStatic };
@@ -26,11 +26,11 @@ export const QuillRenderer = ({
   doc,
   searchTerm,
   hideFormatting,
-  cutoffLines,
   containerClass,
   markdownCutoffLength,
   customClass,
   customShowMoreButton = null,
+  maxChars,
 }: QuillRendererProps) => {
   const docInfo: DocInfo = useMemo(() => {
     let decodedText: string;
@@ -85,8 +85,8 @@ export const QuillRenderer = ({
             hideFormatting={hideFormatting}
             doc={docInfo.content}
             searchTerm={searchTerm}
-            cutoffLines={cutoffLines}
             customShowMoreButton={customShowMoreButton}
+            maxChars={maxChars}
           />
         );
       case 'markdown':
@@ -99,23 +99,23 @@ export const QuillRenderer = ({
                 : docInfo.content
             }
             searchTerm={searchTerm}
-            cutoffLines={cutoffLines}
             customClass={customClass}
             customShowMoreButton={customShowMoreButton}
+            maxChars={maxChars}
           />
         );
       default:
         return <>N/A</>;
     }
   }, [
-    cutoffLines,
     hideFormatting,
     searchTerm,
     docInfo.content,
     docInfo.format,
     markdownCutoffLength,
     customClass,
     customShowMoreButton,
+    maxChars,
   ]);
 
   if (containerClass) {

packages/commonwealth/client/scripts/views/pages/discussions/ThreadCard/ThreadCard.tsx

@@ -209,7 +209,7 @@ export const ThreadCard = ({
             <CWText type="b1" className="content-body">
               <QuillRenderer
                 doc={bodyText}
-                cutoffLines={4}
+                maxChars={500}
                 customShowMoreButton={
                   <CWText type="b1" className="show-more-btn">
                     Show more