Skip to content

inline images do not have font size set #418

@jonmindtrip

Description

@jonmindtrip

Describe the bug
I'm trying to use an InlineImageProvider that pulls the images from system SF Symbol images, which should adjust size using the current font size. However, the font size configured in the markdown theme doesn't appear to be set on the image, so it always renders at the same size.

Checklist

  • [x ] I can reproduce this issue with a vanilla SwiftUI project.
  • [x ] I can reproduce this issue using the main branch of this package.
  • [x ] This bug hasn't been addressed in an existing GitHub issue.

Steps to reproduce
The code below reproduces the issue: a cloud image is embedded within a paragraph, a heading, and a list. Each of those is configured to use a different font size via the Theme, but the cloud image always displays at the same size.

To see the expected behavior, uncomment the .font(.system(size: N)) modifiers in the example code.

struct SystemImageInlineImageProvider: InlineImageProvider {
  private let name: (URL) -> String
  public init(name: @escaping (URL) -> String = \.lastPathComponent) {
    self.name = name
  }

  public func image(with url: URL, label: String) async throws -> Image {
    .init(systemName: self.name(url))
  }
}

extension InlineImageProvider where Self == SystemImageInlineImageProvider {
  static var system: Self { .init() }
}

extension Theme {
  static let custom = Theme()
    .text {
      FontSize(16)
    }
    .listItem { configuration in
      configuration.label
//        .font(.system(size: 24))
        .markdownTextStyle {
          FontSize(24)
        }
    }
    .heading1 { configuration in
      configuration.label
//        .font(.system(size: 30))
        .markdownTextStyle {
          FontSize(30)
          FontWeight(.semibold)
        }
    }
}

#Preview {
  let markdown = """
# An image ![cloud](cloud) in a header

A cloud ![cloud](cloud) within a paragraph of text.

This is a list
 - A cloud ![cloud](cloud) within a list item

"""
  Markdown(markdown)
    .markdownInlineImageProvider(.system)
    .markdownTheme(.custom)
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions