游标不在自定义元素的末尾

Question

p code {
  padding: 1px 5px 1px 5px;
}
code {
  white-space: pre-wrap;
  padding: 1px 5px;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
  background-color: #eee;
}

<div class="" contenteditable="true" spellcheck="false" style="height: 350px;"><p>efiwefwpei&nbsp;<code>fowef</code>&nbsp;wefwefwefwefweff</p></div>

1. 为什么当我想要连续输入
时，光标不会放在code元素的结尾处
2. 我想在code元素的开头键入，它无法执行此操作

如何解决这个问题（以良好的用户体验和code元素的方式看待它）