Merge pull request #863 from Infomaniak/fix-composeview-scroll

fix(ComposeMessageView): Scroll behavior
Infomaniak · Jul 7, 2023 · 91d0736 · 91d0736
2 parents d51c456 + 213b715
commit 91d0736
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/Mail/Helpers/RichTextEditor.swift b/Mail/Helpers/RichTextEditor.swift
@@ -28,7 +28,7 @@ import WebKit
 struct RichTextEditor: UIViewRepresentable {
     typealias UIViewType = MailEditorView
 
-    @ObservedObject var model: RichTextEditorModel
+    @Binding var model: RichTextEditorModel
     @Binding var body: String
     @Binding var isShowingCamera: Bool
     @Binding var isShowingFileSelection: Bool
@@ -37,12 +37,12 @@ struct RichTextEditor: UIViewRepresentable {
     let blockRemoteContent: Bool
     var alert: ObservedObject<NewMessageAlert>.Wrapper
 
-    init(model: RichTextEditorModel, body: Binding<String>,
+    init(model: Binding<RichTextEditorModel>, body: Binding<String>,
          alert: ObservedObject<NewMessageAlert>.Wrapper,
          isShowingCamera: Binding<Bool>, isShowingFileSelection: Binding<Bool>, isShowingPhotoLibrary: Binding<Bool>,
          becomeFirstResponder: Binding<Bool>,
          blockRemoteContent: Bool) {
-        _model = ObservedObject(wrappedValue: model)
+        _model = model
         _body = body
         self.alert = alert
         _isShowingCamera = isShowingCamera
@@ -146,9 +146,9 @@ extension SQTextEditorView {
     }
 }
 
-class RichTextEditorModel: ObservableObject {
-    @Published var cursorPosition: CGFloat = 0
-    @Published var height: CGFloat = 0
+struct RichTextEditorModel {
+    var cursorPosition: CGFloat = 0
+    var height: CGFloat = 0
 }
 
 class MailEditorView: SQTextEditorView {

diff --git a/Mail/Views/New Message/ComposeMessageBodyView.swift b/Mail/Views/New Message/ComposeMessageBodyView.swift
@@ -26,10 +26,9 @@ struct ComposeMessageBodyView: View {
     @State private var isShowingFileSelection = false
     @State private var isShowingPhotoLibrary = false
 
-    @StateObject private var editorModel = RichTextEditorModel()
-
     @ObservedRealmObject var draft: Draft
 
+    @Binding var editorModel: RichTextEditorModel
     @Binding var isLoadingContent: Bool
     @Binding var editorFocus: Bool
 
@@ -48,7 +47,7 @@ struct ComposeMessageBodyView: View {
             AttachmentsHeaderView(attachmentsManager: attachmentsManager)
 
             RichTextEditor(
-                model: editorModel,
+                model: $editorModel,
                 body: $draft.body,
                 alert: $alert,
                 isShowingCamera: $isShowingCamera,
@@ -87,6 +86,7 @@ struct ComposeMessageBodyView_Previews: PreviewProvider {
         @Environment(\.dismiss) var dismiss
 
         ComposeMessageBodyView(draft: Draft(),
+                               editorModel: .constant(RichTextEditorModel()),
                                isLoadingContent: .constant(false),
                                editorFocus: .constant(false),
                                attachmentsManager: AttachmentsManager(

diff --git a/Mail/Views/New Message/ComposeMessageView.swift b/Mail/Views/New Message/ComposeMessageView.swift
@@ -68,6 +68,9 @@ struct ComposeMessageView: View {
     @State private var autocompletionType: ComposeViewFieldType?
     @State private var editorFocus = false
 
+    @State private var editorModel = RichTextEditorModel()
+    @State private var scrollView: UIScrollView?
+
     @StateObject private var attachmentsManager: AttachmentsManager
     @StateObject private var alert = NewMessageAlert()
 
@@ -144,6 +147,7 @@ struct ComposeMessageView: View {
                 if autocompletionType == nil && !isLoadingContent {
                     ComposeMessageBodyView(
                         draft: draft,
+                        editorModel: $editorModel,
                         isLoadingContent: $isLoadingContent,
                         editorFocus: $editorFocus,
                         attachmentsManager: attachmentsManager,
@@ -184,8 +188,26 @@ struct ComposeMessageView: View {
             }
         }
         .introspectScrollView { scrollView in
+            guard self.scrollView != scrollView else { return }
+            self.scrollView = scrollView
             scrollView.keyboardDismissMode = .interactive
         }
+        .onChange(of: editorModel.height) { _ in
+            guard let scrollView else { return }
+
+            let fullSize = scrollView.contentSize.height
+            let realPosition = (fullSize - editorModel.height) + editorModel.cursorPosition
+
+            guard realPosition >= 0 else { return }
+            let rect = CGRect(x: 0, y: realPosition, width: 1, height: 1)
+            scrollView.scrollRectToVisible(rect, animated: true)
+        }
+        .onChange(of: autocompletionType) { newValue in
+            guard newValue != nil else { return }
+
+            let rectTop = CGRect(x: 0, y: 0, width: 1, height: 1)
+            scrollView?.scrollRectToVisible(rectTop, animated: true)
+        }
         .navigationTitle(MailResourcesStrings.Localizable.buttonNewMessage)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {