feat: add table support as well

Author: isekovanic

packages/react-native-sdk/src/MarkdownRichText.tsx

@@ -83,13 +83,6 @@ export const MarkdownRichText = ({
   //     );
   // };
 
-  // @ts-ignore
-  const codeBlockReact = (node, _, state) => (
-    <MarkdownReactiveScrollView key={state.key}>
-      <Text style={styles.codeBlock}>{node?.content?.trim()}</Text>
-    </MarkdownReactiveScrollView>
-  );
-
   // @ts-ignore
   const tableReact = (node, output, state) => (
     <MarkdownReactiveScrollView key={state.key}>
@@ -109,7 +102,7 @@ export const MarkdownRichText = ({
     // Truncate long text content in the message overlay
     // paragraph: paragraphNumberOfLines ? { react: paragraphTextReact } : {},
     // sublist: { react: listReact },
-    table: { react: tableReact },
+    // table: { react: tableReact },
   };
 
   /**

packages/react-native-sdk/src/markdown/components/CodeBlock.tsx

@@ -7,7 +7,7 @@ export const CodeBlock = ({
   styles,
   state,
 }: MarkdownComponentProps) => (
-  <MarkdownReactiveScrollView key={state.key}>
+  <MarkdownReactiveScrollView>
     <Text style={styles.codeBlock}>{children}</Text>
   </MarkdownReactiveScrollView>
 );
@@ -17,16 +17,14 @@ export const renderCodeBlock: RuleRenderFunction = ({
   output,
   state,
   styles,
-}) => {
-  return (
-    <CodeBlock
-      key={state.key}
-      node={node}
-      output={output}
-      state={state}
-      styles={styles}
-    >
-      {node.content?.trim()}
-    </CodeBlock>
-  );
-};
+}) => (
+  <CodeBlock
+    key={state.key}
+    node={node}
+    output={output}
+    state={state}
+    styles={styles}
+  >
+    {node.content?.trim()}
+  </CodeBlock>
+);

packages/react-native-sdk/src/markdown/components/Table.tsx

@@ -0,0 +1,108 @@
+import { Text, View } from 'react-native';
+import type {
+  MarkdownComponentProps,
+  MarkdownOutputProps,
+  MarkdownTableRowProps,
+  RuleRenderFunction,
+} from '../types.ts';
+import { MarkdownReactiveScrollView } from '../../components';
+import styles from '../styles.ts';
+import type { SingleASTNode } from '@khanacademy/simple-markdown';
+import { useCallback, useMemo } from 'react';
+
+export const Table = ({
+  node,
+  output,
+  styles,
+  state,
+}: MarkdownComponentProps) => (
+  <MarkdownReactiveScrollView>
+    <MarkdownTable node={node} output={output} state={state} styles={styles} />
+  </MarkdownReactiveScrollView>
+);
+
+const transpose = (matrix: SingleASTNode[][]) =>
+  // TS gets confused because it considers the matrix to be potentially ragged,
+  // while the markdown parser can never output a ragged matrix of AST nodes
+  // when parsing a table. Hence, we use the forced type coercion.
+  (matrix[0] ?? []).map((_, colIndex) => matrix.map((row) => row[colIndex]!));
+
+const MarkdownTable = ({
+  node,
+  output,
+  state,
+  styles,
+}: MarkdownOutputProps) => {
+  const content = useMemo(() => {
+    const nodeContent = [node?.header, ...(node?.cells ?? [])];
+    return transpose(nodeContent);
+  }, [node?.cells, node?.header]);
+  const columns = content?.map((column, idx) => (
+    <MarkdownTableColumn
+      node={node}
+      items={column}
+      key={`column-${idx}`}
+      output={output}
+      state={state}
+      styles={styles}
+    />
+  ));
+
+  return (
+    <View key={state.key} style={styles.table}>
+      {columns}
+    </View>
+  );
+};
+
+const MarkdownTableColumn = ({
+  items,
+  output,
+  state,
+  styles,
+}: MarkdownTableRowProps) => {
+  const [headerCellContent, ...columnCellContents] = items;
+
+  const ColumnCell = useCallback(
+    ({ content }: { content: SingleASTNode }) =>
+      content ? (
+        <View style={styles.tableRow}>
+          <View style={styles.tableRowCell}>{output(content, state)}</View>
+        </View>
+      ) : null,
+    [output, state, styles],
+  );
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'column' }}>
+      {headerCellContent ? (
+        <View key={-1} style={styles.tableHeader}>
+          <Text style={styles.tableHeaderCell}>
+            {output(headerCellContent, state)}
+          </Text>
+        </View>
+      ) : null}
+      {columnCellContents &&
+        columnCellContents.map((content, idx) => (
+          <ColumnCell content={content} key={`cell-${idx}`} />
+        ))}
+    </View>
+  );
+};
+
+export const renderTable: RuleRenderFunction = ({
+  node,
+  output,
+  state,
+  styles,
+}) => (
+  <Table
+    key={state.key}
+    node={node}
+    output={output}
+    state={state}
+    styles={styles}
+  >
+    {node.content?.trim()}
+  </Table>
+);

packages/react-native-sdk/src/markdown/rules.ts

@@ -1,6 +1,4 @@
-import React from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import { Text, View } from 'react-native';
+import type React from 'react';
 
 import type {
   MatchFunction,
@@ -12,18 +10,13 @@ import type {
   SingleASTNode,
 } from '@khanacademy/simple-markdown';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
-import { head, includes, map } from 'lodash';
 
 import type {
-  ListNode,
   MarkdownOptions,
   MarkdownState,
   MarkdownStyle,
-  NodeWithContent,
-  NodeWithStringContent,
   RuleRenderFunction,
   RuleRenderFunctionEnrichedProps,
-  TableNode,
 } from './types';
 import { renderBlockQuote } from './components';
 import { renderAutolink } from './components/Autolink.tsx';
@@ -42,6 +35,7 @@ import { renderText } from './components/Text.tsx';
 import { renderList } from './components/List.tsx';
 import { renderCodeBlock } from './components/CodeBlock.tsx';
 import { renderInlineCode } from './components/InlineCode.tsx';
+import { renderTable } from './components/Table.tsx';
 
 const LINK_INSIDE = '(?:\\[(?:\\\\.|[^\\\\\\[\\]])*\\]|\\\\.|[^\\[\\]\\\\])*';
 /**
@@ -67,7 +61,7 @@ export const getLocalRules = (
   const { onLink, paragraphNumberOfLines } = opts;
   const openLinkHandler = (target: string) => {
     if (onLink) {
-      // user-supplied handler may be async; we keep your behavior
+      // user-supplied handler may be async; we keep the behavior
       Promise.resolve(onLink(target)).catch((error: unknown) => {
         const msg =
           error && typeof error === 'object' && 'toString' in error
@@ -175,56 +169,7 @@ export const getLocalRules = (
       react: enrichedRenderFunction(renderList),
     },
     table: {
-      react(
-        node: SingleASTNode,
-        output: Output<React.ReactNode>,
-        { ...state }: MarkdownState,
-      ) {
-        const n = node as TableNode;
-
-        const headers = map(n.header, (content, i) =>
-          React.createElement(
-            Text,
-            {
-              key: i,
-              style: styles.tableHeaderCell,
-            },
-            output(content, state),
-          ),
-        );
-
-        const header = React.createElement(
-          View,
-          { key: -1, style: styles.tableHeader },
-          headers,
-        );
-
-        const rows = map(n.cells, (row, r) => {
-          const cells = map(row, (content, c) =>
-            React.createElement(
-              View,
-              {
-                key: c,
-                style: styles.tableRowCell,
-              },
-              output(content, state),
-            ),
-          );
-          const rowStyles: (TextStyle | ViewStyle | undefined)[] = [
-            styles.tableRow,
-          ];
-          if (n.cells.length - 1 === r) {
-            rowStyles.push(styles.tableRowLast);
-          }
-          return React.createElement(View, { key: r, style: rowStyles }, cells);
-        });
-
-        return React.createElement(
-          View,
-          { key: state.key, style: styles.table },
-          [header, rows],
-        );
-      },
+      react: enrichedRenderFunction(renderTable),
     },
     text: {
       react: enrichedRenderFunction(renderText),