fix: escape pipe operators in table values (#286)

components/common.js

@@ -1,4 +1,5 @@
 import { Text } from '@asyncapi/generator-react-sdk';
+import { FormatHelpers } from '../helpers/format';
 
 export function Header({ type = 1, childrenContent = '' }) {
   const hashes = Array(type).fill('#').join('');
@@ -25,7 +26,7 @@ export function ListItem({ type = '*', childrenContent = '' }) {
 }
 
 export function Table({ headers = [], rowRenderer = () => [], data = [] }) {
-  const row = (entry, idx) => <Text key={idx}>{`| ${rowRenderer(entry).join(' | ')} |`}</Text>;
+  const row = (entry, idx) => <Text key={idx}>{`| ${rowRenderer(entry).map(FormatHelpers.escapePipes).join(' | ')} |`}</Text>;
   return (
     <>
       <TableHead headers={headers} />
@@ -47,7 +48,7 @@ export function TableHead({ headers = [] }) {
 }
 
 export function TableRow({ rowRenderer = () => [], entry }) {
-  return <Text>{`| ${rowRenderer(entry).join(' | ')} |`}</Text>;
+  return <Text>{`| ${rowRenderer(entry).map(FormatHelpers.escapePipes).join(' | ')} |`}</Text>;
 }
 
 export function CodeBlock({ language = 'json', childrenContent = '' }) {

helpers/format.js

@@ -57,4 +57,8 @@ export class FormatHelpers {
     }
     return str;
   }
+
+  static escapePipes(str) {
+    return (str || '').replace(/\|/g, '\\|');
+  }
 }

test/components/common.test.js

@@ -0,0 +1,46 @@
+import { render } from '@asyncapi/generator-react-sdk';
+
+import { Table, TableRow } from '../../components/common';
+
+describe('Table', () => {
+  it('should escape pipe operators in cell values', () => {
+    const headers = ['Name', 'Type', 'Description', 'Value', 'Constraints', 'Notes'];
+
+    const data = [[
+      '(root)',
+      'string',
+      '-',
+      'allowed (`"foo|bar|baz"`)',
+      'pattern (`/foo\\|bar/`)',
+      '-',
+    ]];
+    const rowRenderer = (it) => it;
+
+    const expected = `
+| Name | Type | Description | Value | Constraints | Notes |
+|---|---|---|---|---|---|
+| (root) | string | - | allowed (\`"foo\\|bar\\|baz"\`) | pattern (\`/foo\\\\|bar/\`) | - |
+    `;
+
+    const result = render(<Table headers={headers} rowRenderer={rowRenderer} data={data} />);
+    expect(result.trim()).toEqual(expected.trim());
+  });
+});
+
+describe('Table Row', () => {
+  it('should escape pipe operators in row values', () => {
+    const rowRenderer = () => [
+      '(root)',
+      'string',
+      '-',
+      'allowed (`"foo|bar|baz"`)',
+      'pattern (`/foo\\|bar/`)',
+      '-',
+    ];
+
+    const expected = '| (root) | string | - | allowed (`"foo\\|bar\\|baz"`) | pattern (`/foo\\\\|bar/`) | - |';
+
+    const result = render(<TableRow rowRenderer={rowRenderer} />);
+    expect(result.trim()).toEqual(expected.trim());
+  });
+});

test/helpers/format.test.js

@@ -44,4 +44,18 @@ describe('FormatHelpers', () => {
       expect(result).toEqual('`test`');
     });
   });
-});
+
+  describe('.escapePipes', () => {
+    test.each`
+  input                           | expected
+  ${(/foo|bar/).toString()}       | ${'/foo\\|bar/'}
+  ${(/foo\|bar/).toString()}      | ${'/foo\\\\|bar/'}
+  ${(/foo\\|bar/).toString()}     | ${'/foo\\\\\\|bar/'}
+  ${(/foo\|bar|baz/).toString()}  | ${'/foo\\\\|bar\\|baz/'}
+  ${undefined}                    | ${''}
+  ${'allowed (`"foo|bar|baz"`)'}  | ${'allowed (`"foo\\|bar\\|baz"`)'}
+`('returns $expected when input is $input', ({input, expected}) => {
+      expect(FormatHelpers.escapePipes(input)).toBe(expected);
+    });
+  });
+});