givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
7.19k stars 1.64k forks source link

contenteditable , make cursor (pointer) imediatly editable after double click #256

Open carlosbranco opened 2 years ago

carlosbranco commented 2 years ago

I notice a behavior that make the editor hard to use. When Double Click on a element the builder make it contenteditable = true. But the cursor will highlight the all word we click on. So to start typing on the editor we need 3 clicks. Replicate : Double click to open the editor (but do it on a word not between words) And click again to unselect the text that is highlighted.

I'm not super familiar with javascript behavior in select, unselect , ranges etc. I tried to make the pointer on the beginning of the editor and i was not able to do it. Thank you very much

carlosbranco commented 2 years ago

I was able to fix it. Here is a suggestion if you want to apply in the project: in builder.js

edit: function(element) {
.....
    let el = element[0];  
        let selection = window.getSelection();  
        let range = document.createRange();  
        selection.removeAllRanges();  
        range.selectNodeContents(el);  
        range.collapse(false);  
        selection.addRange(range);  
        el.focus();