Search code examples
javascripthtmlvue.jsrangecursor

How to add cursor position after adding a component to content-editable div

I have inserted the component on a click of a button. Now I want the cursor position after my child component added into the parent div. I am attaching a sandbox link, it contains the code I have done so far. SANDBOX

code:

var ComponentClass = Vue.extend(Child);
  var instance = new ComponentClass();
  instance.$mount(); // pass nothing

  var editableDiv = this.$refs.editor;
  var range = document.createRange();
  var sel = window.getSelection();
  range = sel.getRangeAt(0);
  // check that we are in content editable div
  if (sel.getRangeAt(0).endContainer.parentNode.id === "editor") {
    range.insertNode(instance.$el);
    range.setStartAfter(instance.$el);
    sel.removeAllRanges();
    sel.addRange(range);
    editableDiv.focus();
Solution

  • So, the problem was I have applied a "display:flex" property to the parent div and now display: "inline-block" helped and its done. Now just applying focus to the main div, I get the the cursor position after the component added.