@brandup/ui-richeditor 1.0.48 → 1.0.50

package/source/richeditor.ts

@@ -27,6 +27,7 @@ import {
 	normalizeBlockTypes,
 	editorText,
 	charLength,
+	paragraphsNormalized,
 	preserveCaret,
 	mergeAdjacentBlocks,
 	normalizeParagraphs,
@@ -50,14 +51,18 @@ import {
 	buildParagraphs,
 	caretToEnd,
 	expandRangeToWords,
+	hasPastedMarkup,
+	isDocumentHtml,
 	insertParagraph,
 	insertPastedParagraphs,
 	insertSoftBreak,
+	parsePastedMarkdown,
 	sanitizePastedHtml,
 	selectAllContent,
 	trimSelectionWhitespace,
 } from "./editing";
 import { EditorHistory } from "./history";
+import { refreshRecentEmojis } from "./emoji";
 import { formatToolbar, TOOLBAR_CLASS, type ToolbarButton } from "./toolbar";
 
 export { formatToolbar, TOOLBAR_CLASS, type ToolbarHost, type ToolbarButton } from "./toolbar";
@@ -72,6 +77,27 @@ const NAV_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "En
 // Код — единственное, что есть и инструментом, и типом блока: имя одно на оба (см. applyCode).
 const CODE = "code";
 
+// Расширения текстовых файлов для броска в редактор: у .md и .txt тип в системе часто
+// не зарегистрирован и приходит пустым — тогда решает имя.
+const TEXT_FILE_NAME = /\.(md|markdown|txt|text)$/i;
+
+/** Текстовый ли файл: по MIME (text/*), а без типа — по расширению. */
+function isTextFile(file: File): boolean {
+	return file.type ? file.type.startsWith("text/") : TEXT_FILE_NAME.test(file.name);
+}
+
+/** Содержимое файла текстом: Blob.text() есть не во всех окружениях (jsdom) — тогда FileReader. */
+function readFileText(file: File): Promise<string> {
+	if (typeof file.text === "function") return file.text();
+
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result ?? ""));
+		reader.onerror = () => reject(reader.error);
+		reader.readAsText(file);
+	});
+}
+
 // Ссылка — единственный инструмент с данными: адрес задаётся не переключением (см. applyLink).
 const LINK: FormatTool = "link";
 
@@ -109,6 +135,65 @@ function isHotkeyLetter(e: KeyboardEvent, letter: string): boolean {
 	return e.key.toLowerCase() === letter || codeLetter(e) === letter;
 }
 
+/** Коробка строки — какую высоту занимает строка текста. */
+type LineBox = { top: number; bottom: number; height: number };
+
+/**
+ * Коробки строк, занятых узлом. У переносимого текста их несколько, и общая коробка накрывает
+ * их все — для доводки прокрутки нужна конкретная строка, поэтому берём список, а не объединение.
+ * В среде без раскладки (jsdom) список пуст, там остаётся общая коробка.
+ */
+function lineRects(node: Node): LineBox[] {
+	let source: { getClientRects?: () => DOMRectList; getBoundingClientRect?: () => DOMRect } | null = null;
+
+	if (node.nodeType === Node.TEXT_NODE) {
+		const range = node.ownerDocument?.createRange();
+		if (range) {
+			range.selectNodeContents(node);
+			source = range;
+		}
+	} else if (node.nodeType === Node.ELEMENT_NODE) {
+		source = node as Element;
+	}
+
+	if (typeof source?.getBoundingClientRect !== "function") return [];
+
+	const rects = Array.from(source.getClientRects?.() ?? []);
+	return rects.length ? rects : [source.getBoundingClientRect()];
+}
+
+/**
+ * Строка, на которой стоит каретка, когда собственной коробки у неё нет — так бывает на пустой
+ * строке. Ищем ближайший измеримый ориентир на ТОЙ ЖЕ строке.
+ */
+function caretLineBox(range: Range): LineBox | null {
+	const { startContainer: node, startOffset: offset } = range;
+
+	if (node.nodeType === Node.ELEMENT_NODE) {
+		// Узел ПОСЛЕ каретки стоит на её строке: <br> рисуется в конце строки, которую завершает,
+		// а текст за кареткой с этой строки начинается. Узел ДО каретки лежит строкой выше —
+		// по нему прокрутка недоезжала ровно на строку.
+		const next = node.childNodes[offset];
+		if (next) return lineRects(next)[0] ?? null;
+
+		// Каретка за последним узлом: своей строки у неё ещё нет, а предыдущий <br> завершает
+		// предыдущую — она ровно на строку ниже него.
+		const previous = node.childNodes[offset - 1];
+		if (previous) {
+			const rects = lineRects(previous);
+			const last = rects[rects.length - 1];
+			if (!last) return null;
+
+			const shift = previous.nodeName === "BR" ? last.height : 0;
+			return { top: last.top + shift, bottom: last.bottom + shift, height: last.height };
+		}
+	}
+
+	// Соседей нет вовсе: пустой блок и есть строка каретки.
+	const own = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+	return own ? (lineRects(own)[0] ?? null) : null;
+}
+
 export interface RichEditorOptions {
 	/** Включает форматирование и панель инструментов. */
 	format?: boolean;
@@ -142,6 +227,12 @@ export interface RichEditorOptions {
 	keepFocus?: boolean;
 	/** Только для чтения — запрещает ввод и изменение текста (но не выделение/копирование). */
 	readonly?: boolean;
+	/**
+	 * Полное отключение: тот же запрет правок, что и readonly, но вдобавок с редактируемого
+	 * элемента снимается contenteditable — он не берёт ни фокус, ни выделение (в отличие от
+	 * readonly, где выделение и копирование остаются).
+	 */
+	disabled?: boolean;
 	/** Контейнер для панели форматирования; по умолчанию document.body (position: fixed над редактором). */
 	toolbarContainer?: HTMLElement | null;
 	/** Собственные кнопки хоста в панели — для действий, которых редактор не знает. */
@@ -215,7 +306,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	constructor(editable: HTMLElement, options: RichEditorOptions = {}) {
 		const format = !!options.format;
 		const multiline = !!options.multiline;
-		const readonly = !!options.readonly;
+		// disabled — тот же запрет правок, что и readonly, поэтому вся readonly-механика
+		// (блокировка ввода, снятие кнопок, выделение-только-чтение) действует и в нём
+		const disabled = !!options.disabled;
+		const readonly = !!options.readonly || disabled;
 		// Объявленный набор — от readonly не зависит: значение обязано разбираться и показываться
 		// и там, где разметку не переключить, иначе редактор для чтения показывал бы вместо
 		// жирного сырые звёздочки. Кнопки — уже без него.
@@ -252,8 +346,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__history = format ? new EditorHistory(editable) : null;
 
 		// редактируемость есть всегда; правки в readonly блокируются на beforeinput,
-		// при этом остаётся возможность фокуса, выделения и копирования
-		editable.contentEditable = "true";
+		// при этом остаётся возможность фокуса, выделения и копирования.
+		// В disabled редактируемости нет вовсе: элемент не берёт ни фокус, ни выделение.
+		editable.contentEditable = disabled ? "false" : "true";
 
 		if (options.placeholder != null) editable.dataset.placeholder = options.placeholder;
 		if (multiline) editable.classList.add("multiline");
@@ -266,7 +361,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	get readonly(): boolean {
-		return !!this.__opts.readonly;
+		// disabled включает весь запрет правок readonly: на этот getter опирается вся
+		// readonly-механика редактора, и в disabled она обязана работать так же
+		return !!this.__opts.readonly || this.disabled;
+	}
+
+	/** Редактор отключён: как readonly, но без фокуса и выделения (contenteditable снят). */
+	get disabled(): boolean {
+		return !!this.__opts.disabled;
 	}
 
 	/**
@@ -359,6 +461,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// прятать его носителя незачем и нечем.
 		const inToolbar = !!picker.closest(`.${TOOLBAR_CLASS}`);
 
+		// Недавние — по хранилищу на момент показа: попап живёт между открытиями, а хранилище
+		// тем временем пополняют и другие попапы страницы.
+		refreshRecentEmojis(picker);
+
 		PopupManager.open(picker, {
 			initiator,
 			onClose: () => {
@@ -523,6 +629,40 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		selection.addRange(range);
 	}
 
+	/**
+	 * Слово, на котором стоит каретка. Пусто, когда выделение своё (пользователь выбрал сам,
+	 * и подставлять ему нечего), когда каретки в редакторе нет вовсе или когда она стоит не
+	 * в слове — за точкой, например: знаки препинания в слово не входят (см. expandRangeToWords).
+	 */
+	get caretWord(): string {
+		const selection = this.selection;
+		if (!selection || selection.rangeCount === 0) return "";
+
+		const range = selection.getRangeAt(0);
+		if (!range.collapsed) return "";
+
+		return expandRangeToWords(this.editable, range).toString();
+	}
+
+	/**
+	 * Выделить слово под кареткой — чтобы следующая вставка встала на его место, а не разорвала
+	 * его пополам. Возвращает false, когда выделять нечего: тогда вставка идёт в точку каретки.
+	 */
+	selectCaretWord(): boolean {
+		const selection = documentSelection(this.editable);
+		if (!selection || selection.rangeCount === 0) return false;
+
+		const range = selection.getRangeAt(0);
+		if (!range.collapsed) return false;
+
+		const word = expandRangeToWords(this.editable, range);
+		if (word.collapsed) return false;
+
+		selection.removeAllRanges();
+		selection.addRange(word);
+		return true;
+	}
+
 	/**
 	 * Цель правки форматирования: выделение, расширенное до целых слов, плюс исходные границы
 	 * для восстановления. Диапазон отдельный от выделения — пока операция не решила, что будет
@@ -551,10 +691,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	 * оставляют написанное буквальным, поэтому остальные инструменты там выключены — иначе
 	 * форматирование ставилось бы только чтобы пропасть при сохранении.
 	 */
-	isToolEnabled(tool: FormatTool): boolean {
+	isToolEnabled(tool: FormatTool, codeActive?: boolean): boolean {
 		if (this.readonly || !this.formatTools.includes(tool)) return false;
 		if (tool === CODE) return true;
-		if (this.currentBlock === CODE || this.isToolActive(CODE)) return false;
+		// Признак «в коде» — обход выделения: панель считает его один раз на обновление
+		// и передаёт сюда, чтобы не обходить выделение заново на каждую кнопку.
+		if (codeActive ?? this.isCodeActive()) return false;
 
 		// Ссылке нужен текст, который ею станет: оборачивать нечего — и делать нечего. Каретка
 		// в слове за текст считается (формат применяется к слову целиком), в готовой ссылке —
@@ -599,6 +741,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const target = this.__formatTarget();
 		if (!target) return;
 
+		// Выделение без единого символа правки не даёт (см. applyFormat) — кроме каретки
+		// в готовой ссылке, где правится её адрес.
+		if (!target.range.toString().length && !linkAt(this.editable, target.range)) return;
+
 		this.__history?.record("op");
 		applyLinkTo(this.editable, target.range, url.trim(), target.selection, target.original());
 
@@ -641,6 +787,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 		this.__pendingFormats.clear();
 
+		// Выделение без единого символа (граница элементов, голый перенос) правки не даёт —
+		// пустой шаг истории делал бы следующий Ctrl+Z «ничего не делающим».
+		if (!target.range.toString().length) return;
+
 		this.__history?.record("op");
 
 		// Код не уживается с другой разметкой: значение берёт из него голый текст. Снимаем всё,
@@ -1086,9 +1236,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const { signal } = this.__abort;
 		const editable = this.editable;
 
-		// перетаскивание в редактор проходит мимо истории и фильтров хоста — гасим саму вставку.
+		// Бросок в редактор: текстовые файлы принимаются содержимым (см. __onDrop), всё прочее
+		// гасится — свободное перетаскивание прошло бы мимо истории и фильтров хоста.
 		// dragenter/dragover отменять нельзя: в модели DnD отмена как раз и означает «сюда можно бросить»
-		this.element.addEventListener("drop", (e) => e.preventDefault(), { signal });
+		this.element.addEventListener("drop", (e) => this.__onDrop(e), { signal });
 
 		// Выделение страницы не должно затягивать содержимое редактора — см. __holdSelectable.
 		// Слушаем на документе и в фазе перехвата: протяжка начинается где угодно, а обработчик
@@ -1133,7 +1284,11 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				// держать в двух местах, и стоило добавить кнопки хоста, как они разошлись бы
 				formatToolbar.attach(this);
 
-				if (this.readonly) selectAllContent(this.editable);
+				// В readonly фокус выделяет всё содержимое — его можно копировать;
+				// в disabled выделения нет, как и самого содержимого для правки.
+				if (this.readonly) {
+					if (!this.disabled) selectAllContent(this.editable);
+				}
 				// Каретку в конец ставим только когда её нет: клик ставит сам, а уже стоящую
 				// (фокус вернули из кода после вызова метода) двигать нельзя — уедет в конец текста.
 				else if (!this.__hasInputClick && !this.selection) caretToEnd(this.editable, this.multiline);
@@ -1175,21 +1330,24 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.element.addEventListener("paste", (e: ClipboardEvent) => this.__onPaste(e), { signal });
 		editable.addEventListener("keydown", (e: KeyboardEvent) => this.__onKeydown(e), { signal });
 
+		// Каретку двигали клавишами: браузер к ней прокручивает сам, но до края коробки —
+		// под отступы прокручиваемого контейнера. Поправляем после него, на keyup: на keydown
+		// своей прокрутки он ещё не сделал, и поправка ушла бы впустую.
+		editable.addEventListener(
+			"keyup",
+			(e: KeyboardEvent) => {
+				if (NAV_KEYS.includes(e.key)) this.__scrollCaretIntoView();
+			},
+			{ signal }
+		);
+
 		editable.addEventListener("beforeinput", (e: InputEvent) => this.__onBeforeInput(e), { signal });
 
 		editable.addEventListener(
 			"input",
 			() => {
 				if (this.multiline) {
-					// приведение к абзацам меняет структуру (обёртка в <p>, удаление <br>) и сбрасывает
-					// каретку — сохраняем её; если структура не менялась, выделение живо и переставлять
-					// его не нужно (лишний сброс способен прервать IME-набор)
-					preserveCaret(editable, () => {
-						const before = editable.innerHTML;
-						ensureParagraphs(editable); // блуждающий текст/div → <p>
-
-						return editable.innerHTML !== before;
-					});
+					this.__ensureParagraphs(); // блуждающий текст/div → <p>
 
 					// единственный пустой абзац → очищаем, чтобы показать placeholder
 					if (editable.children.length === 1) {
@@ -1199,12 +1357,85 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				} else if (editable.firstChild?.nodeName === "BR") {
 					editable.innerHTML = "";
 				}
+				// При наборе браузер прокручивает к каретке сам, но доводит её лишь до края
+				// коробки — под отступы контейнера. Доводим до текста.
+				this.__scrollCaretIntoView();
+
 				this.__emitChange(true); // печать — единственный посимвольный источник, его и откладываем
 			},
 			{ signal }
 		);
 	}
 
+	/**
+	 * Доводит прокрутку до каретки. Нужна там, где браузер не справляется сам: переносы строк
+	 * редактор делает вручную (preventDefault), и к новой строке браузер не прокручивает; в
+	 * textbox прокручивается не редактируемый элемент, а его обёртка; а своей прокруткой браузер
+	 * доводит каретку лишь до края коробки — под отступы, которые едут вместе с текстом.
+	 */
+	private __scrollCaretIntoView() {
+		const selection = this.selection;
+		if (!selection || selection.rangeCount === 0) return;
+
+		const range = selection.getRangeAt(0).cloneRange();
+
+		// в среде без раскладки (jsdom) у Range коробок нет вовсе
+		if (typeof range.getBoundingClientRect !== "function") return;
+
+		// Выделение тянут клавишами (Shift+стрелки): вести нужно за его подвижным концом.
+		// Коробка всего выделения накрывает все занятые строки, и прокрутка ушла бы к концу
+		// неподвижному, уводя подвижный за пределы видимого.
+		if (!range.collapsed) {
+			const toStart = selection.focusNode === range.startContainer && selection.focusOffset === range.startOffset;
+			range.collapse(toStart);
+		}
+
+		let { top, bottom, height } = range.getBoundingClientRect();
+		if (!height) {
+			const line = caretLineBox(range);
+			if (!line) return;
+			({ top, bottom, height } = line);
+		}
+		// раскладки нет (тестовая среда) — прокручивать не по чему
+		if (!height && !top && !bottom) return;
+
+		// Ближайший прокручиваемый предок; прокручивается только он — внешним контейнерам
+		// каретка не адресована, крутить страницу из редактора нельзя.
+		const document = this.editable.ownerDocument;
+		for (let el: HTMLElement | null = this.editable; el && el !== document.body; el = el.parentElement) {
+			if (el.scrollHeight <= el.clientHeight) continue;
+			const style = document.defaultView?.getComputedStyle(el);
+			if (!style) continue;
+			const overflow = style.overflowY;
+			if (overflow !== "auto" && overflow !== "scroll") continue;
+
+			// Границей служит не коробка, а область, свободная от отступов: они едут вместе
+			// с текстом (см. .editor в textbox, .ui-richeditor в messageeditor), и доведённая
+			// до края коробки строка встала бы под них. Своего отступа у контейнера может
+			// и не быть — тогда держим небольшой запас, чтобы строка не прилипала к краю.
+			const gap = Math.min(height || 16, 16);
+			const box = el.getBoundingClientRect();
+			const viewTop = box.top + el.clientTop + (parseFloat(style.paddingTop) || gap);
+			const viewBottom = box.top + el.clientTop + el.clientHeight - (parseFloat(style.paddingBottom) || gap);
+
+			if (bottom > viewBottom) el.scrollTop += bottom - viewBottom;
+			else if (top < viewTop) el.scrollTop -= viewTop - top;
+			return;
+		}
+	}
+
+	/**
+	 * Приведение к абзацам с сохранением каретки. Дешёвая проверка — до снимка каретки:
+	 * нормализация идёт на каждое нажатие, менять почти всегда нечего, а снимок собирает
+	 * весь текст в строку. Если структура не менялась, выделение живо и переставлять его
+	 * не нужно (лишний сброс способен прервать IME-набор).
+	 */
+	private __ensureParagraphs() {
+		if (paragraphsNormalized(this.editable)) return;
+
+		preserveCaret(this.editable, () => ensureParagraphs(this.editable));
+	}
+
 	private __onKeydown(e: KeyboardEvent) {
 		// хоткеи форматирования (Ctrl/Cmd+B/I/U); зачёркивание — только кнопкой.
 		// Сверяем по e.key и e.code — иначе на не-латинской раскладке (кириллица) хоткеи не срабатывают.
@@ -1291,6 +1522,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			if (soft) insertSoftBreak(this.editable);
 			else insertParagraph(this.editable, DEFAULT_BLOCK);
 
+			// Перенос сделан вручную (preventDefault) — браузер к новой строке не прокрутит
+			this.__scrollCaretIntoView();
+
 			this.__clearPendingFormats();
 			this.__emitChange();
 			formatToolbar.refresh();
@@ -1324,6 +1558,16 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// форматированную вставку берём из text/html только при включённом форматировании
 		const html = this.format && this.formatTools.length ? data.getData("text/html") : "";
 
+		this.__insertExternal(plain, html);
+	}
+
+	/**
+	 * Общий приём внешнего текста — вставки из буфера и брошенного файла: фильтр хоста, затем
+	 * форматированная ветка, затем простой текст. Форматирование приходит двумя путями: text/html
+	 * из буфера и, при markdown-хранении, маркеры прямо в тексте — раз значение хранится этой
+	 * разметкой, вставленный текст с ней разбирается так же, как разбиралось бы значение.
+	 */
+	private __insertExternal(plain: string, html: string) {
 		// filterPaste решает по тексту: null — отклонить; если хук ИЗМЕНИЛ текст (обрезка по длине,
 		// фильтр по типу) — форматирование сохранить нельзя, вставляем очищенный простой текст
 		let plainOverride: string | null = null;
@@ -1340,7 +1584,23 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const selection = this.selection;
 		if (!selection) return;
 
-		if (html && plainOverride == null && this.__pasteHtml(html, selection)) return;
+		if (plainOverride == null) {
+			const paras = html ? sanitizePastedHtml(html, this.formatTools, this.formatMarkers, this.blockTypes) : [];
+			const markdown = this.format && this.formatStorage === "markdown";
+
+			// text/html точнее описывает скопированное, но лишь когда несёт собственную разметку.
+			// Голый текст тоже приезжает html-ем — редакторы кода отдают исходник маркдауна
+			// строками в <div>, — и такой html не знает ничего сверх text/plain, а маркеры в
+			// тексте понимает только разбор разметкой хранения: при плоском html первым идёт он.
+			// Документ (абзацы <p>, заголовки, списки) плоским не считается, даже когда в нём
+			// нет ни одного тега форматирования: буквальные символы маркеров в тексте страницы
+			// видит и её читатель, и разбор превращал бы их в разметку (см. isDocumentHtml).
+			const flat = markdown && !hasPastedMarkup(paras) && !isDocumentHtml(html);
+
+			if (flat && this.__pasteMarkdown(plain, selection)) return;
+			if (this.__insertPasted(paras, selection)) return;
+			if (!flat && markdown && this.__pasteMarkdown(plain, selection)) return;
+		}
 		this.__pastePlain(plainOverride ?? plain, selection);
 	}
 
@@ -1350,16 +1610,91 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	private __pastePlain(text: string, selection: Selection) {
 		if (!text) return;
 
-		const lines = text.split(/\n/).map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
+		// Внутри блока без инлайновой разметки (код) пробелы значимы: отступы там — часть
+		// текста, и обрезка краёв строк ломала бы вставленный код. Пустая строка там — тоже
+		// содержимое, а не разделитель абзацев: деление разваливало бы один блок на два.
+		const literal = !BLOCK_TYPES[this.currentBlock].inline;
+		const lines = literal
+			? text.split(/\n/)
+			: text.split(/\n/).map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
 
-		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs), selection);
+		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs && !literal), selection);
 	}
 
-	// Вставка форматированного текста из text/html. Возвращает false, если вставлять нечего —
-	// тогда вызывающий откатывается на простую вставку.
-	private __pasteHtml(html: string, selection: Selection): boolean {
+	/**
+	 * Бросок файлов в редактор: текстовые (`text/*`, а без типа — `.md`/`.txt` по имени)
+	 * вставляются содержимым тем же путём, что вставка из буфера, — фильтр хоста, разбор
+	 * разметкой хранения объявленным набором, история. Любой другой бросок гасится: свободное
+	 * перетаскивание прошло бы мимо истории и фильтров хоста.
+	 */
+	private __onDrop(e: DragEvent) {
+		e.preventDefault();
+
+		if (this.readonly) return;
+
+		const files = Array.from(e.dataTransfer?.files ?? []).filter(isTextFile);
+		if (!files.length) return;
+
+		// Каретка — в точку броска, если браузер умеет её назвать; иначе остаётся прежняя.
+		// Фокус нужен в любом случае: бросают и в поле, которое его ещё не получало, — вставлять
+		// тогда некуда, а без каретки focus(true) ставит её в конец.
+		this.__caretFromPoint(e.clientX, e.clientY);
+		this.focus(true);
+
+		// Файл читается асинхронно: правка на это время придержана, чтобы нормализация между
+		// делом не перестроила содержимое под выставленной кареткой.
+		const release = this.holdEditing();
+		Promise.all(files.map(readFileText))
+			.then((texts) => {
+				// компонент могли снять, пока файл читался, — вставлять больше некуда
+				if (this.__disposed) return;
+
+				// несколько файлов — подряд через пустую строку: это отдельные тексты
+				this.__insertExternal(texts.join("\n\n"), "");
+			})
+			.catch(() => this.__reject())
+			.finally(release);
+	}
+
+	/** Ставит каретку в точку на экране, если браузер умеет её назвать, и точка — в редакторе. */
+	private __caretFromPoint(x: number, y: number) {
+		// стандартное API и его вебкитовский предшественник; в jsdom нет обоих
+		const doc = this.editable.ownerDocument as Document & {
+			caretPositionFromPoint?(x: number, y: number): { offsetNode: Node; offset: number } | null;
+			caretRangeFromPoint?(x: number, y: number): Range | null;
+		};
+
+		let node: Node | null = null;
+		let offset = 0;
+		if (doc.caretPositionFromPoint) {
+			const position = doc.caretPositionFromPoint(x, y);
+			if (position) ({ offsetNode: node, offset } = position);
+		} else if (doc.caretRangeFromPoint) {
+			const range = doc.caretRangeFromPoint(x, y);
+			if (range) ({ startContainer: node, startOffset: offset } = range);
+		}
+
+		if (!node || !this.editable.contains(node)) return;
+
+		const selection = documentSelection(this.editable);
+		if (!selection) return;
+
+		const range = doc.createRange();
+		range.setStart(node, offset);
+		range.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+
+	// Вставка простого текста разметкой хранения (markdown): разбор тем же deserialize и с теми же
+	// наборами, что у значения, — маркеры снятых инструментов остаются текстом, как остались бы
+	// в значении. Возвращает false, если вставлять нечего или разбирать нельзя.
+	private __pasteMarkdown(text: string, selection: Selection): boolean {
+		// внутри блока без инлайновой разметки (код) текст литерален — как и при простой вставке
+		if (!BLOCK_TYPES[this.currentBlock].inline) return false;
+
 		return this.__insertPasted(
-			sanitizePastedHtml(html, this.formatTools, this.formatMarkers, this.blockTypes),
+			parsePastedMarkdown(text, this.__valueTools, this.formatMarkers, this.blockTypes, this.__blockParagraphs),
 			selection
 		);
 	}
@@ -1383,12 +1718,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		let caret: number;
 
 		if (this.multiline) {
-			// длина вставки в координатах каретки: текст, переносы внутри абзацев и границы между
-			// ними (первый абзац вливается в текущий, поэтому границ на одну меньше)
-			caret = start + paras.reduce((length, p) => length + charLength(p), paras.length - 1);
+			// Длина вставки меряется по факту — разницей длины содержимого: ensureParagraphs
+			// подчищает вставленное (краевые <br>-заполнители), и посчитанная заранее длина
+			// уводила бы каретку за конец вставленного, в чужой текст.
+			const before = charLength(this.editable);
 
 			insertPastedParagraphs(this.editable, paras, range);
 			ensureParagraphs(this.editable); // заполнить пустые абзацы, убрать краевые <br>
+
+			caret = start + (charLength(this.editable) - before);
 		} else {
 			// инлайн: абзацы и переносы → пробелы, форматирование сохраняем
 			const doc = this.editable.ownerDocument;
@@ -1471,20 +1809,24 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const range = selection.getRangeAt(0);
 		const inherited = range.collapsed ? [] : activeFormats(this.editable, range, this.formatTools);
 		const formats = new Set([...this.__pendingFormats, ...inherited]);
+		// Адрес наследуемой ссылки читается до правки: после deleteContents исходный тег
+		// пустеет и убирается, и адреса взять уже неоткуда.
+		const href = formats.has("link") ? (linkAt(this.editable, range)?.getAttribute("href") ?? "") : "";
 
-		insertFormattedText(this.editable, data, Array.from(formats), selection);
+		insertFormattedText(this.editable, data, Array.from(formats), selection, href);
 
 		// В пустом поле абзацев ещё нет, и каретке некуда встать внутрь — вставка из кода
 		// (смайлик, переменная) ложится прямо в редактор. Приводим к модели абзацев тем же
 		// способом, что и обработчик input при печати: он на программную вставку не приходит,
 		// а без <p> следующий Enter правит текст мимо абзаца.
-		if (this.multiline)
-			preserveCaret(this.editable, () => {
-				const before = this.editable.innerHTML;
-				ensureParagraphs(this.editable);
+		if (this.multiline) this.__ensureParagraphs();
 
-				return this.editable.innerHTML !== before;
-			});
+		// Вставка сдвинула каретку; пока фокус отпущен, её место хранит снимок — обновляем,
+		// иначе следующая вставка (второй смайлик подряд) легла бы по старому смещению,
+		// ПЕРЕД только что вставленным.
+		if (this.__detachedCaret) this.__detachedCaret = this.caretSnapshot() ?? this.__detachedCaret;
+
+		this.__scrollCaretIntoView(); // вставка из кода браузерной прокрутки к каретке не даёт
 
 		this.__emitChange();
 		formatToolbar.refresh();