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

@@ -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');

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