Keyboard Issue

[vchaubey-ontic]

EditorToolbar is not going to top of Keyboard inside scrollview? any solutions?

[stevengharris]

Do you have something I can use to reproduce it or more info that would help?

If I just go into the DemoContentView and replace the MarkupEditorView in a VStack along with a Color inside of a ScrollView, like this:

    ScrollView {
        VStack {
            MarkupEditorView(markupDelegate: self, html: $demoHtml, resourcesUrl: resourcesUrl, id: "Document")
                .frame(height: 300)
            Color.red
                 .frame(height: 300)
        }
    }

it looks ridiculous, but it scrolls (easier when the raw HTML is displaying below) and when deployed to my iOS 16.2 iPhone 14, the MarkupToolbar shows up above the keyboard properly using what is on main right now.

[vchaubey-ontic]

struct OverlapDemo: View {
    @State private var text = ""
    @State private var scrollHeight : CGFloat = CGFloat.zero
    
    @State private var demoHtml: String = "<h1>Hello World</h1>"

    
    var body: some View {
        ScrollViewReader { reader in
            ScrollView {
                VStack {
                    Spacer()
                    Rectangle()
                        .frame(width: 300, height: 1500)
                    
                    
                    VStack {
                        MarkupEditorView(html: $demoHtml)
                    }
                    .frame(minHeight: 200, maxHeight: 200)
                    .overlay(
                        RoundedRectangle(cornerRadius: 6.0)
                            .stroke(.gray, lineWidth: 1.0)
                    )
                    .padding()
                }
                .padding()
            }
            .keyboardAdaptive({ scrollingHeight in
                scrollHeight = scrollingHeight
            })
            .onChange(of: scrollHeight) { newValue in
                withAnimation {
                    reader.scrollTo(1)
                }
            }
        }
    }
}

Sample code, what I wanted, MarkupEditor should scroll and with keyboard when become on focus

[stevengharris]

I assume .keyboardAdaptive is a custom ViewModifier I don't have, so I just commented it out in your example, and the MarkupToolbar shows up at the top of the keyboard like it should:

Unless I'm misunderstanding the issue, then, the problem is somewhere in the ViewModifier.

Having said all that, there is definitely a problem with being able to scroll to the right position when the keyboard shows up and returning to the proper position when it disappears. Here is a version of your example that illustrates the problem:

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
    }
    
}

I use the heightDidChange notification to the MarkupDelegate to set the loaded State and then keyed off of that change to tell the ScrollViewReader proxy to scroll. Basically the same as you are doing, but letting the MarkupEditor tell us when the editor is ready and height has been set properly.

I also added a TextField at the bottom. Note how when the keyboard comes up to edit the MarkupWebView, the ScrollView doesn't automatically scroll up so you can see what you are editing? If you hide the keyboard and then scroll to see the TextField, then select in the TextField to bring the keyboard up again, the ScrollView knows how to scroll to a position to bring the TextField above the keyboard properly. But it doesn't do the same with the MarkupEditorView. I don't know yet how to fix it.

Maybe this is what you filed the issue for and I misunderstood. If so, I am sorry about that. I plan to open a new issue on the topic of scrolling to avoid the keyboard once you comment here.

[stevengharris]

Closing this issue in favor of the more focused #89. If there is a separate issue here, feel free to reopen with more specifics. Thanks.