@brandup/ui-richeditor 1.0.44 → 1.0.47

package/source/richeditor.less

@@ -1,6 +1,53 @@
 // Стили RichEditor: редактируемая область, отображение тегов форматирования
 // и общий тулбар форматирования (живёт в document.body, см. ./toolbar).
-// CSS-переменные --input-* предоставляет @brandup/ui-kit; заданы fallback'и для standalone-использования.
+
+// Собственные переменные пакета и их значения по умолчанию. Держим их здесь, а не по месту:
+// так виден весь набор целиком, и менять значение приходится в одном месте, а не во всех, где
+// переменная встретилась (у кода их было по две на каждую).
+//
+// Переменные --input-*, --hover--input-*, --focus--input-*, --placeholder-* и --svg-* приходят
+// из @brandup/ui-kit и здесь не объявляются: объявив их в :root, пакет перекрыл бы значения
+// кита. Их запасные значения остаются по месту — они на случай использования пакета без кита.
+:root {
+	// цитата: линия слева, как её рисуют мессенджеры
+	--richeditor-quote-line: rgba(0, 0, 0, 0.2);
+
+	// код — и моноширинный, и блок
+	--richeditor-code-fill: rgba(0, 0, 0, 0.06);
+	--richeditor-code-font: ui-monospace, "Cascadia Mono", Consolas, monospace;
+
+	// спойлер: у получателя текст закрыт, в поле показан плашкой
+	--richeditor-spoiler-fill: rgba(0, 0, 0, 0.14);
+
+	// Правка адреса. В контейнере хоста панель на это время растягивается по нему, и ширину поля
+	// задавать не нужно — оно занимает всё, что осталось от кнопок. В document.body растягиваться
+	// не по чему, там ширину задаёт первая переменная; вторая ограничивает растянутую панель.
+	--richeditor-link-width: 320px;
+	--richeditor-link-max-width: 500px;
+
+	// ссылка
+	--richeditor-link-color: #2481cc;
+	// отступ подчёркивания от базовой линии; auto — на усмотрение шрифта
+	--richeditor-link-underline-offset: auto;
+
+	// Место под подчёркивание последней строки. Подчёркивание рисуется, но в раскладке места
+	// не занимает, а краевые отступы абзаца обнулены — на единственной строке абзац разом
+	// первый и последний, и снизу не остаётся ничего. Прокручиваемая коробка режет линию
+	// по своему краю, и отступом от базовой линии это не лечится: он только придвигает её
+	// к этому краю. Место берётся здесь.
+	--richeditor-underline-room: 2px;
+
+	// Панель. Кнопка — и её же размера кнопки поповера адреса; по ней же высота поля адреса.
+	// Значение своё, а не считанное от высоты поля ввода: панель живёт над полем, но размером
+	// с ним не связана, а вычитание отступов задавало бы размер дважды и могло не сойтись.
+	--richeditor-toolbar-padding: 3px;
+	--richeditor-toolbar-button-size: 34px;
+
+	// панель смайликов
+	--richeditor-emoji-size: 32px;
+	// строк в группе — панель ставит своё значение на каждую группу, здесь оно запасное
+	--richeditor-emoji-rows: 8;
+}
 
 // .ui-richeditor — это сам редактируемый элемент (обёртки нет, тулбар общий в body)
 .ui-richeditor {
@@ -11,6 +58,8 @@
 	word-wrap: anywhere;
 	white-space: pre-wrap; // сохраняем пробелы (в т.ч. ведущие/повторяющиеся)
 
+	--link-weight: inherit;
+	
 	// абзацы — без user-agent-полей, иначе первый <p> «съезжает» вниз (как новая строка)
 	& p {
 		margin: 0;
@@ -20,8 +69,9 @@
 			padding-top: 0;
 		}
 
+		// не ноль: последней строке нужно место под подчёркивание — см. --richeditor-underline-room
 		&:last-child {
-			padding-bottom: 0;
+			padding-bottom: var(--richeditor-underline-room);
 		}
 	}
 
@@ -30,7 +80,7 @@
 	& blockquote {
 		margin: 0;
 		padding: 5px 0 5px 10px;
-		border-left: 3px solid var(--richeditor-quote-line, rgba(0, 0, 0, 0.2));
+		border-left: 3px solid var(--richeditor-quote-line);
 	}
 
 	// Блок кода: подложка на всю строку и моноширинный шрифт. Собственные поля тут нужны —
@@ -39,8 +89,8 @@
 		margin: 5px 0;
 		padding: 5px 8px;
 		border-radius: 3px;
-		background-color: var(--richeditor-code-fill, rgba(0, 0, 0, 0.06));
-		font-family: var(--richeditor-code-font, ui-monospace, "Cascadia Mono", Consolas, monospace);
+		background-color: var(--richeditor-code-fill);
+		font-family: var(--richeditor-code-font);
 		font-size: 0.92em;
 		// содержимое переносится по границе редактора, как и обычный текст
 		white-space: pre-wrap;
@@ -74,13 +124,20 @@
 		text-decoration: underline;
 	}
 
+	& a {
+		color: var(--richeditor-link-color);
+		text-decoration: underline;
+		text-underline-offset: var(--richeditor-link-underline-offset);
+		cursor: text; // текст ссылки правят на месте, переходить по ней из редактора некуда
+	}
+
 	// Спойлер: у получателя текст закрыт до нажатия, а в поле его прячут не от автора —
 	// показываем плашкой, чтобы было видно и что написано, и что оно будет скрыто.
 	& spoiler,
 	& tg-spoiler {
 		border-radius: 3px;
 		padding: 0 2px;
-		background-color: var(--richeditor-spoiler-fill, rgba(0, 0, 0, 0.14));
+		background-color: var(--richeditor-spoiler-fill);
 	}
 
 	// Строку не раздвигает. Наследовать межстрочный интервал для этого мало: у моноширинного
@@ -91,8 +148,8 @@
 	& code {
 		border-radius: 3px;
 		padding: 0 3px;
-		background-color: var(--richeditor-code-fill, rgba(0, 0, 0, 0.06));
-		font-family: var(--richeditor-code-font, ui-monospace, "Cascadia Mono", Consolas, monospace);
+		background-color: var(--richeditor-code-fill);
+		font-family: var(--richeditor-code-font);
 		font-size: 0.92em;
 		line-height: 0;
 	}
@@ -137,25 +194,18 @@
 // По умолчанию в document.body (position: fixed, координаты задаёт ./toolbar);
 // с классом .in-container — позиционируется над контейнером-родителем (position: absolute).
 .ui-richeditor-toolbar {
+	// Обёртка: только положение. Вид и содержимое — на коробке внутри, поэтому её размер
+	// (он меняется вместе с содержимым) точку привязки не трогает, а выпадающие слои висят
+	// на обёртке и её коробкой не обрезаются.
 	display: none;
 	position: fixed;
 	z-index: 1000;
-	flex-flow: row nowrap;
-	align-items: center;
-	gap: 2px;
-	padding: 3px;
-	background-color: var(--input-fill, #fff);
-	border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
-	border-radius: var(--input-border-radius, 0);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	// панель тоже монтируется в разметку хоста — курсор поля ввода ей не наследовать
-	cursor: default;
 
 	--svg-size: 18px;
 	--svg-fill: var(--input-color, #222);
 
 	&.visible {
-		display: flex;
+		display: block;
 	}
 
 	// позиционирование относительно контейнера-родителя (например, .ui-textbox)
@@ -164,6 +214,24 @@
 		left: 0;
 		bottom: 100%;
 		margin-bottom: 6px;
+
+		&.link-editing {
+			right: 0;
+		}
+	}
+
+	& .toolbar-body {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		gap: 2px;
+		padding: var(--richeditor-toolbar-padding);
+		background-color: var(--input-fill, #fff);
+		border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
+		border-radius: var(--input-border-radius, 0);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		// панель тоже монтируется в разметку хоста — курсор поля ввода ей не наследовать
+		cursor: default;
 	}
 
 	// разделитель между инструментами форматирования и действиями
@@ -174,12 +242,12 @@
 		background-color: var(--input-border-color, #aaa);
 	}
 
-	& .format-button,
-	& .block-button,
-	& .host-button,
-	& .action-button {
-		width: calc(var(--input-height, 46px) - 12px);
-		height: calc(var(--input-height, 46px) - 12px);
+	// Оформление у всех кнопок панели общее, поэтому и класс общий: перечислять их по одной
+	// значило бы вспоминать про этот список на каждую новую.
+	& .toolbar-button {
+		flex: 0 0 auto;
+		width: var(--richeditor-toolbar-button-size);
+		height: var(--richeditor-toolbar-button-size);
 		border-radius: calc(var(--input-border-radius, 0) - 2px);
 		border: 0;
 		background: var(--input-toolbar-button-fill, transparent);
@@ -215,6 +283,67 @@
 			}
 		}
 	}
+
+	// Правка адреса ссылки: панель показывает поле ввода вместо кнопок. Не выпадающий слой —
+	// то же место, та же коробка: позиционировать и ужимать ничего не приходится.
+	& .link-row {
+		display: none;
+		flex: 1 1 auto;
+		min-width: 0; // иначе поле не даст строке сжаться уже своей ширины по содержимому
+		align-items: center;
+		gap: 2px;
+	}
+
+	&.link-editing {
+		max-width: var(--richeditor-link-max-width);
+
+		// панели в document.body растягиваться не по чему — ширину задаём сами
+		&:not(.in-container) .toolbar-body {
+			width: var(--richeditor-link-width);
+			max-width: calc(100vw - 8px);
+		}
+
+		// кнопки на это время убраны, а не сдвинуты: панель узкая, рядом им не поместиться.
+		// Кнопки самой строки адреса лежат в ней и под это правило не попадают.
+		& > .toolbar-body > .toolbar-button,
+		& .split {
+			display: none;
+		}
+
+		& .link-row {
+			display: flex;
+		}
+	}
+
+	& .link-input {
+		// Тянется, а не «сто процентов»: процент считался бы от строки, а её ширина сама зависит
+		// от поля — круг, который браузер разрывает собственной шириной input. Ноль в min-width
+		// разрешает сжиматься: у поля ввода она по умолчанию не нулевая, и на узком экране
+		// строка вылезала бы за панель.
+		flex: 1 1 auto;
+		min-width: 0;
+		// В одну строку с кнопками — высота у них общая. Нижней границей, а не точной: поле живёт
+		// в чужой типографике, и от крупного шрифта ему нужно вырасти, а не обрезать строку.
+		min-height: var(--richeditor-toolbar-button-size);
+		box-sizing: border-box; // высота вместе с полями и рамкой, иначе поле выше кнопок
+		padding: 0 8px;
+		// оформление у поля общее с полями ввода кита — своих переменных ему не нужно
+		border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
+		border-radius: calc(var(--input-border-radius, 0) - 2px);
+		font: inherit;
+		color: inherit;
+		background: none;
+		outline: none;
+
+		&:focus {
+			border-color: var(--focus--input-border-color, #222);
+		}
+	}
+
+	// снимать нечего, пока ссылки под кареткой нет
+	& .link-remove[hidden] {
+		display: none;
+	}
 }
 
 // панель вставки смайликов — попап под кнопкой тулбара (открытием/закрытием управляет
@@ -247,7 +376,7 @@
 		flex-flow: row wrap;
 		content-visibility: auto;
 		// высота ненарисованной группы; auto — дальше браузер помнит фактическую
-		contain-intrinsic-size: auto calc(var(--emoji-rows, 8) * var(--richeditor-emoji-size, 32px));
+		contain-intrinsic-size: auto calc(var(--richeditor-emoji-rows) * var(--richeditor-emoji-size));
 	}
 
 	& .emoji-group + .emoji-group {
@@ -258,8 +387,8 @@
 	}
 
 	& .emoji {
-		width: var(--richeditor-emoji-size, 32px);
-		height: var(--richeditor-emoji-size, 32px);
+		width: var(--richeditor-emoji-size);
+		height: var(--richeditor-emoji-size);
 		padding: 0;
 		border: 0;
 		background: transparent;

package/source/richeditor.ts

@@ -1,7 +1,7 @@
 import "./richeditor.less"; // стили редактора и панели форматирования
 
 import { DOM, UIElementBound } from "@brandup/ui";
-import { IS_TOUCH_DEVICE } from "@brandup/ui-kit";
+import { IS_TOUCH_DEVICE, PopupManager } from "@brandup/ui-kit";
 import {
 	ALL_FORMAT_TOOLS,
 	BLOCK_TYPES,
@@ -35,6 +35,8 @@ import {
 	selectionCharBounds,
 	serialize,
 	toggleFormat,
+	applyLink as applyLinkTo,
+	linkAt,
 	type BlockType,
 	type EditorAction,
 	type FormatMarkers,
@@ -56,9 +58,9 @@ import {
 	trimSelectionWhitespace,
 } from "./editing";
 import { EditorHistory } from "./history";
-import { formatToolbar, type ToolbarButton } from "./toolbar";
+import { formatToolbar, TOOLBAR_CLASS, type ToolbarButton } from "./toolbar";
 
-export { TOOLBAR_CLASS, formatToolbar, type ToolbarHost, type ToolbarButton } from "./toolbar";
+export { formatToolbar, TOOLBAR_CLASS, type ToolbarHost, type ToolbarButton } from "./toolbar";
 
 export const ROOT_CLASS = "ui-richeditor"; // редактируемый элемент, к нему привязан UIElement
 // Содержимое временно невыделяемо: по странице тянут выделение, начатое вне редактора (см. __holdSelectable).
@@ -70,6 +72,9 @@ const NAV_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "En
 // Код — единственное, что есть и инструментом, и типом блока: имя одно на оба (см. applyCode).
 const CODE = "code";
 
+// Ссылка — единственный инструмент с данными: адрес задаётся не переключением (см. applyLink).
+const LINK: FormatTool = "link";
+
 // нативные правки (печать/удаление), состояние до которых запоминаем для собственного undo;
 // вставка/перетаскивание и Enter обрабатываются отдельно, undo/redo — на keydown
 const NATIVE_EDIT_TYPES = new Set([
@@ -122,8 +127,9 @@ export interface RichEditorOptions {
 	/** Что делает Enter: новый абзац (по умолчанию) или мягкий перенос, как в мессенджерах. */
 	paragraph?: ParagraphMode;
 	/**
-	 * Типы блоков в многострочном режиме: цитата, блок кода (по умолчанию только обычный текст).
-	 * Обычный текст в наборе есть всегда — в него блок возвращают.
+	 * Block types of the multiline mode: quote, code block (all of them by default). A field that
+	 * has no use for them is limited by an empty list. Plain text is always in the set — a block
+	 * is turned back into it.
 	 */
 	blocks?: BlockType[];
 	/**
@@ -166,6 +172,13 @@ type RichEditorEvents = {
 export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	readonly editable: HTMLElement;
 	readonly format: boolean;
+	/**
+	 * Объявленный набор инструментов: им разбирается и сохраняется значение. Не то же, что набор
+	 * кнопок ({@link formatTools}) — показывать разметку редактор обязан и там, где её не
+	 * переключить. Так же разведены и блоки ({@link blockTypes} против {@link blockTools}).
+	 */
+	readonly formatTypes: FormatTool[];
+	/** Инструменты в панели: в режиме только для чтения их нет — переключать разметку там нечем. */
 	readonly formatTools: FormatTool[];
 	readonly editorActions: EditorAction[];
 	readonly formatStorage: FormatStorage;
@@ -185,7 +198,8 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	// Каретка, снятая при отпускании фокуса: без фокуса браузер может убрать и выделение,
 	// а вставке из попапа нужно место — см. releaseFocus.
 	private __detachedCaret: [number, number] | null = null;
-	private __emojiHold: (() => void) | null = null; // правка придержана на время панели смайликов
+	private __emojiHold: (() => void) | null = null; // правка придержана на время попапа смайликов
+	private __emojiPicker: HTMLElement | null = null; // попап, открытый этим редактором — закрыть его в destroy
 	private __releasingFocus = false; // фокус снимаем сами, а не уходят из поля — см. releaseFocus
 	// Компонент снят. Удержание правки переживает снятие (окно хоста закрывается позже), и по его
 	// снятию трогать содержимое уже нельзя — редактора нет.
@@ -202,8 +216,11 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const format = !!options.format;
 		const multiline = !!options.multiline;
 		const readonly = !!options.readonly;
-		// форматирование недоступно в режиме только для чтения
-		const tools = format && !readonly ? (options.tools ?? ALL_FORMAT_TOOLS.slice()) : [];
+		// Объявленный набор — от readonly не зависит: значение обязано разбираться и показываться
+		// и там, где разметку не переключить, иначе редактор для чтения показывал бы вместо
+		// жирного сырые звёздочки. Кнопки — уже без него.
+		const types = format ? (options.tools ?? ALL_FORMAT_TOOLS.slice()) : [];
+		const tools = readonly ? [] : types;
 		// действия подключаются явно — иначе панель у существующих хостов молча обзавелась бы кнопками
 		const actions = format && !readonly ? (options.actions ?? []) : [];
 
@@ -217,6 +234,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__window = editable.ownerDocument.defaultView ?? window;
 		this.__opts = options;
 		this.format = format;
+		this.formatTypes = types;
 		this.formatTools = tools;
 		this.editorActions = actions;
 		this.formatStorage = options.storage === "markdown" ? "markdown" : "html";
@@ -265,8 +283,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	private get __valueStorage(): FormatStorage {
 		return this.format ? this.formatStorage : "markdown";
 	}
+	// разбор и сохранение значения — по объявленному набору, а не по набору кнопок:
+	// в readonly кнопок нет, а разметка значения от этого не меняется
 	private get __valueTools(): FormatTool[] {
-		return this.format ? this.formatTools : [];
+		return this.formatTypes;
 	}
 
 	// --- публичный API ---
@@ -322,21 +342,37 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	/**
-	 * Показать панель вставки смайлика у своей кнопки — когда она живёт не в тулбаре, а в разметке
-	 * хоста (например справа от поля ввода). Вызывать из обработчика `click`, погасив всплытие:
-	 * иначе попап закроется тем же кликом, которым открылся.
+	 * Показать попап смайликов у кнопки.
 	 *
-	 * @param initiator Кнопка, у которой показывается панель.
-	 * @param container Куда монтировать панель; по умолчанию — родитель кнопки.
+	 * Попап приносит владелец — у панели форматирования свой, у поля сообщения свой (собирает
+	 * их {@link createEmojiPicker}). Редактор берёт на себя только своё: придержать правку,
+	 * поставить каретку, отпустить фокус и убрать панель, если попап раскрывается не из неё.
+	 *
+	 * Вызывать из обработчика `click`, погасив всплытие: иначе попап закроется тем же кликом,
+	 * которым открылся. Возвращает false, если попап этим нажатием закрылся.
 	 */
-	openEmojiPicker(initiator: HTMLElement, container?: HTMLElement): void {
-		if (this.readonly) return;
-
-		const target = container ?? initiator.parentElement;
-		if (!target) return;
+	openEmojiPicker(picker: HTMLElement, initiator: HTMLElement): boolean {
+		if (this.readonly) return false;
+
+		// Попап у кнопки хоста — самостоятельный слой, и показывать его вместе с панелью нельзя:
+		// это два всплывающих окна над одним полем. Попап самой панели — её собственный слой,
+		// прятать его носителя незачем и нечем.
+		const inToolbar = !!picker.closest(`.${TOOLBAR_CLASS}`);
+
+		PopupManager.open(picker, {
+			initiator,
+			onClose: () => {
+				this.__emojiPicker = null;
+				this.__emojiHold?.();
+				this.__emojiHold = null;
+				if (!inToolbar) formatToolbar.resume();
+			},
+		});
+		// повторное нажатие по кнопке попап закрывает — держать и придерживать больше нечего
+		if (!PopupManager.isOpened(picker)) return false;
 
-		// повторное нажатие по кнопке панель закрывает — держать и придерживать больше нечего
-		if (!formatToolbar.openEmoji(this, initiator, target)) return;
+		this.__emojiPicker = picker;
+		if (!inToolbar) formatToolbar.suspend(this);
 
 		// Правку придерживаем на всё время панели: фокус мы отпустим, а снятие фокуса — не конец
 		// ввода. Иначе нормализация обрезала бы пробел у каретки, и символ встал бы вплотную.
@@ -346,21 +382,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// некуда. В конец её ставит focus(true), и только если её действительно не было: снятую
 		// при отпускании фокуса он вернёт на место, а иначе символ уезжал бы в конец сообщения
 		// с каждым открытием панели.
-		//
-		// Строго после открытия панели: фокус показывает тулбар, а придержать его панель успевает
-		// только когда открыта сама.
 		if (!this.selection) this.focus(true);
 
 		// Панель — слой над полем, а не вместо него: каретку видно, и видно, куда встанет символ.
 		// На сенсорном устройстве фокус вместо этого поднимает клавиатуру, которая саму панель
 		// и закрывает, — там его отпускаем, а каретку вернёт вставка (см. keepFocus).
 		if (!this.keepFocus) this.releaseFocus();
-	}
 
-	/** Панель смайликов закрылась: снимаем удержание правки, взятое на время её работы. */
-	onEmojiClosed(): void {
-		this.__emojiHold?.();
-		this.__emojiHold = null;
+		return true;
 	}
 
 	getLength(): number {
@@ -525,12 +554,63 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	isToolEnabled(tool: FormatTool): boolean {
 		if (this.readonly || !this.formatTools.includes(tool)) return false;
 		if (tool === CODE) return true;
+		if (this.currentBlock === CODE || this.isToolActive(CODE)) return false;
 
-		return this.currentBlock !== CODE && !this.isToolActive(CODE);
+		// Ссылке нужен текст, который ею станет: оборачивать нечего — и делать нечего. Каретка
+		// в слове за текст считается (формат применяется к слову целиком), в готовой ссылке —
+		// тоже: её адрес правят той же кнопкой.
+		return tool !== LINK || this.__hasLinkTarget();
+	}
+
+	/** Есть ли что делать ссылкой: текст под выделением или ссылка, в которой стоит каретка. */
+	private __hasLinkTarget(): boolean {
+		const target = this.__formatTarget();
+		if (!target) return false;
+
+		return !target.range.collapsed || !!linkAt(this.editable, target.range);
+	}
+
+	/**
+	 * Адрес ссылки под кареткой; пусто — каретка не в ссылке.
+	 *
+	 * Состояние ссылки — не «включена», а «вот этот адрес»: панели нужен он сам, иначе править
+	 * существующую ссылку было бы нечем.
+	 */
+	get currentLink(): string {
+		const selection = this.selection;
+		if (!selection) return "";
+
+		return linkAt(this.editable, selection.getRangeAt(0))?.getAttribute("href") ?? "";
+	}
+
+	/**
+	 * Ставит ссылку на выделение, меняет адрес у той, в которой стоит каретка, либо снимает её —
+	 * пустым адресом. Оборачивать нечего — не делает ничего: ссылка это оформление текста,
+	 * а не вставка (см. {@link isToolEnabled}, там же гаснет и кнопка).
+	 *
+	 * Не переключатель, в отличие от {@link applyFormat}: у ссылки есть данные, и повторное
+	 * применение с другим адресом — правка, а не снятие.
+	 */
+	applyLink(url: string): void {
+		if (!this.isToolEnabled(LINK)) return;
+
+		// Правит по выделению в поле. Поле адреса в панели забирает фокус, поэтому каретку она
+		// снимает при открытии и возвращает перед вызовом — см. openLink в ./toolbar.
+		const target = this.__formatTarget();
+		if (!target) return;
+
+		this.__history?.record("op");
+		applyLinkTo(this.editable, target.range, url.trim(), target.selection, target.original());
+
+		this.__pendingFormats.clear();
+		this.__emitChange();
+		formatToolbar.refresh();
 	}
 
 	/** Переключить форматирование инструмента (вызывается общим тулбаром и хоткеями). */
 	applyFormat(tool: FormatTool): void {
+		// у ссылки есть адрес, а переключением его не задать — она ставится через applyLink
+		if (tool === LINK) return;
 		if (!this.isToolEnabled(tool)) return;
 
 		let target = this.__formatTarget();
@@ -836,6 +916,13 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__disposed = true;
 		this.flushChange(); // хост не должен остаться с устаревшей копией значения
 		this.__abort.abort();
+
+		// Попап смайликов мог остаться открытым, а показывали его мы — своим он бывает и у хоста
+		// (см. openEmojiPicker). Оставленный, он держал бы PopupManager на удалённом элементе:
+		// на body висел бы класс открытого попапа и слушатель закрытия, а на узком экране
+		// страница осталась бы непрокручиваемой.
+		if (this.__emojiPicker && PopupManager.isOpened(this.__emojiPicker)) PopupManager.close();
+
 		formatToolbar.detach(this);
 
 		// элемент передан хостом — не удаляем его, только снимаем оформление редактора
@@ -963,6 +1050,17 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.editable.classList.toggle(UNSELECTABLE_CLASS, !own);
 	}
 
+	/**
+	 * Снимает запрет, когда нажали в самом редакторе.
+	 *
+	 * Для касания, где браузер начинает выделять слово прямо на жесте: к этому моменту содержимое
+	 * обязано быть выделяемым, а {@link __holdSelectable} снимет запрет только по мышиному
+	 * нажатию — оно приходит уже после жеста, а у долгого нажатия не приходит вовсе.
+	 */
+	private __releaseSelectableAt(target: EventTarget | null) {
+		if (this.editable.contains(target as Node | null)) this.editable.classList.remove(UNSELECTABLE_CLASS);
+	}
+
 	/**
 	 * Снимает запрет, когда выделение перестало задевать редактор.
 	 *
@@ -1000,6 +1098,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// По изменению выделения проверять нельзя: пока запрет действует, выделение до редактора
 		// не доходит — проверка увидела бы «не задевает» и сняла запрет сама. Только по концу протяжки.
 		doc.addEventListener("mouseup", () => this.__releaseSelectable(), { signal, capture: true });
+		// Касание: запрет только снимаем, не ставим. Протяжки выделения через страницу на касании
+		// нет — там его ведут за собственные ручки, — а вот слово по двойному нажатию браузер
+		// выделяет сам, ещё на жесте. Мышиные события к нему приезжают уже после (а у долгого
+		// нажатия их и вовсе нет), и снятого по ним запрета жест бы не дождался.
+		doc.addEventListener("touchstart", (e) => this.__releaseSelectableAt(e.target), {
+			signal,
+			capture: true,
+			passive: true,
+		});
 
 		editable.addEventListener(
 			"mousedown",
@@ -1106,7 +1213,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			if (tool) {
 				e.preventDefault();
 				e.stopPropagation();
-				if (this.formatTools.includes(tool)) this.applyFormat(tool);
+
+				if (this.formatTools.includes(tool)) {
+					// у ссылки сперва спрашивается адрес — тем же полем в панели, что и у кнопки
+					if (tool === LINK) formatToolbar.openLinkFor(this);
+					else this.applyFormat(tool);
+				}
 				return;
 			}
 		}
@@ -1131,15 +1243,19 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// перемещение каретки — выход из режима набора
 		if (NAV_KEYS.includes(e.key)) this.__clearPendingFormats();
 
-		const isChar = e.key.length === 1;
+		// A character, not a shortcut: Cmd is the same modifier as Ctrl, just on another platform.
+		// Without it Cmd+C on a Mac would look like typing the letter "c" — copying would be
+		// swallowed by the readonly guard, and the host filter would reject copy, paste and
+		// select-all alike.
+		const isChar = e.key.length === 1 && !e.ctrlKey && !e.metaKey;
 
-		if (this.readonly && isChar && !e.ctrlKey) {
+		if (this.readonly && isChar) {
 			e.preventDefault();
 			e.stopPropagation();
 			return;
 		}
 
-		if (isChar && !e.ctrlKey && this.__opts.filterChar && !this.__opts.filterChar(e.key)) {
+		if (isChar && this.__opts.filterChar && !this.__opts.filterChar(e.key)) {
 			e.preventDefault();
 			e.stopPropagation();
 			this.__reject();
@@ -1275,12 +1391,13 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			ensureParagraphs(this.editable); // заполнить пустые абзацы, убрать краевые <br>
 		} else {
 			// инлайн: абзацы и переносы → пробелы, форматирование сохраняем
-			const fragment = document.createDocumentFragment();
+			const doc = this.editable.ownerDocument;
+			const fragment = doc.createDocumentFragment();
 			paras.forEach((p, index) => {
-				if (index > 0) fragment.appendChild(document.createTextNode(" "));
+				if (index > 0) fragment.appendChild(doc.createTextNode(" "));
 				while (p.firstChild) fragment.appendChild(p.firstChild);
 			});
-			fragment.querySelectorAll("br").forEach((br) => br.replaceWith(document.createTextNode(" ")));
+			fragment.querySelectorAll("br").forEach((br) => br.replaceWith(doc.createTextNode(" ")));
 
 			caret = start + (fragment.textContent ?? "").length;
 			range.insertNode(fragment);