Android Chrome and WebView with QuillJS, native context menu blocks the toolbar?

Question

I am working with the QuillJS editor (awesome!) for a multi-platform forum web app and I'm trying to solve a problem with Android's webview (same thing happens in the Chrome app). Basically when I long-press to select some text on the top lines of the post the native context menu covers the Quill toolbar.

I've added css padding-top to the editor element to get the result in the next screen shot, but it looks weird to have the empty space at the top of the edit area when there's no context menu.

Other things I've discovered: you can't drag the context menu down, and tapping outside it or pressing the back button deselect the text. You can keep the context menu from showing by handling the oncontextmenu event, but then there's no way to cut/copy/paste.

Are there any alternatives? It would be cool if there were cut/copy/paste options for the Quill toolbar, which would allow me to just inhibit the context menu for the editor div, but I couldn't find such options.

Answer 1

EDIT: To clarify, I didn't actually change the orientation of the popup, but by switching to the "Bubble" theme the toolbar becomes a popup that appears under the selected text by default.

Answering my own question.

I changed the orientation of the pop-up so that it is below the selected text. Here's the initialization script:

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: [
                ['bold'],
                ['italic'],
                [{ 'color': [] }],
                [{ size: ['small', false, 'large', 'huge'] }],
                ['image'],
                ['link']
            ]
        },
        placeholder: '(type your message here)',
        theme: 'bubble'  // 'snow' or 'bubble'
    });
    quill.on('text-change', function (delta, oldDelta, source) {
        if (source === 'api') {
            console.log("An API call triggered this change.");
        } else if (source === 'user') {
            console.log("A user action triggered this change.");
        }
        var htmlContent = quill.root.innerHTML;
        $('#body').val(htmlContent);
    });
    window.onload = function () {
        quill.focus();
    };
</script>