feat(ios): add streamingConfig with progressive table mode for GFM streaming

hryhoriiK97 · hryhoriiK97 · commit a5cefe7fe7b1 · 2026-04-27T21:02:18.000+02:00
diff --git a/apps/example/src/StreamingMarkdownSimulator.tsx b/apps/example/src/StreamingMarkdownSimulator.tsx
@@ -148,6 +148,9 @@ export default function StreamingMarkdownSimulator() {
           markdownStyle={markdownStyle}
           md4cFlags={{ latexMath: true }}
           streamingAnimation
+          streamingConfig={{
+            tableMode: 'progressive',
+          }}
         />
       </View>
 
diff --git a/ios/EnrichedMarkdown.mm b/ios/EnrichedMarkdown.mm
@@ -9,7 +9,6 @@
 #import "EditMenuUtils.h"
 
 #import "ENRMFeatureFlags.h"
-#import "ENRMUIKit.h"
 
 #if ENRICHED_MARKDOWN_MATH
 #import "ENRMMathContainerView.h"
@@ -89,6 +88,7 @@ @implementation EnrichedMarkdown {
   BOOL _selectable;
   BOOL _enableLinkPreview;
   BOOL _streamingAnimation;
+  ENRMTableStreamingMode _tableStreamingMode;
 
   NSArray<NSString *> *_contextMenuItemTexts;
   NSArray<NSString *> *_contextMenuItemIcons;
@@ -123,6 +123,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _selectable = YES;
     _enableLinkPreview = YES;
     _streamingAnimation = NO;
+    _tableStreamingMode = ENRMTableStreamingModeHidden;
 
     _fontScaleObserver = [[FontScaleObserver alloc] init];
     __weak EnrichedMarkdown *weakSelf = self;
@@ -185,7 +186,10 @@ - (void)configureSegmentViewRegistry
                             return view;
                           }
                           updateView:^(RCTUIView *view, ENRMRenderedSegment *segment) {
-                            [(TableContainerView *)view applyTableNode:segment.tableSegment.tableNode];
+                            EnrichedMarkdown *strongSelf = weakSelf;
+                            if (strongSelf) {
+                              [strongSelf updateTableView:(TableContainerView *)view withSegment:segment.tableSegment];
+                            }
                           }]];
 
 #if ENRICHED_MARKDOWN_MATH
@@ -347,10 +351,11 @@ - (void)renderMarkdownContent:(NSString *)markdownString
   CGFloat maxFontSizeMultiplier = _maxFontSizeMultiplier;
   BOOL allowTrailingMargin = _allowTrailingMargin;
   BOOL streamingAnimation = _streamingAnimation;
+  ENRMTableStreamingMode tableStreamingMode = _tableStreamingMode;
 
   dispatch_async(_renderQueue, ^{
     NSString *renderableMarkdown =
-        streamingAnimation ? ENRMRenderableMarkdownForStreaming(markdownString) : markdownString;
+        streamingAnimation ? ENRMRenderableMarkdownForStreaming(markdownString, tableStreamingMode) : markdownString;
     if (renderableMarkdown.length == 0) {
       dispatch_async(dispatch_get_main_queue(), ^{
         if (renderId == self->_currentRenderId) {
@@ -405,7 +410,7 @@ - (void)renderMarkdownSynchronously:(NSString *)markdownString
   _blockAsyncRender = YES;
   _cachedMarkdown = [markdownString copy];
   NSString *renderableMarkdown =
-      _streamingAnimation ? ENRMRenderableMarkdownForStreaming(markdownString) : markdownString;
+      _streamingAnimation ? ENRMRenderableMarkdownForStreaming(markdownString, _tableStreamingMode) : markdownString;
   _renderedMarkdown = [renderableMarkdown copy];
 
   if (renderableMarkdown.length == 0) {
@@ -458,11 +463,6 @@ - (void)applyRenderedSegments:(NSArray *)renderedSegments renderedMarkdown:(NSSt
       [self computeSegmentLayoutForWidth:self.bounds.size.width applyFrames:YES];
       [self layoutIfNeeded];
       [self requestHeightUpdate];
-    } else if (_streamingAnimation) {
-      CGSize measured = [self measureSize:self.bounds.size.width];
-      if (needsHeightUpdate(measured, self.bounds)) {
-        [self requestHeightUpdate];
-      }
     } else {
       CGSize measured = [self measureSize:self.bounds.size.width];
       if (needsHeightUpdate(measured, self.bounds)) {
@@ -561,6 +561,39 @@ - (TableContainerView *)createTableViewForSegment:(ENRMTableSegment *)tableSegme
   return tableView;
 }
 
+- (void)updateTableView:(TableContainerView *)view withSegment:(ENRMTableSegment *)tableSegment
+{
+  NSUInteger previousRowCount = view.rowCount;
+  [view applyTableNode:tableSegment.tableNode];
+
+#if !TARGET_OS_OSX
+  if (!_streamingAnimation || view.rowCount <= previousRowCount) {
+    return;
+  }
+
+  // The grid container is inside the scroll view: TableContainerView > UIScrollView > gridContainer.
+  // After applyTableNode:, cells are laid out sequentially — each row has colCount cell-background subviews.
+  RCTUIView *scrollView = view.subviews.firstObject;
+  RCTUIView *gridContainer = scrollView.subviews.firstObject;
+  if (!gridContainer || gridContainer.subviews.count == 0 || view.rowCount == 0) {
+    return;
+  }
+
+  NSUInteger colCount = gridContainer.subviews.count / view.rowCount;
+  if (colCount == 0) {
+    return;
+  }
+
+  NSUInteger firstNewCellIndex = previousRowCount * colCount;
+  NSArray<RCTUIView *> *subviews = gridContainer.subviews;
+  for (NSUInteger i = firstNewCellIndex; i < subviews.count; i++) {
+    RCTUIView *cellView = subviews[i];
+    cellView.alpha = 0.0;
+    [UIView animateWithDuration:0.20 animations:^{ cellView.alpha = 1.0; }];
+  }
+#endif
+}
+
 #if ENRICHED_MARKDOWN_MATH
 - (ENRMMathContainerView *)createMathViewForSegment:(ENRMMathSegment *)mathSegment
 {
@@ -697,6 +730,15 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     }
   }
 
+  BOOL streamingConfigChanged = NO;
+  if (newViewProps.streamingConfig.tableMode != oldViewProps.streamingConfig.tableMode) {
+    NSString *tableModeStr = [[NSString alloc] initWithUTF8String:newViewProps.streamingConfig.tableMode.c_str()];
+    _tableStreamingMode = [tableModeStr isEqualToString:@"progressive"] ? ENRMTableStreamingModeProgressive
+                                                                        : ENRMTableStreamingModeHidden;
+    streamingConfigChanged = YES;
+    _dirtyFlags |= ENRMDirtyForceHeight;
+  }
+
   if (ENRMContextMenuItemsChanged(oldViewProps.contextMenuItems, newViewProps.contextMenuItems)) {
     _contextMenuItemTexts = ENRMContextMenuTextsFromItems(newViewProps.contextMenuItems);
     _contextMenuItemIcons = ENRMContextMenuIconsFromItems(newViewProps.contextMenuItems);
@@ -722,7 +764,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   }
 
   if (markdownChanged || stylePropChanged || md4cFlagsChanged || allowTrailingMarginChanged ||
-      streamingAnimationChanged) {
+      streamingAnimationChanged || streamingConfigChanged) {
     NSString *markdownString = [[NSString alloc] initWithUTF8String:newViewProps.markdown.c_str()];
     [self renderMarkdownContent:markdownString];
   }
diff --git a/ios/utils/StreamingMarkdownFilter.h b/ios/utils/StreamingMarkdownFilter.h
@@ -4,11 +4,16 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+typedef NS_ENUM(NSInteger, ENRMTableStreamingMode) {
+  ENRMTableStreamingModeHidden = 0,
+  ENRMTableStreamingModeProgressive,
+};
+
 #ifdef __cplusplus
 extern "C" {
 #endif
 
-NSString *ENRMRenderableMarkdownForStreaming(NSString *markdown);
+NSString *ENRMRenderableMarkdownForStreaming(NSString *markdown, ENRMTableStreamingMode tableMode);
 
 #ifdef __cplusplus
 }
diff --git a/ios/utils/StreamingMarkdownFilter.m b/ios/utils/StreamingMarkdownFilter.m
@@ -16,6 +16,45 @@ static BOOL ENRMLineLooksLikeTableRow(NSString *line)
   return [trimmed hasPrefix:@"|"] && [trimmed containsString:@"|"];
 }
 
+static NSUInteger ENRMPipeCount(NSString *line)
+{
+  NSUInteger count = 0;
+  for (NSUInteger i = 0; i < line.length; i++) {
+    if ([line characterAtIndex:i] == '|') {
+      count++;
+    }
+  }
+  return count;
+}
+
+static BOOL ENRMLineLooksLikeTableSeparator(NSString *line)
+{
+  NSString *trimmed = [line stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
+  if (trimmed.length == 0) {
+    return NO;
+  }
+  if ([trimmed characterAtIndex:0] != '|') {
+    return NO;
+  }
+  BOOL hasTripleDash = NO;
+  NSUInteger dashRun = 0;
+  for (NSUInteger i = 0; i < trimmed.length; i++) {
+    unichar ch = [trimmed characterAtIndex:i];
+    if (ch == '-') {
+      dashRun++;
+      if (dashRun >= 3) {
+        hasTripleDash = YES;
+      }
+    } else {
+      dashRun = 0;
+      if (ch != '|' && ch != ':' && ch != ' ') {
+        return NO;
+      }
+    }
+  }
+  return hasTripleDash;
+}
+
 static NSUInteger ENRMLineStartOffset(NSArray<NSString *> *lines, NSUInteger lineIndex)
 {
   NSUInteger offset = 0;
@@ -45,7 +84,7 @@ static NSUInteger ENRMLineStartOffset(NSArray<NSString *> *lines, NSUInteger lin
   return [markdown substringToIndex:offset];
 }
 
-static NSString *ENRMRemovePendingStreamingTableBlock(NSString *markdown)
+static NSString *ENRMRemovePendingStreamingTableBlock(NSString *markdown, ENRMTableStreamingMode tableMode)
 {
   NSArray<NSString *> *lines = [markdown componentsSeparatedByString:@"\n"];
   NSInteger lastNonBlankLineIndex = -1;
@@ -85,12 +124,36 @@ static NSUInteger ENRMLineStartOffset(NSArray<NSString *> *lines, NSUInteger lin
     return markdown;
   }
 
+  if (tableMode == ENRMTableStreamingModeProgressive) {
+    NSInteger tableLineCount = lastNonBlankLineIndex - blockStartIndex + 1;
+
+    // Need at least header + separator to show anything.
+    if (tableLineCount < 2 || !ENRMLineLooksLikeTableSeparator(lines[(NSUInteger)blockStartIndex + 1])) {
+      NSUInteger offset = ENRMLineStartOffset(lines, (NSUInteger)blockStartIndex);
+      return [markdown substringToIndex:offset];
+    }
+
+    // Trim the last data row if it's incomplete: either doesn't end with '|'
+    // or has fewer pipe characters than the header (mid-cell streaming).
+    if (tableLineCount > 2) {
+      NSString *lastRow = lines[(NSUInteger)lastNonBlankLineIndex];
+      NSString *lastRowTrimmed = [lastRow stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
+      NSString *headerRow = lines[(NSUInteger)blockStartIndex];
+      if (![lastRowTrimmed hasSuffix:@"|"] || ENRMPipeCount(lastRow) < ENRMPipeCount(headerRow)) {
+        NSUInteger offset = ENRMLineStartOffset(lines, (NSUInteger)lastNonBlankLineIndex);
+        return [markdown substringToIndex:offset];
+      }
+    }
+
+    return markdown;
+  }
+
   NSUInteger offset = ENRMLineStartOffset(lines, (NSUInteger)blockStartIndex);
   return [markdown substringToIndex:offset];
 }
 
-NSString *ENRMRenderableMarkdownForStreaming(NSString *markdown)
+NSString *ENRMRenderableMarkdownForStreaming(NSString *markdown, ENRMTableStreamingMode tableMode)
 {
   NSString *withoutPendingMath = ENRMRemovePendingStreamingMathBlock(markdown);
-  return ENRMRemovePendingStreamingTableBlock(withoutPendingMath);
+  return ENRMRemovePendingStreamingTableBlock(withoutPendingMath, tableMode);
 }
diff --git a/ios/views/TableContainerView.h b/ios/views/TableContainerView.h
@@ -26,6 +26,8 @@ typedef void (^TableLinkPressBlock)(NSString *url);
 
 @property (nonatomic, assign) BOOL enableLinkPreview;
 
+@property (nonatomic, readonly) NSUInteger rowCount;
+
 @end
 
 NS_ASSUME_NONNULL_END
diff --git a/ios/views/TableContainerView.m b/ios/views/TableContainerView.m
@@ -167,6 +167,11 @@ - (NSString *)extractPlainTextFromNode:(MarkdownASTNode *)node
   return [buffer copy];
 }
 
+- (NSUInteger)rowCount
+{
+  return _rows.count;
+}
+
 - (void)applyTableNode:(MarkdownASTNode *)tableNode
 {
   [[_gridContainer subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];
diff --git a/src/EnrichedMarkdownNativeComponent.ts b/src/EnrichedMarkdownNativeComponent.ts
@@ -226,6 +226,10 @@ export interface Md4cFlagsInternal {
   latexMath: boolean;
 }
 
+interface StreamingConfigInternal {
+  tableMode: string;
+}
+
 export interface NativeProps extends ViewProps {
   /**
    * Markdown content to render.
@@ -322,6 +326,10 @@ export interface NativeProps extends ViewProps {
    * @default false
    */
   streamingAnimation?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * Fine-grained control over streaming behavior for block-level elements.
+   */
+  streamingConfig?: StreamingConfigInternal;
   /**
    * Controls how spoiler text is displayed before being revealed.
    * - 'particles' (default): animated particle overlay.
diff --git a/src/EnrichedMarkdownTextNativeComponent.ts b/src/EnrichedMarkdownTextNativeComponent.ts
@@ -226,6 +226,10 @@ export interface Md4cFlagsInternal {
   latexMath: boolean;
 }
 
+interface StreamingConfigInternal {
+  tableMode: string;
+}
+
 export interface NativeProps extends ViewProps {
   /**
    * Markdown content to render.
@@ -322,6 +326,10 @@ export interface NativeProps extends ViewProps {
    * @default false
    */
   streamingAnimation?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * Fine-grained control over streaming behavior for block-level elements.
+   */
+  streamingConfig?: StreamingConfigInternal;
   /**
    * Controls how spoiler text is displayed before being revealed.
    * - 'particles' (default): animated particle overlay.
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,7 @@
 export { default as EnrichedMarkdownText } from './native/EnrichedMarkdownText';
 export type {
   EnrichedMarkdownTextProps,
+  StreamingConfig,
   MarkdownStyle,
   Md4cFlags,
   ContextMenuItem as TextContextMenuItem,
diff --git a/src/native/EnrichedMarkdownText.tsx b/src/native/EnrichedMarkdownText.tsx
@@ -7,6 +7,7 @@ import type { NativeSyntheticEvent } from 'react-native';
 import type { MarkdownStyle, Md4cFlags } from '../types/MarkdownStyle';
 import type {
   EnrichedMarkdownTextProps,
+  StreamingConfig,
   ContextMenuItem,
 } from '../types/MarkdownTextProps';
 import type {
@@ -17,7 +18,7 @@ import type {
 } from '../types/events';
 
 export type { MarkdownStyle, Md4cFlags };
-export type { EnrichedMarkdownTextProps, ContextMenuItem };
+export type { EnrichedMarkdownTextProps, StreamingConfig, ContextMenuItem };
 export type { LinkPressEvent, LinkLongPressEvent, TaskListItemPressEvent };
 
 const defaultMd4cFlags: Md4cFlags = {
@@ -40,6 +41,7 @@ export const EnrichedMarkdownText = ({
   allowTrailingMargin = false,
   flavor = 'commonmark',
   streamingAnimation = false,
+  streamingConfig,
   spoilerOverlay = 'particles',
   contextMenuItems,
   selectionColor,
@@ -122,6 +124,9 @@ export const EnrichedMarkdownText = ({
     [onTaskListItemPress]
   );
 
+  const tableMode = streamingConfig?.tableMode ?? 'hidden';
+  const normalizedStreamingConfig = useMemo(() => ({ tableMode }), [tableMode]);
+
   const sharedProps = {
     markdown,
     markdownStyle: normalizedStyle,
@@ -135,6 +140,7 @@ export const EnrichedMarkdownText = ({
     maxFontSizeMultiplier,
     allowTrailingMargin,
     streamingAnimation,
+    streamingConfig: normalizedStreamingConfig,
     spoilerOverlay,
     style: containerStyle,
     contextMenuItems: nativeContextMenuItems,
diff --git a/src/types/MarkdownTextProps.ts b/src/types/MarkdownTextProps.ts

Original file line number	Diff line number	Diff line change
`@@ -167,6 +167,11 @@ - (NSString )extractPlainTextFromNode:(MarkdownASTNode )node`
`167`	`167`	`return [buffer copy];`
`168`	`168`	`}`
`169`	`169`
	`170`	`+- (NSUInteger)rowCount`
	`171`	`+{`
	`172`	`+ return _rows.count;`
	`173`	`+}`
	`174`	`+`
`170`	`175`	`- (void)applyTableNode:(MarkdownASTNode *)tableNode`
`171`	`176`	`{`
`172`	`177`	`[[_gridContainer subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];`