Карета из довольных глюков с переводом строки - PullRequest
0 голосов
/ 11 апреля 2020

Я новичок в contenteditable-материалах и пытаюсь написать что-то вроде WYSIWYG-редактора с пользовательскими правилами форматирования и синтаксического анализа. Я использую contenteditable = true - div и теперь пытаюсь отформатировать его при вводе, сохраняя позицию каретки. Это мой карет-реставратор на основе этого ответа :

class FlexCaret {
	constructor(context) {
		var selection = window.getSelection();
		var range = selection.getRangeAt(0);
		range.setStart(  context, 0 );
		var len = range.toString().length;
		console.log(len);

		var that = this;
		return function restore(){
			var pos = that.ResolveNodeAt(context, len);
			selection.removeAllRanges();
			var range = new Range();
			range.setStart(pos.node ,pos.position);
			selection.addRange(range);
		}
	}
	ResolveNodeAt(root, index){
		var lastNode = null;
	
		var treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT,function next(elem) {
			if(index > elem.textContent.length){
				index -= elem.textContent.length;
				lastNode = elem;
				return NodeFilter.FILTER_REJECT
			}
			return NodeFilter.FILTER_ACCEPT;
		});
		var c = treeWalker.nextNode();
		return {
			node: c? c: root,
			position: c? index:  0
		};
	}
}

Теперь я пытаюсь использовать его так:

$("#evp-new-input").on("input", function(e){
    var car = new FlexCaret(this),
        parsedText = nodeParser($(this).html());

    $(this).html(parsedText);

    car();
})

каретка продолжает переходить к последней строке, содержащей текст, в противном случае к самой первой строки, но НИКОГДА на новой строке я только что вставил. Это действительно мешает мне работать и снижает удобство использования этого LOT.

Я действительно надеюсь, что у кого-то есть идея, как это исправить!

С уважением,

thelaumix

...