title: Move down a line in contenteditable
body: <p>I have a content editable element, and I'm trying to introduce some key commands to move the cursor around in it (vim keybindings). I'm struggling to add the basic up and down movements though (j &amp; k), which would be equivalent to pressing ArrowUp and ArrowDown.</p>
  
  <p>I've tried just emulating arrow key events, but haven't had luck yet:</p>
  
  <pre class="lang-js prettyprint-override"><code>  function fireKey(editor: EditorView, key: String) {
      let keyName = '';
      switch (key) {
        case "left":
          keyName = 'ArrowLeft';
          break;
        case "up":
          keyName = 'ArrowUp';
          break;
        case "right":
          keyName = 'ArrowRight';
          break;
        case "down":
          keyName = 'ArrowDown';
          break;
      }
  
      let evt = new KeyboardEvent("keydown", {
        "bubbles": true,
        "key": keyName,
        "code": keyName,
      });
      editor.dom.dispatchEvent(evt);
    }
  </code></pre>
  
  <p>(Where editor is a <a href="https://prosemirror.net" rel="nofollow noreferrer">prosemirror</a> editor)</p>
  
  <p>I've also tried with just a standard content editable without luck:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fireKey(el, key) {
    let keyName = '';
    switch (key) {
      case "left":
        keyName = 'ArrowLeft';
        break;
      case "up":
        keyName = 'ArrowUp';
        break;
      case "right":
        keyName = 'ArrowRight';
        break;
      case "down":
        keyName = 'ArrowDown';
        break;
    }
  
    let evt = new KeyboardEvent("keydown", {
      "bubbles": true,
      "key": keyName,
      "code": keyName,
    });
    el.dispatchEvent(evt);
  }
  
  let $editor = document.getElementById("editor");
  $editor.addEventListener('keydown', function(evt) {
      console.log("Key down", evt.key);
      if (evt.key == 'j') {
        fireKey($editor, 'down');
        evt.preventDefault(true);
      }
      else if (evt.key == 'k') {
        fireKey($editor, 'up');
        evt.preventDefault(true);
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="editor" contenteditable="true"&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;p&gt;Test 2&lt;/p&gt;
  &lt;p&gt;Test 3&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Are there any better approaches to this problem, or is there an easy way to fix my attempt above?</p>