title: How do I make a <div> contentEditable on doubleclick using Svelte?
body: <p>I'm brand new to <strong>Svelte</strong> (3.0+)...and for my latest project, I'd like to emulate the functionality of many "todo" lists that allow you to edit todo items previously submitted by double-clicking on them (<a href="http://svelte-todomvc.surge.sh/" rel="noreferrer">Here's an example of the functionality I'm looking for</a>).</p>
  
  <p>I imagine, the first step is figuring out how to make a div <code>contentEditable</code> with Svelte with the <code>on:dblclick</code> event handler. I'm having trouble figuring out the syntax for this task (though I can do it with <a href="https://stackoverflow.com/questions/15993128/toggle-contenteditable-on-click">vanilla javascript</a>).</p>
  
  <p>Here's the Svelte code I have so far: ( Here it is on <a href="https://codesandbox.io/s/svelte-doubleclick-to-make-div-content-editable-9pu06" rel="noreferrer">CodeSandBox.io</a> - see page: CEDiv.svelte) </p>
  
  <pre><code>&lt;script&gt;
  function edit(event) {
      //update db functionality goes here
      //alert("you've 'submitted' your edit")
  }
  
  function handleDblClick() {
      //I need help HERE...and probably on the div on:dblclick down below....
  }
  function handleKeydown() {
      key = event.key;
      keyCode = event.keyCode;
      //submit the div's content to the edit function if enter or tab is pressed.
      keyCode == 13 || keyCode == 9 ? edit(event) : null;
  }
  &lt;/script&gt;
  &lt;style&gt;
  div.read-mode {
      padding:10px;
      border:1px solid green;
      height:30px;
      line-height:30px;
      width:500px;
      margin:0 auto;
  }
  div.edit-mode {
      padding:10px;
      background: lightgreen;
      border:3px solid green;
      height:26px;
      line-height:26px;
      width:496px;
      margin:0 auto;
  }
  &lt;/style&gt;
  &lt;div on:dblclick={handleDblClick} class="read-mode" on:keydown={handleKeydown} contentEditable="false"&gt;
      I want this Div to be editable one double click.
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for your help!</p>