CustomMarkdownRenderer.tsx: allow for <br/> tags inside Table Cells. Fixes #939

src/modules/blocks/markdown/CustomMarkdownRenderer.tsx

@@ -14,6 +14,7 @@ import { copyToClipboard } from '~/common/util/clipboardUtils';
 import { downloadBlob } from '~/common/util/downloadUtils';
 
 import { CustomARenderer } from './CustomARenderer';
+import { remarkTableCellBreaks } from './tableBreaks.remark';
 import { wrapWithMarkdownSyntax } from './markdown.wrapper';
 
 
@@ -210,6 +211,7 @@ const reactMarkdownComponents = {
 const remarkPluginsStable: UnifiedPluggable[] = [
   remarkGfm, // GitHub Flavored Markdown
   remarkMark, // Mark-Highlight, for ==yellow==
+  remarkTableCellBreaks, // Convert <br> HTML tags inside tables to break nodes (for line breaks in table cells)
   [remarkMath, {
     /**
      * NOTE: this could be configurable, some users reported liking single dollar signs math, despite even the official

src/modules/blocks/markdown/tableBreaks.remark.ts

@@ -0,0 +1,35 @@
+/**
+ * Remark plugin that converts HTML <br> tags to mdast break nodes, but ONLY inside table cells.
+ * This handles <br>, <br/>, and <br /> variants in LLM outputs.
+ */
+
+import type { Root, TableCell } from 'mdast';
+import { visit } from 'unist-util-visit';
+
+
+// Match <br>, <br/>, <br /> (case-insensitive)
+const BR_TAG_REGEX = /^<br\s*\/?>$/i;
+
+
+/**
+ * Remark plugin that converts <br> HTML nodes to break nodes inside table cells
+ */
+export function remarkTableCellBreaks() {
+  return (tree: Root) => {
+    // Visit table cells and process their children
+    visit(tree, 'tableCell', (cell: TableCell) => {
+      const children = cell.children;
+
+      // Process children in reverse to safely modify array while iterating
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+
+        // Check if this is an HTML node with a <br> tag
+        if (child.type === 'html' && BR_TAG_REGEX.test(child.value.trim())) {
+          // Replace the HTML node with a break node (hard line break)
+          children.splice(i, 1, { type: 'break' });
+        }
+      }
+    });
+  };
+}