@brandup/ui-textbox 1.0.34 → 1.0.36

package/source/format.ts

@@ -1,546 +0,0 @@
-// Опциональное форматирование текста (жирный, курсив, зачёркивание, подчёркивание)
-// для TextBox. Включается атрибутом data-format, состав — data-format-tools,
-// формат хранения значения — data-format-storage ("html" | "markdown").
-
-export type FormatTool = "bold" | "italic" | "strike" | "underline";
-export type FormatStorage = "html" | "markdown";
-
-export const ALL_FORMAT_TOOLS: FormatTool[] = ["bold", "italic", "strike", "underline"];
-
-interface FormatToolDef {
-	/** Имя команды (атрибут command у кнопки и registerCommand). */
-	command: string;
-	/** Канонический тег при оборачивании и сериализации. */
-	tag: string;
-	/** Теги, распознаваемые при разборе входного HTML. */
-	matchTags: string[];
-	/** Маркер в Markdown. */
-	md: string;
-	/** Клавиша для Ctrl/Cmd-хоткея (пусто — без хоткея). */
-	hotkey: string;
-	/** Подсказка на кнопке. */
-	title: string;
-}
-
-export const FORMAT_TOOLS: Record<FormatTool, FormatToolDef> = {
-	bold: {
-		command: "format-bold",
-		tag: "b",
-		matchTags: ["B", "STRONG"],
-		md: "**",
-		hotkey: "b",
-		title: "Жирный",
-	},
-	italic: {
-		command: "format-italic",
-		tag: "i",
-		matchTags: ["I", "EM"],
-		md: "*",
-		hotkey: "i",
-		title: "Курсив",
-	},
-	strike: {
-		command: "format-strike",
-		tag: "s",
-		matchTags: ["S", "STRIKE", "DEL"],
-		md: "~~",
-		hotkey: "",
-		title: "Зачёркнутый",
-	},
-	underline: {
-		command: "format-underline",
-		tag: "u",
-		matchTags: ["U", "INS"],
-		md: "++",
-		hotkey: "u",
-		title: "Подчёркнутый",
-	},
-};
-
-/** Канонические теги форматирования (в верхнем регистре, как tagName). */
-const FORMAT_TAG_NAMES = ALL_FORMAT_TOOLS.map((t) => FORMAT_TOOLS[t].tag.toUpperCase());
-
-/** Markdown-маркер для каждого инструмента форматирования. */
-export type FormatMarkers = Record<FormatTool, string>;
-
-/** Маркеры по умолчанию (из FORMAT_TOOLS): bold=**, italic=*, strike=~~, underline=++. */
-export function defaultFormatMarkers(): FormatMarkers {
-	const markers = {} as FormatMarkers;
-	for (const tool of ALL_FORMAT_TOOLS) markers[tool] = FORMAT_TOOLS[tool].md;
-	return markers;
-}
-
-/** Карта Ctrl/Cmd-хоткеев: клавиша → инструмент. */
-export const HOTKEY_TOOLS: Record<string, FormatTool> = (() => {
-	const map: Record<string, FormatTool> = {};
-	for (const tool of ALL_FORMAT_TOOLS) {
-		const hotkey = FORMAT_TOOLS[tool].hotkey;
-		if (hotkey) map[hotkey] = tool;
-	}
-	return map;
-})();
-
-/** Разбирает значение атрибута data-format-tools, оставляя только известные инструменты. */
-export function parseFormatTools(value: string | null): FormatTool[] {
-	if (value === null) return ALL_FORMAT_TOOLS.slice();
-
-	const tools = value
-		.split(/\s+/)
-		.filter(Boolean)
-		.filter((t): t is FormatTool => (ALL_FORMAT_TOOLS as string[]).includes(t));
-
-	// убираем дубли, сохраняя порядок объявления
-	return ALL_FORMAT_TOOLS.filter((t) => tools.includes(t));
-}
-
-function escapeHtml(text: string): string {
-	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-function escapeRegExp(text: string): string {
-	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-/** Тег → инструмент, только для включённых инструментов. */
-function buildTagMap(tools: FormatTool[]): Record<string, FormatTool> {
-	const map: Record<string, FormatTool> = {};
-	for (const tool of tools) for (const tag of FORMAT_TOOLS[tool].matchTags) map[tag] = tool;
-	return map;
-}
-
-function lineBreak(storage: FormatStorage): string {
-	return storage === "html" ? "<br>" : "\n";
-}
-
-function wrap(storage: FormatStorage, tool: FormatTool, inner: string, markers: FormatMarkers): string {
-	if (!inner) return inner;
-
-	const def = FORMAT_TOOLS[tool];
-	if (storage === "html") return `<${def.tag}>${inner}</${def.tag}>`;
-
-	const marker = markers[tool];
-	return `${marker}${inner}${marker}`;
-}
-
-function serializeNodes(
-	nodes: ArrayLike<ChildNode>,
-	storage: FormatStorage,
-	tagMap: Record<string, FormatTool>,
-	markers: FormatMarkers
-): string {
-	let result = "";
-	const list = Array.from(nodes);
-
-	for (const node of list) {
-		if (node.nodeType === Node.TEXT_NODE) {
-			const text = node.textContent ?? "";
-			result += storage === "html" ? escapeHtml(text) : text;
-			continue;
-		}
-
-		if (node.nodeType !== Node.ELEMENT_NODE) continue;
-
-		const el = node as HTMLElement;
-		const tag = el.tagName;
-
-		if (tag === "BR") {
-			result += lineBreak(storage);
-			continue;
-		}
-
-		const inner = serializeNodes(el.childNodes, storage, tagMap, markers);
-
-		if (tag === "DIV" || tag === "P") {
-			// блочный элемент = новая строка
-			const nl = lineBreak(storage);
-			if (result && !result.endsWith(nl)) result += nl;
-			result += inner;
-			continue;
-		}
-
-		const tool = tagMap[tag];
-		// неизвестный или отключённый тег — отбрасываем обёртку, оставляем текст
-		result += tool ? wrap(storage, tool, inner, markers) : inner;
-	}
-
-	return result;
-}
-
-/**
- * Сериализует содержимое contenteditable-редактора в строку для хранения.
- * Сохраняются только включённые инструменты форматирования.
- */
-export function serialize(
-	root: HTMLElement,
-	storage: FormatStorage,
-	tools: FormatTool[],
-	markers: FormatMarkers = defaultFormatMarkers()
-): string {
-	const value = serializeNodes(root.childNodes, storage, buildTagMap(tools), markers);
-
-	// нормализуем переводы строк по краям
-	if (storage === "html")
-		return value
-			.replace(/^(?:<br>)+/, "")
-			.replace(/(?:<br>)+$/, "")
-			.trim();
-	return value.replace(/^\n+/, "").replace(/\n+$/, "").trim();
-}
-
-function markdownToHtml(value: string, tools: FormatTool[], markers: FormatMarkers): string {
-	let html = escapeHtml(value).replace(/\r?\n/g, "<br>");
-
-	// Маркеры применяем по убыванию длины: длинный (**) раньше короткого-префикса (*),
-	// иначе одиночная звезда «съест» двойную.
-	const order = tools.slice().sort((a, b) => markers[b].length - markers[a].length);
-	for (const tool of order) {
-		const marker = markers[tool];
-		if (!marker) continue;
-
-		const def = FORMAT_TOOLS[tool];
-		const escaped = escapeRegExp(marker);
-		const re = new RegExp(`${escaped}([\\s\\S]+?)${escaped}`, "g");
-		html = html.replace(re, `<${def.tag}>$1</${def.tag}>`);
-	}
-
-	return html;
-}
-
-/**
- * Готовит сохранённое значение к отображению в редакторе (возвращает HTML).
- * HTML-значения санитизируются до разрешённых тегов, Markdown — конвертируется в HTML.
- */
-export function deserialize(
-	value: string,
-	storage: FormatStorage,
-	tools: FormatTool[],
-	markers: FormatMarkers = defaultFormatMarkers()
-): string {
-	if (!value) return "";
-
-	if (storage === "markdown") return markdownToHtml(value, tools, markers);
-
-	// html: парсим и пересобираем, отбрасывая всё, кроме разрешённых тегов и переводов строк
-	const template = document.createElement("template");
-	template.innerHTML = value;
-	return serializeNodes(template.content.childNodes, "html", buildTagMap(tools), defaultFormatMarkers());
-}
-
-// --- Переключение форматирования на выделении (Selection/Range API, без execCommand) ---
-
-/** Ближайший предок-элемент с одним из тегов (в пределах root, не включая root). */
-function formatAncestor(node: Node, tags: string[], root: HTMLElement): HTMLElement | null {
-	let el = node.parentElement;
-	while (el && el !== root) {
-		if (tags.includes(el.tagName)) return el;
-		el = el.parentElement;
-	}
-	return null;
-}
-
-/** Абсолютные текстовые смещения границ выделения внутри root (для восстановления после правок DOM). */
-export function selectionCharBounds(root: HTMLElement, range: Range): [number, number] {
-	const probe = document.createRange();
-	probe.selectNodeContents(root);
-	probe.setEnd(range.startContainer, range.startOffset);
-	const start = probe.toString().length;
-	probe.setEnd(range.endContainer, range.endOffset);
-	const end = probe.toString().length;
-	return [start, end];
-}
-
-/** Находит текстовый узел и локальное смещение по абсолютному текстовому смещению. */
-function locateChar(root: HTMLElement, target: number): { node: Text; offset: number } | null {
-	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-	let count = 0;
-	let last: Text | null = null;
-	let n = walker.nextNode() as Text | null;
-	while (n) {
-		last = n;
-		if (count + n.length >= target) return { node: n, offset: Math.max(0, target - count) };
-		count += n.length;
-		n = walker.nextNode() as Text | null;
-	}
-	return last ? { node: last, offset: last.length } : null;
-}
-
-function restoreSelection(root: HTMLElement, start: number, end: number, selection: Selection) {
-	const s = locateChar(root, start);
-	const e = locateChar(root, end);
-	if (!s || !e) return;
-
-	const range = document.createRange();
-	range.setStart(s.node, s.offset);
-	range.setEnd(e.node, e.offset);
-	selection.removeAllRanges();
-	selection.addRange(range);
-}
-
-/** Разбивает пограничные текстовые узлы так, чтобы Range покрывал их целиком. */
-function splitBoundaries(range: Range) {
-	const sc = range.startContainer;
-	const ec = range.endContainer;
-
-	if (sc === ec && sc.nodeType === Node.TEXT_NODE) {
-		const t = sc as Text;
-		const s = range.startOffset;
-		const e = range.endOffset;
-		if (e < t.length) t.splitText(e);
-		let target = t;
-		if (s > 0) target = t.splitText(s);
-		range.setStart(target, 0);
-		range.setEnd(target, target.length);
-		return;
-	}
-
-	if (ec.nodeType === Node.TEXT_NODE) {
-		const t = ec as Text;
-		if (range.endOffset > 0 && range.endOffset < t.length) {
-			t.splitText(range.endOffset);
-			range.setEnd(t, t.length);
-		}
-	}
-	if (sc.nodeType === Node.TEXT_NODE) {
-		const t = sc as Text;
-		if (range.startOffset > 0 && range.startOffset < t.length) {
-			const after = t.splitText(range.startOffset);
-			range.setStart(after, 0);
-		}
-	}
-}
-
-function nodeWithinRange(node: Node, range: Range): boolean {
-	const nr = document.createRange();
-	nr.selectNodeContents(node);
-	return (
-		range.compareBoundaryPoints(Range.START_TO_START, nr) <= 0 &&
-		range.compareBoundaryPoints(Range.END_TO_END, nr) >= 0
-	);
-}
-
-function collectTextNodes(root: HTMLElement, range: Range, strict: boolean): Text[] {
-	const nodes: Text[] = [];
-	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-	let n = walker.nextNode() as Text | null;
-	while (n) {
-		if (n.length > 0 && (strict ? nodeWithinRange(n, range) : range.intersectsNode(n))) nodes.push(n);
-		n = walker.nextNode() as Text | null;
-	}
-	return nodes;
-}
-
-function wrapTextNode(node: Text, tag: string) {
-	const wrapper = document.createElement(tag);
-	node.parentNode?.insertBefore(wrapper, node);
-	wrapper.appendChild(node);
-}
-
-/** Выносит ветку, содержащую node, наружу из элемента fmt (расщепляя fmt на «до» и «после»). */
-function unwrapAround(fmt: HTMLElement, node: Node) {
-	const parent = fmt.parentNode;
-	if (!parent) return;
-
-	let child: Node = node;
-	while (child.parentNode && child.parentNode !== fmt) child = child.parentNode;
-	if (child.parentNode !== fmt) return;
-
-	const left = fmt.cloneNode(false) as HTMLElement;
-	while (fmt.firstChild && fmt.firstChild !== child) left.appendChild(fmt.firstChild);
-
-	fmt.removeChild(child);
-	parent.insertBefore(left, fmt);
-	parent.insertBefore(child, fmt);
-
-	if (!left.firstChild) parent.removeChild(left);
-	if (!fmt.firstChild) parent.removeChild(fmt);
-}
-
-function removeFormatFromNode(node: Text, tags: string[], root: HTMLElement) {
-	let fmt = formatAncestor(node, tags, root);
-	while (fmt) {
-		unwrapAround(fmt, node);
-		fmt = formatAncestor(node, tags, root);
-	}
-}
-
-function unwrapElement(el: HTMLElement) {
-	const parent = el.parentNode;
-	if (!parent) return;
-	while (el.firstChild) parent.insertBefore(el.firstChild, el);
-	parent.removeChild(el);
-}
-
-/** Чистит разметку: убирает пустые теги, схлопывает вложенные и соседние одинаковые, склеивает текст. */
-function cleanupFormatting(root: HTMLElement) {
-	const selector = FORMAT_TAG_NAMES.join(",").toLowerCase();
-
-	let changed = true;
-	while (changed) {
-		changed = false;
-
-		for (const el of Array.from(root.querySelectorAll<HTMLElement>(selector))) {
-			if (!el.isConnected) continue;
-
-			// пустой тег
-			if (el.textContent === "") {
-				el.remove();
-				changed = true;
-				continue;
-			}
-
-			// вложен в такой же тег
-			const parent = el.parentElement;
-			if (parent && parent !== root && parent.tagName === el.tagName) {
-				unwrapElement(el);
-				changed = true;
-				continue;
-			}
-
-			// соседний такой же тег слева — склеиваем
-			const prev = el.previousSibling;
-			if (prev && prev.nodeType === Node.ELEMENT_NODE && (prev as HTMLElement).tagName === el.tagName) {
-				while (el.firstChild) prev.appendChild(el.firstChild);
-				el.remove();
-				changed = true;
-				continue;
-			}
-		}
-	}
-
-	root.normalize();
-}
-
-/**
- * Переключает форматирование инструмента на выделении.
- * Если весь выделенный текст уже отформатирован — снимает формат, иначе применяет.
- *
- * По умолчанию восстанавливает выделение, на котором работал. Через `restoreBounds`
- * можно восстановить другое выделение (например, исходное до расширения до слова).
- */
-export function toggleFormat(
-	root: HTMLElement,
-	range: Range,
-	tool: FormatTool,
-	selection: Selection,
-	restoreBounds?: [number, number]
-) {
-	if (range.collapsed) return;
-
-	const def = FORMAT_TOOLS[tool];
-	const tags = def.matchTags;
-	const [startChar, endChar] = restoreBounds ?? selectionCharBounds(root, range);
-
-	splitBoundaries(range);
-
-	const nodes = collectTextNodes(root, range, true);
-	if (!nodes.length) return;
-
-	const allFormatted = nodes.every((n) => formatAncestor(n, tags, root) !== null);
-	if (allFormatted) {
-		for (const n of nodes) removeFormatFromNode(n, tags, root);
-	} else {
-		for (const n of nodes) if (!formatAncestor(n, tags, root)) wrapTextNode(n, def.tag);
-	}
-
-	cleanupFormatting(root);
-	restoreSelection(root, startChar, endChar, selection);
-}
-
-/**
- * Вставляет текст в позицию каретки, оборачивая его в указанные форматы (режим набора).
- * Каретка ставится сразу после вставленного текста; соседние одинаковые теги склеиваются.
- */
-export function insertFormattedText(root: HTMLElement, data: string, tools: FormatTool[], selection: Selection) {
-	if (!data || selection.rangeCount === 0) return;
-
-	const range = selection.getRangeAt(0);
-	const caret = selectionCharBounds(root, range)[0];
-
-	range.deleteContents();
-
-	let node: Node = document.createTextNode(data);
-	for (const tool of tools) {
-		const el = document.createElement(FORMAT_TOOLS[tool].tag);
-		el.appendChild(node);
-		node = el;
-	}
-	range.insertNode(node);
-
-	cleanupFormatting(root);
-
-	const offset = caret + data.length;
-	restoreSelection(root, offset, offset, selection);
-}
-
-/** Активен ли формат инструмента на текущем выделении (для подсветки кнопки). */
-export function isFormatActive(root: HTMLElement, range: Range, tool: FormatTool): boolean {
-	const tags = FORMAT_TOOLS[tool].matchTags;
-
-	if (range.collapsed) {
-		const node = range.startContainer;
-		const probe = node.nodeType === Node.TEXT_NODE ? node : (node.childNodes[range.startOffset] ?? node);
-		return formatAncestor(probe, tags, root) !== null;
-	}
-
-	const nodes = collectTextNodes(root, range, false);
-	if (!nodes.length) return false;
-	return nodes.every((n) => formatAncestor(n, tags, root) !== null);
-}
-
-/**
- * Нормализует пробелы в редакторе: схлопывает повторяющиеся пробелы/табы в один
- * и обрезает пробелы по краям каждой строки. 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); // убрать опустевшие теги, склеить узлы
-}

package/svg/bold.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" >
-<path d="M7 5C6.4477 5 6 5.4477 6 6V18C6 18.5523 6.4477 19 7 19H13.25C15.5972 19 17.5 17.0972 17.5 14.75C17.5 13.4203 16.8891 12.2333 15.9329 11.4546C16.451 10.7591 16.75 9.9056 16.75 8.9844C16.75 6.7853 14.9647 5 12.7656 5H7ZM12.7656 10.4688H8.5V7.5H12.7656C13.5854 7.5 14.25 8.1646 14.25 8.9844C14.25 9.8041 13.5854 10.4688 12.7656 10.4688ZM8.5 12.9688H13.25C14.2165 12.9688 15 13.7522 15 14.7188C15 15.6853 14.2165 16.4688 13.25 16.4688H8.5V12.9688Z" />
-</svg>

package/svg/italic.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" >
-<path d="M10 5C9.4477 5 9 5.4477 9 6C9 6.5523 9.4477 7 10 7H12.3076L9.6924 17H8C7.4477 17 7 17.4477 7 18C7 18.5523 7.4477 19 8 19H14C14.5523 19 15 18.5523 15 18C15 17.4477 14.5523 17 14 17H11.6924L14.3076 7H16C16.5523 7 17 6.5523 17 6C17 5.4477 16.5523 5 16 5H10Z" />
-</svg>

package/svg/strike.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" >
-<path d="M4 11C3.4477 11 3 11.4477 3 12C3 12.5523 3.4477 13 4 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H4Z" />
-<path d="M12 4C9.5147 4 7.5 5.7909 7.5 8C7.5 8.7286 7.7196 9.4036 8.1003 9.985C8.4029 10.4473 9.0231 10.5767 9.4854 10.2741C9.9477 9.9715 10.0771 9.3513 9.7745 8.889C9.6007 8.6235 9.5 8.3231 9.5 8C9.5 6.9601 10.5293 6 12 6C13.4707 6 14.5 6.9601 14.5 8C14.5 8.5523 14.9477 9 15.5 9C16.0523 9 16.5 8.5523 16.5 8C16.5 5.7909 14.4853 4 12 4Z" />
-<path d="M14.7825 14C15.2241 14.5666 15.5 15.2462 15.5 16C15.5 17.0399 14.4707 18 13 18H11C9.5293 18 8.5 17.0399 8.5 16C8.5 15.4477 8.0523 15 7.5 15C6.9477 15 6.5 15.4477 6.5 16C6.5 18.2091 8.5147 20 11 20H13C15.4853 20 17.5 18.2091 17.5 16C17.5 15.2818 17.2851 14.6082 16.9106 14H14.7825Z" />
-</svg>

package/svg/underline.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" >
-<path d="M7 4C6.4477 4 6 4.4477 6 5V11C6 14.3137 8.6863 17 12 17C15.3137 17 18 14.3137 18 11V5C18 4.4477 17.5523 4 17 4C16.4477 4 16 4.4477 16 5V11C16 13.2091 14.2091 15 12 15C9.7909 15 8 13.2091 8 11V5C8 4.4477 7.5523 4 7 4Z" />
-<path d="M5 19C4.4477 19 4 19.4477 4 20C4 20.5523 4.4477 21 5 21H19C19.5523 21 20 20.5523 20 20C20 19.4477 19.5523 19 19 19H5Z" />
-</svg>