FIX - Color not applied in table header (#229)

Signed-off-by: RaenonX <[email protected]>

src/components/elements/markdown/components.ts

@@ -6,7 +6,7 @@ import {renderLink} from './components/link';
 import {renderListItem} from './components/listItem';
 import {renderParagraph} from './components/paragraph';
 import {renderStrong} from './components/strong';
-import {renderTable, renderTableCell, renderTableRow} from './components/table';
+import {renderTable, renderTableCell, renderTableHeader, renderTableRow} from './components/table';
 
 
 // Key correspondences:
@@ -25,6 +25,7 @@ export const components: Components = {
   h6: renderHeading,
   strong: renderStrong,
   table: renderTable,
+  th: renderTableHeader,
   tr: renderTableRow,
   td: renderTableCell,
   li: renderListItem,

src/components/elements/markdown/components/table.tsx

@@ -33,6 +33,14 @@ export const renderTable = ({children, node}: MarkdownComponentProps) => {
   return <table>{children}</table>;
 };
 
+export const renderTableHeader = ({children}: MarkdownComponentProps) => (
+  <th>
+    <TextChildren>
+      {children}
+    </TextChildren>
+  </th>
+);
+
 export const renderTableRow: TableRowComponent = ({children}) => {
   idxCounter = 0;
 

src/components/elements/markdown/main.test.tsx

@@ -143,6 +143,16 @@ describe('Markdown', () => {
   });
 
   it('colors text in table', async () => {
+    const markdown = 'head | ::[red]col 2::\n:---: | :---:\nX | Y';
+
+    renderReact(() => <Markdown>{markdown}</Markdown>);
+
+    const headCell = screen.getByText('col 2', {selector: 'span'});
+    expect(headCell).toHaveStyle({color: 'red'});
+    expect(headCell.parentElement?.tagName).toBe('TH');
+  });
+
+  it('colors text in table header', async () => {
     const markdown = 'head | col 2\n:---: | :---:\nX | ::[red]Y::';
 
     renderReact(() => <Markdown>{markdown}</Markdown>);