Я использую этот фрагмент, чтобы попытаться исправить «ошибку», при которой Firefox очень странно обрабатывает перенос строки.
Однако, если вы выделите текст в div, установив в нем курсор и нажмите cmd + A / ctrl + A, а затем клавишу со стрелкой вправо, чтобы перейти в конец текста, а затем нажмите return, вы получите ошибку IndexSizeError: Index or size is negative or greater than the allowed amount.
Как мне это обойти?
Также, если вы поместите курсор в середину текста и нажмете shift + enter, я хочу, чтобы он размыл текст, но перед этим добавляется разрыв строки. Я понимаю, почему, но где мне разместить код if (shift), чтобы он выполнялся правильно?
$(document).on('keydown', 'div', function(e) {
var nl = e.keyCode == 13;
var shift = e.shiftKey;
if (nl) {
var sel, node, offset, text, textBefore, textAfter, range;
sel = window.getSelection();
// the node that contains the caret
node = sel.anchorNode;
// if ENTER was pressed while the caret was inside the input field
// prevent the browsers from inserting <div>, <p>, or <br> on their own
e.preventDefault();
// the caret position inside the node
offset = sel.anchorOffset;
// insert a '\n' character at that position
text = node.textContent;
textBefore = text.slice( 0, offset );
textAfter = text.slice( offset ) || ' ';
node.textContent = textBefore + '\n' + textAfter;
// position the caret after that new-line character
range = document.createRange();
range.setStart( node, offset + 1 );
range.setEnd( node, offset + 1 );
// update the selection
sel.removeAllRanges();
sel.addRange( range );
// Blur on shift+return
if (shift) {
$(this).blur();
}
}
});div[contenteditable] {
white-space: pre-wrap;
overflow-wrap: break-word;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable = "true">Add line-breaks here</div>Идеи? Спасибо!!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Любые идеи? Спасибо!