@brandup/ui-richeditor 1.0.40 → 1.0.42

package/source/format-config.ts

@@ -1,6 +1,6 @@
 // Конфигурация форматирования: типы, набор инструментов, markdown-маркеры и Ctrl/Cmd-хоткеи.
 
-export type FormatTool = "bold" | "italic" | "strike" | "underline";
+export type FormatTool = "bold" | "italic" | "strike" | "underline" | "spoiler" | "code";
 export type FormatStorage = "html" | "markdown";
 
 /**
@@ -15,7 +15,85 @@ export type ParagraphMode = "block" | "break";
 /** Действие редактора (не формат): вставка смайлика, очистка форматирования, отмена и повтор. */
 export type EditorAction = "emoji" | "erase" | "undo" | "redo";
 
-export const ALL_FORMAT_TOOLS: FormatTool[] = ["bold", "italic", "strike", "underline"];
+/**
+ * Тип блока верхнего уровня. Обычный абзац — такой же тип, а не «тип не задан»: тогда
+ * и разбор, и печать, и переключение в панели работают одинаково для всех блоков.
+ */
+export type BlockType = "paragraph" | "quote" | "code";
+
+export const ALL_BLOCK_TYPES: BlockType[] = ["paragraph", "quote", "code"];
+
+/** Куда попадает содержимое, не попавшее ни в какой блок: вставка, чужой `<div>`, блуждающий текст. */
+export const DEFAULT_BLOCK: BlockType = "paragraph";
+
+interface BlockDef {
+	/** Канонический тег при построении и сериализации. */
+	tag: string;
+	/** Теги, распознаваемые при разборе входного HTML. */
+	matchTags: string[];
+	/** Подсказка на кнопке панели. */
+	title: string;
+	/**
+	 * Маркер в начале каждой строки блока (цитата). Подряд идущие строки с ним — один блок:
+	 * так эту разметку понимают и мессенджеры.
+	 */
+	linePrefix?: string;
+	/** Ограждение блока целиком (код): строка до и строка после содержимого. */
+	fence?: string;
+	/**
+	 * Размечается ли содержимое инлайновыми инструментами. У кода нет: написанное в нём
+	 * буквально таким и остаётся — как и внутри моноширинного.
+	 */
+	inline: boolean;
+	/**
+	 * Что делает Enter внутри: `paragraph` — заканчивает блок (хвост уходит в обычный текст),
+	 * `break` — переносит строку. Модификатор делает обратное.
+	 */
+	enter: "paragraph" | "break";
+}
+
+export const BLOCK_TYPES: Record<BlockType, BlockDef> = {
+	paragraph: {
+		tag: "p",
+		matchTags: ["P", "DIV"],
+		title: "Обычный текст",
+		inline: true,
+		enter: "paragraph",
+	},
+	quote: {
+		tag: "blockquote",
+		matchTags: ["BLOCKQUOTE"],
+		title: "Цитата",
+		linePrefix: "> ",
+		inline: true,
+		// Enter заканчивает цитату, строка внутри — Shift+Enter: выход нужен чаще, чем
+		// продолжение, а уйти из блока иначе можно только мышью.
+		enter: "paragraph",
+	},
+	code: {
+		tag: "pre",
+		matchTags: ["PRE"],
+		title: "Блок кода",
+		fence: "```",
+		inline: false,
+		enter: "paragraph",
+	},
+};
+
+// Тег → тип блока. Собирается один раз: спрашивается на каждый узел верхнего уровня и на каждую
+// единицу обхода координат каретки.
+const BLOCK_TAGS: Record<string, BlockType> = (() => {
+	const map: Record<string, BlockType> = {};
+	for (const type of ALL_BLOCK_TYPES) for (const tag of BLOCK_TYPES[type].matchTags) map[tag] = type;
+	return map;
+})();
+
+/** Тип блока по имени тега (как `tagName`, в верхнем регистре); null — тег не блочный. */
+export function blockTypeOfTag(tagName: string): BlockType | null {
+	return BLOCK_TAGS[tagName] ?? null;
+}
+
+export const ALL_FORMAT_TOOLS: FormatTool[] = ["bold", "italic", "strike", "underline", "spoiler", "code"];
 
 export const ALL_EDITOR_ACTIONS: EditorAction[] = ["emoji", "erase", "undo", "redo"];
 
@@ -61,6 +139,22 @@ export const FORMAT_TOOLS: Record<FormatTool, FormatToolDef> = {
 		hotkey: "u",
 		title: "Подчёркнутый",
 	},
+	spoiler: {
+		// Своего элемента для скрытого текста в HTML нет. Берём собственный тег, а разбирать
+		// умеем и телеграмный: значения приходят и из его разметки.
+		tag: "spoiler",
+		matchTags: ["SPOILER", "TG-SPOILER"],
+		md: "||",
+		hotkey: "",
+		title: "Спойлер",
+	},
+	code: {
+		tag: "code",
+		matchTags: ["CODE"],
+		md: "`",
+		hotkey: "",
+		title: "Моноширинный",
+	},
 };
 
 interface EditorActionDef {
@@ -78,7 +172,7 @@ export const EDITOR_ACTIONS: Record<EditorAction, EditorActionDef> = {
 /** Markdown-маркер для каждого инструмента форматирования. */
 export type FormatMarkers = Record<FormatTool, string>;
 
-/** Маркеры по умолчанию (из FORMAT_TOOLS): bold=**, italic=*, strike=~~, underline=++. */
+/** Маркеры по умолчанию (из FORMAT_TOOLS): bold=**, italic=_, strike=~, underline=__, spoiler=||, code=`. */
 export function defaultFormatMarkers(): FormatMarkers {
 	const markers = {} as FormatMarkers;
 	for (const tool of ALL_FORMAT_TOOLS) markers[tool] = FORMAT_TOOLS[tool].md;
@@ -114,3 +208,23 @@ export function parseFormatTools(value: string | null): FormatTool[] {
 export function parseEditorActions(value: string | null): EditorAction[] {
 	return value === null ? [] : parseList(value, ALL_EDITOR_ACTIONS);
 }
+
+/**
+ * Разбирает значение атрибута data-blocks. Блоки подключаются явно: без атрибута доступен
+ * только обычный текст. Он в наборе есть всегда — иначе блок некуда было бы вернуть.
+ */
+export function parseBlockTypes(value: string | null): BlockType[] {
+	return value === null ? [DEFAULT_BLOCK] : normalizeBlockTypes(parseList(value, ALL_BLOCK_TYPES));
+}
+
+/**
+ * Приводит набор типов к порядку объявления. Обычный текст в наборе есть всегда: им становится
+ * содержимое, не попавшее ни в какой блок, и в него же блок возвращают.
+ */
+export function normalizeBlockTypes(types: BlockType[] | undefined): BlockType[] {
+	if (!types) return [DEFAULT_BLOCK];
+
+	const list = ALL_BLOCK_TYPES.filter((type) => types.includes(type));
+
+	return list.includes(DEFAULT_BLOCK) ? list : [DEFAULT_BLOCK, ...list];
+}

package/source/format.ts

@@ -5,14 +5,20 @@
 //   paragraphs    — нормализация пробелов и приведение к абзацам <p>
 
 export {
+	ALL_BLOCK_TYPES,
 	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,
+	BLOCK_TYPES,
+	DEFAULT_BLOCK,
 	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
 	HOTKEY_TOOLS,
 	defaultFormatMarkers,
+	normalizeBlockTypes,
+	parseBlockTypes,
 	parseEditorActions,
 	parseFormatTools,
+	type BlockType,
 	type EditorAction,
 	type FormatMarkers,
 	type FormatStorage,
@@ -25,6 +31,8 @@ export {
 	innerSelection,
 	preserveCaret,
 	selectionCharBounds,
+	editorText,
+	charLength,
 	restoreSelection,
 	mapCharOffset,
 	activeFormats,
@@ -36,4 +44,13 @@ export {
 	insertFormattedText,
 	isFormatActive,
 } from "./selection";
-export { isBlock, normalizeWhitespace, normalizeParagraphs, ensureParagraphs } from "./paragraphs";
+export {
+	isBlock,
+	blockAt,
+	blockTypeOf,
+	blocksInRange,
+	createBlock,
+	normalizeWhitespace,
+	normalizeParagraphs,
+	ensureParagraphs,
+} from "./paragraphs";

package/source/index.ts

@@ -1,11 +1,15 @@
 export { default } from "./richeditor";
 export * from "./richeditor";
-export { EMOJIS } from "./emoji";
+export { EMOJIS, EMOJI_GROUPS, type EmojiGroup } from "./emoji";
 export {
+	ALL_BLOCK_TYPES,
 	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,
+	BLOCK_TYPES,
+	DEFAULT_BLOCK,
 	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
+	parseBlockTypes,
 	parseEditorActions,
 	parseFormatTools,
 	defaultFormatMarkers,
@@ -13,6 +17,7 @@ export {
 	selectionCharBounds,
 	restoreSelection,
 	preserveCaret,
+	type BlockType,
 	type EditorAction,
 	type FormatTool,
 	type FormatStorage,

package/source/paragraphs.ts

@@ -2,17 +2,77 @@
 // верхнего уровня к абзацам <p> (модель многострочного режима).
 
 import { cleanupFormatting } from "./selection";
+import { BLOCK_TYPES, DEFAULT_BLOCK, blockTypeOfTag, type BlockType } from "./format-config";
 
 /**
- * Что в содержимом редактора считается абзацем. Единственное определение модели абзацев:
- * по нему идут и разбор с сериализацией, и правки каретки, и нормализация. `<div>` признаём
- * наравне с `<p>` — его приносят вставка и чужой contenteditable, а нормализация приводит к `<p>`.
+ * Что в содержимом редактора считается блоком. Единственное определение модели: по нему идут
+ * и разбор с сериализацией, и правки каретки, и нормализация. `<div>` признаём наравне с `<p>` —
+ * его приносят вставка и чужой contenteditable, а нормализация приводит к `<p>`.
  */
 export function isBlock(node: Node): boolean {
-	if (node.nodeType !== Node.ELEMENT_NODE) return false;
+	return blockTypeOf(node) !== null;
+}
+
+/** Тип блока по элементу; null — не блок верхнего уровня. */
+export function blockTypeOf(node: Node | null | undefined): BlockType | null {
+	if (!node || node.nodeType !== Node.ELEMENT_NODE) return null;
+
+	return blockTypeOfTag((node as Element).tagName);
+}
+
+/** Блок, в котором лежит узел (обычно якорь выделения), в пределах редактора. */
+export function blockAt(root: HTMLElement, node: Node | null | undefined): HTMLElement | null {
+	let current: Node | null = node ?? null;
+	while (current && current !== root) {
+		if (current.parentNode === root && isBlock(current)) return current as HTMLElement;
+		current = current.parentNode;
+	}
+
+	return null;
+}
+
+/**
+ * Блоки, которых касается диапазон, по порядку. Границы берём по их блокам, а не перебором
+ * с проверкой пересечения: свёрнутая каретка на стыке пересекает сразу два соседних блока,
+ * и правка уходила бы в лишний.
+ */
+export function blocksInRange(root: HTMLElement, range: Range): HTMLElement[] {
+	// Контейнером может быть и сам редактор — тогда позиция адресует ребёнка по номеру.
+	// Позиция — это место ПЕРЕД ребёнком, поэтому конец выделения относится к предыдущему
+	// блоку: иначе правка захватывала бы блок, из которого не выделено ни символа.
+	const edge = (container: Node, offset: number, end: boolean): HTMLElement | null => {
+		const own = blockAt(root, container);
+		if (own) return own;
+		if (container !== root) return null;
+
+		const index = end && offset > 0 ? offset - 1 : offset;
+		const child = root.childNodes[index] ?? root.lastChild;
+
+		return blockAt(root, child) ?? (isBlock(child as Node) ? (child as HTMLElement) : null);
+	};
+
+	const first = edge(range.startContainer, range.startOffset, false);
+	if (!first) return [];
+
+	const last = edge(range.endContainer, range.endOffset, !range.collapsed) ?? first;
+
+	const blocks: HTMLElement[] = [];
+	for (let el: HTMLElement | null = first; el; el = el.nextElementSibling as HTMLElement | null) {
+		if (isBlock(el)) blocks.push(el);
+		if (el === last) return blocks;
+	}
+
+	// Конца не встретили — он лежит раньше начала (диапазон собран вручную и вывернут).
+	// Берём один блок: пройтись до конца содержимого значило бы править всё подряд.
+	return [first];
+}
+
+/** Пустой блок нужного типа с заполнителем: без него строка не видна и в неё не встать кареткой. */
+export function createBlock(type: BlockType): HTMLElement {
+	const block = document.createElement(BLOCK_TYPES[type].tag);
+	block.appendChild(document.createElement("br"));
 
-	const tag = (node as Element).tagName;
-	return tag === "P" || tag === "DIV";
+	return block;
 }
 
 // Пробел, таб и неразрывный пробел (U+00A0) — всё это «пробел» при наборе; см. normalizeWhitespace.
@@ -48,8 +108,10 @@ export function normalizeWhitespace(root: HTMLElement) {
 				if (el.tagName === "BR") {
 					items.push({ kind: "break" });
 				} else if (isBlock(el)) {
+					// у блока без инлайновой разметки (код) пробелы значимы: отступы там — часть текста
+					const type = blockTypeOf(el);
 					items.push({ kind: "break" });
-					flatten(el);
+					if (!type || BLOCK_TYPES[type].inline) flatten(el);
 					items.push({ kind: "break" });
 				} else {
 					flatten(el); // инлайновый тег — не разрывает строку
@@ -94,7 +156,9 @@ export function normalizeWhitespace(root: HTMLElement) {
  */
 export function normalizeParagraphs(root: HTMLElement) {
 	for (const el of Array.from(root.children)) {
-		if (el.tagName === "P" && (el.textContent ?? "").trim() === "") el.remove();
+		// Пустой блок другого типа не трогаем: его завели осознанно и в него сейчас будут писать,
+		// а пустая строка внутри кода вообще осмысленна сама по себе.
+		if (blockTypeOf(el) === DEFAULT_BLOCK && (el.textContent ?? "").trim() === "") el.remove();
 	}
 }
 
@@ -107,9 +171,9 @@ export function ensureParagraphs(root: HTMLElement) {
 
 	const flushRun = (before: Node | null) => {
 		if (!run.length) return;
-		const p = document.createElement("p");
-		for (const node of run) p.appendChild(node);
-		root.insertBefore(p, before);
+		const block = document.createElement(BLOCK_TYPES[DEFAULT_BLOCK].tag);
+		for (const node of run) block.appendChild(node);
+		root.insertBefore(block, before);
 		run = [];
 	};
 
@@ -118,8 +182,10 @@ export function ensureParagraphs(root: HTMLElement) {
 
 		if (el && isBlock(el)) {
 			flushRun(node);
+			// `<div>` — тот же абзац, только чужой: приводим к каноническому тегу.
+			// Блоки других типов оставляем как есть, их завели осознанно.
 			if (el.tagName === "DIV") {
-				const p = document.createElement("p");
+				const p = document.createElement(BLOCK_TYPES[DEFAULT_BLOCK].tag);
 				while (el.firstChild) p.appendChild(el.firstChild);
 				root.replaceChild(p, el);
 			}
@@ -129,7 +195,7 @@ export function ensureParagraphs(root: HTMLElement) {
 	}
 	flushRun(null);
 
-	for (const p of Array.from(root.querySelectorAll("p"))) {
+	for (const p of Array.from(root.children) as HTMLElement[]) {
 		if (!p.firstChild) {
 			p.appendChild(document.createElement("br")); // пустой абзац — заполнитель для видимости строки
 			continue;

package/source/richeditor.less

@@ -25,6 +25,36 @@
 		}
 	}
 
+	// Цитата: линия слева, как её рисуют мессенджеры. Вертикальные поля те же, что у абзаца, —
+	// строка не должна прыгать при смене типа блока.
+	& blockquote {
+		margin: 0;
+		padding: 5px 0 5px 10px;
+		border-left: 3px solid var(--richeditor-quote-line, rgba(0, 0, 0, 0.2));
+	}
+
+	// Блок кода: подложка на всю строку и моноширинный шрифт. Собственные поля тут нужны —
+	// иначе текст упирался бы в край подложки; краевые правила абзаца на него не распространяются.
+	& pre {
+		margin: 5px 0;
+		padding: 5px 8px;
+		border-radius: 3px;
+		background-color: var(--richeditor-code-fill, rgba(0, 0, 0, 0.06));
+		font-family: var(--richeditor-code-font, ui-monospace, "Cascadia Mono", Consolas, monospace);
+		font-size: 0.92em;
+		// содержимое переносится по границе редактора, как и обычный текст
+		white-space: pre-wrap;
+		word-wrap: anywhere;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
 	// видимые теги форматирования
 	& b,
 	& strong {
@@ -44,6 +74,29 @@
 		text-decoration: underline;
 	}
 
+	// Спойлер: у получателя текст закрыт до нажатия, а в поле его прячут не от автора —
+	// показываем плашкой, чтобы было видно и что написано, и что оно будет скрыто.
+	& spoiler,
+	& tg-spoiler {
+		border-radius: 3px;
+		padding: 0 2px;
+		background-color: var(--richeditor-spoiler-fill, rgba(0, 0, 0, 0.14));
+	}
+
+	// Строку не раздвигает. Наследовать межстрочный интервал для этого мало: у моноширинного
+	// шрифта своя база, и коробка той же высоты садится относительно неё со сдвигом — строка
+	// вырастает на пару пикселей. Нулевой интервал убирает вклад кода в высоту строки совсем,
+	// а высоту строки задаёт сам абзац. Подложка от этого не страдает: она рисуется по буквам,
+	// а не по интервалу. По вертикали отступов у кода нет.
+	& code {
+		border-radius: 3px;
+		padding: 0 3px;
+		background-color: var(--richeditor-code-fill, rgba(0, 0, 0, 0.06));
+		font-family: var(--richeditor-code-font, ui-monospace, "Cascadia Mono", Consolas, monospace);
+		font-size: 0.92em;
+		line-height: 0;
+	}
+
 	&:empty:after {
 		content: attr(data-placeholder);
 		display: block;
@@ -65,6 +118,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 +148,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);
@@ -107,6 +175,7 @@
 	}
 
 	& .format-button,
+	& .block-button,
 	& .host-button,
 	& .action-button {
 		width: calc(var(--input-height, 46px) - 12px);
@@ -155,18 +224,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 {
-		// в панели больше семисот кнопок: за пределами прокрутки браузер их не раскладывает
+	// Прокручивается список, а не сам попап: полоса рисуется по краю коробки и перекрывала бы
+	// скругление рамки — угол выглядел бы срезанным. Заодно полоса отступает от краёв на
+	// внутренний отступ попапа — сверху, снизу и справа, — а не упирается в рамку.
+	& .emoji-list {
+		max-height: 220px;
+		overflow-y: auto; // полоса прокрутки — общая, от .ui-scrollable кита
+	}
+
+	// Смысловая группа смайликов, отбитая линией. Она же — кусок, который браузер вправе не
+	// рисовать, пока до него не долистали: поэлементно это было бы семьсот отслеживаемых
+	// поддеревьев, и слежение за ними съедает весь выигрыш от пропуска.
+	& .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;