title: Set width of ace editor instance according to the length of characters in it
body: <p>I am working on the project where I have created a custom Rich Text Editor using contenteditable attribute. In this rich text editor I want insert single line ace editor instance of which width will be set according to the number of characters in it.</p>
  
  <p>For restricting the ace editor instance to single line I have handled the "Enter" key event which does not let the ace instance to insert new line.</p>
  
  <pre><code>var editor = ace.edit(script_editor);
  editor.commands.on("exec", function (e) {
  editor.container.querySelector(".ace_content").style.transform = "none";
   if (e.args &amp;&amp; e.args.charCodeAt(0) == 10) {
    e.preventDefault();
    e.stopPropagation();
    console.log("vdgscript-mode.js")
   }
  }); 
  </code></pre>
  
  <p>Now, the problem I am facing is that I want the ace instance width to adjust according to the number of character in it instead to have full width.</p>
  
  <p>For that I am taking a canvas object and calculating the width of the text. But the problem with this code is, it is giving me the expected width on every key press but the css left property of the ace editor does not stay '0px' which makes the text in the ace editor instance to hide at the left side.</p>
  
  <p>Code for setting the width is as follows:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  ctx.font = "15px sans-serif";
  var width = ctx.measureText(code).width;
  editor.container.style.width = (width + 3) + "px";
  </code></pre>
  
  <p>Actual Result: <img src="https://i.ibb.co/X5MynxG/actual-result.png" alt="valid XHTML">.</p>
  
  <p>Expected Result: <img src="https://i.ibb.co/c83zD9Z/expected-result.png" alt="valid XHTML">.</p>
  
  <p>The black in the below image the ace instance in which I have entered an array.</p>