Javascript textarea отменить повтор

Question

Я делаю небольшой редактор JavaScript (для расширения Chrome), похожий на тот, что был в SO.

В текстовой области есть панель инструментов для манипулирования текстом. (например, окружить выделенный текст каким-либо шаблоном)

Мне было интересно, есть ли простой способ добиться этого, в настоящее время при использовании системы отмены / повтора это портит текст (я думаю, что система только отслеживает дельты между правками).

Answer 1

Возможно, вы можете смоделировать события textInput для манипулирования содержимым текстовой области.Изменения, внесенные таким образом, уважаются отменой / повтором, я думаю (я знаю, что они в Safari)

var element = document.getElementById('someTextarea');
var text = 'This text will be inserted in the textarea';
var event = document.createEvent('TextEvent');

event.initTextEvent('textInput', true, true, null, text);
element.dispatchEvent(event); // fire the event on the the textarea

По сути, текст вставляется так, как будто вы вставили его самостоятельно.Поэтому, если что-то выбрано, оно будет заменено текстом.Если выбора нет, текст будет вставлен в позицию каретки.И отмена / повтор должны работать нормально (отмена / восстановление всей вставленной строки за один раз), потому что браузер работает так, как будто вы напечатали / вставили его самостоятельно.

Как я уже сказал, я знаю, что это работает как шармс отменой / повтором в Safari, поэтому я предполагаю, что это работает и в Chrome.

Answer 2

Если текстовое поле имеет фокус и его курсор находится в правильном положении,

document.execCommand("insertText", false, "the text to insert");

вставит текст «текст для вставки», сохранив собственный стек отмены браузера.(См. Текущую работу Спецификация API редактирования HTML .) Chrome 18 поддерживает это, но я не уверен в точной версии, в которой он был представлен.

Answer 3

Вот решение, которое работает и в Firefox (но без функции отмены)

// Solution
function insertText(textarea, text) {
	// https://stackoverflow.com/a/55174550/288906
	if (!document.execCommand('insertText', false, text)) {
		textarea.setRangeText(text);
	}
}

// Demo code to add text on click
const textarea = document.querySelector('textarea');
textarea.onclick = () => insertText(
  textarea,
  '@'
);

<textarea>Click in here to add text</textarea>