@brandup/ui-richeditor 1.0.38 → 1.0.39

package/README.md

@@ -65,12 +65,14 @@ editor.onChange(({ value }) => console.log(value));
 | --- | --- |
 | `editable` | Редактируемый элемент |
 | `format`, `formatTools`, `editorActions`, `formatStorage`, `formatMarkers`, `multiline` | Параметры экземпляра |
-| `getValue(): string` | Сериализованное значение (по `storage`) |
+| `getValue(): string` | Сериализованное значение (по `storage`) — считается по DOM, всегда актуально |
 | `setValue(value: string): void` | Установить значение (нормализует, генерирует `change`) |
+| `flushChange(): void` | Доставить отложенное `change` немедленно (см. ниже) |
 | `getLength(): number` | Длина текста (без учёта переводов строк) |
 | `focus(): void` | Установить фокус |
 | `applyFormat(tool): void` | Переключить формат на выделении (слово целиком) |
 | `isToolActive(tool): boolean` | Активен ли формат на текущем выделении |
+| `activeTools(): ReadonlySet<FormatTool>` | Активные форматы всех инструментов сразу (панель обновляется на каждое движение каретки, поштучный опрос обходил бы содержимое на каждую кнопку) |
 | `clearFormat(): void` | Снять всё форматирование с выделения (без выделения — со слова под кареткой) |
 | `clearAllFormat(): void` | Снять всё форматирование со всего содержимого |
 | `undo(): void`, `redo(): void` | Отмена и повтор |
@@ -78,17 +80,34 @@ editor.onChange(({ value }) => console.log(value));
 | `applyAction(action): void` | Выполнить действие панели (`erase`/`undo`/`redo`) |
 | `isActionEnabled(action): boolean` | Доступно ли действие сейчас |
 | `insertText(text): void` | Вставить текст в каретку (или вместо выделения) с учётом режима набора |
+| `selection: Selection \| null` | Выделение, если оно внутри редактора (иначе `null`) — единая точка доступа для хоста |
+| `selectNode(node): void` | Выделить узел внутри редактора: следующая вставка заменит его целиком |
 | `onChange(handler)` | Подписка на событие `richeditor-change` |
 | `destroy(): void` | Разворачивает элемент обратно и освобождает ресурсы |
 
+## Событие изменения
+
+`getValue()` считает значение по DOM и точен всегда. А вот **уведомление** `richeditor-change` при печати доставляется с задержкой: сериализация — самая дорогая операция редактора (обход всего содержимого), а печать даёт `input` на каждый символ.
+
+Это троттлинг, а не debounce: при непрерывном наборе событие приходит каждые ~150 мс, а не откладывается до паузы. Откладывается только печать — вставка, форматирование, отмена/повтор, `setValue` и Enter сообщаются сразу.
+
+Отложенное доставляется немедленно:
+
+- при потере фокуса и при `destroy()` — редактором самостоятельно;
+- по вызову `flushChange()` — его должен звать хост перед тем, как значение прочитают снаружи.
+
+Хосты пакета (`@brandup/ui-textbox`, `@brandup/ui-messageeditor`) держат в поле формы копию значения и сбрасывают отложенное перед каждым чтением значения снаружи: отправка формы, `validate()`, `getValue()`. На `submit` синхронизация идёт в фазе перехвата на документе — то есть раньше любого обработчика самой формы и независимо от того, включена ли её валидация (`novalidate`). Так что в отправляемых данных значение всегда актуально; свой хост обязан делать то же самое (в `@brandup/ui-input` для этого есть `__syncValue()`).
+
+Не покрыт единственный случай: `new FormData(form)` **вне** отправки формы, в пределах окна троттлинга после ввода. Список полей там собирается до того, как о нём можно узнать, а точечно заменить свою запись `FormData` не позволяет. Читайте в таком коде `getValue()` хоста — он синхронизирует сам.
+
 ## Поведение форматирования
 
 - Формат — переключатель (toggle): повторное применение снимает его.
 - Применяется к слову целиком: курсор внутри слова или выделение его части → формат охватывает всё слово; исходное выделение/каретка сохраняются.
 - **Режим набора**: на пустом месте (между пробелами / в пустом поле) кнопка/хоткей включают «ожидающий» формат — он применится к следующему введённому тексту. Сбрасывается при перемещении каретки, клике или потере фокуса.
 - Хоткеи `Ctrl/Cmd+B/I/U`. Зачёркивание — только кнопкой.
-- **Отмена/повтор**: `Ctrl/Cmd+Z` — отмена, `Ctrl+Y` или `Ctrl/Cmd+Shift+Z` — повтор. История форматирования, абзацев, переносов и печати ведётся редактором (нативный undo не видит ручных DOM-правок), поэтому **доступна только при включённом форматировании** (`format: true`). Печать коалесится в один шаг отмены по паузе ~300 мс; глубина истории — 100 шагов.
-- При потере фокуса и после `setValue` пробелы нормализуются (схлопывание повторов + обрезка краёв строк).
+- **Отмена/повтор**: `Ctrl/Cmd+Z` — отмена, `Ctrl+Y` или `Ctrl/Cmd+Shift+Z` — повтор. История форматирования, абзацев, переносов и печати ведётся редактором (нативный undo не видит ручных DOM-правок), поэтому **доступна только при включённом форматировании** (`format: true`). Печать коалесится в один шаг отмены по паузе ~300 мс; глубина истории — 100 шагов, но не более ~512 КБ снимков суммарно (снимок — это всё содержимое редактора, поэтому на длинном тексте старые шаги вытесняются раньше).
+- При потере фокуса и после `setValue` пробелы нормализуются (схлопывание повторов + обрезка краёв строк). Неразрывный пробел (`U+00A0`) считается обычным: браузер сам подставляет его в `contenteditable` вместо пробела, который иначе схлопнулся бы при отображении, и в значение он не попадает.
 
 ## Очистка форматирования и действия панели
 
@@ -133,16 +152,21 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются.
 
-## Вставка форматированного текста
+## Вставка текста
 
 При включённом форматировании вставка (`paste`) сохраняет форматирование из буфера обмена (`text/html`):
 
 - разметка санитизируется до включённых инструментов (синонимы `STRONG/EM/DEL/INS` → канонические `b/i/s/u`, всё прочее — `span`, стили, классы, `<style>`/`<script>` — отбрасывается, текст сохраняется);
 - **multiline** сохраняет абзацы `<p>` и мягкие переносы `<br>`, разбивая текущий абзац по каретке; **single-line** — инлайн, абзацы/переносы становятся пробелами;
-- если `text/html` нет — простая текстовая вставка (как раньше);
 - хук `filterPaste` остаётся в силе: вернул `null` — вставка отклоняется; изменил текст (обрезка по длине, фильтр по типу) — форматирование не сохраняется, вставляется очищенный текст.
 
-Вся вставка — один шаг истории (Ctrl+Z откатывает целиком).
+Если `text/html` нет (или форматирование выключено), вставляется простой текст — по той же модели абзацев:
+
+- **multiline**, режим `block` — пустая строка разделяет абзацы `<p>`, одиночный перенос остаётся мягким `<br>`;
+- **multiline**, режим `break` — абзацы не создаются, все переносы мягкие;
+- **single-line** — строки склеиваются пробелами.
+
+Каретка в обоих случаях встаёт сразу за вставленным текстом, а вся вставка — один шаг истории (Ctrl+Z откатывает целиком).
 
 ## Формат хранения
 
@@ -155,6 +179,8 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 Маркеры markdown настраиваются через `markers`. При разборе применяются по убыванию длины, поэтому длинный маркер срабатывает раньше короткого-префикса. Глубоко вложенные комбинации гарантированно сохраняются только в режиме `html`.
 
+Вложенные пары разбираются (`_а **б** в_`), а вот **пересекающиеся** остаются текстом: в `**а _б** в_` внутренняя пара пересекает внешнюю, разметкой такое невыразимо, и короткий маркер отбрасывается — как и в мессенджерах.
+
 Разметка распознаётся по правилам мессенджеров: маркер стоит на **границе слова**, содержимое не начинается и не заканчивается пробелом и не пересекает перенос строки. Поэтому `5**4 = 20`, `2 ** 2 ** 2` и `файл_имя_файла.txt` остаются обычным текстом — иначе редактор показывал бы форматирование там, где получатель увидит исходные символы. Форматирование применяется к словам целиком, так что собственный вывод редактора всегда разбирается обратно.
 
 Краевые пробелы при сериализации выносятся за маркеры (`<b> слово </b>дальше` → `**слово** дальше`), иначе разметка не сработала бы ни у нас, ни у мессенджера. А вот формат, приклеенный к соседнему слову — такое приходит только со вставкой внешнего HTML (`супер<b>бонус</b>`), — маркерами невыразим: значение сохранится как `супер**бонус**` и разметкой уже не станет. Это осознанное решение: текст остаётся ровно тем, что набрал пользователь, а не молча теряет форматирование.

package/package.json

@@ -27,12 +27,12 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.7",
-    "@brandup/ui-kit": "^1.0.38"
+    "@brandup/ui-kit": "^1.0.39"
   },
   "files": [
     "source",

package/source/editing.ts

@@ -1,13 +1,11 @@
 // Низкоуровневые операции редактирования на чистом Selection/Range: абзацы, мягкие переносы,
-// каретка, расширение/обрезка выделения. Без состояния редактора и без истории —
-// вызывающий сам решает, когда записывать undo-шаг.
-
-function isBlock(node: Node): boolean {
-	return (
-		node.nodeType === Node.ELEMENT_NODE &&
-		((node as Element).tagName === "P" || (node as Element).tagName === "DIV")
-	);
-}
+// каретка, расширение/обрезка выделения, разбор вставляемого содержимого. Без состояния
+// редактора и без истории — вызывающий сам решает, когда записывать undo-шаг.
+
+import { deserialize } from "./serialize";
+import { isBlock } from "./paragraphs";
+import { documentSelection, innerSelection } from "./selection";
+import type { FormatMarkers, FormatTool } from "./format-config";
 
 function emptyParagraph(): HTMLParagraphElement {
 	const p = document.createElement("p");
@@ -25,7 +23,7 @@ function caretToStart(node: Node) {
 	const range = document.createRange();
 	range.setStart(node, 0);
 	range.collapse(true);
-	const selection = window.getSelection();
+	const selection = documentSelection(node);
 	if (selection) {
 		selection.removeAllRanges();
 		selection.addRange(range);
@@ -40,7 +38,7 @@ export function caretToEnd(editable: HTMLElement, multiline: boolean) {
 	const last = multiline ? editable.lastElementChild : null;
 	range.selectNodeContents(last && isBlock(last) ? last : editable);
 	range.collapse(false);
-	const sel = window.getSelection();
+	const sel = documentSelection(editable);
 	if (sel) {
 		sel.removeAllRanges();
 		sel.addRange(range);
@@ -50,13 +48,13 @@ export function caretToEnd(editable: HTMLElement, multiline: boolean) {
 /** Фокус и выделение всего содержимого (например, readonly-режим). */
 export function selectAllContent(editable: HTMLElement) {
 	editable.focus();
-	window.getSelection()?.selectAllChildren(editable);
+	documentSelection(editable)?.selectAllChildren(editable);
 }
 
 /** Enter в multiline: разбить текущий абзац по каретке на два <p>. */
 export function insertParagraph(editable: HTMLElement) {
-	const selection = window.getSelection();
-	if (!selection || selection.rangeCount === 0 || !editable.contains(selection.anchorNode)) return;
+	const selection = innerSelection(editable);
+	if (!selection) return;
 
 	const range = selection.getRangeAt(0);
 	range.deleteContents();
@@ -101,8 +99,8 @@ export function insertParagraph(editable: HTMLElement) {
 
 /** Shift/Ctrl+Enter в multiline: вставить мягкий перенос <br>. */
 export function insertSoftBreak(editable: HTMLElement) {
-	const selection = window.getSelection();
-	if (!selection || selection.rangeCount === 0 || !editable.contains(selection.anchorNode)) return;
+	const selection = innerSelection(editable);
+	if (!selection) return;
 
 	const range = selection.getRangeAt(0);
 	range.deleteContents();
@@ -168,15 +166,80 @@ export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement
 }
 
 /** Обрезает пробелы по краям абзаца (после схлопывания) — у крайних текстовых узлов. */
-export function trimParagraphEdges(p: HTMLElement) {
+function trimParagraphEdges(p: HTMLElement) {
 	const walker = document.createTreeWalker(p, NodeFilter.SHOW_TEXT);
 	const texts: Text[] = [];
 	for (let t = walker.nextNode() as Text | null; t; t = walker.nextNode() as Text | null) texts.push(t);
 	if (!texts.length) return;
 
-	texts[0].textContent = (texts[0].textContent ?? "").replace(/^ /, "");
+	// неразрывный пробел режем наравне с обычным — из буфера обмена он приходит регулярно
+	texts[0].textContent = (texts[0].textContent ?? "").replace(/^[ \u00A0]/, "");
 	const last = texts[texts.length - 1];
-	last.textContent = (last.textContent ?? "").replace(/ $/, "");
+	last.textContent = (last.textContent ?? "").replace(/[ \u00A0]$/, "");
+}
+
+/**
+ * Строки вставляемого текста → абзацы `<p>` с мягкими переносами `<br>` внутри.
+ *
+ * При `blocks` абзацы разделяет пустая строка (режим `block` многострочного редактора);
+ * иначе весь текст — один абзац, а все переносы мягкие: так вставка ложится в ту же модель,
+ * которую даёт Enter, и значение после неё разбирается обратно.
+ */
+export function buildParagraphs(lines: string[], blocks: boolean): HTMLElement[] {
+	const groups: string[][] = [];
+
+	if (blocks) {
+		let group: string[] = [];
+		for (const line of lines) {
+			if (line !== "") group.push(line);
+			else if (group.length) {
+				groups.push(group);
+				group = [];
+			}
+		}
+		if (group.length) groups.push(group);
+	} else if (lines.length) groups.push(lines);
+
+	return groups.map((group) => {
+		const p = document.createElement("p");
+		group.forEach((line, index) => {
+			if (index > 0) p.appendChild(document.createElement("br"));
+			p.appendChild(document.createTextNode(line));
+		});
+
+		return p;
+	});
+}
+
+/**
+ * Разбирает HTML из буфера обмена в абзацы `<p>`, оставляя только разрешённые инструменты.
+ * Пустой результат — вставлять нечего (вызывающий откатится на простой текст).
+ */
+export function sanitizePastedHtml(html: string, tools: FormatTool[], markers: FormatMarkers): HTMLElement[] {
+	// убираем мусорные элементы (Word/браузер: стили, скрипты, заголовок документа)
+	const source = document.createElement("template");
+	source.innerHTML = html;
+	source.content.querySelectorAll("script, style, head, meta, link, title, noscript").forEach((el) => el.remove());
+
+	// единый источник санитизации — deserialize (теги-синонимы → канонические, лишнее развёрнуто)
+	const holder = document.createElement("template");
+	holder.innerHTML = deserialize(source.innerHTML, "html", tools, markers, true);
+
+	// внешний HTML: пробелы/переводы строк между тегами не значимы — схлопываем,
+	// иначе литеральные \n (pre-wrap) и отступы дают лишние переносы
+	const walker = document.createTreeWalker(holder.content, NodeFilter.SHOW_TEXT);
+	for (let t = walker.nextNode(); t; t = walker.nextNode())
+		t.textContent = (t.textContent ?? "").replace(/\s+/g, " ");
+
+	const paras = Array.from(holder.content.children) as HTMLElement[];
+	for (const p of paras) trimParagraphEdges(p);
+
+	// отбрасываем пустые краевые абзацы (ведущие/хвостовые \n и <br>-обёртки из буфера),
+	// иначе перед и после вставленного текста появляются пустые строки
+	while (paras.length && (paras[0].textContent ?? "").trim() === "") paras.shift();
+	while (paras.length && (paras[paras.length - 1].textContent ?? "").trim() === "") paras.pop();
+
+	return paras;
 }
 
 /**
@@ -207,9 +270,10 @@ export function expandRangeToWords(editable: HTMLElement, range: Range): Range {
 
 /** Убирает пробелы по краям выделения (например, после двойного клика по слову). */
 export function trimSelectionWhitespace(editable: HTMLElement) {
-	const selection = window.getSelection();
-	if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+	const selection = innerSelection(editable);
+	if (!selection || selection.isCollapsed) return;
 
+	// внутри редактора должно быть не только начало выделения, но и его конец
 	const range = selection.getRangeAt(0);
 	if (!editable.contains(range.startContainer) || !editable.contains(range.endContainer)) return;
 

package/source/format.ts

@@ -21,9 +21,13 @@ export {
 } from "./format-config";
 export { serialize, deserialize } from "./serialize";
 export {
+	documentSelection,
+	innerSelection,
+	preserveCaret,
 	selectionCharBounds,
 	restoreSelection,
 	mapCharOffset,
+	activeFormats,
 	toggleFormat,
 	clearFormat,
 	clearAllFormat,
@@ -32,4 +36,4 @@ export {
 	insertFormattedText,
 	isFormatActive,
 } from "./selection";
-export { normalizeWhitespace, normalizeParagraphs, ensureParagraphs } from "./paragraphs";
+export { isBlock, normalizeWhitespace, normalizeParagraphs, ensureParagraphs } from "./paragraphs";

package/source/history.ts

@@ -5,7 +5,7 @@
 // хуже того, ломается при смешивании с ручными мутациями. Поэтому ведём свою историю снимков
 // (innerHTML + позиция выделения). Используется только при включённом форматировании.
 
-import { restoreSelection, selectionCharBounds } from "./format";
+import { documentSelection, innerSelection, restoreSelection, selectionCharBounds } from "./format";
 
 interface Snapshot {
 	html: string;
@@ -18,6 +18,9 @@ export type HistoryKind = "type" | "op";
 
 const COALESCE_MS = 300; // печать в пределах паузы — один шаг отмены
 const MAX_DEPTH = 100; // ограничение глубины истории (память)
+// Снимок — это весь innerHTML редактора, поэтому глубины мало: сто шагов на длинном тексте
+// это мегабайты на одно поле. Ограничиваем ещё и суммарный объём, отбрасывая самые старые шаги.
+const MAX_CHARS = 512 * 1024;
 
 export class EditorHistory {
 	private readonly __root: HTMLElement;
@@ -25,6 +28,7 @@ export class EditorHistory {
 	private __redo: Snapshot[] = [];
 	private __lastKind: HistoryKind | null = null;
 	private __lastTime = 0;
+	private __chars = 0; // суммарный объём снимков отмены — см. MAX_CHARS
 
 	constructor(root: HTMLElement) {
 		this.__root = root;
@@ -41,11 +45,8 @@ export class EditorHistory {
 	}
 
 	private __snapshot(): Snapshot {
-		const sel = window.getSelection();
-		let start = 0;
-		let end = 0;
-		if (sel && sel.rangeCount > 0 && this.__root.contains(sel.anchorNode))
-			[start, end] = selectionCharBounds(this.__root, sel.getRangeAt(0));
+		const sel = innerSelection(this.__root);
+		const [start, end] = sel ? selectionCharBounds(this.__root, sel.getRangeAt(0)) : [0, 0];
 
 		return { html: this.__root.innerHTML, start, end };
 	}
@@ -68,7 +69,10 @@ export class EditorHistory {
 		if (top && top.html === snap.html) return; // состояние не изменилось — не дублируем
 
 		this.__undo.push(snap);
-		if (this.__undo.length > MAX_DEPTH) this.__undo.shift();
+		this.__chars += snap.html.length;
+		while (this.__undo.length > MAX_DEPTH || (this.__chars > MAX_CHARS && this.__undo.length > 1))
+			this.__chars -= this.__undo.shift()!.html.length;
+
 		this.__redo = [];
 	}
 
@@ -77,6 +81,7 @@ export class EditorHistory {
 		const prev = this.__undo.pop();
 		if (!prev) return false;
 
+		this.__chars -= prev.html.length;
 		this.__redo.push(this.__snapshot());
 		this.__restore(prev);
 		this.__lastKind = null; // следующая печать начнёт новый шаг
@@ -88,7 +93,9 @@ export class EditorHistory {
 		const next = this.__redo.pop();
 		if (!next) return false;
 
-		this.__undo.push(this.__snapshot());
+		const current = this.__snapshot();
+		this.__undo.push(current);
+		this.__chars += current.html.length;
 		this.__restore(next);
 		this.__lastKind = null;
 		return true;
@@ -96,7 +103,9 @@ export class EditorHistory {
 
 	private __restore(snap: Snapshot): void {
 		this.__root.innerHTML = snap.html;
-		const sel = window.getSelection();
+
+		// содержимое заменено целиком — выделение восстанавливаем, где бы оно ни стояло
+		const sel = documentSelection(this.__root);
 		if (sel) restoreSelection(this.__root, snap.start, snap.end, sel);
 	}
 }

package/source/index.ts

@@ -10,6 +10,9 @@ export {
 	parseFormatTools,
 	defaultFormatMarkers,
 	normalizeWhitespace,
+	selectionCharBounds,
+	restoreSelection,
+	preserveCaret,
 	type EditorAction,
 	type FormatTool,
 	type FormatStorage,

package/source/paragraphs.ts

@@ -3,10 +3,30 @@
 
 import { cleanupFormatting } from "./selection";
 
+/**
+ * Что в содержимом редактора считается абзацем. Единственное определение модели абзацев:
+ * по нему идут и разбор с сериализацией, и правки каретки, и нормализация. `<div>` признаём
+ * наравне с `<p>` — его приносят вставка и чужой contenteditable, а нормализация приводит к `<p>`.
+ */
+export function isBlock(node: Node): boolean {
+	if (node.nodeType !== Node.ELEMENT_NODE) return false;
+
+	const tag = (node as Element).tagName;
+	return tag === "P" || tag === "DIV";
+}
+
+// Пробел, таб и неразрывный пробел (U+00A0) — всё это «пробел» при наборе; см. normalizeWhitespace.
+// После схлопывания в тексте остаются только обычные пробелы, поэтому дальше по коду хватает " ".
+const SPACE_RUN = /[ \t\u00A0]+/g;
+
 /**
  * Нормализует пробелы в редакторе: схлопывает повторяющиеся пробелы/табы в один
  * и обрезает пробелы по краям каждой строки. BR и блочные элементы (DIV/P) —
  * границы строк; инлайновое форматирование (b/i/s/u) на строки не влияет.
+ *
+ * Неразрывный пробел (U+00A0) считается обычным: браузер сам подставляет его в contenteditable
+ * вместо пробела, который иначе схлопнулся бы при отображении. Без этого набранные подряд
+ * пробелы не схлопывались бы вовсе, а U+00A0 уезжал бы в сохраняемое значение.
  */
 export function normalizeWhitespace(root: HTMLElement) {
 	type Item = { kind: "text"; node: Text } | { kind: "break" };
@@ -27,7 +47,7 @@ export function normalizeWhitespace(root: HTMLElement) {
 				const el = child as HTMLElement;
 				if (el.tagName === "BR") {
 					items.push({ kind: "break" });
-				} else if (el.tagName === "DIV" || el.tagName === "P") {
+				} else if (isBlock(el)) {
 					items.push({ kind: "break" });
 					flatten(el);
 					items.push({ kind: "break" });
@@ -52,7 +72,7 @@ export function normalizeWhitespace(root: HTMLElement) {
 			continue;
 		}
 
-		let text = item.node.data.replace(/[ \t]+/g, " ");
+		let text = item.node.data.replace(SPACE_RUN, " ");
 		if (atLineStart) text = text.replace(/^ /, ""); // пробел в начале строки
 		if (pendingSpaceNode && text.startsWith(" ")) text = text.slice(1); // двойной пробел на границе узлов
 
@@ -96,7 +116,7 @@ export function ensureParagraphs(root: HTMLElement) {
 	for (const node of Array.from(root.childNodes)) {
 		const el = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : null;
 
-		if (el && (el.tagName === "P" || el.tagName === "DIV")) {
+		if (el && isBlock(el)) {
 			flushRun(node);
 			if (el.tagName === "DIV") {
 				const p = document.createElement("p");

package/source/richeditor.less

@@ -107,6 +107,7 @@
 	}
 
 	& .format-button,
+	& .host-button,
 	& .action-button {
 		width: calc(var(--input-height, 46px) - 12px);
 		height: calc(var(--input-height, 46px) - 12px);
@@ -161,6 +162,9 @@
 	flex-flow: row wrap;
 
 	& .emoji {
+		// в панели больше семисот кнопок: за пределами прокрутки браузер их не раскладывает
+		content-visibility: auto;
+		contain-intrinsic-size: 32px 32px;
 		width: 32px;
 		height: 32px;
 		padding: 0;