From 60df49652eda8cdc582b68e6a2de6de620fe529c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Tue, 30 Jan 2024 09:42:41 +0100
Subject: [PATCH] MM-42628 Fix wrong spacing between header and lists when a
 inline image is used (#26040)

* Fix wrong spacing between header and lists when a inline image is used

* Fix test
---
 webapp/channels/src/utils/markdown/index.test.ts | 12 ++++--------
 webapp/channels/src/utils/markdown/renderer.tsx  |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/webapp/channels/src/utils/markdown/index.test.ts b/webapp/channels/src/utils/markdown/index.test.ts
index a2d09435e9..f239bfc44a 100644
--- a/webapp/channels/src/utils/markdown/index.test.ts
+++ b/webapp/channels/src/utils/markdown/index.test.ts
@@ -44,8 +44,7 @@ x^2 + y^2 = z^2
             const input = `- a
 - b
 - c`;
-            const expected = `<ul className="markdown__list">
-<li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ul>`;
+            const expected = '<ul className="markdown__list"><li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ul>';
 
             const output = format(input);
             expect(output).toBe(expected);
@@ -55,8 +54,7 @@ x^2 + y^2 = z^2
             const input = `1. a
 2. b
 3. c`;
-            const expected = `<ol className="markdown__list" style="counter-reset: list 0">
-<li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ol>`;
+            const expected = '<ol className="markdown__list" style="counter-reset: list 0"><li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ol>';
 
             const output = format(input);
             expect(output).toBe(expected);
@@ -66,8 +64,7 @@ x^2 + y^2 = z^2
             const input = `0. a
 1. b
 2. c`;
-            const expected = `<ol className="markdown__list" style="counter-reset: list -1">
-<li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ol>`;
+            const expected = '<ol className="markdown__list" style="counter-reset: list -1"><li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ol>';
 
             const output = format(input);
             expect(output).toBe(expected);
@@ -77,8 +74,7 @@ x^2 + y^2 = z^2
             const input = `999. a
 1. b
 1. c`;
-            const expected = `<ol className="markdown__list" style="counter-reset: list 998">
-<li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ol>`;
+            const expected = '<ol className="markdown__list" style="counter-reset: list 998"><li><span>a</span></li><li><span>b</span></li><li><span>c</span></li></ol>';
 
             const output = format(input);
             expect(output).toBe(expected);
diff --git a/webapp/channels/src/utils/markdown/renderer.tsx b/webapp/channels/src/utils/markdown/renderer.tsx
index dba82f795f..2633dc1bc4 100644
--- a/webapp/channels/src/utils/markdown/renderer.tsx
+++ b/webapp/channels/src/utils/markdown/renderer.tsx
@@ -235,7 +235,7 @@ export default class Renderer extends marked.Renderer {
             // style it properly. We need to use a CSS counter to tell the ::before elements which numbers to show.
             output += ` style="counter-reset: list ${start - 1}"`;
         }
-        output += `>\n${content}</${type}>`;
+        output += `>${content}</${type}>`;
 
         return output;
     }