@brandup/ui-richeditor 1.0.49 → 1.0.51

package/source/richeditor.ts

@@ -30,6 +30,7 @@ import {
 	paragraphsNormalized,
 	preserveCaret,
 	mergeAdjacentBlocks,
+	splitSoftBreaks,
 	normalizeParagraphs,
 	normalizeWhitespace,
 	restoreSelection,
@@ -50,15 +51,20 @@ import {
 	atBlockStart,
 	buildParagraphs,
 	caretToEnd,
+	collapseEmptyEdges,
 	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";
@@ -66,6 +72,8 @@ export { formatToolbar, TOOLBAR_CLASS, type ToolbarHost, type ToolbarButton } fr
 export const ROOT_CLASS = "ui-richeditor"; // редактируемый элемент, к нему привязан UIElement
 // Содержимое временно невыделяемо: по странице тянут выделение, начатое вне редактора (см. __holdSelectable).
 export const UNSELECTABLE_CLASS = "unselectable";
+// Режим мягких переносов: абзац — это строка, и отступов между абзацами в нём нет.
+export const BREAKS_CLASS = "breaks";
 export const CHANGE_EVENT = "richeditor-change";
 
 const NAV_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown", "Escape"];
@@ -73,6 +81,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";
 
@@ -110,6 +139,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;
@@ -268,6 +356,8 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 		if (options.placeholder != null) editable.dataset.placeholder = options.placeholder;
 		if (multiline) editable.classList.add("multiline");
+		// абзац-строка: отступы между абзацами показывали бы пустую строку, которой в значении нет
+		if (!this.__separateParagraphs && multiline) editable.classList.add(BREAKS_CLASS);
 		if (readonly) editable.classList.add("readonly");
 
 		this.__initEvents();
@@ -288,12 +378,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	/**
-	 * Работает ли редактор моделью абзацев. В режиме break абзацных блоков нет: значение — плоский
-	 * текст, где каждый \n это <br>. Иначе `a\n\nb` рисовалось бы двумя <p>, а на экране (без
-	 * отступов между абзацами) это неотличимо от одного переноса — значение расходилось бы
-	 * с видимым текстом.
+	 * Разделяет ли абзацы пустая строка. Содержимое в обоих режимах — абзацные блоки, но значат
+	 * они разное: в block абзац это абзац (`\n\n`), в break — строка (`\n`), а пустая строка
+	 * сообщения хранится пустым абзацем. Поэтому в break у абзацев нет и отступов: между двумя
+	 * строками их на экране быть не должно.
 	 */
-	private get __blockParagraphs(): boolean {
+	private get __separateParagraphs(): boolean {
 		return this.multiline && this.paragraph === "block";
 	}
 
@@ -318,7 +408,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			this.formatMarkers,
 			this.multiline,
 			this.blockTypes,
-			this.__blockParagraphs
+			this.__separateParagraphs
 		);
 	}
 
@@ -377,6 +467,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// прятать его носителя незачем и нечем.
 		const inToolbar = !!picker.closest(`.${TOOLBAR_CLASS}`);
 
+		// Недавние — по хранилищу на момент показа: попап живёт между открытиями, а хранилище
+		// тем временем пополняют и другие попапы страницы.
+		refreshRecentEmojis(picker);
+
 		PopupManager.open(picker, {
 			initiator,
 			onClose: () => {
@@ -541,6 +635,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;
+	}
+
 	/**
 	 * Цель правки форматирования: выделение, расширенное до целых слов, плюс исходные границы
 	 * для восстановления. Диапазон отдельный от выделения — пока операция не решила, что будет
@@ -742,7 +870,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// Смена тега переносит содержимое в новый элемент — живые границы выделения этого
 		// не переживают, поэтому держим каретку по текстовым смещениям.
 		const bounds = selectionCharBounds(this.editable, range);
-		const { created } = applyBlocks(this.editable, range, target);
+		const { created } = applyBlocks(this.editable, range, target, !this.__separateParagraphs);
+
+		// Возврат блока в обычный текст оставляет его строки мягкими переносами — приводим их
+		// к абзацам. Строго ДО возврата каретки: разбиение блока живой Range не переживает,
+		// а смещения от него не меняются — граница абзацев и мягкий перенос считаются одинаково.
+		if (!this.__separateParagraphs) splitSoftBreaks(this.editable);
 
 		// Разделение блока добавило границы, а они в смещениях считаются — прежние уже не те.
 		// Выделяем то, что стало блоком: заодно видно, к каким строкам правка и относилась.
@@ -764,7 +897,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// Строго после возврата каретки: склейка снимает границу блоков, а её смещения считают,
 		// и восстановленная по прежним смещениям каретка съехала бы на символ. Живое выделение
 		// переезжает вместе с узлами само.
-		if (!this.__blockParagraphs) mergeAdjacentBlocks(this.editable);
+		if (!this.__separateParagraphs) mergeAdjacentBlocks(this.editable);
 
 		this.__emitChange();
 		formatToolbar.refresh();
@@ -954,7 +1087,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		formatToolbar.detach(this);
 
 		// элемент передан хостом — не удаляем его, только снимаем оформление редактора
-		this.editable.classList.remove(ROOT_CLASS, UNSELECTABLE_CLASS, "multiline", "readonly", "focused");
+		this.editable.classList.remove(
+			ROOT_CLASS,
+			UNSELECTABLE_CLASS,
+			BREAKS_CLASS,
+			"multiline",
+			"readonly",
+			"focused"
+		);
 		this.editable.removeAttribute("contenteditable");
 		delete this.editable.dataset.placeholder;
 
@@ -967,24 +1107,19 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		DOM.empty(this.editable);
 		if (!value) return;
 
-		// multiline → <p>-абзацы; single-line → инлайновое содержимое. Блоки разбираются и в режиме
-		// мягких переносов: цитата и код узнаются по собственной разметке, а не по пустой строке.
-		const blocks = this.blockTypes.length > 1;
-		const paragraphs = this.__blockParagraphs || (this.multiline && blocks);
-
+		// multiline → <p>-абзацы; single-line → инлайновое содержимое
 		this.editable.innerHTML = deserialize(
 			value,
 			this.__valueStorage,
 			this.__valueTools,
 			this.formatMarkers,
-			paragraphs,
+			this.multiline,
 			this.blockTypes,
-			this.__blockParagraphs
+			this.__separateParagraphs
 		);
 
-		// в break инлайновое содержимое оборачивается в единственный абзац — модель абзацев
-		// нужна редактированию (каретка, вставка), а разделителем строк остаётся <br>
-		if (this.multiline && !this.__blockParagraphs) ensureParagraphs(this.editable);
+		// пустые абзацы значения получают заполнитель, чужая вёрстка — канонический тег
+		if (this.multiline) ensureParagraphs(this.editable);
 	}
 
 	/**
@@ -1042,7 +1177,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		normalizeWhitespace(this.editable);
 		// В режиме мягких переносов соседние цитаты неразличимы: значение пишет их строки подряд,
 		// а разбор собирает в одну — склеиваем и в поле.
-		if (this.multiline) normalizeParagraphs(this.editable, !this.__blockParagraphs);
+		if (this.multiline) normalizeParagraphs(this.editable, !this.__separateParagraphs);
 		if (this.editable.innerHTML === before) return;
 
 		if (bounds && selection) {
@@ -1114,9 +1249,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.
 		// Слушаем на документе и в фазе перехвата: протяжка начинается где угодно, а обработчик
@@ -1207,6 +1343,17 @@ 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(
@@ -1223,6 +1370,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				} else if (editable.firstChild?.nodeName === "BR") {
 					editable.innerHTML = "";
 				}
+				// При наборе браузер прокручивает к каретке сам, но доводит её лишь до края
+				// коробки — под отступы контейнера. Доводим до текста.
+				this.__scrollCaretIntoView();
+
 				this.__emitChange(true); // печать — единственный посимвольный источник, его и откладываем
 			},
 			{ signal }
@@ -1230,46 +1381,58 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	/**
-	 * Доводит прокрутку до каретки. Переносы строк редактор делает сам (preventDefault), и
-	 * браузер к новой строке не прокручивает; к тому же у хостов (textbox, messageeditor)
-	 * прокручивается не редактируемый элемент, а его обёртка — после достижения предельной
-	 * высоты каретка у нижнего края уходила бы за пределы видимого.
+	 * Доводит прокрутку до каретки. Нужна там, где браузер не справляется сам: переносы строк
+	 * редактор делает вручную (preventDefault), и к новой строке браузер не прокручивает; в
+	 * textbox прокручивается не редактируемый элемент, а его обёртка; а своей прокруткой браузер
+	 * доводит каретку лишь до края коробки — под отступы, которые едут вместе с текстом.
 	 */
 	private __scrollCaretIntoView() {
 		const selection = this.selection;
 		if (!selection || selection.rangeCount === 0) return;
 
-		const range = selection.getRangeAt(0);
+		const range = selection.getRangeAt(0).cloneRange();
 
 		// в среде без раскладки (jsdom) у Range коробок нет вовсе
 		if (typeof range.getBoundingClientRect !== "function") return;
 
-		// У схлопнутой каретки на пустой строке нет собственной коробки — берём ближайший
-		// измеримый ориентир: узел перед кареткой (обычно свежий <br>), иначе родителя.
-		let rect = range.getBoundingClientRect();
-		if (!rect.height) {
-			const { startContainer: node, startOffset: offset } = range;
-			const anchor = node.nodeType === Node.ELEMENT_NODE ? (node.childNodes[offset - 1] ?? node) : node;
-			const el = anchor.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor.parentElement;
-			if (!el) return;
-			rect = el.getBoundingClientRect();
+		// Выделение тянут клавишами (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 (!rect.height && !rect.top && !rect.bottom) return;
+		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 overflow = document.defaultView?.getComputedStyle(el).overflowY;
+			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 pad = Math.min(rect.height || 16, 16);
-			if (rect.bottom > box.bottom - pad) el.scrollTop += rect.bottom - (box.bottom - pad);
-			else if (rect.top < box.top + pad) el.scrollTop -= box.top + pad - rect.top;
+			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;
 		}
 	}
@@ -1356,15 +1519,16 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			if (this.readonly) return;
 
 			// В режиме block Enter — новый абзац (<p>), модификатор — мягкий перенос (<br>).
-			// В режиме break строку переносят оба нажатия: пустая строка набирается двумя
-			// переносами, как в мессенджерах, и отдельный абзац дал бы в значении ровно её же.
+			// В режиме break абзац и есть строка, поэтому её создают оба нажатия: мягкому переносу
+			// там неоткуда взяться — в значении он дал бы ровно то же самое.
 			// Внутри блока правило берётся у его типа: из цитаты и кода Enter выходит,
 			// а модификатор переносит строку внутри.
 			const withModifier = e.shiftKey || e.ctrlKey || e.metaKey;
 			const current = this.currentBlock;
-			const breaks =
-				current === DEFAULT_BLOCK ? this.paragraph === "break" : BLOCK_TYPES[current].enter === "break";
-			const soft = breaks || withModifier;
+			const soft =
+				current === DEFAULT_BLOCK
+					? this.__separateParagraphs && withModifier
+					: BLOCK_TYPES[current].enter === "break" || withModifier;
 
 			this.__history?.record("op");
 			// Из блока выходят тем же нажатием, что делит его: продолжать цитату или код
@@ -1408,6 +1572,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;
@@ -1424,7 +1598,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);
 	}
 
@@ -1442,14 +1632,91 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			? text.split(/\n/)
 			: text.split(/\n/).map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
 
-		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs && !literal), selection);
+		const mode = literal || !this.multiline ? "single" : this.__separateParagraphs ? "block" : "line";
+
+		this.__insertPasted(buildParagraphs(lines, mode), selection);
+	}
+
+	/**
+	 * Бросок файлов в редактор: текстовые (`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);
 	}
 
-	// Вставка форматированного текста из text/html. Возвращает false, если вставлять нечего —
-	// тогда вызывающий откатывается на простую вставку.
-	private __pasteHtml(html: string, selection: Selection): boolean {
+	// Вставка простого текста разметкой хранения (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.__separateParagraphs
+			),
 			selection
 		);
 	}
@@ -1467,7 +1734,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 		const range = selection.getRangeAt(0);
 		this.__history?.record("op");
+
+		const spanned = !range.collapsed;
 		range.deleteContents();
+		if (spanned && this.multiline) collapseEmptyEdges(this.editable, range);
 
 		const start = selectionCharBounds(this.editable, range)[0];
 		let caret: number;