[Malleys]

Если использовать стандартное сочетание Command-Z, то оно откатит вас к состоянию, когда вы сфокусировались на элементе. Command-Shift-Z возвратит к исходному. Чтобы это происходило по одному символу, нужно потерять и сразу возвратить фокус. Но действительно ли это нужно? Я считаю, что это усложнение. Мне показалось, что по словам лучше, наверное для разных целей подойдёт разный откат.

<button onclick="document.execCommand('undo')">Отменить</button>
<button onclick="document.execCommand('redo')">Возвратить</button>
<p>
  <textarea oninput="" placeholder="Стандартный откат"></textarea>
  <textarea oninput="this.blur();this.focus();" placeholder="по одному символу"></textarea>
  <textarea oninput="if(/[\s,.!?]/.test(event.data)) { this.blur();this.focus(); }" placeholder="по слову"></textarea>
</p>

Кнопки должны быть рядом с текстовым полем, или более точней они должны быть в поле видимости, ведь во время отката, фокус может переместиться с кнопки на элемент, а на планшете или телефоне нет возможности нажать Command-Z. Я к тому, что на сенсорных устройствах может не быть возможности совершить такой откат, кроме того, чтобы нажать на нашу придуманную кнопку.

часто здесь и в учебнике вижу в коде как дом-элементы по id пишут в короткой форме

В стандарте HTML 5.2 о поимённом доступе к элементам сказано:

Возвращает указанный элемент или коллекцию элементов.
Как правило, полагаясь на это, вы получите ломающийся код. То, какие идентификаторы перестанут подходить к этому API, может меняться со временем, так как, например, новые функции добавляются к веб-платформе. Вместо этого используйте document.getElementById() или document.querySelector ().

Например, если у вашего элемента идентификатор alert, то он не может быть получен при помощи этого API, поскольку функция с соответствующим именем уже определена в глобальном контексте. (alert-у присвоена именно функция)

Важно понимать, что это происходит именно из-за того, что идентификаторы в глобальном контексте используются, где может произойти конфликт с другими, уже назначенными свойствами объекта window.

Конечно это можно исправить...

for(const element of document.querySelectorAll("[id]")) {
	window[element.id] = element;
}

Но лучше поимённый доступ к элементам сделать не через глобальный объект, а через свой. И даже гарантированно будет работать

в боевом коде

const $ = {};

for(const element of document.querySelectorAll("[id]")) {
	$[element.id] = element;
}

// пример
$.zzz.onclick = e => document.execCommand('undo');
$.yyy.onclick = e => document.execCommand('redo');

Правда, классно?

Или даже так...

const $ = new Proxy({}, { get(_, id) { return document.getElementById(id) } });

// пример
$.zzz.onclick = e => document.execCommand('undo');
$.yyy.onclick = e => document.execCommand('redo');

Вообще супер, правда?