@brandup/ui-richeditor 1.0.36

package/source/paragraphs.ts

@@ -0,0 +1,119 @@
+// Нормализация содержимого редактора: схлопывание пробелов по строкам и приведение
+// верхнего уровня к абзацам <p> (модель многострочного режима).
+
+import { cleanupFormatting } from "./selection";
+
+/**
+ * Нормализует пробелы в редакторе: схлопывает повторяющиеся пробелы/табы в один
+ * и обрезает пробелы по краям каждой строки. BR и блочные элементы (DIV/P) —
+ * границы строк; инлайновое форматирование (b/i/s/u) на строки не влияет.
+ */
+export function normalizeWhitespace(root: HTMLElement) {
+	type Item = { kind: "text"; node: Text } | { kind: "break" };
+	const items: Item[] = [];
+
+	const flatten = (node: Node) => {
+		for (const child of Array.from(node.childNodes)) {
+			if (child.nodeType === Node.TEXT_NODE) {
+				items.push({ kind: "text", node: child as Text });
+			} else if (child.nodeType === Node.ELEMENT_NODE) {
+				const el = child as HTMLElement;
+				if (el.tagName === "BR") {
+					items.push({ kind: "break" });
+				} else if (el.tagName === "DIV" || el.tagName === "P") {
+					items.push({ kind: "break" });
+					flatten(el);
+					items.push({ kind: "break" });
+				} else {
+					flatten(el); // инлайновый тег — не разрывает строку
+				}
+			}
+		}
+	};
+	flatten(root);
+
+	let atLineStart = true;
+	let pendingSpaceNode: Text | null = null; // узел, заканчивающийся пробелом (возможно хвостовым)
+
+	for (const item of items) {
+		if (item.kind === "break") {
+			if (pendingSpaceNode) {
+				pendingSpaceNode.data = pendingSpaceNode.data.replace(/ $/, "");
+				pendingSpaceNode = null;
+			}
+			atLineStart = true;
+			continue;
+		}
+
+		let text = item.node.data.replace(/[ \t]+/g, " ");
+		if (atLineStart) text = text.replace(/^ /, ""); // пробел в начале строки
+		if (pendingSpaceNode && text.startsWith(" ")) text = text.slice(1); // двойной пробел на границе узлов
+
+		item.node.data = text;
+		if (text.length === 0) continue;
+
+		atLineStart = false;
+		pendingSpaceNode = text.endsWith(" ") ? item.node : null;
+	}
+
+	if (pendingSpaceNode) pendingSpaceNode.data = pendingSpaceNode.data.replace(/ $/, ""); // хвост последней строки
+
+	cleanupFormatting(root); // убрать опустевшие теги, склеить узлы
+}
+
+/**
+ * Нормализует абзацы многострочного режима: удаляет пустые абзацы (без текстового содержимого).
+ * Если содержимого нет вовсе — редактор остаётся пустым (показывается placeholder).
+ */
+export function normalizeParagraphs(root: HTMLElement) {
+	for (const el of Array.from(root.children)) {
+		if (el.tagName === "P" && (el.textContent ?? "").trim() === "") el.remove();
+	}
+}
+
+/**
+ * Нормализует верхний уровень редактора к абзацам <p>: блуждающие текст/инлайн оборачиваются в <p>,
+ * <div> заменяются на <p>, пустые абзацы получают <br>-заполнитель (чтобы строка была видимой).
+ */
+export function ensureParagraphs(root: HTMLElement) {
+	let run: ChildNode[] = [];
+
+	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);
+		run = [];
+	};
+
+	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")) {
+			flushRun(node);
+			if (el.tagName === "DIV") {
+				const p = document.createElement("p");
+				while (el.firstChild) p.appendChild(el.firstChild);
+				root.replaceChild(p, el);
+			}
+		} else {
+			run.push(node);
+		}
+	}
+	flushRun(null);
+
+	for (const p of Array.from(root.querySelectorAll("p"))) {
+		if (!p.firstChild) {
+			p.appendChild(document.createElement("br")); // пустой абзац — заполнитель для видимости строки
+			continue;
+		}
+
+		// в непустом абзаце убираем краевые <br>-заполнители: иначе введённый текст
+		// оказывается рядом с лишним переносом (символ «съезжает» на новую строку).
+		// Внутренние <br> (мягкие переносы) сохраняются.
+		if ((p.textContent ?? "").length > 0) {
+			while (p.firstChild && p.firstChild.nodeName === "BR") p.removeChild(p.firstChild);
+			while (p.lastChild && p.lastChild.nodeName === "BR") p.removeChild(p.lastChild);
+		}
+	}
+}

package/source/richeditor.less

@@ -0,0 +1,127 @@
+// Стили RichEditor: редактируемая область, отображение тегов форматирования
+// и общий тулбар форматирования (живёт в document.body, см. ./toolbar).
+// CSS-переменные --input-* предоставляет @brandup/ui-kit; заданы fallback'и для standalone-использования.
+
+// .ui-richeditor — это сам редактируемый элемент (обёртки нет, тулбар общий в body)
+.ui-richeditor {
+	appearance: none;
+	position: relative;
+	box-sizing: border-box;
+	outline: none;
+	word-wrap: anywhere;
+	white-space: pre-wrap; // сохраняем пробелы (в т.ч. ведущие/повторяющиеся)
+
+	// абзацы — без user-agent-полей, иначе первый <p> «съезжает» вниз (как новая строка)
+	& p {
+		margin: 0;
+		padding: 5px 0;
+
+		&:first-child {
+			padding-top: 0;
+		}
+
+		&:last-child {
+			padding-bottom: 0;
+		}
+	}
+
+	// видимые теги форматирования
+	& b,
+	& strong {
+		font-weight: 700;
+	}
+	& i,
+	& em {
+		font-style: italic;
+	}
+	& s,
+	& strike,
+	& del {
+		text-decoration: line-through;
+	}
+	& u,
+	& ins {
+		text-decoration: underline;
+	}
+
+	&:empty:after {
+		content: attr(data-placeholder);
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		color: var(--placeholder-color, #999);
+		font-weight: var(--placeholder-font-weight, inherit);
+		font-style: var(--placeholder-font-style, inherit);
+		box-sizing: border-box;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		pointer-events: none;
+	}
+
+	&.multiline:empty:after {
+		white-space: normal;
+		text-overflow: unset;
+	}
+}
+
+// общий тулбар форматирования — единый для всех редакторов.
+// По умолчанию в document.body (position: fixed, координаты задаёт ./toolbar);
+// с классом .in-container — позиционируется над контейнером-родителем (position: absolute).
+.ui-richeditor-toolbar {
+	display: none;
+	position: fixed;
+	z-index: 1000;
+	flex-flow: row nowrap;
+	align-items: center;
+	gap: 2px;
+	padding: 3px;
+	background-color: var(--input-fill, #fff);
+	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);
+
+	--svg-size: 18px;
+	--svg-fill: var(--input-color, #222);
+
+	&.visible {
+		display: flex;
+	}
+
+	// позиционирование относительно контейнера-родителя (например, .ui-textbox)
+	&.in-container {
+		position: absolute;
+		left: 0;
+		bottom: 100%;
+		margin-bottom: 6px;
+	}
+
+	& .format-button {
+		width: calc(var(--input-height, 46px) - 12px);
+		height: calc(var(--input-height, 46px) - 12px);
+		border-radius: calc(var(--input-border-radius, 0) - 2px);
+		border: 0;
+		background: var(--input-toolbar-button-fill, transparent);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		& svg {
+			width: var(--svg-size, 18px);
+			height: var(--svg-size, 18px);
+			fill: var(--svg-fill, currentColor);
+			pointer-events: none;
+		}
+
+		&:hover {
+			background-color: var(--hover--input-toolbar-button-fill, rgba(0, 0, 0, 0.06));
+		}
+
+		&.active {
+			background-color: var(--hover--input-toolbar-button-fill, rgba(0, 0, 0, 0.12));
+		}
+	}
+}