stevengharris/MarkupEditor

Keyboard Avoidance Issue

stevengharris opened this issue · 0 comments

As noted in #87, the MarkupEditorView does not avoid the keyboard when in a ScrollView. Raising this issue here just so it's clearer.

Here is an example that shows the different behavior between a MarkupEditorView and a TextField.

struct ContentView: View, MarkupDelegate {
        
    @State private var text = "Hello World"
    @State private var loaded: Bool = false
    @State private var demoHtml: String = "<h1>Hello World</h1>"
    
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                Rectangle()
                    .frame(height: 1000)
                MarkupEditorView(markupDelegate: self, html: $demoHtml).id(1)
                    .frame(height: 200)
                    .overlay(
                        RoundedRectangle(cornerRadius: 6.0)
                            .stroke(.gray, lineWidth: 1.0)
                    )
                    .onChange(of: loaded) { _ in
                        withAnimation {
                            proxy.scrollTo(1)
                        }
                    }
                TextField("Name:", text: $text)
            }
            .padding()
        }
    }
    
    func markup(_ view: MarkupWKWebView, heightDidChange height: Int) {
        loaded = true
    }
    
}

If you select in the TextField, the ScrollView scrolls upward to expose the insertion point. With MarkupEditorView, the insertion point will be covered by the keyboard. They MarkupEditorView needs to have the same behavior as TextField.