Markdown: unicode dashes in table syntax (#272)

Author: platypii

package.json

@@ -56,34 +56,34 @@
   },
   "dependencies": {
     "hightable": "0.17.2",
-    "hyparquet": "1.16.2",
+    "hyparquet": "1.17.1",
     "hyparquet-compressors": "1.1.1",
     "icebird": "0.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "9.29.0",
-    "@storybook/react-vite": "9.0.13",
+    "@eslint/js": "9.30.1",
+    "@storybook/react-vite": "9.0.15",
     "@testing-library/react": "16.3.0",
-    "@types/node": "24.0.4",
+    "@types/node": "24.0.10",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@vitejs/plugin-react": "4.6.0",
     "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.29.0",
+    "eslint": "9.30.1",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.20",
-    "eslint-plugin-storybook": "9.0.13",
-    "globals": "16.2.0",
+    "eslint-plugin-storybook": "9.0.15",
+    "globals": "16.3.0",
     "jsdom": "26.1.0",
     "nodemon": "3.1.10",
     "npm-run-all": "4.1.5",
-    "storybook": "9.0.13",
+    "storybook": "9.0.15",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.35.0",
-    "vite": "6.3.5",
+    "typescript-eslint": "8.35.1",
+    "vite": "7.0.1",
     "vitest": "3.2.4"
   },
   "eslintConfig": {

src/components/Markdown/Markdown.test.tsx

@@ -512,4 +512,28 @@ describe('Markdown with tables', () => {
     expect(getByText('Cell with | escaped pipe')).toBeDefined()
     expect(getByText('Normal cell')).toBeDefined()
   })
+
+  it('renders a table even with unicode en dash', () => {
+    const text = 'Header 1 | Header 2\n–|–\nRow 1 | Data 1\nRow 2 | Data 2'
+    const { getByText, getByRole } = render(<Markdown text={text} />)
+    expect(getByRole('table')).toBeDefined()
+    expect(getByText('Header 1')).toBeDefined()
+    expect(getByText('Header 2')).toBeDefined()
+    expect(getByText('Row 1')).toBeDefined()
+    expect(getByText('Data 1')).toBeDefined()
+    expect(getByText('Row 2')).toBeDefined()
+    expect(getByText('Data 2')).toBeDefined()
+  })
+
+  it('renders a table even with unicode em dash', () => {
+    const text = 'Header 1 | Header 2\n—|—\nRow 1 | Data 1\nRow 2 | Data 2'
+    const { getByText, getByRole } = render(<Markdown text={text} />)
+    expect(getByRole('table')).toBeDefined()
+    expect(getByText('Header 1')).toBeDefined()
+    expect(getByText('Header 2')).toBeDefined()
+    expect(getByText('Row 1')).toBeDefined()
+    expect(getByText('Data 1')).toBeDefined()
+    expect(getByText('Row 2')).toBeDefined()
+    expect(getByText('Data 2')).toBeDefined()
+  })
 })

src/components/Markdown/Markdown.tsx

@@ -118,7 +118,7 @@ function parseMarkdown(text: string): Token[] {
       const sepLine = lines[i + 1] ?? ''
       // Check if the next line is a valid table separator
       // Extended markdown alignment syntax: |:--|, |:--:|, |--:|
-      const tableSepRegex = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/
+      const tableSepRegex = /^\s*\|?\s*:?[-–—]+:?\s*(\|\s*:?[-–—]+:?\s*)*\|?\s*$/
       if (sepLine.includes('|') && tableSepRegex.test(sepLine)) {
         // collect header cells
         const headerCells = splitTableRow(line)

table.md

@@ -0,0 +1,34 @@
+
+# Test Tables with Unicode Dashes
+
+## Regular dash table
+Header 1 | Header 2
+-|-
+Row 1 | Data 1
+Row 2 | Data 2
+
+## En dash table (–)
+Header 1 | Header 2
+–|–
+Row 1 | Data 1
+Row 2 | Data 2
+
+## Em dash table (—)
+Header 1 | Header 2
+—|—
+Row 1 | Data 1
+Row 2 | Data 2
+
+## Mixed dashes table
+Header 1 | Header 2 | Header 3
+-|–|—
+Row 1 | Data 1 | Data 1
+Row 2 | Data 2 | Data 2
+
+## Original Table
+
+| Name     | Age | Occupation     |
+|----------|-----|----------------|
+| Alice    | 30  | Engineer       |
+| Bob      | 25  | Designer       |
+| Charlie  | 35  | Product Manager|