@brandup/ui-richeditor 1.0.39 → 1.0.40

package/package.json

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

package/source/richeditor.ts

@@ -274,7 +274,21 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		if (this.readonly) return;
 
 		const target = container ?? initiator.parentElement;
-		if (target) formatToolbar.openEmoji(this, initiator, target);
+		if (!target) return;
+
+		formatToolbar.openEmoji(this, initiator, target);
+
+		// По кнопке могли нажать, ни разу не заходя в поле, — тогда каретки нет и вставлять символ
+		// некуда. Фокусировать вслепую нельзя: focus() сбросил бы уже стоящую каретку, и символ
+		// уехал бы не туда. Конец содержимого назначаем сами: фокус ставит каретку в начало,
+		// и дописанный к сообщению символ оказался бы перед текстом.
+		//
+		// Строго после открытия панели: фокус показывает тулбар, а придержать его панель успевает
+		// только когда открыта сама.
+		if (!this.selection) {
+			this.focus();
+			caretToEnd(this.editable, this.multiline);
+		}
 	}
 
 	getLength(): number {
@@ -908,6 +922,18 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 		insertFormattedText(this.editable, data, Array.from(this.__pendingFormats), selection);
 
+		// В пустом поле абзацев ещё нет, и каретке некуда встать внутрь — вставка из кода
+		// (смайлик, переменная) ложится прямо в редактор. Приводим к модели абзацев тем же
+		// способом, что и обработчик input при печати: он на программную вставку не приходит,
+		// а без <p> следующий Enter правит текст мимо абзаца.
+		if (this.multiline)
+			preserveCaret(this.editable, () => {
+				const before = this.editable.innerHTML;
+				ensureParagraphs(this.editable);
+
+				return this.editable.innerHTML !== before;
+			});
+
 		this.__emitChange();
 		formatToolbar.refresh();
 	}

package/source/toolbar.ts

@@ -85,6 +85,7 @@ class FormatToolbar {
 	private __actionButtons: Array<[EditorAction, HTMLButtonElement]> = [];
 	private __hostButtons: Array<[ToolbarButton, HTMLButtonElement]> = [];
 	private __active: ToolbarHost | null = null;
+	private __suspended: ToolbarHost | null = null; // показ придержан на время панели смайликов
 	private __toolsKey = "";
 	private __inContainer = false;
 	private readonly __reposition = () => this.__schedule("position");
@@ -140,6 +141,9 @@ class FormatToolbar {
 
 	/** Показать тулбар для редактора (на фокусе): перестроить кнопки, спозиционировать, показать. */
 	attach(host: ToolbarHost) {
+		// открыта панель смайликов у собственной кнопки хоста — показ отложен до её закрытия
+		if (this.__suspended === host) return;
+
 		const actions = host.editorActions ?? [];
 		const buttons = host.toolbarButtons ?? [];
 		if (!host.formatTools.length && !actions.length && !buttons.length) return;
@@ -177,6 +181,10 @@ class FormatToolbar {
 
 	/** Скрыть тулбар, если он обслуживает этот редактор (на blur/destroy). */
 	detach(host: ToolbarHost) {
+		// Придержанный показ снимаем первым делом, до закрытия панели: иначе её onClose поднял бы
+		// тулбар над редактором, который как раз уходит (в том числе разрушается).
+		if (this.__suspended === host) this.__suspended = null;
+
 		// панель смайликов могла быть открыта не для активного редактора (у своей кнопки хоста) —
 		// ссылку на него всё равно отпускаем, иначе уничтоженный редактор держится синглтоном
 		const emojiHost = this.__emojiHost === host;
@@ -191,6 +199,11 @@ class FormatToolbar {
 
 		if (this.__active !== host) return;
 
+		this.__hide();
+	}
+
+	/** Убрать панель с экрана и отпустить активный редактор (позиционирование, подсветка). */
+	private __hide() {
 		this.__active = null;
 		this.__cancelScheduled();
 		if (this.__elem) this.__elem.classList.remove("visible");
@@ -335,7 +348,28 @@ class FormatToolbar {
 		this.__emojiHost = host;
 		this.__emojiInitiator = initiator;
 
-		PopupManager.open(this.__ensureEmojiPicker(container), { initiator });
+		// Панель у собственной кнопки хоста — самостоятельный слой, и показывать её вместе с тулбаром
+		// нельзя: это два всплывающих окна над одним полем. Тулбар придерживаем на всё время работы
+		// панели, а показанный убираем с экрана; вернётся он сам при её закрытии, если поле осталось
+		// в фокусе. Панель самого тулбара (container === __elem) — его собственный выпадающий слой,
+		// прятать её носителя незачем и нечем.
+		if (container !== this.__elem) {
+			this.__suspended = host;
+			if (this.__active === host) this.__hide();
+		}
+
+		PopupManager.open(this.__ensureEmojiPicker(container), { initiator, onClose: () => this.__resume() });
+	}
+
+	/** Панель смайликов закрылась — показываем придержанный тулбар, если редактор ещё в фокусе. */
+	private __resume() {
+		const host = this.__suspended;
+		if (!host) return;
+
+		this.__suspended = null;
+
+		// панель могло закрыть и движение мимо поля — тогда показывать нечего
+		if (host.editable.ownerDocument.activeElement === host.editable) this.attach(host);
 	}
 
 	private __toggleEmoji(initiator: HTMLButtonElement, e: MouseEvent) {