@brandup/ui-textbox 1.0.28 → 1.0.34

package/README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=main)](https://dev.azure.com/brandup/BrandUp%20Core/_build/latest?definitionId=81&branchName=main)
 
-Компонент текстового поля на базе `contenteditable`. Заменяет стандартные `<input>` и `<textarea>`, добавляя расширенное поведение: счётчик символов, кнопку копирования, фильтрацию ввода по типу и валидацию.
+Компонент текстового поля на базе `contenteditable`. Заменяет стандартные `<input>` и `<textarea>`, добавляя расширенное поведение: счётчик символов, кнопку копирования, фильтрацию ввода по типу, валидацию и опциональное форматирование текста (жирный, курсив, зачёркивание, подчёркивание).
 
 ## Установка
 
@@ -51,6 +51,72 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `data-copy-button` | Добавляет кнопку копирования значения в буфер обмена |
 | `data-allow-empty-strings` | Разрешает значение из одних пробелов |
 | `data-readonly` | Альтернативный способ задать режим только для чтения |
+| `data-format` | Включает форматирование текста (только для `type="text"`) |
+| `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline` |
+| `data-format-storage` | Формат хранения значения: `html` (по умолчанию) или `markdown` |
+| `data-format-md-bold` | Markdown-маркер для жирного (по умолчанию `**`) |
+| `data-format-md-italic` | Markdown-маркер для курсива (по умолчанию `*`) |
+| `data-format-md-strike` | Markdown-маркер для зачёркивания (по умолчанию `~~`) |
+| `data-format-md-underline` | Markdown-маркер для подчёркивания (по умолчанию `++`) |
+
+## Форматирование текста
+
+Атрибут `data-format` включает панель форматирования с инструментами: жирный, курсив, зачёркивание, подчёркивание. Панель всплывает над контролом, пока он в фокусе (класс состояния `focused`). Работает поверх существующего `contenteditable`-редактора, поэтому доступно только для текстового ввода (`type="text"` и `<textarea>`).
+
+```html
+<!-- все инструменты, хранение в HTML -->
+<textarea data-content-script="textbox" data-format></textarea>
+
+<!-- только жирный и курсив, хранение в Markdown -->
+<input
+    type="text"
+    data-content-script="textbox"
+    data-format
+    data-format-tools="bold italic"
+    data-format-storage="markdown"
+/>
+```
+
+### Состав инструментов — `data-format-tools`
+
+Список через пробел из значений `bold`, `italic`, `strike`, `underline`. Неизвестные значения игнорируются. Если атрибут не задан — включаются все инструменты.
+
+### Применение формата
+
+- Формат — **переключатель** (toggle): повторное применение к уже отформатированному тексту снимает его.
+- Форматирование применяется **к слову целиком**: если курсор стоит внутри слова без выделения или выделена лишь его часть — формат охватывает всё слово. При выделении части нескольких слов каждая граница доводится до целого слова. Исходное выделение/каретка после применения сохраняются (слово не выделяется автоматически).
+- **Режим набора**: если под кареткой нет слова (курсор между пробелами или поле пустое), кнопка/хоткей не форматируют текст, а включают «ожидающий» формат — он подсветится активным и применится к следующему введённому тексту. Режим сбрасывается при перемещении каретки, клике или потере фокуса.
+- Кнопка инструмента подсвечивается (`active`), когда выделение целиком отформатировано этим инструментом или активен режим набора.
+- Реализация работает на стандартном Selection/Range API — без устаревшего `document.execCommand`, поэтому разметка всегда семантическая (`<b>`, `<i>`, `<s>`, `<u>`) и предсказуема между браузерами.
+
+### Хоткеи
+
+`Ctrl/Cmd+B` — жирный, `Ctrl/Cmd+I` — курсив, `Ctrl/Cmd+U` — подчёркивание. Зачёркивание включается только кнопкой. Хоткеи отключённых инструментов перехватываются, чтобы не срабатывало форматирование браузера.
+
+### Формат хранения — `data-format-storage`
+
+Значение синхронизируется в скрытое поле в выбранном формате:
+
+| Значение | Хранение | Поддерживаемые теги/маркеры |
+|---|---|---|
+| `html` (по умолчанию) | Санитизированный HTML | `<b>`, `<i>`, `<s>`, `<u>`, переводы строк через `<br>` |
+| `markdown` | Лёгкая разметка | `**жирный**`, `*курсив*`, `~~зачёркнутый~~`, `++подчёркнутый++` |
+
+Маркеры для каждого инструмента настраиваются атрибутами `data-format-md-<tool>` (актуально только при `data-format-storage="markdown"`):
+
+```html
+<textarea
+    data-content-script="textbox"
+    data-format
+    data-format-storage="markdown"
+    data-format-md-italic="_"
+    data-format-md-bold="__"
+></textarea>
+```
+
+При разборе маркеры применяются по убыванию длины, поэтому более длинный маркер (`__`) корректно срабатывает раньше короткого-префикса (`_`). Маркеры разных инструментов должны различаться.
+
+> Markdown-режим не имеет стандартного маркера для подчёркивания — по умолчанию используется `++текст++`. Глубоко вложенные комбинации форматов (например, жирный внутри курсива) гарантированно сохраняются только в режиме `html`.
 
 ## API
 
@@ -75,6 +141,10 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `copyButton` | `boolean` | Наличие кнопки копирования |
 | `symbolCounter` | `boolean` | Наличие счётчика символов |
 | `placeholder` | `string \| null` | Текст-заглушка |
+| `format` | `boolean` | Включено ли форматирование |
+| `formatStorage` | `FormatStorage` | Формат хранения: `"html"` \| `"markdown"` |
+| `formatTools` | `FormatTool[]` | Включённые инструменты форматирования |
+| `formatMarkers` | `FormatMarkers` | Markdown-маркеры по инструментам (с учётом переопределений) |
 
 ### Событие textbox-change
 
@@ -92,6 +162,15 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 textbox.onChange((data) => { ... });
 ```
 
+## Нормализация пробелов
+
+Когда редактирование логически завершено (поле теряет фокус), а также после инициализации и `setValue`, текст нормализуется:
+
+- повторяющиеся пробелы/табы схлопываются в один;
+- пробелы по краям каждой строки обрезаются.
+
+Форматирование и переносы строк (`<br>`/блоки) при этом сохраняются. Во время набора текста пробелы не трогаются — нормализация выполняется только по завершении. Если нормализация изменила значение, при потере фокуса генерируется событие [`textbox-change`](#событие-textbox-change).
+
 ## CSS-классы состояний
 
 | Класс | Условие |
@@ -102,3 +181,4 @@ textbox.onChange((data) => { ... });
 | `required` | Атрибут `required` задан |
 | `readonly` | Режим только для чтения |
 | `disabled` | Элемент отключён |
+| `active` | На кнопке панели форматирования — формат активен для текущего выделения |

package/package.json

@@ -21,14 +21,14 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.28",
+  "version": "1.0.34",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
-    "@brandup/ui": "^2.0.2",
-    "@brandup/ui-helpers": "^2.0.2",
-    "@brandup/ui-input": "^1.0.28",
-    "@brandup/ui-kit": "^1.0.28"
+    "@brandup/ui": "^2.0.3",
+    "@brandup/ui-helpers": "^2.0.3",
+    "@brandup/ui-input": "^1.0.34",
+    "@brandup/ui-kit": "^1.0.34"
   },
   "files": [
     "source",

package/source/format.ts

@@ -0,0 +1,546 @@
+// Опциональное форматирование текста (жирный, курсив, зачёркивание, подчёркивание)
+// для 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/source/index.ts

@@ -1 +1,12 @@
 export { default } from "./textbox";
+export * from "./textbox";
+export {
+	ALL_FORMAT_TOOLS,
+	FORMAT_TOOLS,
+	parseFormatTools,
+	defaultFormatMarkers,
+	normalizeWhitespace,
+	type FormatTool,
+	type FormatStorage,
+	type FormatMarkers,
+} from "./format";

package/source/textbox.less

@@ -77,6 +77,7 @@
 		flex: 1 1 auto;
 		box-sizing: border-box;
 		word-wrap: anywhere;
+		white-space: pre-wrap; // сохраняем пробелы (в т.ч. ведущие/повторяющиеся), чтобы они были видны
 		outline: none;
 
 		&:empty {
@@ -136,6 +137,16 @@
 			outline: none;
 			transition: all ease 100ms;
 			cursor: pointer;
+			opacity: 0.7;
+
+			&.success {
+				--svg-fill: var(--color-success);
+			}
+
+			&:hover,
+			&.success {
+				opacity: 1;
+			}
 		}
 
 		&:empty {
@@ -143,6 +154,76 @@
 		}
 	}
 
+	// панель форматирования — плавающая панель над контролом, появляется в фокусе
+	& .format-toolbar {
+		display: none;
+		position: absolute;
+		left: 0;
+		bottom: 100%;
+		margin-bottom: 6px;
+		z-index: 10;
+		flex-flow: row nowrap;
+		align-items: center;
+		gap: 2px;
+		padding: 3px;
+		background-color: var(--input-fill);
+		border: var(--input-border-type) var(--input-border-width) var(--input-border-color);
+		border-radius: var(--input-border-radius);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+		& .format-button {
+			width: calc(var(--input-height) - 12px);
+			height: calc(var(--input-height) - 12px);
+			border-radius: calc(var(--input-border-radius) - 2px);
+			border: 0;
+			background: var(--input-toolbar-button-fill);
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			& svg {
+				pointer-events: none;
+			}
+
+			&:hover {
+				background-color: var(--hover--input-toolbar-button-fill);
+			}
+
+			&.active {
+				background-color: var(--hover--input-toolbar-button-fill);
+			}
+		}
+	}
+
+	&.focused .format-toolbar {
+		display: flex;
+	}
+
+	// видимые теги форматирования внутри редактора
+	& .input {
+		& b,
+		& strong {
+			font-weight: 700;
+		}
+
+		& i,
+		& em {
+			font-style: italic;
+		}
+
+		& s,
+		& strike,
+		& del {
+			text-decoration: line-through;
+		}
+
+		& u,
+		& ins {
+			text-decoration: underline;
+		}
+	}
+
 	// мультистроковый режим
 	&.multyline {
 		// data-multyline == true

package/source/textbox.ts

@@ -4,8 +4,35 @@ import { InputControl } from "@brandup/ui-input";
 import { IS_TOUCH_DEVICE } from "@brandup/ui-kit";
 import { DOM } from "@brandup/ui";
 import { FuncHelper } from "@brandup/ui-helpers";
+import {
+	FORMAT_TOOLS,
+	HOTKEY_TOOLS,
+	defaultFormatMarkers,
+	deserialize,
+	insertFormattedText,
+	isFormatActive,
+	normalizeWhitespace,
+	parseFormatTools,
+	selectionCharBounds,
+	serialize,
+	toggleFormat,
+	type FormatMarkers,
+	type FormatStorage,
+	type FormatTool,
+} from "./format";
 import copyIcon from "../svg/copy.svg";
 import doneIcon from "../svg/tick.svg";
+import boldIcon from "../svg/bold.svg";
+import italicIcon from "../svg/italic.svg";
+import strikeIcon from "../svg/strike.svg";
+import underlineIcon from "../svg/underline.svg";
+
+const FORMAT_ICONS: Record<FormatTool, string> = {
+	bold: boldIcon,
+	italic: italicIcon,
+	strike: strikeIcon,
+	underline: underlineIcon,
+};
 
 export const ROOT_CLASS = "ui-textbox";
 export const INPUT_CLASS = "textbox-input";
@@ -23,6 +50,8 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	private __inputElem: HTMLElement;
 	private __symbolsCountElem: HTMLElement;
 	private __listenerAbort = new AbortController();
+	private __formatButtons: Array<[FormatTool, HTMLButtonElement]> = [];
+	private __pendingFormats = new Set<FormatTool>(); // режим набора: форматы для следующего ввода
 
 	readonly type: TextBoxType;
 	readonly allowEmptyStrings: boolean;
@@ -33,6 +62,10 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	readonly inputmode: string;
 	readonly symbolCounter: boolean;
 	readonly autoFocus: boolean;
+	readonly format: boolean;
+	readonly formatStorage: FormatStorage;
+	readonly formatTools: FormatTool[];
+	readonly formatMarkers: FormatMarkers;
 
 	constructor(valueElem: HTMLInputElement | HTMLTextAreaElement) {
 		// определяем тип ввода и нормализуем валидационные атрибуты до super()
@@ -73,6 +106,22 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		const multyline = valueElem instanceof HTMLTextAreaElement;
 		const copyButton = valueElem.hasAttribute("data-copy-button") || valueElem.hasAttribute("data-copybutton");
 		const disabled = valueElem.disabled;
+		const readonly = valueElem.hasAttribute("readonly") || valueElem.hasAttribute("data-readonly");
+
+		// форматирование доступно только для обычного текстового ввода
+		const format = type === "text" && valueElem.hasAttribute("data-format");
+		const formatStorage: FormatStorage =
+			valueElem.getAttribute("data-format-storage") === "markdown" ? "markdown" : "html";
+		const formatTools = format ? parseFormatTools(valueElem.getAttribute("data-format-tools")) : [];
+
+		// markdown-маркеры с дефолтами, переопределяются атрибутами data-format-md-<tool>
+		const formatMarkers = defaultFormatMarkers();
+		if (format) {
+			for (const tool of Object.keys(formatMarkers) as FormatTool[]) {
+				const marker = valueElem.getAttribute(`data-format-md-${tool}`)?.trim();
+				if (marker) formatMarkers[tool] = marker;
+			}
+		}
 
 		const inputElem = DOM.tag("div", { class: "input" });
 		const actionsElem = DOM.tag("div", { class: "actions" });
@@ -97,6 +146,30 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		if (inputmode) inputElem.inputMode = inputmode;
 
+		// панель форматирования — кнопки в той же области, что и кнопка копирования
+		const formatButtons: Array<[FormatTool, HTMLButtonElement]> = [];
+		if (format && formatTools.length && !disabled && !readonly) {
+			const toolbarElem = DOM.tag("div", { class: "format-toolbar" });
+			for (const tool of formatTools) {
+				const def = FORMAT_TOOLS[tool];
+				const buttonElem = DOM.tag(
+					"button",
+					{
+						type: "button",
+						class: "format-button",
+						command: def.command,
+						"data-format-tool": tool,
+						title: def.title,
+					},
+					FORMAT_ICONS[tool]
+				);
+				toolbarElem.insertAdjacentElement("beforeend", buttonElem);
+				formatButtons.push([tool, buttonElem]);
+			}
+			// плавающая панель над контролом, видимость управляется классом .focused
+			container.insertAdjacentElement("beforeend", toolbarElem);
+		}
+
 		if (copyButton) {
 			const buttonElem = DOM.tag(
 				"button",
@@ -128,11 +201,17 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		this.inputmode = inputmode;
 		this.multyline = multyline;
 		this.copyButton = copyButton;
+		this.format = format;
+		this.formatStorage = formatStorage;
+		this.formatTools = formatTools;
+		this.formatMarkers = formatMarkers;
 
 		this.__inputElem = inputElem;
 		this.__symbolsCountElem = symbolsCountElem;
+		this.__formatButtons = formatButtons;
 
 		this.__initLogic();
+		this.__initFormat();
 		this.__initText();
 	}
 
@@ -187,6 +266,9 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 				// когда удаляем весь текст, то браузер оставляет один BR, что означает что текста нет
 				// удалить BR нужно, чтобы появился placeholder
 				if (this.__inputElem.firstChild?.nodeName === "BR") DOM.empty(this.__inputElem);
+
+				// редактирование завершено — нормализуем пробелы (с событием change, если что-то изменилось)
+				this.__normalizeWhitespace(true);
 			},
 			{ signal }
 		);
@@ -196,7 +278,13 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			() => {
 				if (this.disabled) return;
 
-				if (this.copyButton && this.readonly) this.__selectAll();
+				if (this.copyButton && this.readonly) {
+					this.__selectAll();
+					return;
+				}
+
+				// браузер при выделении слова может захватить пробел у границы — убираем его
+				this.__trimSelectionWhitespace();
 			},
 			{ signal }
 		);
@@ -269,6 +357,19 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		this.__inputElem.addEventListener(
 			"keydown",
 			(e: KeyboardEvent) => {
+				// хоткеи форматирования (Ctrl/Cmd+B/I/U); зачёркивание — только кнопкой
+				if (this.format && (e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey) {
+					const tool = HOTKEY_TOOLS[e.key.toLowerCase()];
+					if (tool) {
+						e.preventDefault();
+						e.stopPropagation();
+
+						// перехватываем даже отключённый инструмент, чтобы не сработало форматирование браузера
+						if (this.formatTools.includes(tool)) this.__applyFormat(tool);
+						return false;
+					}
+				}
+
 				const isChar = e.key.length === 1;
 
 				if ((this.readonly || this.disabled) && isChar && !e.ctrlKey) {
@@ -357,35 +458,214 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		});
 	}
 
+	private __initFormat() {
+		if (!this.format || !this.__formatButtons.length) return;
+
+		const { signal } = this.__listenerAbort;
+
+		for (const [tool, buttonElem] of this.__formatButtons) {
+			// не даём кнопке забрать фокус, иначе теряется выделение в редакторе
+			buttonElem.addEventListener("mousedown", (e) => e.preventDefault(), { signal });
+
+			this.registerCommand(FORMAT_TOOLS[tool].command, () => this.__applyFormat(tool));
+		}
+
+		// подсветка активных инструментов по текущему выделению
+		document.addEventListener(
+			"selectionchange",
+			() => {
+				if (document.activeElement === this.element || this.element.contains(document.activeElement))
+					this.__refreshFormatState();
+			},
+			{ signal }
+		);
+
+		// режим набора: оборачиваем вводимый текст в ожидающие форматы
+		this.__inputElem.addEventListener(
+			"beforeinput",
+			(e: InputEvent) => {
+				if (this.disabled || this.readonly || this.__pendingFormats.size === 0) return;
+				if (e.inputType !== "insertText" || e.data == null) return;
+
+				e.preventDefault();
+				this.__insertPendingText(e.data);
+			},
+			{ signal }
+		);
+
+		// перемещение каретки/клик/потеря фокуса — выходим из режима набора
+		const navKeys = [
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown",
+			"Escape",
+		];
+		this.__inputElem.addEventListener(
+			"keydown",
+			(e: KeyboardEvent) => {
+				if (navKeys.includes(e.key)) this.__clearPendingFormats();
+			},
+			{ signal }
+		);
+		this.__inputElem.addEventListener("mousedown", () => this.__clearPendingFormats(), { signal });
+		this.__inputElem.addEventListener("blur", () => this.__clearPendingFormats(), { signal });
+	}
+
+	private __clearPendingFormats() {
+		if (!this.__pendingFormats.size) return;
+
+		this.__pendingFormats.clear();
+		this.__refreshFormatState();
+	}
+
+	private __insertPendingText(data: string) {
+		const selection = window.getSelection();
+		if (!selection || !this.__inputElem.contains(selection.anchorNode)) return;
+
+		insertFormattedText(this.__inputElem, data, Array.from(this.__pendingFormats), selection);
+
+		this.__applyValue();
+		this.__refreshFormatState();
+	}
+
+	private __applyFormat(tool: FormatTool) {
+		if (!this.format || this.readonly || this.disabled || !this.formatTools.includes(tool)) return;
+
+		const selection = window.getSelection();
+		if (!selection || selection.rangeCount === 0) return;
+
+		// выделение должно быть внутри редактора (не вызываем focus() — он схлопнул бы выделение)
+		if (!this.__inputElem.contains(selection.anchorNode)) return;
+
+		// запоминаем исходное выделение/каретку, чтобы вернуть его после форматирования
+		const original = selectionCharBounds(this.__inputElem, selection.getRangeAt(0));
+
+		// форматируем слова целиком: и при курсоре без выделения, и при выделении части слова
+		this.__expandSelectionToWords(selection);
+
+		const range = selection.getRangeAt(0);
+		if (range.collapsed) {
+			// под кареткой нет слова (пробелы/пустое поле) — режим набора: запоминаем формат для следующего ввода
+			if (this.__pendingFormats.has(tool)) this.__pendingFormats.delete(tool);
+			else this.__pendingFormats.add(tool);
+
+			this.__refreshFormatState();
+			return;
+		}
+
+		this.__pendingFormats.clear(); // есть что форматировать — режим набора не нужен
+
+		// формат применяется к слову, но восстанавливаем исходное выделение пользователя
+		toggleFormat(this.__inputElem, range, tool, selection, original);
+
+		this.__applyValue();
+		this.__refreshFormatState();
+	}
+
+	private __expandSelectionToWords(selection: Selection) {
+		const range = selection.getRangeAt(0);
+
+		const { startContainer, endContainer } = range;
+		let startOffset = range.startOffset;
+		let endOffset = range.endOffset;
+
+		// начало выделения — влево до начала слова
+		if (startContainer.nodeType === Node.TEXT_NODE && this.__inputElem.contains(startContainer)) {
+			const text = startContainer.textContent ?? "";
+			while (startOffset > 0 && !/\s/.test(text[startOffset - 1])) startOffset--;
+		}
+
+		// конец выделения — вправо до конца слова
+		if (endContainer.nodeType === Node.TEXT_NODE && this.__inputElem.contains(endContainer)) {
+			const text = endContainer.textContent ?? "";
+			while (endOffset < text.length && !/\s/.test(text[endOffset])) endOffset++;
+		}
+
+		if (startOffset === range.startOffset && endOffset === range.endOffset) return; // границы не изменились
+
+		const expanded = document.createRange();
+		expanded.setStart(startContainer, startOffset);
+		expanded.setEnd(endContainer, endOffset);
+		selection.removeAllRanges();
+		selection.addRange(expanded);
+	}
+
+	private __refreshFormatState() {
+		if (!this.format) return;
+
+		const selection = window.getSelection();
+		const range =
+			selection && selection.rangeCount > 0 && this.__inputElem.contains(selection.anchorNode)
+				? selection.getRangeAt(0)
+				: null;
+
+		for (const [tool, buttonElem] of this.__formatButtons) {
+			const active =
+				this.__pendingFormats.has(tool) || (range ? isFormatActive(this.__inputElem, range, tool) : false);
+			buttonElem.classList.toggle("active", active);
+		}
+	}
+
 	private __initText() {
 		DOM.empty(this.__inputElem);
 
 		const text = this.__valueElem.value;
 		if (text) {
-			const lines = text.split(/\n/);
-			lines.forEach((line, index) => {
-				line = line.trim();
-
-				if (index === 0) this.__inputElem.append(document.createTextNode(line));
-				else {
-					const lineElem = document.createElement("div");
-					lineElem.textContent = line;
-					this.__inputElem.append(lineElem);
-				}
-			});
+			if (this.format) {
+				this.__inputElem.innerHTML = deserialize(
+					text,
+					this.formatStorage,
+					this.formatTools,
+					this.formatMarkers
+				);
+			} else {
+				const lines = text.split(/\n/);
+				lines.forEach((line, index) => {
+					line = line.trim();
+
+					if (index === 0) this.__inputElem.append(document.createTextNode(line));
+					else {
+						const lineElem = document.createElement("div");
+						lineElem.textContent = line;
+						this.__inputElem.append(lineElem);
+					}
+				});
+			}
 		}
 
+		this.__normalizeWhitespace(false); // нормализация после инициализации/setValue (без события)
+
 		this.__refreshSymbolsCount();
 
 		if (this.autoFocus && !IS_TOUCH_DEVICE && !this.disabled && !this.readonly) this.__inputElem.focus();
 	}
 
-	private __applyValue() {
-		const newValue = this.__inputElem.innerText.trim();
+	private __applyValue(silent = false) {
+		const newValue = this.format
+			? serialize(this.__inputElem, this.formatStorage, this.formatTools, this.formatMarkers)
+			: this.__inputElem.innerText.trim();
 		this.__valueElem.value = newValue;
 
 		this.__refreshSymbolsCount();
-		this.__onChange();
+		if (!silent) this.__onChange();
+	}
+
+	// Нормализация пробелов редактора (схлопывание повторов + обрезка краёв строк).
+	// Значение пересинхронизируется только если содержимое изменилось; notify=true — c событием change.
+	private __normalizeWhitespace(notify: boolean) {
+		if (this.disabled || this.readonly) return;
+
+		const before = this.__inputElem.textContent ?? "";
+		normalizeWhitespace(this.__inputElem);
+		if ((this.__inputElem.textContent ?? "") === before) return;
+
+		this.__applyValue(true);
+		if (notify) this.__onChange();
 	}
 
 	private __toIncorrect() {
@@ -414,6 +694,42 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		window.getSelection()?.selectAllChildren(this.__inputElem);
 	}
 
+	private __trimSelectionWhitespace() {
+		const selection = window.getSelection();
+		if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+
+		const range = selection.getRangeAt(0);
+
+		// выделение должно оставаться внутри редактора
+		if (!this.__inputElem.contains(range.startContainer) || !this.__inputElem.contains(range.endContainer)) return;
+
+		const { startContainer, endContainer } = range;
+		let startOffset = range.startOffset;
+		let endOffset = range.endOffset;
+
+		// убираем пробелы в начале
+		if (startContainer.nodeType === Node.TEXT_NODE) {
+			const text = startContainer.textContent ?? "";
+			while (startOffset < text.length && /\s/.test(text[startOffset])) startOffset++;
+		}
+
+		// убираем пробелы в конце
+		if (endContainer.nodeType === Node.TEXT_NODE) {
+			const text = endContainer.textContent ?? "";
+			while (endOffset > 0 && /\s/.test(text[endOffset - 1])) endOffset--;
+		}
+
+		// в пределах одного узла выделение не должно схлопнуться или вывернуться
+		if (startContainer === endContainer && startOffset >= endOffset) return;
+		if (startOffset === range.startOffset && endOffset === range.endOffset) return;
+
+		const trimmed = document.createRange();
+		trimmed.setStart(startContainer, startOffset);
+		trimmed.setEnd(endContainer, endOffset);
+		selection.removeAllRanges();
+		selection.addRange(trimmed);
+	}
+
 	private __carretToEnd() {
 		const range = document.createRange();
 		range.selectNodeContents(this.__inputElem);

package/svg/bold.svg

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,5 @@
+<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

@@ -0,0 +1,4 @@
+<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>