Fix tests

parser/index.ts

@@ -160,7 +160,7 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, Range[]] {
 }
 
 function sortRanges(ranges: Range[]) {
-  return ranges.sort((a, b) => a[1] - b[1] || b[2] - a[2] || a[0].localeCompare(b[0]) || 0); // sort by location to properly handle bold+italic
+  return ranges.sort((a, b) => a[1] - b[1] || b[2] - a[2] || 0); // sort by location to properly handle bold+italic
 }
 
 function parseExpensiMarkToRanges(markdown: string): Range[] {

src/__tests__/index.test.tsx

@@ -13,11 +13,11 @@ const toBeParsedAsHTML: MatcherFunction<[expectedHTML: string]> = function (actu
     throw new Error('These must be of type number!');
   }
   let expected = expectedHTML;
-  const [, ranges]: [string, Array<[MarkdownType, number, number]>] = (global as any).parseMarkdownToTextAndRanges(actual);
-  const markdownRanges = ranges.map((range) => {
+  const ranges = global.parseExpensiMarkToRanges(actual);
+  const markdownRanges: MarkdownTypes.MarkdownRange[] = ranges.map((range) => {
     const [type, startIndex, length] = range;
     return {
-      type,
+      type: type as MarkdownType,
       startIndex,
       length,
     };
@@ -73,15 +73,15 @@ test('strikethrough', () => {
 
 describe('mention', () => {
   test('normal', () => {
-    expect('@here Hello!').toBeParsedAsHTML('<span class="mention">@here</span> Hello!');
+    expect('@here Hello!').toBeParsedAsHTML('<span class="mention-here">@here</span> Hello!');
   });
 
   test('with punctation marks', () => {
-    expect('@here!').toBeParsedAsHTML('<span class="mention">@here</span>!');
+    expect('@here!').toBeParsedAsHTML('<span class="mention-here">@here</span>!');
   });
 
   test('at the beginning of a heading', () => {
-    expect('# @here').toBeParsedAsHTML('<span class="syntax"># </span><span class="h1"><span class="mention">@here</span></span>');
+    expect('# @here').toBeParsedAsHTML('<span class="syntax"># </span><span class="mention-here"><span class="h1">@here</span></span>');
   });
 });
 
@@ -95,7 +95,7 @@ describe('mention-user', () => {
   });
 
   test('at the beginning of a heading', () => {
-    expect('# @[email protected]').toBeParsedAsHTML('<span class="syntax"># </span><span class="h1"><span class="mention-user">@[email protected]</span></span>');
+    expect('# @[email protected]').toBeParsedAsHTML('<span class="syntax"># </span><span class="mention-user"><span class="h1">@[email protected]</span></span>');
   });
 });
 
@@ -111,7 +111,9 @@ describe('link', () => {
   });
 
   test('link with same label as href', () => {
-    expect('[https://example.com](https://example.com)').toBeParsedAsHTML('<span class="link">[https://example.co</span>m](https://example.com)');
+    expect('[https://example.com](https://example.com)').toBeParsedAsHTML(
+      '<span class="syntax">[</span>https://example.com<span class="syntax">](</span><span class="link">https://example.com</span><span class="syntax">)</span>',
+    );
   });
 
   test('link with query string', () => {
@@ -133,19 +135,27 @@ describe('email', () => {
 
 describe('email with same label as address', () => {
   test('label and address without "mailto:"', () => {
-    expect('[[email protected]]([email protected])').toBeParsedAsHTML('<span class="link">[[email protected]</span>m]([email protected])');
+    expect('[[email protected]]([email protected])').toBeParsedAsHTML(
+      '<span class="syntax">[</span>[email protected]<span class="syntax">](</span><span class="link">[email protected]</span><span class="syntax">)</span>',
+    );
   });
 
   test('label with "mailto:"', () => {
-    expect('[mailto:[email protected]]([email protected])').toBeParsedAsHTML('<span class="link">[mailto:someone@exa</span>mple.com]([email protected])');
+    expect('[mailto:[email protected]]([email protected])').toBeParsedAsHTML(
+      '<span class="syntax">[</span>mailto:[email protected]<span class="syntax">](</span><span class="link">[email protected]</span><span class="syntax">)</span>',
+    );
   });
 
   test('address with "mailto:"', () => {
-    expect('[[email protected]](mailto:[email protected])').toBeParsedAsHTML('<span class="link">[[email protected]</span>m](mailto:[email protected])');
+    expect('[[email protected]](mailto:[email protected])').toBeParsedAsHTML(
+      '<span class="syntax">[</span>[email protected]<span class="syntax">](</span><span class="link">mailto:[email protected]</span><span class="syntax">)</span>',
+    );
   });
 
   test('label and address with "mailto:"', () => {
-    expect('[mailto:[email protected]](mailto:[email protected])').toBeParsedAsHTML('<span class="link">[mailto:someone@exa</span>mple.com](mailto:[email protected])');
+    expect('[mailto:[email protected]](mailto:[email protected])').toBeParsedAsHTML(
+      '<span class="syntax">[</span>mailto:[email protected]<span class="syntax">](</span><span class="link">mailto:[email protected]</span><span class="syntax">)</span>',
+    );
   });
 });
 
@@ -154,7 +164,7 @@ test('inline code', () => {
 });
 
 test('codeblock', () => {
-  expect('```\nHello world!\n```').toBeParsedAsHTML('<span class="syntax">```</span><br><span class="pre">Hello world!\n</span><span class="syntax">```</span>');
+  expect('```\nHello world!\n```').toBeParsedAsHTML('<span class="syntax">```</span><span class="pre"><br>Hello world!<br></span><span class="syntax">```</span>');
 });
 
 describe('quote', () => {

src/web/parserUtils.ts

@@ -133,19 +133,19 @@ function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownS
       addStyling(span, range.type, markdownStyle);
     }
 
-    if (stack.length > 0 && nextRangeStartIndex < endOfCurrentRange) {
+    if (stack.length > 0 && nextRangeStartIndex < endOfCurrentRange && range.type !== 'syntax') {
       // tag nesting
       currentRoot.node.appendChild(span);
       nestedStack.push({node: span, endIndex: endOfCurrentRange});
       lastRangeEndIndex = range.startIndex;
     } else {
-      addSubstringAsTextNode(span, text, range.startIndex, endOfCurrentRange);
+      addTextWithNewlines(span, text, range.startIndex, endOfCurrentRange);
       currentRoot.node.appendChild(span);
       lastRangeEndIndex = endOfCurrentRange;
 
       // end of tag nesting
       while (nestedStack.length - 1 > 0 && nextRangeStartIndex >= currentRoot.endIndex) {
-        addSubstringAsTextNode(currentRoot.node, text, lastRangeEndIndex, currentRoot.endIndex);
+        addTextWithNewlines(currentRoot.node, text, lastRangeEndIndex, currentRoot.endIndex);
         const prevRoot = nestedStack.pop();
         if (!prevRoot) {
           break;
@@ -176,6 +176,7 @@ function parseText(target: HTMLElement, text: string, markdownStyle: PartialMark
     cursorPosition = CursorUtils.getCurrentCursorPosition(target).start;
   }
   const ranges = global.parseExpensiMarkToRanges(text);
+
   const markdownRanges: MarkdownRange[] = ranges.map((range) => {
     const [type, startIndex, length] = range;
     return {