Fixed edit message size issue (#94)

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/Composer/ComposerTextInputView.swift

@@ -17,6 +17,7 @@ struct ComposerTextInputView: UIViewRepresentable {
     var placeholder: String
     var editable: Bool
     var maxMessageLength: Int?
+    var currentHeight: CGFloat
 
     func makeUIView(context: Context) -> InputTextView {
         let inputTextView = InputTextView()
@@ -26,6 +27,7 @@ struct ComposerTextInputView: UIViewRepresentable {
         inputTextView.layoutManager.delegate = context.coordinator
         inputTextView.placeholderLabel.text = placeholder
         inputTextView.contentInsetAdjustmentBehavior = .never
+        inputTextView.setContentCompressionResistancePriority(.streamLow, for: .horizontal)
 
         if utils.messageListConfig.becomesFirstResponderOnOpen {
             inputTextView.becomeFirstResponder()
@@ -37,13 +39,31 @@ struct ComposerTextInputView: UIViewRepresentable {
     func updateUIView(_ uiView: InputTextView, context: Context) {
         DispatchQueue.main.async {
             if uiView.markedTextRange == nil {
+                var shouldAnimate = false
                 if uiView.text != text {
+                    shouldAnimate = uiView.shouldAnimate(text)
                     uiView.text = text
                 }
                 uiView.selectedRange.location = selectedRangeLocation
                 uiView.isEditable = editable
                 uiView.placeholderLabel.text = placeholder
                 uiView.handleTextChange()
+                context.coordinator.updateHeight(uiView, shouldAnimate: shouldAnimate)
+                if uiView.frame.size.height != currentHeight {
+                    uiView.frame.size = CGSize(
+                        width: uiView.frame.size.width,
+                        height: currentHeight
+                    )
+                }
+                if uiView.contentSize.height != height {
+                    uiView.contentSize.height = height
+                }
+                
+                let previous = uiView.isScrollEnabled
+                uiView.isScrollEnabled = height > currentHeight
+                if previous == false && previous != uiView.isScrollEnabled {
+                    uiView.scrollToBottom()
+                }
             }
         }
     }
@@ -67,14 +87,23 @@ struct ComposerTextInputView: UIViewRepresentable {
         }
 
         func textViewDidChange(_ textView: UITextView) {
+            let shouldAnimate = (textView as? InputTextView)?.shouldAnimate(textInput.text) ?? false
             textInput.text = textView.text
             textInput.selectedRangeLocation = textView.selectedRange.location
+            updateHeight(textView, shouldAnimate: shouldAnimate)
+        }
+        
+        func updateHeight(_ textView: UITextView, shouldAnimate: Bool) {
             var height = textView.sizeThatFits(textView.bounds.size).height
             if height < TextSizeConstants.minThreshold {
                 height = TextSizeConstants.minimumHeight
             }
             if textInput.height != height {
-                withAnimation {
+                if shouldAnimate {
+                    withAnimation {
+                        textInput.height = height
+                    }
+                } else {
                     textInput.height = height
                 }
             }
@@ -95,3 +124,11 @@ struct ComposerTextInputView: UIViewRepresentable {
         }
     }
 }
+
+extension UITextView {
+    func scrollToBottom() {
+        let textCount: Int = text.count
+        guard textCount >= 1 else { return }
+        scrollRangeToVisible(NSRange(location: textCount - 1, length: 1))
+    }
+}

Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerView.swift

@@ -14,6 +14,7 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
     @State private var popupSize: CGFloat = 350
     @State private var composerHeight: CGFloat = 0
     @State private var keyboardShown = false
+    @State private var editedMessageWillShow = false
 
     private var factory: Factory
     private var channelConfig: ChannelConfig?
@@ -136,13 +137,14 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
         }
         .onReceive(keyboardWillChangePublisher) { visible in
             if visible && !keyboardShown {
-                if viewModel.composerCommand == nil {
+                if viewModel.composerCommand == nil && !editedMessageWillShow {
                     withAnimation(.easeInOut(duration: 0.02)) {
                         viewModel.pickerTypeState = .expanded(.none)
                     }
                 }
             }
             keyboardShown = visible
+            editedMessageWillShow = false
         }
         .onReceive(keyboardHeight) { height in
             if height > 0 && height != popupSize {
@@ -172,6 +174,10 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
         }
         .onChange(of: editedMessage) { _ in
             viewModel.text = editedMessage?.text ?? ""
+            if editedMessage != nil {
+                becomeFirstResponder()
+                editedMessageWillShow = true
+            }
         }
     }
 }
@@ -273,7 +279,8 @@ public struct ComposerInputView<Factory: ViewFactory>: View {
                     selectedRangeLocation: $selectedRangeLocation,
                     placeholder: isInCooldown ? L10n.Composer.Placeholder.slowMode : L10n.Composer.Placeholder.message,
                     editable: !isInCooldown,
-                    maxMessageLength: maxMessageLength
+                    maxMessageLength: maxMessageLength,
+                    currentHeight: textFieldHeight
                 )
                 .frame(height: textFieldHeight)
                 .overlay(

Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerViewModel.swift

@@ -38,7 +38,7 @@ open class MessageComposerViewModel: ObservableObject {
             if text != "" {
                 checkTypingSuggestions()
                 if pickerTypeState != .collapsed {
-                    if composerCommand == nil {
+                    if composerCommand == nil && (abs(text.count - oldValue.count) < 10) {
                         withAnimation {
                             pickerTypeState = .collapsed
                         }

Sources/StreamChatSwiftUI/ChatChannel/Composer/Suggestions/TypingSuggester.swift

@@ -77,6 +77,9 @@ public struct TypingSuggester {
         in text: String,
         caretLocation: Int
     ) -> TypingSuggestion? {
+        if caretLocation > text.count {
+            return nil
+        }
         let textString = text as NSString
         // Find the first symbol location before the input caret
         let firstSymbolBeforeCaret = textString.rangeOfCharacter(

Sources/StreamChatSwiftUI/Utils/Common/InputTextView.swift

@@ -32,9 +32,6 @@ class InputTextView: UITextView {
         TextSizeConstants.minimumHeight
     }
 
-    /// The constraint responsible for setting the height of the text view.
-    open var heightConstraint: NSLayoutConstraint?
-    
     /// The maximum height of the text view.
     /// When the content in the text view is greater than this height, scrolling will be enabled and the text view's height will be restricted to this value
     open var maximumHeight: CGFloat {
@@ -96,9 +93,6 @@ class InputTextView: UITextView {
             )
         )
         placeholderLabel.pin(anchors: [.centerY], to: self)
-        
-        heightConstraint = heightAnchor.constraint(equalToConstant: minimumHeight)
-        heightConstraint?.isActive = true
         isScrollEnabled = false
     }
 
@@ -122,47 +116,25 @@ class InputTextView: UITextView {
 
     @objc open func handleTextChange() {
         placeholderLabel.isHidden = !text.isEmpty
-        setTextViewHeight()
-    }
-
-    open func setTextViewHeight() {
-        var heightToSet = minimumHeight
-        let contentHeight = sizeThatFits(bounds.size).height
-
-        if contentHeight <= minimumHeight {
-            heightToSet = minimumHeight
-        } else if contentHeight >= maximumHeight {
-            heightToSet = maximumHeight
-        } else {
-            heightToSet = contentHeight
-        }
-
-        if heightConstraint?.constant != heightToSet {
-            heightConstraint?.constant = heightToSet
-            isScrollEnabled = heightToSet > minimumHeight
-            layoutIfNeeded()
-        }
     }
 
+    open func shouldAnimate(_ newText: String) -> Bool {
+        abs(newText.count - text.count) < 10
+    }
+
     override func layoutSubviews() {
         super.layoutSubviews()
-        
-        if TextSizeConstants.defaultInputViewHeight != minimumHeight {
+
+        if TextSizeConstants.defaultInputViewHeight != minimumHeight
+            && minimumHeight == frame.size.height {
             let rect = layoutManager.usedRect(for: textContainer)
-            let topInset = (bounds.size.height - rect.height) / 2.0
+            let topInset = (frame.size.height - rect.height) / 2.0
             textContainerInset.top = max(0, topInset)
         }
     }
 
     override open func paste(_ sender: Any?) {
         super.paste(sender)
         handleTextChange()
-        
-        // This is due to bug in UITextView where the scroll sometimes disables
-        // when a very long text is pasted in it.
-        // Doing this ensures that it doesn't happen
-        // Reference: https://stackoverflow.com/a/33194525/3825788
-        isScrollEnabled = false
-        isScrollEnabled = true
     }
 }

StreamChatSwiftUITests/Tests/ChatChannel/MessageComposerView_Tests.swift

@@ -5,6 +5,7 @@
 import SnapshotTesting
 @testable import StreamChat
 @testable import StreamChatSwiftUI
+import SwiftUI
 import XCTest
 
 class MessageComposerView_Tests: StreamChatTestCase {
@@ -114,7 +115,8 @@ class MessageComposerView_Tests: StreamChatTestCase {
             height: .constant(38),
             selectedRangeLocation: .constant(3),
             placeholder: "Send a message",
-            editable: true
+            editable: true,
+            currentHeight: 38
         )
         .frame(width: defaultScreenSize.width, height: 50)
 
@@ -129,7 +131,8 @@ class MessageComposerView_Tests: StreamChatTestCase {
             height: .constant(38),
             selectedRangeLocation: .constant(3),
             placeholder: "Send a message",
-            editable: true
+            editable: true,
+            currentHeight: 38
         )
         let inputView = InputTextView(
             frame: .init(x: 16, y: 16, width: defaultScreenSize.width - 32, height: 50)
@@ -151,7 +154,8 @@ class MessageComposerView_Tests: StreamChatTestCase {
             height: .constant(38),
             selectedRangeLocation: .constant(3),
             placeholder: "Send a message",
-            editable: true
+            editable: true,
+            currentHeight: 38
         )
         let inputView = InputTextView(
             frame: .init(x: 16, y: 16, width: defaultScreenSize.width - 32, height: 50)
@@ -184,4 +188,28 @@ class MessageComposerView_Tests: StreamChatTestCase {
         // Then
         assertSnapshot(matching: view, as: .image)
     }
+    
+    func test_composerInputView_snapshot() {
+        // Given
+        let inputView = InputTextView()
+        let view = ComposerTextInputView(
+            text: .constant("test test"),
+            height: .constant(100),
+            selectedRangeLocation: .constant(0),
+            placeholder: "Send a message",
+            editable: true,
+            currentHeight: 36
+        )
+        let coordinator = ComposerTextInputView.Coordinator(textInput: view, maxMessageLength: nil)
+        let viewWithSize = view.applyDefaultSize()
+        
+        // When
+        inputView.scrollToBottom()
+        coordinator.updateHeight(inputView, shouldAnimate: true)
+        coordinator.updateHeight(inputView, shouldAnimate: false)
+        
+        // Then
+        assertSnapshot(matching: viewWithSize, as: .image)
+        XCTAssert(coordinator.textInput.height == 100)
+    }
 }

StreamChatSwiftUITests/Tests/ChatChannel/Suggestions/TypingSuggester_Tests.swift

@@ -153,4 +153,24 @@ class TypingSuggester_Tests: XCTestCase {
         // Then
         XCTAssert(suggestion == nil)
     }
+    
+    func test_typingSuggester_outOfBounds() {
+        // Given
+        let options = TypingSuggestionOptions(
+            symbol: "@",
+            shouldTriggerOnlyAtStart: true
+        )
+        let typingSuggester = TypingSuggester(options: options)
+        let string = "Hey @Mar"
+        let caretLocation = 15
+        
+        // When
+        let suggestion = typingSuggester.typingSuggestion(
+            in: string,
+            caretLocation: caretLocation
+        )
+        
+        // Then
+        XCTAssert(suggestion == nil)
+    }
 }