Dynamic Editor Height Question

[rydamckinney]

Is it currently possible to make the RichTextEditor frame dynamic with the following behavior?

• Defined minimum and maximum height
• When the current height is > min, and < max, no scrolling enabled
• When the max height is reached, enable scrolling

[danielsaidi]

Hi @rydamckinney

I think this would be a bit tricky to achieve on all platforms, since the text views work a bit differently on iOS, where scrolling is part of the UITextView, compared to on macOS, where the NSTextView must be added to a scroll view.

Would be nice to have though 👍

[darrarski]

Not sure about macOS, but this can be done easily on iOS:

struct MyTextView: UIViewRepresentable {
  typealias UIViewType = UITextView
  
  /* ... */

  func sizeThatFits(_ proposal: ProposedViewSize, uiView: UITextView, context: Context) -> CGSize? {
    // make sure we have a valid proposed width:
    guard let proposedWidth = proposal.width, proposedWidth > 0, proposedWidth < .infinity else {
      return nil
    }

    // calculate size of UITextView that fits current text:
    var sizeThatFits = uiView.sizeThatFits(CGSize(
      width: proposedWidth,
      height: .greatestFiniteMagnitude
    ))

    // fill parent horizontally:
    sizeThatFits.width = proposedWidth

    return sizeThatFits
  }
}

It's just an example of unconstrained, dynamic size. Constraining the minimum and maximum height should be straightforward.

[danielsaidi]

Thank you @darrarski! Did you get this to work @rydamckinney?

[rydamckinney]

Hey @danielsaidi Yes I was able to get this working, thought not in the context of RichTextKit.

I needed markdown live syntax highlighting for the text input so I modified a fork of HighlightedTextEditor (https://github.com/kyle-n/HighlightedTextEditor) to switch between 2 wrapped NSTextViews (fixed vs dynamic height) based on the usage.

The solution should be generalizable to RichTextKit. The dynamic height view works in a pretty hacky way by checking & changing a constant height constraint on the scroll view that holds the NSTextView anytime that the text is changed. While it works, there's some dropped frames / animation glitches that I don't have a workaround for.

The rest of the code is pretty specific to the view hierarchy it's embedded in so I'm not sharing that so as to not confuse others (as I was led astray by many use-case-specific solutions I encountered in my research).

Here's the crux of the logic:

open class DynamicHeightNSTextView: NSTextView {
...
    open override func didChangeText() {
        super.didChangeText()
        
        self.invalidateIntrinsicContentSize()
        
        if let scrollHeight = self.scrollViewHeight {
            NSAnimationContext.runAnimationGroup { context in
                context.duration = 0.25
               //scrollHeight is a constant NSLayoutConstraint for the containing scrollview's height  
                scrollHeight.constant = min(self.maxHeight, max(self.intrinsicContentSize.height, self.minHeight))
            }
        }
    }
...
}
    ```

[danielsaidi]

Thank you for sharing @rydamckinney!

I will keep this issue open for when I have time to return to this project.

[gabrielalbino]

This feature would be my dream!

[slh-ideaflow]

I have what I think is a simpler question but which has led me here -- how can I get the RichTextEditor to dynamically adjust its height based on the text content inside, so that it doesn't have to scroll for you to see all the text? I'm working in iOS (and SwiftUI).

[danielsaidi]

@slh-ideaflow I'd love to support this. I guess it'd involve calculating the editor frame and apply it as fixed height?

[slh-ideaflow]

Actually @danielsaidi , I think the @rydamckinney 's implementation above provides what I need, I just probably wasn't using it correctly before. I also found it helps to add a little padding to ensure the vertical scrolling won't be present:

sizeThatFits.height += uiView.textContainerInset.bottom

[danielsaidi]

@slh-ideaflow Thank you for sharing Sam!

[danielsaidi]

@rydamckinney Would adding that code to RichTextKit make it work right out of the box, or would it require additional changes?

[bryan1anderson]

@danielsaidi

public struct StaticRichTextEditor: ViewRepresentable {

    /// Create a rich text editor with a rich text value and
    /// a certain rich text data format.
    ///
    /// - Parameters:
    ///   - text: The rich text to edit.
    ///   - context: The rich text context to use.
    ///   - format: The rich text data format, by default `.archivedData`.
    ///   - viewConfiguration: A platform-specific view configuration, if any.
    public init(
        text: Binding<NSAttributedString>,
        context: RichTextContext,
        format: RichTextDataFormat = .archivedData,
        viewConfiguration: @escaping ViewConfiguration = { _ in }
    ) {
        self.text = text
        self._context = ObservedObject(wrappedValue: context)
        self.format = format
        self.viewConfiguration = viewConfiguration
    }

    public typealias ViewConfiguration = (RichTextViewComponent) -> Void

    @ObservedObject
    private var context: RichTextContext

    private var text: Binding<NSAttributedString>
    private var format: RichTextDataFormat
    private var viewConfiguration: ViewConfiguration

    @Environment(\.richTextEditorConfig)
    private var config

    @Environment(\.richTextEditorStyle)
    private var style

    #if iOS || os(tvOS) || os(visionOS)
    public let textView = RichTextView()
    #endif

    #if macOS
    public let textView = RichTextView()

    
    #endif

    public func makeCoordinator() -> RichTextCoordinator {
        RichTextCoordinator(
            text: text,
            textView: textView,
            richTextContext: context
        )
    }

    #if iOS || os(tvOS) || os(visionOS)
    public func makeUIView(context: Context) -> some UIView {
        textView.setup(with: text.wrappedValue, format: format)
        textView.configuration = config
        textView.theme = style
        viewConfiguration(textView)
        return textView
    }

    public func updateUIView(_ view: UIViewType, context: Context) {}
    
    @available(iOS 16.0, *)
    public func sizeThatFits(_ proposal: ProposedViewSize, uiView: UIViewType, context: Context) -> CGSize? {
        guard let proposedWidth = proposal.width, proposedWidth > 0, proposedWidth < .infinity else {
          return nil
        }
        if let textView = uiView as? RichTextView {
            let inset = textView.textContainerInset
            
            // calculate size of UITextView that fits current text:
            var sizeThatFits = uiView.sizeThatFits(CGSize(
                width: proposedWidth,
                height: UIView.layoutFittingCompressedSize.height
            ))
            
            print(proposal, inset, sizeThatFits, textView.contentInset)
            
            
            sizeThatFits.width = proposedWidth
            
            return sizeThatFits
        }
        return nil
    }

    #else

    public func makeNSView(context: Context) -> some NSView {
        textView.setup(with: text.wrappedValue, format: format)
        textView.configuration = config
        textView.theme = style
        viewConfiguration(textView)
        return textView
    }

    public func updateNSView(_ view: NSViewType, context: Context) {}
    
    @available(macOS 13.0, *)
    public func sizeThatFits(_ proposal: ProposedViewSize, nsView: NSViewType, context: Context) -> CGSize? {
        guard let proposedWidth = proposal.width, proposedWidth > 0, proposedWidth < .infinity else {
          return nil
        }
        
        if let textView = nsView as? NSTextView {
            let inset = textView.textContainerInset

            let height = max(proposal.height ?? 100, textView.contentSize.height) + inset.height + inset.height
            
            return CGSize(width: proposedWidth, height: height)
        }
        return nil

    }
    #endif
}

I'm sure you could figure out a better way to integrate this into the RichTextEditor... all that business with textView as a documentView of the NSScrollView... so I opted for this. It kind of makes sense to use as a different type because it's not really configurable. Like you can't just enable scrolling and then disable it, at least not the way I see it for NSTextView.

Anyways, this works. I'll add some demos

Screen.Recording.2025-01-09.at.6.56.41.PM.mov

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-09.at.18.55.57.mp4