@brandup/ui-richeditor 1.0.44 → 1.0.45

package/package.json

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

package/source/editing.ts

@@ -184,6 +184,35 @@ export function atBlockStart(editable: HTMLElement, range: Range): boolean {
 	return before.toString().length === 0;
 }
 
+/**
+ * Block the caret sits in, or null when it stands at the editor level — an empty editor, or text
+ * that has not been wrapped into a paragraph yet.
+ */
+function blockOf(editable: HTMLElement, node: Node): HTMLElement | null {
+	let current: Node | null = node;
+	while (current && current !== editable && !isBlock(current)) current = current.parentNode;
+
+	return current && current !== editable ? (current as HTMLElement) : null;
+}
+
+/**
+ * Where to insert at the editor level: the node the new content goes before (null — at the end).
+ *
+ * A position addresses a child only when the container is the editor itself. A caret inside stray
+ * top-level text sits in a text node, and there the offset counts characters rather than children:
+ * taken as a child index it would send the insertion to an arbitrary place. From such a node we
+ * measure the node itself and insert after it, which is what a caret inside it asks for.
+ */
+function topLevelRef(editable: HTMLElement, range: Range): ChildNode | null {
+	const container = range.startContainer;
+	if (container === editable) return editable.childNodes[range.startOffset] ?? null;
+
+	let node: Node = container;
+	while (node.parentNode && node.parentNode !== editable) node = node.parentNode;
+
+	return node.parentNode === editable ? (node as ChildNode).nextSibling : null;
+}
+
 /** Enter в multiline: разбить текущий блок по каретке; хвост становится блоком типа `type`. */
 export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT_BLOCK) {
 	const selection = innerSelection(editable);
@@ -193,11 +222,10 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 	range.deleteContents();
 
 	// текущий блок (ближайший блочный предок внутри редактора)
-	let para: Node | null = range.startContainer;
-	while (para && para !== editable && !isBlock(para)) para = para.parentNode;
+	const para = blockOf(editable, range.startContainer);
 
 	// каретка не внутри абзаца — создаём абзац сразу с видимым результатом (иначе Enter «срабатывает со 2-го раза»)
-	if (!para || para === editable) {
+	if (!para) {
 		const next = createBlock(type);
 		if (editable.childNodes.length === 0) {
 			// пустой редактор: пустая строка-источник + новая строка с кареткой
@@ -205,8 +233,7 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 			editable.appendChild(next);
 		} else {
 			// каретка на уровне редактора между/после абзацев — вставляем новый абзац в эту позицию
-			const ref = editable.childNodes[range.startOffset] ?? null;
-			editable.insertBefore(next, ref);
+			editable.insertBefore(next, topLevelRef(editable, range));
 		}
 		caretToStart(next);
 		return;
@@ -220,11 +247,11 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 
 	// Выходим из блока, а за ним уже стоит пустой абзац — переходим в него. Иначе одно нажатие
 	// давало бы две пустые строки: одна тут заводится, вторая уже была заведена под каретку.
-	const following = (para as HTMLElement).nextElementSibling;
+	const following = para.nextElementSibling;
 	const empty = !(fragment.textContent ?? "") && !fragment.querySelector("br");
 
 	if (empty && following && blockTypeOf(following) === type && !(following.textContent ?? "")) {
-		fillEmptyParagraph(para as HTMLElement);
+		fillEmptyParagraph(para);
 		caretToStart(following);
 
 		return;
@@ -232,14 +259,14 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 
 	const next = document.createElement(BLOCK_TYPES[type].tag);
 	next.appendChild(fragment);
-	(para as ChildNode).after(next);
+	para.after(next);
 
 	// хвост уехал в блок другого типа — его правила распространяются и на содержимое
 	if (!BLOCK_TYPES[type].inline) unwrapFormatting(next);
 
 	// extractContents в конце абзаца оставляет пустой текст-узел → <p></p> без заполнителя
 	// (невидим/нефокусируем, каретка не встаёт). Чистим и ставим <br> в опустевшие абзацы.
-	fillEmptyParagraph(para as HTMLElement);
+	fillEmptyParagraph(para);
 	fillEmptyParagraph(next);
 
 	caretToStart(next);
@@ -306,17 +333,15 @@ export function insertSoftBreak(editable: HTMLElement) {
 
 /** Вставляет санитизированные абзацы <p> в позицию каретки, разбивая текущий абзац. */
 export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement[], range: Range) {
-	let para: Node | null = range.startContainer;
-	while (para && para !== editable && !isBlock(para)) para = para.parentNode;
+	const block = blockOf(editable, range.startContainer);
 
 	// каретка не внутри абзаца (пустой редактор / уровень редактора) — вставляем абзацы как есть
-	if (!para || para === editable) {
-		const ref = editable.childNodes[range.startOffset] ?? null;
+	if (!block) {
+		const ref = topLevelRef(editable, range);
 		for (const p of paras) editable.insertBefore(p, ref);
 		return;
 	}
 
-	const block = para as HTMLElement;
 	// Вставка в цитату или код остаётся в них: разорвать блок посреди вставки — не то,
 	// чего ждут, а тип целевого блока диктует и правила его содержимого.
 	const type = blockTypeOf(block) ?? DEFAULT_BLOCK;

package/source/history.ts

@@ -68,12 +68,19 @@ export class EditorHistory {
 		const top = this.__undo[this.__undo.length - 1];
 		if (top && top.html === snap.html) return; // состояние не изменилось — не дублируем
 
+		this.__push(snap);
+		this.__redo = [];
+	}
+
+	// Puts a snapshot on the undo stack, dropping the oldest ones beyond the limits. Every push
+	// goes through here: redo adds a snapshot just like an edit does, and without trimming the
+	// history would outgrow the limits over a run of undo/redo.
+	private __push(snap: Snapshot): void {
 		this.__undo.push(snap);
 		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 = [];
 	}
 
 	/** Откатить на шаг назад. Возвращает false, если откатывать нечего. */
@@ -93,9 +100,7 @@ export class EditorHistory {
 		const next = this.__redo.pop();
 		if (!next) return false;
 
-		const current = this.__snapshot();
-		this.__undo.push(current);
-		this.__chars += current.html.length;
+		this.__push(this.__snapshot());
 		this.__restore(next);
 		this.__lastKind = null;
 		return true;

package/source/richeditor.ts

@@ -122,8 +122,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[];
 	/**
@@ -1131,15 +1132,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 +1280,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);

package/source/toolbar.ts

@@ -237,7 +237,12 @@ class FormatToolbar {
 		const blocks = (host.blockTools ?? []).filter(
 			(type) => type !== DEFAULT_BLOCK && !HIDDEN_BLOCKS.includes(type)
 		);
-		if (!tools.length && !blocks.length && !actions.length && !buttons.length) return;
+		// Nothing to show — and the previous editor's panel must not stay on screen either: focus
+		// moved to this one, while its buttons would still edit the neighbour.
+		if (!tools.length && !blocks.length && !actions.length && !buttons.length) {
+			if (this.__active) this.__hide();
+			return;
+		}
 
 		this.__bindSelection();
 		this.__active = host;