@brandup/ui-richeditor 1.0.40 → 1.0.41

package/package.json

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

package/source/emoji.ts

@@ -1,53 +1,129 @@
-// Набор смайликов для кнопки вставки в тулбаре. Все символы — одиночные кодпойнты (без
-// ZWJ-последовательностей и модификаторов), поэтому переносятся в текст как единое целое.
-// Внимание: в UTF-16 каждый занимает две единицы, и getLength() (а значит и maxlength у
-// хоста) считает такой символ за два.
+// Набор смайликов для панели вставки. Все символы — одиночные кодпойнты (без ZWJ-последовательностей
+// и модификаторов), поэтому переносятся в текст как единое целое. Внимание: в UTF-16 каждый занимает
+// две единицы, и getLength() (а значит и maxlength у хоста) считает такой символ за два.
+//
+// Разложены по группам: панель рисует их в том же порядке и отделяет линией, а заодно группа —
+// это кусок, к которому применяется пропуск отрисовки (см. .emoji-group в richeditor.less).
 
-/** Смайлики, доступные в панели вставки (порядок сохраняется в UI). */
-export const EMOJIS: string[] = [
-	"😀", "😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😌", "😍", "😏", "😒", "😓", "😔",
-	"😖", "😘", "😚", "😜", "😝", "😞", "😠", "😡", "😢", "😣", "😤", "😥", "😨", "😩", "😪", "😫",
-	"😭", "😰", "😱", "😲", "😳", "😵", "😷", "😸", "😹", "😺", "😻", "😼", "😽", "😾", "😿", "🙀",
-	"🙅", "🙆", "🙇", "🙈", "🙉", "🙊", "🙋", "🙌", "🙍", "🙎", "🙏", "🚀", "🚃", "🚄", "🚅", "🚇",
-	"🚉", "🚌", "🚏", "🚑", "🚒", "🚓", "🚕", "🚗", "🚙", "🚚", "🚢", "🚤", "🚥", "🚧", "🚨", "🚩",
-	"🚪", "🚫", "🚬", "🚭", "🚲", "🚶", "🚹", "🚺", "🚻", "🚼", "🚽", "🚾", "🛀", "🅰", "🅱", "🅾",
-	"🅿", "🆎", "🆑", "🆒", "🆓", "🆔", "🆕", "🆖", "🆗", "🆘", "🆙", "🆚", "🈁", "🈂", "🈚", "🈯",
-	"🈲", "🈳", "🈴", "🈵", "🈶", "🈷", "🈸", "🈹", "🈺", "🉐", "🉑", "🀄", "🃏", "🌀", "🌁", "🌂",
-	"🌃", "🌄", "🌅", "🌆", "🌇", "🌈", "🌉", "🌊", "🌋", "🌌", "🌏", "🌑", "🌓", "🌔", "🌕", "🌙",
-	"🌛", "🌟", "🌠", "🌰", "🌱", "🌴", "🌵", "🌷", "🌸", "🌹", "🌺", "🌻", "🌼", "🌽", "🌾", "🌿",
-	"🍀", "🍁", "🍂", "🍃", "🍄", "🍅", "🍆", "🍇", "🍈", "🍉", "🍊", "🍌", "🍍", "🍎", "🍏", "🍑",
-	"🍒", "🍓", "🍔", "🍕", "🍖", "🍗", "🍘", "🍙", "🍚", "🍛", "🍜", "🍝", "🍞", "🍟", "🍠", "🍡",
-	"🍢", "🍣", "🍤", "🍥", "🍦", "🍧", "🍨", "🍩", "🍪", "🍫", "🍬", "🍭", "🍮", "🍯", "🍰", "🍱",
-	"🍲", "🍳", "🍴", "🍵", "🍶", "🍷", "🍸", "🍹", "🍺", "🍻", "🎀", "🎁", "🎂", "🎃", "🎄", "🎅",
-	"🎆", "🎇", "🎈", "🎉", "🎊", "🎋", "🎌", "🎍", "🎎", "🎏", "🎐", "🎑", "🎒", "🎓", "🎠", "🎡",
-	"🎢", "🎣", "🎤", "🎥", "🎦", "🎧", "🎨", "🎩", "🎪", "🎫", "🎬", "🎭", "🎮", "🎯", "🎰", "🎱",
-	"🎲", "🎳", "🎴", "🎵", "🎶", "🎷", "🎸", "🎹", "🎺", "🎻", "🎼", "🎽", "🎾", "🎿", "🏀", "🏁",
-	"🏂", "🏃", "🏄", "🏆", "🏈", "🏊", "🏠", "🏡", "🏢", "🏣", "🏥", "🏦", "🏧", "🏨", "🏩", "🏪",
-	"🏫", "🏬", "🏭", "🏮", "🏯", "🏰", "🐌", "🐍", "🐎", "🐑", "🐒", "🐔", "🐗", "🐘", "🐙", "🐚",
-	"🐛", "🐜", "🐝", "🐞", "🐟", "🐠", "🐡", "🐢", "🐣", "🐤", "🐥", "🐦", "🐧", "🐨", "🐩", "🐫",
-	"🐬", "🐭", "🐮", "🐯", "🐰", "🐱", "🐲", "🐳", "🐴", "🐵", "🐶", "🐷", "🐸", "🐹", "🐺", "🐻",
-	"🐼", "🐽", "🐾", "👀", "👂", "👃", "👄", "👅", "👆", "👇", "👈", "👉", "👊", "👋", "👌", "👍",
-	"👎", "👏", "👐", "👑", "👒", "👓", "👔", "👕", "👖", "👗", "👘", "👙", "👚", "👛", "👜", "👝",
-	"👞", "👟", "👠", "👡", "👢", "👣", "👤", "👦", "👧", "👨", "👩", "👪", "👫", "👮", "👯", "👰",
-	"👱", "👲", "👳", "👴", "👵", "👶", "👷", "👸", "👹", "👺", "👻", "👼", "👽", "👾", "👿", "💀",
-	"💁", "💂", "💃", "💄", "💅", "💆", "💇", "💈", "💉", "💊", "💋", "💌", "💍", "💎", "💏", "💐",
-	"💑", "💒", "💓", "💔", "💕", "💖", "💗", "💘", "💙", "💚", "💛", "💜", "💝", "💞", "💟", "💠",
-	"💡", "💢", "💣", "💤", "💥", "💦", "💧", "💨", "💩", "💪", "💫", "💬", "💮", "💯", "💰", "💱",
-	"💲", "💳", "💴", "💵", "💸", "💹", "💺", "💻", "💼", "💽", "💾", "💿", "📀", "📁", "📂", "📃",
-	"📄", "📅", "📆", "📇", "📈", "📉", "📊", "📋", "📌", "📍", "📎", "📏", "📐", "📑", "📒", "📓",
-	"📔", "📕", "📖", "📗", "📘", "📙", "📚", "📛", "📜", "📝", "📞", "📟", "📠", "📡", "📢", "📣",
-	"📤", "📥", "📦", "📧", "📨", "📩", "📪", "📫", "📮", "📰", "📱", "📲", "📳", "📴", "📶", "📷",
-	"📹", "📺", "📻", "📼", "🔃", "🔊", "🔋", "🔌", "🔍", "🔎", "🔏", "🔐", "🔑", "🔒", "🔓", "🔔",
-	"🔖", "🔗", "🔘", "🔙", "🔚", "🔛", "🔜", "🔝", "🔞", "🔟", "🔠", "🔡", "🔢", "🔣", "🔤", "🔥",
-	"🔦", "🔧", "🔨", "🔩", "🔪", "🔫", "🔮", "🔯", "🔰", "🔱", "🔲", "🔳", "🔴", "🔵", "🔶", "🔷",
-	"🔸", "🔹", "🔺", "🔻", "🔼", "🔽", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙",
-	"🕚", "🕛", "🗻", "🗼", "🗽", "🗾", "🗿", "😇", "😈", "😎", "😐", "😑", "😕", "😗", "😙", "😛",
-	"😟", "😦", "😧", "😬", "😮", "😯", "😴", "😶", "🚁", "🚂", "🚆", "🚈", "🚊", "🚍", "🚎", "🚐",
-	"🚔", "🚖", "🚘", "🚛", "🚜", "🚝", "🚞", "🚟", "🚠", "🚡", "🚣", "🚦", "🚮", "🚯", "🚰", "🚱",
-	"🚳", "🚴", "🚵", "🚷", "🚸", "🚿", "🛁", "🛂", "🛃", "🛄", "🛅", "🌍", "🌎", "🌐", "🌒", "🌖",
-	"🌗", "🌘", "🌚", "🌜", "🌝", "🌞", "🌲", "🌳", "🍋", "🍐", "🍼", "🏇", "🏉", "🏤", "🐀", "🐁",
-	"🐂", "🐃", "🐄", "🐅", "🐆", "🐇", "🐈", "🐉", "🐊", "🐋", "🐏", "🐐", "🐓", "🐕", "🐖", "🐪",
-	"👥", "👬", "👭", "💭", "💶", "💷", "📬", "📭", "📯", "📵", "🔀", "🔁", "🔂", "🔄", "🔅", "🔆",
-	"🔇", "🔉", "🔕", "🔬", "🔭", "🕜", "🕝", "🕞", "🕟", "🕠", "🕡", "🕢", "🕣", "🕤", "🕥", "🕦",
-	"🕧",
+/** Группа смайликов в панели вставки. */
+export interface EmojiGroup {
+	/** Название группы; в панели не показывается, уходит в подпись для скринридера. */
+	title: string;
+	emojis: string[];
+}
+
+/** Смайлики по группам (порядок сохраняется в UI). */
+export const EMOJI_GROUPS: EmojiGroup[] = [
+	{
+		title: "Смайлы и жесты",
+		// prettier-ignore
+		emojis: [
+			"😀", "😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😌", "😍", "😏", "😒", "😓", "😔",
+			"😖", "😘", "😚", "😜", "😝", "😞", "😠", "😡", "😢", "😣", "😤", "😥", "😨", "😩", "😪", "😫",
+			"😭", "😰", "😱", "😲", "😳", "😵", "😷", "😸", "😹", "😺", "😻", "😼", "😽", "😾", "😿", "🙀",
+			"🙅", "🙆", "🙇", "🙈", "🙉", "🙊", "🙋", "🙌", "🙍", "🙎", "🙏", "😇", "😈", "😎", "😐", "😑",
+			"😕", "😗", "😙", "😛", "😟", "😦", "😧", "😬", "😮", "😯", "😴", "😶",
+		],
+	},
+	{
+		title: "Люди",
+		// prettier-ignore
+		emojis: [
+			"👀", "👂", "👃", "👄", "👅", "👆", "👇", "👈", "👉", "👊", "👋", "👌", "👍", "👎", "👏", "👐",
+			"👑", "👒", "👓", "👔", "👕", "👖", "👗", "👘", "👙", "👚", "👛", "👜", "👝", "👞", "👟", "👠",
+			"👡", "👢", "👣", "👤", "👦", "👧", "👨", "👩", "👪", "👫", "👮", "👯", "👰", "👱", "👲", "👳",
+			"👴", "👵", "👶", "👷", "👸", "👹", "👺", "👻", "👼", "👽", "👾", "👿", "💀", "💁", "💂", "💃",
+			"💄", "💅", "💆", "💇", "💏", "💑", "👥", "👬", "👭",
+		],
+	},
+	{
+		title: "Животные",
+		// prettier-ignore
+		emojis: [
+			"🐌", "🐍", "🐎", "🐑", "🐒", "🐔", "🐗", "🐘", "🐙", "🐚", "🐛", "🐜", "🐝", "🐞", "🐟", "🐠",
+			"🐡", "🐢", "🐣", "🐤", "🐥", "🐦", "🐧", "🐨", "🐩", "🐫", "🐬", "🐭", "🐮", "🐯", "🐰", "🐱",
+			"🐲", "🐳", "🐴", "🐵", "🐶", "🐷", "🐸", "🐹", "🐺", "🐻", "🐼", "🐽", "🐾", "🐀", "🐁", "🐂",
+			"🐃", "🐄", "🐅", "🐆", "🐇", "🐈", "🐉", "🐊", "🐋", "🐏", "🐐", "🐓", "🐕", "🐖", "🐪",
+		],
+	},
+	{
+		title: "Природа",
+		// prettier-ignore
+		emojis: [
+			"🌀", "🌁", "🌂", "🌃", "🌄", "🌅", "🌆", "🌇", "🌈", "🌉", "🌊", "🌋", "🌌", "🌏", "🌑", "🌓",
+			"🌔", "🌕", "🌙", "🌛", "🌟", "🌠", "🌰", "🌱", "🌴", "🌵", "🌷", "🌸", "🌹", "🌺", "🌻", "🌼",
+			"🌽", "🌾", "🌿", "🍀", "🍁", "🍂", "🍃", "🌍", "🌎", "🌐", "🌒", "🌖", "🌗", "🌘", "🌚", "🌜",
+			"🌝", "🌞", "🌲", "🌳",
+		],
+	},
+	{
+		title: "Еда",
+		// prettier-ignore
+		emojis: [
+			"🍄", "🍅", "🍆", "🍇", "🍈", "🍉", "🍊", "🍌", "🍍", "🍎", "🍏", "🍑", "🍒", "🍓", "🍔", "🍕",
+			"🍖", "🍗", "🍘", "🍙", "🍚", "🍛", "🍜", "🍝", "🍞", "🍟", "🍠", "🍡", "🍢", "🍣", "🍤", "🍥",
+			"🍦", "🍧", "🍨", "🍩", "🍪", "🍫", "🍬", "🍭", "🍮", "🍯", "🍰", "🍱", "🍲", "🍳", "🍴", "🍵",
+			"🍶", "🍷", "🍸", "🍹", "🍺", "🍻", "🍋", "🍐", "🍼",
+		],
+	},
+	{
+		title: "Праздники и спорт",
+		// prettier-ignore
+		emojis: [
+			"🎀", "🎁", "🎂", "🎃", "🎄", "🎅", "🎆", "🎇", "🎈", "🎉", "🎊", "🎋", "🎌", "🎍", "🎎", "🎏",
+			"🎐", "🎑", "🎒", "🎓", "🎠", "🎡", "🎢", "🎣", "🎤", "🎥", "🎦", "🎧", "🎨", "🎩", "🎪", "🎫",
+			"🎬", "🎭", "🎮", "🎯", "🎰", "🎱", "🎲", "🎳", "🎴", "🎵", "🎶", "🎷", "🎸", "🎹", "🎺", "🎻",
+			"🎼", "🎽", "🎾", "🎿", "🏀", "🏁", "🏂", "🏃", "🏄", "🏆", "🏈", "🏊", "🏇", "🏉",
+		],
+	},
+	{
+		title: "Места",
+		// prettier-ignore
+		emojis: [
+			"🏠", "🏡", "🏢", "🏣", "🏥", "🏦", "🏧", "🏨", "🏩", "🏪", "🏫", "🏬", "🏭", "🏮", "🏯", "🏰",
+			"🗻", "🗼", "🗽", "🗾", "🗿", "🏤",
+		],
+	},
+	{
+		title: "Транспорт",
+		// prettier-ignore
+		emojis: [
+			"🚀", "🚃", "🚄", "🚅", "🚇", "🚉", "🚌", "🚏", "🚑", "🚒", "🚓", "🚕", "🚗", "🚙", "🚚", "🚢",
+			"🚤", "🚥", "🚧", "🚨", "🚩", "🚪", "🚫", "🚬", "🚭", "🚲", "🚶", "🚹", "🚺", "🚻", "🚼", "🚽",
+			"🚾", "🛀", "🚁", "🚂", "🚆", "🚈", "🚊", "🚍", "🚎", "🚐", "🚔", "🚖", "🚘", "🚛", "🚜", "🚝",
+			"🚞", "🚟", "🚠", "🚡", "🚣", "🚦", "🚮", "🚯", "🚰", "🚱", "🚳", "🚴", "🚵", "🚷", "🚸", "🚿",
+			"🛁", "🛂", "🛃", "🛄", "🛅",
+		],
+	},
+	{
+		title: "Предметы",
+		// prettier-ignore
+		emojis: [
+			"💈", "💉", "💊", "💋", "💌", "💍", "💎", "💐", "💠", "💡", "💰", "💱", "💲", "💳", "💴", "💵",
+			"💸", "💹", "💺", "💻", "💼", "💽", "💾", "💿", "📀", "📁", "📂", "📃", "📄", "📅", "📆", "📇",
+			"📈", "📉", "📊", "📋", "📌", "📍", "📎", "📏", "📐", "📑", "📒", "📓", "📔", "📕", "📖", "📗",
+			"📘", "📙", "📚", "📛", "📜", "📝", "📞", "📟", "📠", "📡", "📢", "📣", "📤", "📥", "📦", "📧",
+			"📨", "📩", "📪", "📫", "📮", "📰", "📱", "📲", "📳", "📴", "📶", "📷", "📹", "📺", "📻", "📼",
+			"💶", "💷", "📬", "📭", "📯", "📵",
+		],
+	},
+	{
+		title: "Символы",
+		// prettier-ignore
+		emojis: [
+			"🅰", "🅱", "🅾", "🅿", "🆎", "🆑", "🆒", "🆓", "🆔", "🆕", "🆖", "🆗", "🆘", "🆙", "🆚", "🈁",
+			"🈂", "🈚", "🈯", "🈲", "🈳", "🈴", "🈵", "🈶", "🈷", "🈸", "🈹", "🈺", "🉐", "🉑", "🀄", "🃏",
+			"💒", "💓", "💔", "💕", "💖", "💗", "💘", "💙", "💚", "💛", "💜", "💝", "💞", "💟", "💢", "💣",
+			"💤", "💥", "💦", "💧", "💨", "💩", "💪", "💫", "💬", "💮", "💯", "🔃", "🔊", "🔋", "🔌", "🔍",
+			"🔎", "🔏", "🔐", "🔑", "🔒", "🔓", "🔔", "🔖", "🔗", "🔘", "🔙", "🔚", "🔛", "🔜", "🔝", "🔞",
+			"🔟", "🔠", "🔡", "🔢", "🔣", "🔤", "🔥", "🔦", "🔧", "🔨", "🔩", "🔪", "🔫", "🔮", "🔯", "🔰",
+			"🔱", "🔲", "🔳", "🔴", "🔵", "🔶", "🔷", "🔸", "🔹", "🔺", "🔻", "🔼", "🔽", "🕐", "🕑", "🕒",
+			"🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "🕛", "💭", "🔀", "🔁", "🔂", "🔄", "🔅", "🔆",
+			"🔇", "🔉", "🔕", "🔬", "🔭", "🕜", "🕝", "🕞", "🕟", "🕠", "🕡", "🕢", "🕣", "🕤", "🕥", "🕦",
+			"🕧",
+		],
+	},
 ];
+
+/** Все смайлики подряд, в порядке групп. */
+export const EMOJIS: string[] = EMOJI_GROUPS.flatMap((group) => group.emojis);

package/source/index.ts

@@ -1,6 +1,6 @@
 export { default } from "./richeditor";
 export * from "./richeditor";
-export { EMOJIS } from "./emoji";
+export { EMOJIS, EMOJI_GROUPS, type EmojiGroup } from "./emoji";
 export {
 	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,

package/source/richeditor.less

@@ -65,6 +65,19 @@
 		white-space: normal;
 		text-overflow: unset;
 	}
+
+	// По странице тянут выделение, начатое вне редактора: пока это так, его содержимое
+	// невыделяемо — иначе текст сообщения попал бы в выделение страницы как её часть.
+	// Класс держится только на время протяжки (см. __holdSelectable).
+	//
+	// Одного user-select мало: редактируемому содержимому браузер принудительно возвращает
+	// выделяемость, поэтому на это же время снимаем и саму редактируемость. Атрибут
+	// contenteditable не трогаем — он держит состояние редактора, а правится лишь оформление.
+	&.unselectable {
+		-webkit-user-modify: read-only;
+		-webkit-user-select: none;
+		user-select: none;
+	}
 }
 
 // общий тулбар форматирования — единый для всех редакторов.
@@ -82,6 +95,8 @@
 	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);
@@ -155,18 +170,42 @@
 	left: 0;
 	margin-top: 4px;
 	width: 296px;
-	max-height: 220px;
-	overflow-y: auto;
-	padding: 4px;
-	display: flex;
-	flex-flow: row wrap;
+	padding: 6px;
+	// прокрутка живёт на списке внутри — см. .emoji-list
+	overflow: hidden;
+	// Курсор задаём свой: панель монтируется в разметку хоста и наследует его курсор — рядом
+	// с полем ввода это текстовый, и он же показывался бы над полосой прокрутки и фоном панели.
+	cursor: default;
+
+	// Прокручивается список, а не сам попап: полоса рисуется по краю коробки и перекрывала бы
+	// скругление рамки — угол выглядел бы срезанным. Заодно полоса отступает от краёв на
+	// внутренний отступ попапа — сверху, снизу и справа, — а не упирается в рамку.
+	& .emoji-list {
+		max-height: 220px;
+		overflow-y: auto; // полоса прокрутки — общая, от .ui-scrollable кита
+	}
 
-	& .emoji {
-		// в панели больше семисот кнопок: за пределами прокрутки браузер их не раскладывает
+	// Смысловая группа смайликов, отбитая линией. Она же — кусок, который браузер вправе не
+	// рисовать, пока до него не долистали: поэлементно это было бы семьсот отслеживаемых
+	// поддеревьев, и слежение за ними съедает весь выигрыш от пропуска.
+	& .emoji-group {
+		display: flex;
+		flex-flow: row wrap;
 		content-visibility: auto;
-		contain-intrinsic-size: 32px 32px;
-		width: 32px;
-		height: 32px;
+		// высота ненарисованной группы; auto — дальше браузер помнит фактическую
+		contain-intrinsic-size: auto calc(var(--emoji-rows, 8) * var(--richeditor-emoji-size, 32px));
+	}
+
+	& .emoji-group + .emoji-group {
+		margin-top: 6px;
+		padding-top: 6px;
+		border-top: var(--input-border-type, solid) var(--input-border-width, 1px)
+			var(--input-border-color, #aaa);
+	}
+
+	& .emoji {
+		width: var(--richeditor-emoji-size, 32px);
+		height: var(--richeditor-emoji-size, 32px);
 		padding: 0;
 		border: 0;
 		background: transparent;

package/source/richeditor.ts

@@ -47,6 +47,8 @@ import { formatToolbar, type ToolbarButton } from "./toolbar";
 export { TOOLBAR_CLASS, formatToolbar, type ToolbarHost, type ToolbarButton } from "./toolbar";
 
 export const ROOT_CLASS = "ui-richeditor"; // редактируемый элемент, к нему привязан UIElement
+// Содержимое временно невыделяемо: по странице тянут выделение, начатое вне редактора (см. __holdSelectable).
+export const UNSELECTABLE_CLASS = "unselectable";
 export const CHANGE_EVENT = "richeditor-change";
 
 const NAV_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown", "Escape"];
@@ -147,6 +149,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	private __abort = new AbortController();
 	private __pendingFormats = new Set<FormatTool>();
 	private __hasInputClick = false;
+	private __editHolds = 0; // правка продолжается в окне хоста — см. holdEditing
+	// Компонент снят. Удержание правки переживает снятие (окно хоста закрывается позже), и по его
+	// снятию трогать содержимое уже нельзя — редактора нет.
+	private __disposed = false;
 	private __changeTimer = 0; // отложенное change по печати — см. __emitChange/flushChange
 	// Окно редактируемого элемента, взятое при создании. Таймер отложенного change переживает
 	// снятие компонента и гасится в destroy, а тот случается когда угодно — к этому моменту
@@ -190,7 +196,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// при этом остаётся возможность фокуса, выделения и копирования
 		editable.contentEditable = "true";
 
-		if (options.placeholder != null) editable.setAttribute("data-placeholder", options.placeholder);
+		if (options.placeholder != null) editable.dataset.placeholder = options.placeholder;
 		if (multiline) editable.classList.add("multiline");
 		if (readonly) editable.classList.add("readonly");
 
@@ -296,8 +302,65 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		return this.editable.textContent?.length ?? 0;
 	}
 
+	/**
+	 * Фокус в поле. Каретку, стоящую в содержимом, не двигает: правку продолжают там, где её
+	 * прервали. Своей защиты обработчика фокуса для этого мало — браузер успевает поставить
+	 * при фокусе собственную каретку (в начало содержимого), и она выглядит как «уже стоявшая».
+	 */
 	focus(): void {
+		const bounds = this.caretSnapshot();
+
+		if (bounds) this.restoreCaret(bounds);
+		else this.editable.focus();
+	}
+
+	/**
+	 * Снимок каретки текстовыми смещениями — пережить работу окна хоста. Пока оно открыто, фокус
+	 * уходит туда, а с ним и выделение документа: в окне могут быть свои поля ввода, и каретка
+	 * встанет уже в них. Снимать нужно до открытия, возвращать — через {@link restoreCaret}.
+	 *
+	 * Смещения остаются верными, потому что на это время содержимое не меняется (см. {@link holdEditing}).
+	 */
+	caretSnapshot(): [number, number] | null {
+		const selection = this.selection;
+
+		return selection ? selectionCharBounds(this.editable, selection.getRangeAt(0)) : null;
+	}
+
+	/** Возвращает в поле фокус и каретку по снимку {@link caretSnapshot}. */
+	restoreCaret(bounds: [number, number]): void {
 		this.editable.focus();
+
+		const selection = documentSelection(this.editable);
+		if (selection) restoreSelection(this.editable, bounds[0], bounds[1], selection);
+	}
+
+	/**
+	 * Сообщает, что правка продолжается снаружи: хост открыл своё окно, фокус ушёл туда, но ввод
+	 * не закончен. Пока удержание живо, `blur` не считается концом ввода и содержимое не приводится
+	 * к нормальному виду — иначе пробел на границе каретки был бы срезан как краевой, а сама каретка
+	 * съехала бы на пересчёте смещений, и текст из окна встал бы не туда и вплотную к соседнему слову.
+	 *
+	 * Возвращает снятие удержания: повторные вызовы ничего не делают. Если к этому моменту фокус
+	 * в поле не вернулся, содержимое доводится сразу — другого `blur` уже не будет.
+	 */
+	holdEditing(): () => void {
+		this.__editHolds++;
+
+		let released = false;
+
+		return () => {
+			if (released) return;
+			released = true;
+
+			this.__editHolds--;
+			if (this.__editHolds > 0 || this.__disposed) return;
+
+			if (this.editable.ownerDocument.activeElement !== this.editable) {
+				this.__normalize(true);
+				this.flushChange();
+			}
+		};
 	}
 
 	onChange(handler: (e: RichEditorChangeData) => void) {
@@ -511,14 +574,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	override destroy(): void {
+		this.__disposed = true;
 		this.flushChange(); // хост не должен остаться с устаревшей копией значения
 		this.__abort.abort();
 		formatToolbar.detach(this);
 
 		// элемент передан хостом — не удаляем его, только снимаем оформление редактора
-		this.editable.classList.remove(ROOT_CLASS, "multiline", "readonly", "focused");
+		this.editable.classList.remove(ROOT_CLASS, UNSELECTABLE_CLASS, "multiline", "readonly", "focused");
 		this.editable.removeAttribute("contenteditable");
-		this.editable.removeAttribute("data-placeholder");
+		delete this.editable.dataset.placeholder;
 
 		super.destroy();
 	}
@@ -613,6 +677,47 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 	// --- обработчики ---
 
+	/**
+	 * Изоляция выделения: протяжка, начатая вне редактора, не должна затягивать его содержимое —
+	 * текст сообщения красился бы как часть страницы.
+	 *
+	 * Правим не выделение, а выделяемость: пока идёт чужая протяжка, содержимое редактора
+	 * невыделяемо, и браузер обходит его сам. Обрезать выделение из кода нельзя — оно в документе
+	 * одно, и когда протяжка проходит мимо редактора, оба её конца снаружи: середину из одного
+	 * диапазона не вырезать.
+	 */
+	private __holdSelectable(target: EventTarget | null) {
+		// Нажали в самом редакторе — или он в работе: нажатие по панели и кнопкам хоста приходит
+		// мимо него, но выделение страницы тут ни при чём, а запрет заодно лишил бы поле
+		// редактируемости до следующего клика внутрь. Фокус на этот момент ещё не ушёл.
+		const own =
+			this.editable.contains(target as Node | null) ||
+			this.editable.ownerDocument.activeElement === this.editable;
+
+		this.editable.classList.toggle(UNSELECTABLE_CLASS, !own);
+	}
+
+	/**
+	 * Снимает запрет, когда выделение перестало задевать редактор.
+	 *
+	 * Просто по отпусканию кнопки снимать нельзя: диапазон остаётся протянутым через редактор,
+	 * и стоит вернуть содержимому выделяемость, как оно тут же оказывается выделенным — будто
+	 * запрета и не было. Такой запрет держится до следующего нажатия: внутри редактора оно
+	 * снимет запрет, снаружи — начнёт новую протяжку.
+	 */
+	private __releaseSelectable() {
+		if (!this.editable.classList.contains(UNSELECTABLE_CLASS)) return;
+
+		const selection = documentSelection(this.editable);
+		const across =
+			!!selection &&
+			selection.rangeCount > 0 &&
+			!selection.isCollapsed &&
+			selection.getRangeAt(0).intersectsNode(this.editable);
+
+		if (!across) this.editable.classList.remove(UNSELECTABLE_CLASS);
+	}
+
 	private __initEvents() {
 		const { signal } = this.__abort;
 		const editable = this.editable;
@@ -621,6 +726,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// dragenter/dragover отменять нельзя: в модели DnD отмена как раз и означает «сюда можно бросить»
 		this.element.addEventListener("drop", (e) => e.preventDefault(), { signal });
 
+		// Выделение страницы не должно затягивать содержимое редактора — см. __holdSelectable.
+		// Слушаем на документе и в фазе перехвата: протяжка начинается где угодно, а обработчик
+		// по пути может погасить всплытие.
+		const doc = editable.ownerDocument;
+		doc.addEventListener("mousedown", (e) => this.__holdSelectable(e.target), { signal, capture: true });
+		// По изменению выделения проверять нельзя: пока запрет действует, выделение до редактора
+		// не доходит — проверка увидела бы «не задевает» и сняла запрет сама. Только по концу протяжки.
+		doc.addEventListener("mouseup", () => this.__releaseSelectable(), { signal, capture: true });
+
 		editable.addEventListener(
 			"mousedown",
 			() => {
@@ -635,6 +749,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			() => {
 				this.element.classList.add("focused");
 
+				// Пришли править — держать запрет выделения не за чем, а с ним поле осталось бы
+				// нередактируемым. Мышью его снимает нажатие, но фокус берут и клавишей, и из кода.
+				this.element.classList.remove(UNSELECTABLE_CLASS);
+
 				// нужна ли панель этому редактору, решает она сама — иначе условие пришлось бы
 				// держать в двух местах, и стоило добавить кнопки хоста, как они разошлись бы
 				formatToolbar.attach(this);
@@ -655,6 +773,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				this.element.classList.remove("focused");
 				formatToolbar.detach(this);
 
+				// правку продолжают в окне хоста — этот blur не конец ввода, содержимое трогать нельзя
+				if (this.__editHolds > 0) {
+					this.flushChange();
+					return;
+				}
+
 				// удаляем висящий BR, чтобы появился placeholder
 				if (editable.firstChild?.nodeName === "BR") DOM.empty(editable);
 
@@ -920,7 +1044,17 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const selection = this.selection;
 		if (!selection) return;
 
-		insertFormattedText(this.editable, data, Array.from(this.__pendingFormats), selection);
+		// Замена выделенного не должна терять его оформление. Физически вставка часто оказывается
+		// снаружи тега: границы выделения восстанавливаются по текстовым смещениям, а смещение на
+		// стыке узлов достаётся соседнему — тому, что вне тега; сам же тег после удаления текста
+		// остаётся пустым и убирается. Поэтому форматы, покрывавшие выделение целиком, переносим
+		// на вставляемый текст явно. Каретке без выделения это не нужно: там вставка и так попадает
+		// внутрь тега, а на его границе принадлежность неочевидна.
+		const range = selection.getRangeAt(0);
+		const inherited = range.collapsed ? [] : activeFormats(this.editable, range, this.formatTools);
+		const formats = new Set([...this.__pendingFormats, ...inherited]);
+
+		insertFormattedText(this.editable, data, Array.from(formats), selection);
 
 		// В пустом поле абзацев ещё нет, и каретке некуда встать внутрь — вставка из кода
 		// (смайлик, переменная) ложится прямо в редактор. Приводим к модели абзацев тем же

package/source/selection.ts

@@ -217,8 +217,18 @@ function nodeWithinRange(node: Node, range: Range): boolean {
 function* touchedTextNodes(root: HTMLElement, range: Range): Generator<Text> {
 	const walker = document.createTreeWalker(rangeScope(root, range), NodeFilter.SHOW_TEXT);
 
-	for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null)
-		if (n.length && range.intersectsNode(n)) yield n;
+	for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null) {
+		if (!n.length || !range.intersectsNode(n)) continue;
+
+		// Узел, задетый одной лишь границей, не входит в диапазон ни одним символом: выделение
+		// кончается там, где он начинается, или начинается там, где он кончается. Учитывать его
+		// нельзя — соседний по тексту узел лежит уже вне тегов выделенного, и от него состояние
+		// всего выделения выглядело бы неотформатированным.
+		if (range.startContainer === n && range.startOffset === n.length) continue;
+		if (range.endContainer === n && range.endOffset === 0) continue;
+
+		yield n;
+	}
 }
 
 /** Узел под схлопнутой кареткой — от него и ищется формат. */

package/source/toolbar.ts

@@ -6,9 +6,9 @@
 // т.к. тулбар находится вне привязанных UIElement).
 
 import { DOM } from "@brandup/ui";
-import { POPUP_CLASS, PopupManager } from "@brandup/ui-kit";
+import { POPUP_CLASS, PopupManager, SCROLLABLE_CLASS } from "@brandup/ui-kit";
 import { EDITOR_ACTIONS, FORMAT_TOOLS, type EditorAction, type FormatTool } from "./format";
-import { EMOJIS } from "./emoji";
+import { EMOJI_GROUPS, type EmojiGroup } from "./emoji";
 import boldIcon from "../svg/bold.svg";
 import italicIcon from "../svg/italic.svg";
 import strikeIcon from "../svg/strike.svg";
@@ -76,6 +76,34 @@ export interface ToolbarHost {
 
 const MARGIN = 6;
 
+// Сколько кнопок помещается в ряд при ширине панели (см. .ui-richeditor-emoji в richeditor.less).
+// Точность нужна только для оценки высоты нерисованной группы: ошибка сдвинет ползунок прокрутки,
+// но не саму раскладку — группа переносит кнопки сама.
+const EMOJI_COLUMNS = 8;
+
+/**
+ * Группа смайликов: и смысловое деление в панели (отбивается линией), и кусок, к которому
+ * применяется пропуск отрисовки. Поэлементно это было бы семьсот отслеживаемых поддеревьев,
+ * и слежение за ними съедает выигрыш от пропуска.
+ */
+function buildEmojiGroup(group: EmojiGroup): HTMLElement {
+	const rows = Math.ceil(group.emojis.length / EMOJI_COLUMNS);
+	const elem = DOM.tag("div", {
+		class: "emoji-group",
+		role: "group",
+		"aria-label": group.title,
+		// высота, пока группа не нарисована: без неё список схлопнулся бы, а прокрутка скакала
+		style: `--emoji-rows: ${rows}`,
+	});
+
+	const fragment = document.createDocumentFragment();
+	for (const emoji of group.emojis)
+		fragment.appendChild(DOM.tag("button", { type: "button", class: "emoji", tabindex: "-1" }, emoji));
+	elem.appendChild(fragment);
+
+	return elem;
+}
+
 class FormatToolbar {
 	private __elem: HTMLElement | null = null;
 	private __emojiPicker: HTMLElement | null = null;
@@ -83,7 +111,9 @@ class FormatToolbar {
 	private __emojiInitiator: HTMLElement | null = null; // кнопка, у которой открыта панель
 	private __buttons: Array<[FormatTool, HTMLButtonElement]> = [];
 	private __actionButtons: Array<[EditorAction, HTMLButtonElement]> = [];
-	private __hostButtons: Array<[ToolbarButton, HTMLButtonElement]> = [];
+	// имя, а не сама кнопка хоста: панель одна на все редакторы и переиспользует разметку между
+	// ними, а поведение принадлежит текущему — держать здесь ссылку значит звать чужой обработчик
+	private __hostButtons: Array<[string, HTMLButtonElement]> = [];
 	private __active: ToolbarHost | null = null;
 	private __suspended: ToolbarHost | null = null; // показ придержан на время панели смайликов
 	private __toolsKey = "";
@@ -190,9 +220,12 @@ class FormatToolbar {
 		const emojiHost = this.__emojiHost === host;
 		if (!emojiHost && this.__active !== host) return;
 
-		this.__closeEmoji();
-
+		// Закрываем только свою панель. Открытие у кнопки другого редактора само переводит туда
+		// фокус, и этот уход приходит уже после — панель к тому времени принадлежит соседу, и
+		// закрыть её значило бы гасить только что открытое: она требовала бы второго нажатия.
 		if (emojiHost) {
+			this.__closeEmoji();
+
 			this.__emojiHost = null;
 			this.__emojiInitiator = null;
 		}
@@ -233,7 +266,12 @@ class FormatToolbar {
 
 		// хост может не реализовывать isActionEnabled — тогда кнопка всегда доступна
 		for (const [action, btn] of this.__actionButtons) setDisabled(btn, host.isActionEnabled?.(action) === false);
-		for (const [button, btn] of this.__hostButtons) setDisabled(btn, button.isEnabled?.() === false);
+		for (const [name, btn] of this.__hostButtons) setDisabled(btn, this.__hostButton(name)?.isEnabled?.() === false);
+	}
+
+	/** Кнопка хоста по имени — у активного редактора, а не у того, кто собрал разметку панели. */
+	private __hostButton(name: string): ToolbarButton | undefined {
+		return this.__active?.toolbarButtons?.find((button) => button.name === name);
 	}
 
 	/** Пересчитать позицию над активным редактором (только для режима body/fixed). */
@@ -285,7 +323,7 @@ class FormatToolbar {
 			const def = FORMAT_TOOLS[tool];
 			const btn = DOM.tag(
 				"button",
-				{ type: "button", class: "format-button", "data-format-tool": tool, title: def.title },
+				{ type: "button", class: "format-button", dataset: { formatTool: tool }, title: def.title },
 				FORMAT_ICONS[tool]
 			);
 			btn.addEventListener("click", () => this.__active?.applyFormat(tool));
@@ -300,7 +338,7 @@ class FormatToolbar {
 			const def = EDITOR_ACTIONS[action];
 			const btn = DOM.tag(
 				"button",
-				{ type: "button", class: "action-button", "data-editor-action": action, title: def.title },
+				{ type: "button", class: "action-button", dataset: { editorAction: action }, title: def.title },
 				ACTION_ICONS[action]
 			);
 			if (action === "emoji") btn.addEventListener("click", (e) => this.__toggleEmoji(btn, e));
@@ -316,13 +354,13 @@ class FormatToolbar {
 		for (const button of buttons) {
 			const btn = DOM.tag(
 				"button",
-				{ type: "button", class: "host-button", "data-toolbar-button": button.name, title: button.title },
+				{ type: "button", class: "host-button", dataset: { toolbarButton: button.name }, title: button.title },
 				button.icon
 			);
-			btn.addEventListener("click", () => button.run());
+			btn.addEventListener("click", () => this.__hostButton(button.name)?.run());
 
 			elem.appendChild(btn);
-			this.__hostButtons.push([button, btn]);
+			this.__hostButtons.push([button.name, btn]);
 		}
 
 		// панель пережила перестройку кнопок — возвращаем её в тулбар, чтобы не собирать заново.
@@ -388,10 +426,12 @@ class FormatToolbar {
 	private __buildEmojiPicker(): HTMLElement {
 		const picker = DOM.tag("div", { class: `${POPUP_CLASS} ${EMOJI_PICKER_CLASS}` });
 
-		const fragment = document.createDocumentFragment();
-		for (const emoji of EMOJIS)
-			fragment.appendChild(DOM.tag("button", { type: "button", class: "emoji", tabindex: "-1" }, emoji));
-		picker.appendChild(fragment);
+		// Прокручивается список, а не сам попап: полоса прокрутки рисуется по краю коробки
+		// и перекрывала бы скругление рамки — угол выглядел бы срезанным.
+		const list = DOM.tag("div", { class: ["emoji-list", SCROLLABLE_CLASS] });
+		picker.appendChild(list);
+
+		for (const group of EMOJI_GROUPS) list.appendChild(buildEmojiGroup(group));
 
 		// панель может висеть и вне тулбара, поэтому гасит фокус сама
 		picker.addEventListener("mousedown", (e) => e.preventDefault());