Support for placeholder text that clears upon editing
Closed this issue · 5 comments
Hello. First off thank you for all of your hard work on this project. It has been extremely useful!
Do you have a recommended way of adding placeholder text that gets replaced once a user beings typing? Or is that something that may be added in the future? I have been attempting to get the desired result with the markupInput and markupClicked MarkupDelegate methods, but I haven't been able find a way to get the UX just right. If I am able to set the cursor(caret) position that may help me as well. Thanks!
Funnily enough, the original RichEditorView that is pretty much the origin story for the MarkupEditor had placeholder text. I will try to take a look tomorrow and see how that might translate to the current world.
Thank you so much!
I did actually go back and model something after what was in the original RichEditorView. Basically, you pass a placeholder string at initialization time of the MarkupEditorView or MarkupEditorViewController (or MarkupWKWebView itself), and it sets a placeholder attribute on MU.editor, the document you are editing. Then, at various points, we updatePlaceholder, which adds or removes a class placeholder from MU.editor depending on whether the html is "empty" in the MarkupEditor sense of the word. The markup.css defines how to display the placeholder class - as gray text at the top left of the view. The points where updatePlaceholder is called include at setHtml time and on keyboard input.
I can see there is a problem when deleting text in an empty document. An empty document in the MarkupEditor should contain <p><br></p>, but somehow the paragraph is being deleted if you hit backspace while this "empty" document is showing. This messes up the logic I want to use to determine if the placeholder should be shown or not, so I need to fix that. In the meantime, see if this works as you expect it to by specifying placeholder when you create the MarkupEditorView or MarkupEditorViewController or MarkupWKWebView - I am not sure what your usage is. For example, for MarkupEditorView, you would do something like:
MarkupEditorView(markupDelegate: self, html: $demoHtml, placeholder: "Enter text")
Code is on the placeholder branch. I will merge this in after you give it a spin. It shouldn't break anything else and the defaults are for there to be no placeholder in any case.
FWIW, maybe there is a simple way to do this same thing on the Swift side. I was thinking perhaps with a View on top of the MarkupEditorView, kind of like you would do it with a TextEditor. I'm not sure what the equivalent would be for UIKit. I didn't try to go this route after I saw how cjwirth did this in the original RichTextEditor.
Hi Steven, I was able to play around with the changes you made. It works exactly as you described, including the issue when hitting backspace on the "empty" document. Outside of that, I think it's a great solution! I had similar thought about displaying/hiding some kind of placeholder view. Glad to have some options. Thank you for the detailed response and for working on this. I am learning a lot and very much appreciate it.
I fixed the problem with backspace (and included another change to make ToolbarButtonStyle public to help me on another project) and merged it in.
Note that the fix for backspace doesn't work properly on Intel-based Macs (like my iMac :-( ) because of #76. TL;DR... the keydown event is not detected on Intel-based Mac Catalyst apps.