Can't delete image in contenteditable div on Android

Question

I am building a rich text editor in android. To do so, I am using a webView with a contentEditable div.

To add styles, I invoke JavaScript. This all works fine, except when I invoke JavaScript to insert either an image or a horizontal rule. When I use JavaScript to insert these things, if I then try to press the back button to delete either the image or the horizontal rule, it doesn't work.

Oddly enough, if I first enter any other character, and then insert the image or horizontal rule, I can delete the image/horizontal rule just fine, but cannot delete the character I entered immediately before the image/horizontal rule.

I've tried printing out the HTML in every state, checking the selection/range, etc, and can't seem to find anything that's different about the state that might explain why I can't delete the image, etc.

Answer 1

Android: Backspace in WebView/BaseInputConnection

Subclass Webview and override the method as shown by this guy's question.

On some phones, only the guy's question will satisfy the requirements. The link's answer will complete the code for compatibility with other phones. Though, you subclass a InputConnectionWrapper. not inputconnection. and then return that wrapper within your custom webview.

Just a FYI, this link has a much more detailed explanation of the situation, however I tried quickly implementing their ideas and it didn't work. Maybe too complicated for my purposes. The reason I tried their solution instead of what I mentioned above is because the solution I mentioned above causes the voice-to-text function to not work correctly. Android - cannot capture backspace/delete press in soft. keyboard