swift-markdown-ui ordered list indentation glitch when used inside UICollectionView (UIHostingController)

[yccheok]

I am encountering a layout issue when rendering a Markdown ordered list using the swift-markdown-ui library wrapped inside a UICollectionView cell.

The Setup:

• Library: swift-markdown-ui
• Architecture: SwiftUI View wrapped in a UIHostingController, embedded inside a UICollectionViewCell.
• Layout: UICollectionViewCompositionalLayout with UICollectionLayoutListConfiguration.

The Issue: When the cell is first loaded, the ordered list numbering (1, 2, 3...) appears incorrectly wrapped.

However, if I scroll the view (causing the cell to go off-screen and be reused/redrawn), the layout corrects itself and looks perfect. This suggests a race condition regarding the cell sizing or layout pass on the initial render.

I am using the following markdown sample text during testing.

Makanan yang disebutkan dalam artikel ini adalah:
1. Gado-gado
2. Pempek
3. Serabi
4. Pisang goreng
5. Lupis
6. Cenil
7. Mi instan (Indomie)

Code Snippets:

1. The SwiftUI View (MutableMarkdownView) I am displaying the markdown text using swift-markdown-ui:

struct MutableMarkdownView: View {
    @ObservedObject var viewModel: MarkdownViewModel

    init(viewModel: MarkdownViewModel) {
        self.viewModel = viewModel
    }
    
    var body: some View {
        // https://github.com/gonzalezreal/swift-markdown-ui/issues/426
        // https://github.com/gonzalezreal/swift-markdown-ui/discussions/427
        
        Markdown {
            viewModel.markdown
        }
        .textSelection(.disabled)
        .markdownTheme(.melonoteTheme)
        .frame(maxWidth: .infinity, alignment: .leading)           
    }
}

2. The UIKit Cell (AIChatCell) I am embedding the SwiftUI view using UIHostingController rather than UIHostingConfiguration to avoid resizing limitations I encountered previously.

class AIChatCell: UICollectionViewCell {
    ...
    
  private func initMutableMarkdownView() {
      let mutableMarkdownView = MutableMarkdownView(
          viewModel: markdownViewModel
      )
      
      // UIHostingConfiguration has limitations with resizing. We use UIHostingController instead.
      
      // Embed the SwiftUI view in a UIHostingController
      let hostingController = UIHostingController(rootView: mutableMarkdownView)
      
      // https://medium.com/arcush-tech/two-pitfalls-to-avoid-when-working-with-uihostingcontroller-534d1507563e
      hostingController.sizingOptions = .intrinsicContentSize
      if #available(iOS 16.4, *) {
          hostingController.safeAreaRegions = []
      } else {
          // Fallback on earlier versions
      }
      
      hostingController.view.translatesAutoresizingMaskIntoConstraints = false
      stackView.addArrangedSubview(hostingController.view)
      
      self.hostingController = hostingController
  }

3. Collection View Layout I use a standard list configuration:

    private func layoutConfig() -> UICollectionViewCompositionalLayout {
        let layout = UICollectionViewCompositionalLayout { section, layoutEnvironment in
            var config = UICollectionLayoutListConfiguration(appearance: .plain)

            config.headerMode = .none
            config.footerMode = .none
            config.showsSeparators = false
            config.headerTopPadding = 0
            
            config.backgroundColor = nil
            
            let layoutSection = NSCollectionLayoutSection.list(
                using: config,
                layoutEnvironment: layoutEnvironment
            )
            
            // https://developer.apple.com/forums/thread/759987

            layoutSection.interGroupSpacing = 8
            layoutSection.contentInsets = NSDirectionalEdgeInsets(
                top: 16,
                leading: 0,
                bottom: 16,
                trailing: 0
            )
            
            return layoutSection
        }
        
        return layout
    }

When the markdown text is first shown, it becomes the following. As you can see, there is an issue with the bullet numbering

If I scroll up and down the UICollectionView, causing UICollectionView redrawing, the problem will gone

Question: Has anyone experienced similar layout glitches with UIHostingController inside a Collection View? It seems like the constraints or intrinsic content size are not being calculated correctly during the first pass. Any advice on how to force the correct layout on initialization?

Thanks!