Merge pull request #2746 from ByteLan/release

fix: MarkdownRender table duplicate column elements

packages/semi-ui/markdownRender/__test__/markdown.test.js

@@ -42,4 +42,62 @@ describe(`MarkdownRender`, () => {
         expect(render.exists(`.${BASE_CLASS_PREFIX}-table-thead`)).toEqual(true);
         expect(render.exists(`.${BASE_CLASS_PREFIX}-table-tbody`)).toEqual(true);
     });
+
+    it(`test table with bold header`, async () => {
+        const content = `
+        | Name | **Brand** | Count | **Price** |
+        | - | :- | -: | :-: |
+        | Book | Semi | 10 | ￥100 |
+        | Pen | Semi Design | 20 | ￥200 |
+        `;
+
+        const render = mount(
+            <MarkdownRender raw={content} />
+        );
+
+        // check if has table container
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-container`)).toEqual(true);
+        // check if has table head & body
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-thead`)).toEqual(true);
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-tbody`)).toEqual(true);
+        // check has row is two
+        expect(render.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`).length).toBe(2);
+        // exist 'Semi Design' text
+        expect(render.contains('Semi Design')).toEqual(true);
+        // exist 'Semi' text
+        expect(render.contains('Semi')).toEqual(true);
+        // exist '￥100' text
+        expect(render.contains('￥100')).toEqual(true);
+        // exist '￥200' text
+        expect(render.contains('￥200')).toEqual(true);
+    });
+
+    it(`test table with bold and component header`, async () => {
+        const content = `
+        | Name | <h1>Brand</h1> | Count | **Price** |
+        | - | :- | -: | :-: |
+        | Book | Semi | 10 | ￥100 |
+        | Pen | Semi Design | 20 | ￥200 |
+        `;
+
+        const render = mount(
+            <MarkdownRender raw={content} format="mdx"/>
+        );
+
+        // check if has table container
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-container`)).toEqual(true);
+        // check if has table head & body
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-thead`)).toEqual(true);
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-tbody`)).toEqual(true);
+        // check has row is two
+        expect(render.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`).length).toBe(2);
+        // exist 'Semi Design' text
+        expect(render.contains('Semi Design')).toEqual(true);
+        // exist 'Semi' text
+        expect(render.contains('Semi')).toEqual(true);
+        // exist '￥100' text
+        expect(render.contains('￥100')).toEqual(true);
+        // exist '￥200' text
+        expect(render.contains('￥200')).toEqual(true);
+    });
 });

packages/semi-ui/markdownRender/_story/markdownRender.stories.jsx

@@ -35,6 +35,39 @@ export const Table = ()=>{
     `} components={semiComponents}/>
 }
 
+export const TableWithBoldHeader = ()=>{
+    return <MarkdownRender raw={`
+| a | **b**  |  c |  **d**  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 11 | 22 | 33 | 44 |
+| 111 | 222 | 333 | 444 |
+| 1111 | 2222 | 3333 | 4444 |
+    `} components={semiComponents}/>
+}
+
+export const TableWithComponentHeader = ()=>{
+    return <MarkdownRender raw={`
+| a | <h1>b</h1>  |  c |  **d**  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 11 | 22 | 33 | 44 |
+| 111 | 222 | 333 | 444 |
+| 1111 | 2222 | 3333 | 4444 |
+    `} components={semiComponents} format="mdx"/>
+}
+
+export const TableWithComponent = ()=>{
+    return <MarkdownRender raw={`
+| a | <h1>b</h1>  |  c |  **d**  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 11 | <h4>22</h4> | <h3>33</h3> | <h2>44</h2> |
+| <h3>111</h3> | ![Semi Design](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg) | 333 | <h2>444</h2> |
+| 1111 | 2222 | 3333 | 4444 |
+    `} components={semiComponents} format="mdx"/>
+}
+
 export const WithSymbol = ()=>{
     return <MarkdownRender raw={`
 test \\\\{ cxode } test

packages/semi-ui/markdownRender/components/table.tsx

@@ -13,25 +13,24 @@ const table = (props: PropsWithChildren<TableProps>) => {
     const columnsFiber = toArray(get(children[0], 'props.children.props.children'));
     const dataFiber = toArray(get(children[1], 'props.children'));
 
-    const titles: string[] = columnsFiber.map(item => item?.props?.children || "");
+    const titlesColumns = columnsFiber.map((column, i) => {
+        return {
+            dataIndex: String(i),
+            title: column?.props?.children || ""
+        };
+    });
     const tableDataSource: any[] = [];
     for (let i = 0;i < dataFiber.length;i++) {
         let item: Record<string, string> = {
             key: String(i)
         };
         dataFiber[i]?.props.children?.forEach?.((child, index) => {
-            item[titles[index]] = child?.props?.children ?? "";
+            item[String(index)] = child?.props?.children ?? "";
         });
         tableDataSource.push(item);
     }
 
-
-    return <Table dataSource={tableDataSource} columns={titles.map(title => {
-        return {
-            title,
-            dataIndex: title
-        };
-    })} {...omit(props, 'children')}/>;
+    return <Table dataSource={tableDataSource} columns={titlesColumns} {...omit(props, 'children')}/>;
 };
 
 export default table;