Keep line breaks in quoted messages

resolves #4345

CHANGELOG.md

@@ -17,6 +17,7 @@
 - "Disappearing Messages" dialog not reflecting the actual current value #4327
 - accessibility: make settings keyboard-navigable #4319
 - Fix documentation for --allow-unsafe-core-replacement #4341
+- fix missing linebreaks in quotes #4345
 
 <a id="1_48_0"></a>
 

packages/frontend/src/components/message/Message.tsx

@@ -806,6 +806,7 @@ export const Quote = ({
               }
               disableJumbomoji
               nonInteractiveContent
+              isQuote={true}
             />
           </div>
         </div>

packages/frontend/src/components/message/MessageBody.tsx

@@ -10,6 +10,7 @@ function MessageBody({
   text,
   disableJumbomoji,
   nonInteractiveContent = false,
+  isQuote = false,
 }: {
   text: string
   disableJumbomoji?: boolean
@@ -18,6 +19,7 @@ function MessageBody({
    * display them as regular text.
    */
   nonInteractiveContent?: boolean
+  isQuote?: boolean
 }): JSX.Element {
   if (text.length >= UPPER_LIMIT_FOR_PARSED_MESSAGES) {
     return <>{text}</>
@@ -34,7 +36,7 @@ function MessageBody({
       )
     }
   }
-  return message2React(emojifiedText, nonInteractiveContent)
+  return message2React(emojifiedText, nonInteractiveContent, isQuote)
 }
 const trimRegex = /^[\s\uFEFF\xA0\n\t]+|[\s\uFEFF\xA0\n\t]+$/g
 

packages/frontend/src/components/message/MessageMarkdown.tsx

@@ -30,6 +30,9 @@ SettingsStoreInstance.subscribe(newState => {
   }
 })
 
+/**
+ * convert elements to HTML elements
+ */
 function renderElement(elm: ParsedElement, key?: number): JSX.Element {
   switch (elm.t) {
     case 'CodeBlock':
@@ -98,8 +101,11 @@ function renderElement(elm: ParsedElement, key?: number): JSX.Element {
   }
 }
 
-/** render in preview mode for ChatListItem summary and for quoted messages,
- *  not interactive (links can not be clicked) just looks more similar to the message in the chatview/message-list */
+/**
+ * render in preview mode for ChatListItem summary,
+ * not interactive (links can not be clicked) just
+ * looks more similar to the message in the chatview/message-list
+ */
 function renderElementPreview(elm: ParsedElement, key?: number): JSX.Element {
   switch (elm.t) {
     case 'CodeBlock':
@@ -144,10 +150,71 @@ function renderElementPreview(elm: ParsedElement, key?: number): JSX.Element {
   }
 }
 
-export function message2React(message: string, preview: boolean): JSX.Element {
+/**
+ * render in preview mode for quoted messages
+ *
+ * not interactive (links can not be clicked),
+ * but line breaks are preserved
+ */
+function renderElementQuotePreview(
+  elm: ParsedElement,
+  key?: number
+): JSX.Element {
+  switch (elm.t) {
+    case 'CodeBlock':
+    case 'InlineCode':
+      return (
+        <code className='mm-inline-code' key={key}>
+          {elm.c.content}
+        </code>
+      )
+
+    case 'StrikeThrough':
+      return <s key={key}>{elm.c.map(renderElementQuotePreview)}</s>
+
+    case 'Italics':
+      return <i key={key}>{elm.c.map(renderElementQuotePreview)}</i>
+
+    case 'Bold':
+      return <b key={key}>{elm.c.map(renderElementQuotePreview)}</b>
+
+    case 'Link':
+      return <span key={key}>{elm.c.destination.target}</span>
+
+    case 'LabeledLink':
+      return (
+        <span key={key}>{elm.c.label.map(renderElementQuotePreview)} </span>
+      )
+
+    case 'Linebreak':
+      return <span key={key}>{'\n'}</span>
+
+    case 'Tag':
+    case 'EmailAddress':
+    case 'BotCommandSuggestion':
+    case 'Text':
+      return <span key={key}>{elm.c}</span>
+    default:
+      //@ts-ignore
+      log.error(`type ${elm.t} not known/implemented yet`, elm)
+      return (
+        <div key={key} style={{ color: 'red' }}>
+          {JSON.stringify(elm)}
+        </div>
+      )
+  }
+}
+
+export function message2React(
+  message: string,
+  preview: boolean,
+  quoteView: boolean = false
+): JSX.Element {
   try {
     const elements = parseMessage(message)
-    return preview ? (
+    return quoteView ? (
+      <div className='truncated'>{elements.map(renderElementQuotePreview)}</div>
+    ) : preview ? (
       <div className='truncated'>{elements.map(renderElementPreview)}</div>
     ) : (
       <>{elements.map(renderElement)}</>