Skip to content

Fix markdown table parsing, selection, and empty cell rendering #893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chaehyun2 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix markdown table parsing, selection, and empty cell rendering #893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ae58b0
Fix markdown table parsing and selection on web
Mar 20, 2026
e34e764
Fix empty table cell height collapse
Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/happy-app/sources/components/markdown/MarkdownView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const MarkdownView = React.memo((props: {
} else if (block.type === 'options') {
return <RenderOptionsBlock items={block.items} key={index} first={index === 0} last={index === blocks.length - 1} selectable={selectable} onOptionPress={props.onOptionPress} />;
} else if (block.type === 'table') {
return <RenderTableBlock headers={block.headers} rows={block.rows} key={index} first={index === 0} last={index === blocks.length - 1} />;
return <RenderTableBlock headers={block.headers} rows={block.rows} key={index} first={index === 0} last={index === blocks.length - 1} selectable={selectable} />;
} else {
return null;
}
Expand Down Expand Up @@ -235,7 +235,8 @@ function RenderTableBlock(props: {
headers: string[],
rows: string[][],
first: boolean,
last: boolean
last: boolean,
selectable: boolean
}) {
const columnCount = props.headers.length;
const rowCount = props.rows.length;
Expand All @@ -261,7 +262,7 @@ function RenderTableBlock(props: {
>
{/* Header cell for this column */}
<View style={[style.tableCell, style.tableHeaderCell, style.tableCellFirst]}>
<Text style={style.tableHeaderText}>{header}</Text>
<Text selectable={props.selectable} style={style.tableHeaderText}>{header}</Text>
</View>
{/* Data cells for this column */}
{props.rows.map((row, rowIndex) => (
Expand All @@ -272,7 +273,7 @@ function RenderTableBlock(props: {
isLastRow(rowIndex) && style.tableCellLast
]}
>
<Text style={style.tableCellText}>{row[colIndex] ?? ''}</Text>
<Text selectable={props.selectable} style={style.tableCellText}>{row[colIndex] ?? ''}</Text>
</View>
))}
</View>
Expand Down Expand Up @@ -526,6 +527,7 @@ const style = StyleSheet.create((theme) => ({
borderBottomWidth: 1,
borderBottomColor: theme.colors.divider,
alignItems: 'flex-start',
minHeight: 40, // padding (8+8) + lineHeight (24) to prevent empty cell collapse
},
tableCellFirst: {
borderTopWidth: 0,
Expand Down
17 changes: 6 additions & 11 deletions packages/happy-app/sources/components/markdown/parseMarkdownBlock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,11 @@ function parseTable(lines: string[], startIndex: number): { table: MarkdownBlock
return { table: null, nextIndex: startIndex };
}

// Extract header cells from the first line, filtering out empty cells that may result from leading/trailing pipes
const headerLine = tableLines[0].trim();
// Extract header cells from the first line, stripping leading/trailing pipes but preserving empty interior cells
const headerLine = tableLines[0].trim().replace(/^\||\|$/g, '');
const headers = headerLine
.split('|')
.map(cell => cell.trim())
.filter(cell => cell.length > 0);
.map(cell => cell.trim());

if (headers.length === 0) {
return { table: null, nextIndex: startIndex };
Expand All @@ -39,15 +38,11 @@ function parseTable(lines: string[], startIndex: number): { table: MarkdownBlock
for (let i = 2; i < tableLines.length; i++) {
const rowLine = tableLines[i].trim();
if (rowLine.startsWith('|')) {
const rowCells = rowLine
const rowCells = rowLine.replace(/^\||\|$/g, '')
.split('|')
.map(cell => cell.trim())
.filter(cell => cell.length > 0);
.map(cell => cell.trim());

// Include rows that contain actual content, filtering out empty rows
if (rowCells.length > 0) {
rows.push(rowCells);
}
rows.push(rowCells);
}
}

Expand Down