Marks API: строчное форматирование по всему выделению

Находится ли каждый текстовый узел диапазона внутри обёртки, совпадающей со спецификацией, — узлы только из пробелов игнорируются, а при схлопнутом курсоре проверяются предки курсора. В отличие от selection.findParentTag (который смотрит только на граничные узлы выделения и их предков), выделение, лишь частично несущее метку, даёт false.

const highlight = { tag: 'span', className: 'my-highlight' };

// True only when the WHOLE selection is covered — a half-highlighted
// selection reports false, so a toolbar icon cannot lie
const active = editor.marks.has(highlight);

Ближайший элемент-предок, совпадающий со спецификацией, начиная с заданного узла (или со стартового контейнера текущего выделения). Совпадение учитывает всю спецификацию — тег, classNames и статичные значения атрибутов/стилей, — а не только имя тега.

const wrapper = editor.marks.find({ tag: 'mark' });

if (wrapper) {
  editor.selection.expandToTag(wrapper);
}

Прочитать текущие значения объявленных в спецификации свойств из обёртки в начале диапазона. Возвращает null, когда диапазон не находится внутри подходящей обёртки. Снимок несёт найденный элемент, а также его объявленные style-свойства и атрибуты — незаданные и прозрачные по значению style-свойства опускаются.

const colorMark = {
  tag: 'mark',
  style: { color: (state) => state.color },
};

// Preselect the current colour in a picker UI
const snapshot = editor.marks.read(colorMark);
const current = snapshot?.style['color']; // e.g. 'rgb(37, 99, 235)'

Обернуть диапазон меткой или обновить подходящие обёртки на месте. Разрезает частично покрытые обёртки той же семьи на границах диапазона, расширяет диапазон на замыкающий пробел, который браузеры исключают из выделения по двойному клику, и оставляет новое содержимое выделенным. Возвращает созданные или обновлённые элементы-обёртки. Схлопнутый диапазон (голый курсор, когда ничего не выделено) — пустая операция: apply возвращает пустой массив, не трогая ни DOM, ни выделение.

editor.marks.apply(colorMark, { color: '#d97706' });

// Same identity → the SAME wrapper is updated in place, not nested
editor.marks.apply(colorMark, { color: '#2563eb' });

Удалить объявленные в спецификации свойства и классы из обёрток в диапазоне, снимая обёртки, оставшиеся пустыми. Для несхлопнутого диапазона частично покрытые обёртки разрезаются, чтобы текст за пределами диапазона сохранил своё форматирование. Схлопнутый курсор вместо этого целиком берёт охватывающую его обёртку — разреза не происходит, и свойства спецификации снимаются со всей обёртки. Выделение восстанавливается и в том, и в другом случае. Возвращает обёртки, которые уцелели, потому что всё ещё несут другие свойства.

editor.marks.remove(colorMark);
// A <mark> that also carried a background-colour spec survives
// with only the colour stripped

remove, когда диапазон уже несёт метку, иначе apply. Возвращает получившееся состояние: true, когда метка теперь применена. При схлопнутом курсоре без уже имеющейся метки возвращает true, ничего не применив, — apply на схлопнутом диапазоне — пустая операция. Вызывайте toggle на несхлопнутом диапазоне или считайте возвращаемое значение намеренным состоянием, а не подтверждением.

const highlight = { tag: 'span', className: 'my-highlight' };

const nowApplied = editor.marks.toggle(highlight);