Moving the toolbar

[benlong100]

First of all: great work! This is a really fantastic add-on that is extremely needed!

I've got one question (for now):Is it possible to hide the cursor until the user taps to begin editing? Is that just a focus issue?

Thanks again for putting this together, it was plainly a lot of work!

[stevengharris]

Thanks for the kind words.

You should be able to specify MarkupEditor.toolbarLocation = .bottom. Take a look at AppDelegate.init() in the SharedDemo folder for an example of where to put this kind of thing.

To avoid selecting after the HTML loads, pass selectAfterLoad: false when you initialize the MarkupEditorView for SwiftUI or the MarkupEditorUIView for UIKit. For example:

MarkupEditorView(markupDelegate: self, html: $demoHtml, selectAfterLoad: false, id: "Document")

[benlong100]

Great, got them both working, thank you. The last two things are is it possible to control the visibility of the toolbar, and is there a flag to indicate when the user is editing? I would like the view to serve as a reader until they tap in it to edit, then the toolbar would appear.

[stevengharris]

You should look at MarkupEditorView or MarkupEditorUIView to see how they are dealing with the MarkupToolbar as a starting point. (I don't know whether you're using SwiftUI or UIKit, so I have to keep mentioning both 😜. Assuming SwiftUI here so I don't have to keep doing that.) Neither has a built-in flag for hiding/showing the toolbar, so you would need to do something similar to what they do in terms of managing the toolbar yourself along with the underlying MarkupWKWebViewRepresentable. I think you will be better off managing a piece of state yourself to determine if you want the toolbar to show or not. You can change that state using one of the MarkupDelegate methods. If you create a View class that is like MarkupEditorView, you would have it be your MarkupDelegate (like MarkupEditorView is the MarkupDelegate). Then you can implement the markupTookFocus(_:) callback in your delegate to set the state to show the toolbar when it takes focus and markupLostFocus(_:) to hide it.

I don't think these two callbacks will be noisy, but it's possible. For example, if you're using the toolbar to insert a link, then technically the MarkupEditor loses focus while that's going on. I've tried to avoid unnecessarily notifying the Swift side, but maybe it will be called and that would trigger you to hide the toolbar, which would be ugly. If this is the case, then you might have to hook into markupShowLinkPopover and the other popover cases to manage the state you use to manage the toolbar visibility. It would be good to post about what your experience is, perhaps in a new discussion.

Another approach (which is probably what I would do, since I am considering this in my app) is to make the "I want to edit" a deliberate choice that your user makes, rather than depend on the state of the MarkupEditor. So, you have an edit type of button (like Image(systemName: "square.and.pencil")) that exposes the toolbar and you only hide it when your user does something to stop it.

[benlong100]

That's very helpful Steven, thanks. I already have an Edit button to go into edit mode, so I can fiddle with getting it to interface properly with the Markup Editor.

Is there a way to make the background of the editor transparent? I found BackgroundClearView but can't figure out how to use it.

And sorry, yes, I'm using SwiftUI.

[stevengharris]

You would need to set .backgroundColor = .clear in MarkupWKWebView.initForEditing. Be sure to review #143 tho.