Allow more lenient code fencing with new lines

__tests__/ExpensiMark-test.js

@@ -92,12 +92,30 @@ test('Test period replacements', () => {
 });
 
 test('Test code fencing', () => {
-    const codeFenceExampleMarkdown = '```\nconst javaScript = \'javaScript\'\n```';
+    let codeFenceExampleMarkdown = '```\nconst javaScript = \'javaScript\'\n```';
+    expect(parser.replace(codeFenceExampleMarkdown)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;</pre>');
+
+    codeFenceExampleMarkdown = '```const javaScript = \'javaScript\'\n```';
+    expect(parser.replace(codeFenceExampleMarkdown)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;</pre>');
+
+    codeFenceExampleMarkdown = '```\nconst javaScript = \'javaScript\'```';
+    expect(parser.replace(codeFenceExampleMarkdown)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;</pre>');
+
+    codeFenceExampleMarkdown = '```const javaScript = \'javaScript\'```';
     expect(parser.replace(codeFenceExampleMarkdown)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;</pre>');
 });
 
 test('Test code fencing with spaces and new lines', () => {
-    const codeFenceExample = '```\nconst javaScript = \'javaScript\'\n    const php = \'php\'\n```';
+    let codeFenceExample = '```\nconst javaScript = \'javaScript\'\n    const php = \'php\'\n```';
+    expect(parser.replace(codeFenceExample)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;<br>&#32;&#32;&#32;&#32;const&#32;php&#32;=&#32;&#x27;php&#x27;</pre>');
+
+    codeFenceExample = '```const javaScript = \'javaScript\'\n    const php = \'php\'\n```';
+    expect(parser.replace(codeFenceExample)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;<br>&#32;&#32;&#32;&#32;const&#32;php&#32;=&#32;&#x27;php&#x27;</pre>');
+
+    codeFenceExample = '```\nconst javaScript = \'javaScript\'\n    const php = \'php\'```';
+    expect(parser.replace(codeFenceExample)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;<br>&#32;&#32;&#32;&#32;const&#32;php&#32;=&#32;&#x27;php&#x27;</pre>');
+
+    codeFenceExample = '```const javaScript = \'javaScript\'\n    const php = \'php\'```';
     expect(parser.replace(codeFenceExample)).toBe('<pre>const&#32;javaScript&#32;=&#32;&#x27;javaScript&#x27;<br>&#32;&#32;&#32;&#32;const&#32;php&#32;=&#32;&#x27;php&#x27;</pre>');
 });
 
@@ -122,7 +140,16 @@ test('Test inline code blocks inside ExpensiMark', () => {
 });
 
 test('Test code fencing with ExpensiMark syntax inside', () => {
-    const codeFenceExample = '```\nThis is how you can write ~strikethrough~, *bold*, _italics_, and [links](https://www.expensify.com)\n```';
+    let codeFenceExample = '```\nThis is how you can write ~strikethrough~, *bold*, _italics_, and [links](https://www.expensify.com)\n```';
+    expect(parser.replace(codeFenceExample)).toBe('<pre>This&#32;is&#32;how&#32;you&#32;can&#32;write&#32;~strikethrough~,&#32;*bold*,&#32;_italics_,&#32;and&#32;[links](https://www.expensify.com)</pre>');
+
+    codeFenceExample = '```This is how you can write ~strikethrough~, *bold*, _italics_, and [links](https://www.expensify.com)\n```';
+    expect(parser.replace(codeFenceExample)).toBe('<pre>This&#32;is&#32;how&#32;you&#32;can&#32;write&#32;~strikethrough~,&#32;*bold*,&#32;_italics_,&#32;and&#32;[links](https://www.expensify.com)</pre>');
+
+    codeFenceExample = '```\nThis is how you can write ~strikethrough~, *bold*, _italics_, and [links](https://www.expensify.com)```';
+    expect(parser.replace(codeFenceExample)).toBe('<pre>This&#32;is&#32;how&#32;you&#32;can&#32;write&#32;~strikethrough~,&#32;*bold*,&#32;_italics_,&#32;and&#32;[links](https://www.expensify.com)</pre>');
+
+    codeFenceExample = '```This is how you can write ~strikethrough~, *bold*, _italics_, and [links](https://www.expensify.com)```';
     expect(parser.replace(codeFenceExample)).toBe('<pre>This&#32;is&#32;how&#32;you&#32;can&#32;write&#32;~strikethrough~,&#32;*bold*,&#32;_italics_,&#32;and&#32;[links](https://www.expensify.com)</pre>');
 });
 

lib/ExpensiMark.js

@@ -24,16 +24,16 @@ export default class ExpensiMark {
                 name: 'codeFence',
 
                 // < is a backtick symbol we are matching on three of them before then after a new line character
-                regex: /```\n((?:(?!```)[\s\S])+)\n```/g,
+                regex: /(```[\n]?)((?:(?![\n]?```)[\s\S])+)([\n]?```)/g,
 
                 // We're using a function here to perform an additional replace on the content
                 // inside the backticks because Android is not able to use <pre> tags and does
                 // not respect whitespace characters at all like HTML does. We do not want to mess
                 // with the new lines here since they need to be converted into <br>. And we don't
                 // want to do this anywhere else since that would break HTML.
                 // &nbsp; will create styling issues so use &#32;
-                replacement: (match, firstCapturedGroup) => {
-                    const group = firstCapturedGroup.replace(/(?:(?![\n\r])\s)/g, '&#32;');
+                replacement: (match, _, textWithinFences) => {
+                    const group = textWithinFences.replace(/(?:(?![\n\r])\s)/g, '&#32;');
                     return `<pre>${group}</pre>`;
                 },
             },