Quill: Cursor moves back when typing first character on new row?

[shengxiuzhou]

Hi,all:
I met the same problem as in https://github.com/quilljs/quill/issues/1882. But this problem is closed.
In my project, I need to add "contenteditable"=true attribute in both .ql-container and .ql-editor. But once I add "contenteditable"=true attribute in .ql-container,Cursor moves back when typing first character on new row. I don't want to modify code in Parchment. How I solve this?

Browser: Chrome

Problem showing like this:

This is my project, my html structure like this.

Hope your reply,best wishes!

[benbro]

Please include all the info requested in the issue template and edit the title to have only relevant info.

[benbro]

Why do you need to set contenteditable?
What's the use case?

[benjamingwynn]

I'm getting this when trying to use Quill 1.3.4 inside of a Custom Element

const Quill = require("quill") // load js via webpack
customElements.define("markdown-editor", class extends HTMLElement {
    constructor () {
        super()

        this.attachShadow({mode: "open"})

        this.shadowRoot.innerHTML = `
            <div id="editor">
                <p>Hello World!</p>
            </div>

            <style>
                :host {
                    display: block;
                }
            </style>

            <!-- TODO: load CSS via Webpack -->
            <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
        `

        this.$editor = this.shadowRoot.querySelector("#editor")

        this.editor = new Quill(this.$editor, {
            bounds: this.shadowRoot,
            theme: "snow"
        })
    }
})

User Agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3215.0 Safari/537.36

[ivansolskiy]

@benjamingwynn, I'm using Polymer to create editor component, it seems to me, there is issue with placement of quill inside shadowroot. but I'm still did not solve this issue. did you? what is your solution, ideas?

[watsab]

@ivansolskiy I'm also having trouble creating an editor component in Polymer with Quill. Did you find a way to correct this issue ?

[ivansolskiy]

@watsab no, it is on pause. I figured out that it works in firefox and safari, but not in chrome. I will come back to this problem on next week. Let's share updates here. Take a look at https://github.com/chuckh/polymer-quill. I don't really like the implementation, but it seems to work, may be you will figure out something.

[watsab]

Hi! Any news on this issue ? I spent some time on it but could not find a fix yet :(

[vanooo]

@watsab, yes. take this build: https://github.com/vanooo/quill/tree/develop/dist
you can view last 2 commits to understand what was changed. Basically you need only quill.js. It is my build but it was not my idea, I found solutions here: https://github.com/quilljs/quill/pull/1805

[watsab]

@vanooo : thanks a million! I'll try it as a soon as possible :smiley:

[watsab]

@vanooo I've tried your fork and so far it works perfect! Thanks a million!

Edit: the solutions in #1805 is not supported by other browsers than chrome :disappointed: Still thanks @vanooo !

[vanooo]

@watsab, i have tested my build it in all browsers, even in IE11 and it works for me.

[sgiulians]

@shengxiuzhou Hey hello, did you manage to solve this problem?