fix(mdxish): combine code tabs if separated by CLRF token \r\n (#1372)

[![PR App][icn]][demo] | Fix CX-3027
:-------------------:|:----------:

## 🧰 Changes

While investigating
[CX-3027](https://linear.app/readme-io/issue/CX-3027/multi-parameter-set-codetabs-render-as-separate-components-for),
I found that one of the cause of the code tabs separating was because
the raw document had CLRF new line tokens, so \r\n instead of only \n in
between the code blocks. I verified that this resulted in separate code
blocks in mdxish rendering, but seems like it's correctly tabbed in
legacy from looking at the resulting mdast trees.

The adjacency check in the code-tabs transformer only accounted for LF
(\n) line endings. CRLF adds an extra byte (\r) to the offset gap,
causing the check to fail and rendering each code block separately. So I
updated the check to also accept CRLF by allowing a gap of start.column
+ 1 when the blocks are still on consecutive lines (i.e., the extra byte
is \r, not a blank line)/

## 🧬 QA & Testing

Unfortunately, it's quite hard to visually test in an actual doc because
adding in the \r\n in the raw doc will render it literally, and I read
that this might be a Windows os specific thing & not Mac. The best way I
can think of is through the jest tests I created, which includes some
regression tests.

One regression check is to ensure the code blocks behaviour should
follow MDX & legacy, so testing multiple consecutive blocks, adding some
space / characters between the blocks, adding more than 1 line space
between, etc.

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

Author: eaglethrost

__tests__/lib/render-mdxish/CodeTabs.test.tsx

@@ -49,6 +49,28 @@ ${pythonCode}
       expect(buttons[0]).toHaveTextContent('C++');
       expect(buttons[1]).toHaveTextContent('Python');
     });
+
+    it('should render code tabs when there is a slash r (CRLF) character between the backticks', () => {
+      const mdSlash = '```python\nprint("hello")\n```\r\n```javascript\nconsole.log("hello")\n```';
+      const modSlash = renderMdxish(mdxish(mdSlash));
+      const { container } = render(<modSlash.default />);
+
+      expect(container.querySelector('div.CodeTabs')).toBeInTheDocument();
+      expect(container.querySelectorAll('div.CodeTabs_initial')).toHaveLength(1);
+
+      const buttons = container.querySelectorAll('button');
+      expect(buttons).toHaveLength(2);
+      expect(buttons[0]).toHaveTextContent('Python');
+      expect(buttons[1]).toHaveTextContent('JavaScript');
+    });
+
+    it('should render code tabs even when there are spaces after the first code block', () => {
+      const mdSpace = '```python\nprint("hello")\n```   \n```javascript\nconsole.log("hello")\n```';
+      const modSpace = renderMdxish(mdxish(mdSpace));
+      const { container } = render(<modSpace.default />);
+      expect(container.querySelector('div.CodeTabs')).toBeInTheDocument();
+      expect(container.querySelectorAll('div.CodeTabs_initial')).toHaveLength(1);
+    });
   });
 
   describe('given a mermaid diagram', () => {
@@ -161,4 +183,27 @@ ${mermaidCode}
       expect(buttons[1]).toHaveTextContent('Python');
     });
   });
+
+  describe('given non consecutive code blocks', () => {
+    it('should not combine 2 code blocks that are separated by 2 empty lines', () => {
+      const md = '```python\nprint("hello")\n```\n\n```javascript\nconsole.log("hello")\n```';
+      const mod = renderMdxish(mdxish(md));
+      const { container } = render(<mod.default />);
+      expect(container.querySelectorAll('div.CodeTabs_initial')).toHaveLength(2);
+    });
+
+    it('should not combine 2 code blocks that are separated by 2 empty lines with \\r\\n', () => {
+      const md = '```python\r\nprint("hello")\n```\r\n\r\n```javascript\nconsole.log("hello")\r\n```';
+      const mod = renderMdxish(mdxish(md));
+      const { container } = render(<mod.default />);
+      expect(container.querySelectorAll('div.CodeTabs_initial')).toHaveLength(2);
+    });
+
+    it('should not combine 2 code blocks that are separated by a new line and text before the code block', () => {
+      const md = '```python\nprint("hello")\n```\nhello```javascript\nconsole.log("hello")\n```';
+      const mod = renderMdxish(mdxish(md));
+      const { container } = render(<mod.default />);
+      expect(container.querySelectorAll('div.CodeTabs_initial')).toHaveLength(1);
+    });
+  });
 });

processor/transform/code-tabs.ts

@@ -28,8 +28,18 @@ const codeTabsTransformer =
         const sibling = parent.children[walker];
         if (!isCode(sibling)) break;
 
+        // Check that the two code blocks are truly adjacent (no blank lines or
+        // other content between them). The `gap` is the number of raw characters
+        // between the end of the previous block and the start of this one.
+        // For a LF-separated pair the gap equals `start.column` (the newline
+        // char(s) plus any indentation). CRLF line endings add one extra byte
+        // (\r) without advancing the line count, so we also accept
+        // `start.column + 1` provided the blocks are still on consecutive lines.
         const olderSibling = parent.children[walker - 1];
-        if (olderSibling.position.end.offset + sibling.position.start.column !== sibling.position.start.offset) break;
+        const gap = sibling.position.start.offset - olderSibling.position.end.offset;
+        const lineDiff = sibling.position.start.line - olderSibling.position.end.line;
+        const isCRLF = gap === sibling.position.start.column + 1 && lineDiff === 1;
+        if (gap !== sibling.position.start.column && !isCRLF) break;
 
         children.push(sibling);
         // eslint-disable-next-line no-plusplus