From fbe9a75d4c7d2e0d80115f1a211adda6147beedd Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 18 Nov 2024 14:25:59 +0100
Subject: [PATCH] frontend: improve simple markup parsing

The SimpleMarkup component allows translations to contian a strong
element to emphasize parts of the text.

There is a bug that if the same translation contains newlines it
renders the strong element as text.

Changed to that the regex takes multiline into account.
---
 frontends/web/src/utils/markup.test.tsx | 18 +++++++++++++++++-
 frontends/web/src/utils/markup.tsx      |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontends/web/src/utils/markup.test.tsx b/frontends/web/src/utils/markup.test.tsx
index 0eb902753b..a9ec684684 100644
--- a/frontends/web/src/utils/markup.test.tsx
+++ b/frontends/web/src/utils/markup.test.tsx
@@ -20,11 +20,27 @@ import { MultilineMarkup, SimpleMarkup } from './markup';
 
 describe('SimpleMarkup', () => {
   it('contains a strong element with the text bar', () => {
-    const { container } = render(<SimpleMarkup tagName="p" markup="foo <strong>bar</strong> baz" />);
+    const { container } = render(<SimpleMarkup tagName="div" markup="foo <strong>bar</strong> baz" />);
     // container is a div that wraps whatever element that's being rendered
+    expect(container.firstElementChild?.nodeName).toBe('DIV');
+    expect(container.querySelector('strong')).toHaveTextContent('bar');
+  });
+  it('should ignore newlines', () => {
+    const { container } = render(<SimpleMarkup tagName="p" markup="foo <strong>bar</strong> baz.\n" />);
+    // container is a paragraph element that wraps whatever element that's being rendered
     expect(container.firstElementChild?.nodeName).toBe('P');
     expect(container.querySelector('strong')).toHaveTextContent('bar');
   });
+  it('should ignore newlines 2', () => {
+    const { container } = render(<SimpleMarkup tagName="p" markup="foo \n<strong>bar</strong>\n baz.\n" />);
+    expect(container.firstElementChild?.nodeName).toBe('P');
+    expect(container.querySelector('strong')).toHaveTextContent('bar');
+  });
+  it('should ignore newlines 3', () => {
+    const { container } = render(<SimpleMarkup tagName="p" markup="foo \n<strong>bar\n bar\n</strong>\n baz.\n" />);
+    expect(container.firstElementChild?.nodeName).toBe('P');
+    expect(container.querySelector('strong')).toHaveTextContent(/bar(.*)bar(.*)$/i);
+  });
   it('should but doesnt support multiple strong elements', () => {
     const { container } = render(<SimpleMarkup tagName="span" markup="<strong>foo</strong> <strong>bar</strong> <strong>baz</strong>" />);
     expect(container.firstElementChild?.nodeName).toBe('SPAN');
diff --git a/frontends/web/src/utils/markup.tsx b/frontends/web/src/utils/markup.tsx
index eb11722ea8..5b8559fd03 100644
--- a/frontends/web/src/utils/markup.tsx
+++ b/frontends/web/src/utils/markup.tsx
@@ -23,7 +23,7 @@ type TMarkupProps = {
     key?: string;
 } & React.HTMLAttributes<HTMLElement>;
 
-const captureStrongElement = /^(.*)<strong>(.*)<\/strong>(.*)$/;
+const captureStrongElement = /^(.*)<strong>(.*)<\/strong>(.*)$/m;
 
 /**
  * **SimpleMarkup** renders `foo <strong>bar</strong> baz` safely as