@brandup/ui-richeditor 1.0.36 → 1.0.39

package/source/history.ts

@@ -5,7 +5,7 @@
 // хуже того, ломается при смешивании с ручными мутациями. Поэтому ведём свою историю снимков
 // (innerHTML + позиция выделения). Используется только при включённом форматировании.
 
-import { restoreSelection, selectionCharBounds } from "./format";
+import { documentSelection, innerSelection, restoreSelection, selectionCharBounds } from "./format";
 
 interface Snapshot {
 	html: string;
@@ -18,6 +18,9 @@ export type HistoryKind = "type" | "op";
 
 const COALESCE_MS = 300; // печать в пределах паузы — один шаг отмены
 const MAX_DEPTH = 100; // ограничение глубины истории (память)
+// Снимок — это весь innerHTML редактора, поэтому глубины мало: сто шагов на длинном тексте
+// это мегабайты на одно поле. Ограничиваем ещё и суммарный объём, отбрасывая самые старые шаги.
+const MAX_CHARS = 512 * 1024;
 
 export class EditorHistory {
 	private readonly __root: HTMLElement;
@@ -25,17 +28,25 @@ export class EditorHistory {
 	private __redo: Snapshot[] = [];
 	private __lastKind: HistoryKind | null = null;
 	private __lastTime = 0;
+	private __chars = 0; // суммарный объём снимков отмены — см. MAX_CHARS
 
 	constructor(root: HTMLElement) {
 		this.__root = root;
 	}
 
+	/** Есть ли что отменять (для disabled-состояния кнопки). */
+	get canUndo(): boolean {
+		return this.__undo.length > 0;
+	}
+
+	/** Есть ли что повторять. */
+	get canRedo(): boolean {
+		return this.__redo.length > 0;
+	}
+
 	private __snapshot(): Snapshot {
-		const sel = window.getSelection();
-		let start = 0;
-		let end = 0;
-		if (sel && sel.rangeCount > 0 && this.__root.contains(sel.anchorNode))
-			[start, end] = selectionCharBounds(this.__root, sel.getRangeAt(0));
+		const sel = innerSelection(this.__root);
+		const [start, end] = sel ? selectionCharBounds(this.__root, sel.getRangeAt(0)) : [0, 0];
 
 		return { html: this.__root.innerHTML, start, end };
 	}
@@ -58,7 +69,10 @@ export class EditorHistory {
 		if (top && top.html === snap.html) return; // состояние не изменилось — не дублируем
 
 		this.__undo.push(snap);
-		if (this.__undo.length > MAX_DEPTH) this.__undo.shift();
+		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 = [];
 	}
 
@@ -67,6 +81,7 @@ export class EditorHistory {
 		const prev = this.__undo.pop();
 		if (!prev) return false;
 
+		this.__chars -= prev.html.length;
 		this.__redo.push(this.__snapshot());
 		this.__restore(prev);
 		this.__lastKind = null; // следующая печать начнёт новый шаг
@@ -78,7 +93,9 @@ export class EditorHistory {
 		const next = this.__redo.pop();
 		if (!next) return false;
 
-		this.__undo.push(this.__snapshot());
+		const current = this.__snapshot();
+		this.__undo.push(current);
+		this.__chars += current.html.length;
 		this.__restore(next);
 		this.__lastKind = null;
 		return true;
@@ -86,7 +103,9 @@ export class EditorHistory {
 
 	private __restore(snap: Snapshot): void {
 		this.__root.innerHTML = snap.html;
-		const sel = window.getSelection();
+
+		// содержимое заменено целиком — выделение восстанавливаем, где бы оно ни стояло
+		const sel = documentSelection(this.__root);
 		if (sel) restoreSelection(this.__root, snap.start, snap.end, sel);
 	}
 }

package/source/index.ts

@@ -1,12 +1,21 @@
 export { default } from "./richeditor";
 export * from "./richeditor";
+export { EMOJIS } from "./emoji";
 export {
+	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,
+	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
+	parseEditorActions,
 	parseFormatTools,
 	defaultFormatMarkers,
 	normalizeWhitespace,
+	selectionCharBounds,
+	restoreSelection,
+	preserveCaret,
+	type EditorAction,
 	type FormatTool,
 	type FormatStorage,
+	type ParagraphMode,
 	type FormatMarkers,
 } from "./format";

package/source/paragraphs.ts

@@ -3,15 +3,42 @@
 
 import { cleanupFormatting } from "./selection";
 
+/**
+ * Что в содержимом редактора считается абзацем. Единственное определение модели абзацев:
+ * по нему идут и разбор с сериализацией, и правки каретки, и нормализация. `<div>` признаём
+ * наравне с `<p>` — его приносят вставка и чужой contenteditable, а нормализация приводит к `<p>`.
+ */
+export function isBlock(node: Node): boolean {
+	if (node.nodeType !== Node.ELEMENT_NODE) return false;
+
+	const tag = (node as Element).tagName;
+	return tag === "P" || tag === "DIV";
+}
+
+// Пробел, таб и неразрывный пробел (U+00A0) — всё это «пробел» при наборе; см. normalizeWhitespace.
+// После схлопывания в тексте остаются только обычные пробелы, поэтому дальше по коду хватает " ".
+const SPACE_RUN = /[ \t\u00A0]+/g;
+
 /**
  * Нормализует пробелы в редакторе: схлопывает повторяющиеся пробелы/табы в один
  * и обрезает пробелы по краям каждой строки. BR и блочные элементы (DIV/P) —
  * границы строк; инлайновое форматирование (b/i/s/u) на строки не влияет.
+ *
+ * Неразрывный пробел (U+00A0) считается обычным: браузер сам подставляет его в contenteditable
+ * вместо пробела, который иначе схлопнулся бы при отображении. Без этого набранные подряд
+ * пробелы не схлопывались бы вовсе, а U+00A0 уезжал бы в сохраняемое значение.
  */
 export function normalizeWhitespace(root: HTMLElement) {
 	type Item = { kind: "text"; node: Text } | { kind: "break" };
 	const items: Item[] = [];
 
+	// Присваивание Text.data — это «replace data» по всему узлу, а оно схлопывает границы
+	// живых Range внутри узла в его начало: каретка уезжает в начало строки. Нормализация
+	// чаще всего ничего не меняет (вызывается на blur), поэтому пишем только при отличии.
+	const setData = (node: Text, text: string) => {
+		if (node.data !== text) node.data = text;
+	};
+
 	const flatten = (node: Node) => {
 		for (const child of Array.from(node.childNodes)) {
 			if (child.nodeType === Node.TEXT_NODE) {
@@ -20,7 +47,7 @@ export function normalizeWhitespace(root: HTMLElement) {
 				const el = child as HTMLElement;
 				if (el.tagName === "BR") {
 					items.push({ kind: "break" });
-				} else if (el.tagName === "DIV" || el.tagName === "P") {
+				} else if (isBlock(el)) {
 					items.push({ kind: "break" });
 					flatten(el);
 					items.push({ kind: "break" });
@@ -38,25 +65,25 @@ export function normalizeWhitespace(root: HTMLElement) {
 	for (const item of items) {
 		if (item.kind === "break") {
 			if (pendingSpaceNode) {
-				pendingSpaceNode.data = pendingSpaceNode.data.replace(/ $/, "");
+				setData(pendingSpaceNode, pendingSpaceNode.data.replace(/ $/, ""));
 				pendingSpaceNode = null;
 			}
 			atLineStart = true;
 			continue;
 		}
 
-		let text = item.node.data.replace(/[ \t]+/g, " ");
+		let text = item.node.data.replace(SPACE_RUN, " ");
 		if (atLineStart) text = text.replace(/^ /, ""); // пробел в начале строки
 		if (pendingSpaceNode && text.startsWith(" ")) text = text.slice(1); // двойной пробел на границе узлов
 
-		item.node.data = text;
+		setData(item.node, text);
 		if (text.length === 0) continue;
 
 		atLineStart = false;
 		pendingSpaceNode = text.endsWith(" ") ? item.node : null;
 	}
 
-	if (pendingSpaceNode) pendingSpaceNode.data = pendingSpaceNode.data.replace(/ $/, ""); // хвост последней строки
+	if (pendingSpaceNode) setData(pendingSpaceNode, pendingSpaceNode.data.replace(/ $/, "")); // хвост последней строки
 
 	cleanupFormatting(root); // убрать опустевшие теги, склеить узлы
 }
@@ -89,7 +116,7 @@ export function ensureParagraphs(root: HTMLElement) {
 	for (const node of Array.from(root.childNodes)) {
 		const el = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : null;
 
-		if (el && (el.tagName === "P" || el.tagName === "DIV")) {
+		if (el && isBlock(el)) {
 			flushRun(node);
 			if (el.tagName === "DIV") {
 				const p = document.createElement("p");

package/source/richeditor.less

@@ -98,7 +98,17 @@
 		margin-bottom: 6px;
 	}
 
-	& .format-button {
+	// разделитель между инструментами форматирования и действиями
+	& .split {
+		width: 1px;
+		align-self: stretch;
+		margin: 2px 3px;
+		background-color: var(--input-border-color, #aaa);
+	}
+
+	& .format-button,
+	& .host-button,
+	& .action-button {
 		width: calc(var(--input-height, 46px) - 12px);
 		height: calc(var(--input-height, 46px) - 12px);
 		border-radius: calc(var(--input-border-radius, 0) - 2px);
@@ -123,5 +133,50 @@
 		&.active {
 			background-color: var(--hover--input-toolbar-button-fill, rgba(0, 0, 0, 0.12));
 		}
+
+		&[disabled] {
+			cursor: default;
+			opacity: 0.4;
+			// хит-тест проваливается на сам тулбар: браузер не диспатчит события на disabled-кнопку,
+			// и без этого mousedown не гасится — редактор теряет фокус, а панель прячется по blur
+			pointer-events: none;
+
+			&:hover {
+				background: var(--input-toolbar-button-fill, transparent);
+			}
+		}
+	}
+}
+
+// панель вставки смайликов — попап под кнопкой тулбара (открытием/закрытием управляет
+// PopupManager из @brandup/ui-kit; базовые .ui-popup-стили приходят оттуда же).
+.ui-richeditor-emoji {
+	top: 100%;
+	left: 0;
+	margin-top: 4px;
+	width: 296px;
+	max-height: 220px;
+	overflow-y: auto;
+	padding: 4px;
+	display: flex;
+	flex-flow: row wrap;
+
+	& .emoji {
+		// в панели больше семисот кнопок: за пределами прокрутки браузер их не раскладывает
+		content-visibility: auto;
+		contain-intrinsic-size: 32px 32px;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		cursor: pointer;
+		font-size: 20px;
+		line-height: 1;
+		border-radius: calc(var(--input-border-radius, 0) - 2px);
+
+		&:hover {
+			background-color: var(--hover--input-toolbar-button-fill, rgba(0, 0, 0, 0.06));
+		}
 	}
 }