Add markdown table support

Author: timabell

android-load-example-notes.sh

@@ -1,3 +1,4 @@
 #!/bin/sh -v
 # To set up the android emulator with some data
 adb push example-notes /storage/self/primary/Documents/mdnx/
+adb push tests/snapshots/ /storage/self/primary/Documents/mdnx/snaps

android/app/src/main/java/co/rustworkshop/markdownneuraxis/ui/screens/FileViewScreen.kt

@@ -23,6 +23,8 @@ import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.graphics.Color
 import androidx.compose.material3.LocalContentColor
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.documentfile.provider.DocumentFile
 import co.rustworkshop.markdownneuraxis.io.readFileContent
 import co.rustworkshop.markdownneuraxis.io.resolveDocumentFile
@@ -131,8 +133,9 @@ private fun RenderBlockTree(
 ) {
     for (block in blocks) {
         RenderBlock(block, depth, onWikiLinkClick)
-        // List blocks handle their own children internally
-        if (block.kind != "list" && block.children.isNotEmpty()) {
+        // List and table blocks handle their own children internally
+        val handlesOwnChildren = block.kind in listOf("list", "table", "table_header_row", "table_row")
+        if (!handlesOwnChildren && block.children.isNotEmpty()) {
             RenderBlockTree(block.children, depth + 1, onWikiLinkClick)
         }
     }
@@ -299,6 +302,34 @@ private fun RenderBlock(block: Block, depth: Int, onWikiLinkClick: (String) -> U
         "thematic_break" -> {
             HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))
         }
+        "table" -> {
+            // Table container - calculate column count for consistent widths
+            val columnCount = block.children.firstOrNull()?.children?.size ?: 1
+            Column(
+                modifier = Modifier
+                    .padding(vertical = 8.dp)
+                    .border(1.dp, MaterialTheme.colorScheme.outline)
+            ) {
+                block.children.forEachIndexed { index, row ->
+                    RenderTableRow(row, columnCount, onWikiLinkClick)
+                    // Add divider between rows (not after last)
+                    if (index < block.children.size - 1) {
+                        HorizontalDivider(color = MaterialTheme.colorScheme.outline)
+                    }
+                }
+            }
+        }
+        "table_header_row", "table_row" -> {
+            // Rows are rendered via RenderTableRow, this handles standalone case
+            RenderTableRow(block, block.children.size, onWikiLinkClick)
+        }
+        "table_cell" -> {
+            // Standalone cell (shouldn't happen - rows handle cells)
+            RenderSegments(
+                segments = block.segments,
+                onWikiLinkClick = onWikiLinkClick
+            )
+        }
         else -> {
             Text(
                 text = segmentsToText(block.segments),
@@ -308,6 +339,54 @@ private fun RenderBlock(block: Block, depth: Int, onWikiLinkClick: (String) -> U
     }
 }
 
+@Composable
+private fun RenderTableRow(
+    block: Block,
+    columnCount: Int,
+    onWikiLinkClick: (String) -> Unit
+) {
+    val isHeader = block.kind == "table_header_row"
+    val cells = block.children
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(IntrinsicSize.Min)
+            .then(
+                if (isHeader) Modifier.background(MaterialTheme.colorScheme.surfaceVariant)
+                else Modifier
+            )
+    ) {
+        // Render each cell, padding to columnCount if needed
+        for (i in 0 until columnCount) {
+            if (i > 0) {
+                // Vertical divider between cells
+                VerticalDivider(
+                    modifier = Modifier.fillMaxHeight(),
+                    color = MaterialTheme.colorScheme.outline
+                )
+            }
+            Box(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(horizontal = 8.dp, vertical = 6.dp)
+            ) {
+                if (i < cells.size) {
+                    RenderSegments(
+                        segments = cells[i].segments,
+                        style = if (isHeader) {
+                            MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Bold)
+                        } else {
+                            MaterialTheme.typography.bodyMedium
+                        },
+                        onWikiLinkClick = onWikiLinkClick
+                    )
+                }
+            }
+        }
+    }
+}
+
 private fun parseDocument(content: String): List<Block>? {
     return try {
         val doc = DocumentHandle.fromString(content)

crates/markdown-neuraxis-cli/src/main.rs

@@ -225,6 +225,28 @@ impl App {
                     lines.push("---".to_string());
                     lines.push(String::new());
                 }
+                BlockKind::Table => {
+                    // Render table rows
+                    if let BlockContent::Children(children) = &block.content {
+                        for child in children {
+                            render_block(child, lines);
+                        }
+                    }
+                    lines.push(String::new());
+                }
+                BlockKind::TableRow { .. } => {
+                    // Collect cell contents
+                    let mut cells = Vec::new();
+                    if let BlockContent::Children(children) = &block.content {
+                        for child in children {
+                            cells.push(segments_to_plain_text(&child.segments));
+                        }
+                    }
+                    lines.push(format!("| {} |", cells.join(" | ")));
+                }
+                BlockKind::TableCell => {
+                    // Cells are rendered by TableRow
+                }
             }
         }
 

crates/markdown-neuraxis-dioxus/src/assets/solarized-light.css

@@ -899,3 +899,36 @@ hr {
     background: var(--base1);
     margin: 4px 0;
 }
+
+/* Table styles */
+.table {
+    border-collapse: collapse;
+    width: auto;
+}
+
+.table-container {
+    margin: 16px 0;
+}
+
+.table-header-row {
+    background-color: var(--base2);
+}
+
+.table-row {
+    background-color: var(--base3);
+}
+
+.table-row:hover {
+    background-color: var(--base2);
+}
+
+.table-cell {
+    border: 1px solid var(--base1);
+    padding: 8px 12px;
+    text-align: left;
+}
+
+.table-header-row .table-cell {
+    font-weight: 600;
+    color: var(--base02);
+}

crates/markdown-neuraxis-dioxus/src/ui/components/block.rs

@@ -259,5 +259,92 @@ pub fn BlockRenderer(
                 on_command
             }
         },
+        BlockKind::Table => {
+            let block_id = block.id;
+            if is_focused {
+                // Edit entire table as raw markdown
+                let content_text = source
+                    .get(block.node_range.clone())
+                    .unwrap_or("")
+                    .to_string();
+                let block_clone = block.clone();
+                rsx! {
+                    div {
+                        class: "table-container clickable-block",
+                        EditorBlock {
+                            block: block_clone,
+                            content_text,
+                            on_command,
+                            on_cancel: {
+                                let mut focused_anchor_id = focused_anchor_id;
+                                move |_| focused_anchor_id.set(None)
+                            }
+                        }
+                    }
+                }
+            } else if let BlockContent::Children(children) = &block.content {
+                rsx! {
+                    table {
+                        class: "table clickable-block",
+                        onclick: {
+                            let mut focused_anchor_id = focused_anchor_id;
+                            move |evt| {
+                                evt.stop_propagation();
+                                focused_anchor_id.set(Some(block_id))
+                            }
+                        },
+                        for (i, child) in children.iter().enumerate() {
+                            BlockRenderer {
+                                key: "{i}",
+                                block: child.clone(),
+                                source: source.clone(),
+                                focused_anchor_id,
+                                collapsed_ids,
+                                on_context_menu,
+                                on_command,
+                                on_wikilink_click
+                            }
+                        }
+                    }
+                }
+            } else {
+                rsx! {}
+            }
+        }
+        BlockKind::TableRow { is_header } => {
+            if let BlockContent::Children(children) = &block.content {
+                rsx! {
+                    tr {
+                        class: if *is_header { "table-header-row" } else { "table-row" },
+                        for (i, child) in children.iter().enumerate() {
+                            BlockRenderer {
+                                key: "{i}",
+                                block: child.clone(),
+                                source: source.clone(),
+                                focused_anchor_id,
+                                collapsed_ids,
+                                on_context_menu,
+                                on_command,
+                                on_wikilink_click
+                            }
+                        }
+                    }
+                }
+            } else {
+                rsx! {}
+            }
+        }
+        BlockKind::TableCell => {
+            let segments = block.segments.clone();
+            rsx! {
+                td {
+                    class: "table-cell",
+                    InlineSegments {
+                        segments,
+                        on_wikilink_click
+                    }
+                }
+            }
+        }
     }
 }