content: Handle <table> elements

Fixes: zulip#360

Author: rajveermalviya

lib/model/content.dart

@@ -504,6 +504,88 @@ class EmbedVideoNode extends BlockContentNode {
   }
 }
 
+class TableNode extends BlockContentNode {
+  const TableNode({super.debugHtmlNode, required this.rows});
+
+  final List<TableRowNode> rows;
+
+  @override
+  List<DiagnosticsNode> debugDescribeChildren() {
+    return rows
+      .mapIndexed((i, row) => row.toDiagnosticsNode(name: 'row $i'))
+      .toList();
+  }
+}
+
+class TableRowNode extends BlockContentNode {
+  const TableRowNode({
+    super.debugHtmlNode,
+    required this.cells,
+    required this.isHeader,
+  });
+
+  final List<TableCellNode> cells;
+
+  /// Indicates whether this row is the header row.
+  final bool isHeader;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DiagnosticsProperty<bool>('isHeader', isHeader));
+  }
+
+  @override
+  List<DiagnosticsNode> debugDescribeChildren() {
+    return cells
+      .mapIndexed((i, cell) => cell.toDiagnosticsNode(name: 'cell $i'))
+      .toList();
+  }
+}
+
+/// The text-alignment that applies to text inside the table cell.
+///
+/// See GitHub-flavored Markdown:
+///   https://github.github.com/gfm/#tables-extension-
+// In Markdown, alignment is defined per column using the delimiter row.
+// However, the generated HTML specifies alignment for each cell in a row
+// individually, that matches the UI widget implementation which is also
+// row based and needs alignment information to be per cell.
+enum TableCellTextAlignment {
+  /// Text inside the table cell is left-aligned.
+  // Represented in markdown as `|: --- |` for the specific column in the delimeter row.
+  // TODO(i18n) RTL issues? https://github.com/zulip/zulip/issues/32265
+  left,
+  /// Text inside the table cell is center-aligned.
+  // Represented in markdown as `|: --- :|` for the specific column in the delimeter row.
+  center,
+  /// Text inside the table cell is right-aligned.
+  // Represented in markdown as `| --- :|` for the specific column in the delimeter row.
+  // TODO(i18n) RTL issues? https://github.com/zulip/zulip/issues/32265
+  right,
+  /// Text inside the table cell is aligned the default way.
+  // Represented in markdown as `| --- |` for the specific column in the delimeter row.
+  defaults
+}
+
+class TableCellNode extends BlockInlineContainerNode {
+  const TableCellNode({
+    super.debugHtmlNode,
+    required super.nodes,
+    required super.links,
+    required this.textAlignment,
+  });
+
+  /// The text-alignment for text inside the table cell.
+  final TableCellTextAlignment textAlignment;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DiagnosticsProperty<TableCellTextAlignment>('textAlign', textAlignment));
+  }
+}
+
 /// A content node that expects an inline layout context from its parent.
 ///
 /// When rendered into a Flutter widget tree, an inline content node
@@ -1222,6 +1304,136 @@ class _ZulipContentParser {
     return EmbedVideoNode(hrefUrl: href, previewImageSrcUrl: imgSrc, debugHtmlNode: debugHtmlNode);
   }
 
+  BlockContentNode parseTableContent(dom.Element tableElement) {
+    assert(_debugParserContext == _ParserContext.block);
+    assert(tableElement.localName == 'table'
+        && tableElement.className.isEmpty);
+
+    TableCellNode? parseTableCell(dom.Element node, bool isHeader) {
+      assert(node.localName == (isHeader ? 'th' : 'td'));
+      assert(node.className.isEmpty);
+      assert(node.attributes.length <= 1);
+
+      final cellStyle = node.attributes['style'];
+      final TableCellTextAlignment? textAlignment;
+      switch (cellStyle) {
+        case null:
+          textAlignment = TableCellTextAlignment.defaults;
+        case 'text-align: left;':
+          textAlignment = TableCellTextAlignment.left;
+        case 'text-align: center;':
+          textAlignment = TableCellTextAlignment.center;
+        case 'text-align: right;':
+          textAlignment = TableCellTextAlignment.right;
+        default:
+          return null;
+      }
+      final parsed = parseBlockInline(node.nodes);
+      return TableCellNode(
+        nodes: parsed.nodes,
+        links: parsed.links,
+        textAlignment: textAlignment);
+    }
+
+    List<TableCellNode>? parseTableCells(dom.NodeList cellNodes, bool isHeader) {
+      final cells = <TableCellNode>[];
+      for (final node in cellNodes) {
+        if (node is dom.Text && node.text == '\n') continue;
+
+        if (node is! dom.Element) return null;
+        if (node.localName != (isHeader ? 'th' : 'td')) return null;
+        if (node.className.isNotEmpty) return null;
+        if (node.attributes.length > 1) return null;
+
+        final cell = parseTableCell(node, isHeader);
+        if (cell == null) return null;
+        cells.add(cell);
+      }
+      return cells;
+    }
+
+    TableRowNode? parseTableHeaderRow(dom.NodeList theadNodes) {
+      if (theadNodes case [
+        dom.Text(data: '\n'),
+        dom.Element(localName: 'tr') && final rowElement,
+        dom.Text(data: '\n'),
+      ]) {
+        if (rowElement.className.isNotEmpty) return null;
+        if (rowElement.attributes.isNotEmpty) return null;
+        if (rowElement.nodes.isEmpty) return null;
+
+        final cells = parseTableCells(rowElement.nodes, true);
+        if (cells == null) return null;
+        return TableRowNode(cells: cells, isHeader: true);
+      } else {
+        return null;
+      }
+    }
+
+    bool parseTableBodyRows(dom.NodeList tbodyNodes, int headerColumnCount, List<TableRowNode> parsedRows) {
+      for (final node in tbodyNodes) {
+        if (node is dom.Text && node.text == '\n') continue;
+
+        if (node is! dom.Element) return false;
+        if (node.localName != 'tr') return false;
+        if (node.className.isNotEmpty) return false;
+        if (node.attributes.isNotEmpty) return false;
+        if (node.nodes.isEmpty) return false;
+
+        final cells = parseTableCells(node.nodes, false);
+        if (cells == null) return false;
+
+        // Ensure that the number of columns in this row matches
+        // the header row.
+        if (cells.length != headerColumnCount) return false;
+        parsedRows.add(TableRowNode(cells: cells, isHeader: false));
+      }
+      return true;
+    }
+
+    final TableNode? tableNode = (() {
+      late final int headerColumnCount;
+      final parsedRows = <TableRowNode>[];
+      for (final node in tableElement.nodes) {
+        if (node is dom.Text && node.text == '\n') continue;
+
+        switch (node) {
+          case dom.Element(localName: 'thead') && final theadElement:
+            if (theadElement.className.isNotEmpty) return null;
+            if (theadElement.attributes.isNotEmpty) return null;
+            if (theadElement.nodes.isEmpty) return null;
+
+            // The first row to be parsed should be the header row.
+            if (parsedRows.isNotEmpty) return null;
+
+            final headerRow = parseTableHeaderRow(theadElement.nodes);
+            if (headerRow == null) return null;
+            headerColumnCount = headerRow.cells.length;
+            parsedRows.add(headerRow);
+
+          case dom.Element(localName: 'tbody') && final tbodyElement:
+            if (tbodyElement.className.isNotEmpty) return null;
+            if (tbodyElement.attributes.isNotEmpty) return null;
+            if (tbodyElement.nodes.isEmpty) return null;
+
+            // The header row should have been parsed already.
+            if (parsedRows.isEmpty) return null;
+
+            final nodes = tbodyElement.nodes;
+            if (!parseTableBodyRows(nodes, headerColumnCount, parsedRows)) {
+              return null;
+            }
+
+          default:
+            return null;
+        }
+      }
+      return TableNode(rows: parsedRows);
+    })();
+
+    return tableNode ?? UnimplementedBlockContentNode(htmlNode: tableElement);
+  }
+
   BlockContentNode parseBlockContent(dom.Node node) {
     assert(_debugParserContext == _ParserContext.block);
     final debugHtmlNode = kDebugMode ? node : null;
@@ -1290,6 +1502,10 @@ class _ZulipContentParser {
         parseBlockContentList(element.nodes));
     }
 
+    if (localName == 'table' && className.isEmpty) {
+      return parseTableContent(element);
+    }
+
     if (localName == 'div' && className == 'spoiler-block') {
       return parseSpoilerNode(element);
     }
@@ -1335,6 +1551,7 @@ class _ZulipContentParser {
       case 'h6':
       case 'blockquote':
       case 'div':
+      case 'table':
         return false;
       default:
         return true;