@brandup/ui-richeditor 1.0.36

package/source/selection.ts

@@ -0,0 +1,267 @@
+// Переключение форматирования на выделении и вставка форматированного текста
+// на чистом Selection/Range API (без execCommand), плюс сохранение/восстановление выделения.
+
+import { ALL_FORMAT_TOOLS, FORMAT_TOOLS, type FormatTool } from "./format-config";
+
+/** Канонические теги форматирования (в верхнем регистре, как tagName). */
+const FORMAT_TAG_NAMES = ALL_FORMAT_TOOLS.map((t) => FORMAT_TOOLS[t].tag.toUpperCase());
+
+/** Ближайший предок-элемент с одним из тегов (в пределах 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;
+}
+
+// Восстанавливает выделение по абсолютным текстовым смещениям (см. selectionCharBounds).
+export 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);
+}
+
+/** Чистит разметку: убирает пустые теги, схлопывает вложенные и соседние одинаковые, склеивает текст. */
+export 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);
+}

package/source/serialize.ts

@@ -0,0 +1,201 @@
+// Разбор и сериализация значения редактора (HTML | Markdown), модель абзацев и мягких переносов.
+
+import {
+	FORMAT_TOOLS,
+	defaultFormatMarkers,
+	type FormatMarkers,
+	type FormatStorage,
+	type FormatTool,
+} from "./format-config";
+
+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}`;
+}
+
+// Сериализует инлайновое содержимое (текст, форматирование, <br> как мягкий перенос).
+// Абзацы (<p>/<div>) на этом уровне не учитываются — их разбирает serializeParagraphs.
+function serializeInline(
+	nodes: ArrayLike<ChildNode>,
+	storage: FormatStorage,
+	tagMap: Record<string, FormatTool>,
+	markers: FormatMarkers
+): string {
+	let result = "";
+
+	for (const node of Array.from(nodes)) {
+		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 = serializeInline(el.childNodes, storage, tagMap, markers);
+
+		// вложенный блочный элемент (нестандарт) — без обёртки, просто содержимое
+		if (tag === "DIV" || tag === "P") {
+			result += inner;
+			continue;
+		}
+
+		const tool = tagMap[tag];
+		// неизвестный или отключённый тег — отбрасываем обёртку, оставляем текст
+		result += tool ? wrap(storage, tool, inner, markers) : inner;
+	}
+
+	return result;
+}
+
+// Хвостовые переносы абзаца отбрасываем — это <br>-заполнители, делающие последнюю строку видимой;
+// мягкий перенос осмыслен только между содержимым (для пустой строки используйте новый абзац).
+function trimTrailingBreaks(inline: string, storage: FormatStorage): string {
+	return storage === "html" ? inline.replace(/(?:<br>)+$/, "") : inline.replace(/\n+$/, "");
+}
+
+// Разбивает верхний уровень на абзацы: <p>/<div> — отдельный абзац, остальное — неявный абзац.
+// HTML: <p>содержимое</p>; Markdown/Plain: абзацы через \n\n, мягкие переносы внутри — \n.
+function serializeParagraphs(
+	root: ParentNode,
+	storage: FormatStorage,
+	tagMap: Record<string, FormatTool>,
+	markers: FormatMarkers
+): string {
+	const paragraphs: string[] = [];
+	let buffer: ChildNode[] = [];
+
+	const flush = () => {
+		if (buffer.length) paragraphs.push(serializeInline(buffer, storage, tagMap, markers));
+		buffer = [];
+	};
+
+	for (const node of Array.from(root.childNodes)) {
+		const isBlock =
+			node.nodeType === Node.ELEMENT_NODE &&
+			((node as Element).tagName === "P" || (node as Element).tagName === "DIV");
+
+		if (isBlock) {
+			flush();
+			paragraphs.push(serializeInline((node as Element).childNodes, storage, tagMap, markers));
+		} else {
+			buffer.push(node);
+		}
+	}
+	flush();
+
+	const cleaned = paragraphs.map((p) => trimTrailingBreaks(p, storage));
+
+	if (storage === "html") return cleaned.map((p) => `<p>${p}</p>`).join("");
+	return cleaned.join("\n\n");
+}
+
+/**
+ * Сериализует содержимое редактора в строку для хранения. Сохраняются только включённые инструменты.
+ * При paragraphs=true применяется модель «абзацы (<p>/\n\n) + мягкие переносы (<br>/\n)».
+ */
+export function serialize(
+	root: HTMLElement,
+	storage: FormatStorage,
+	tools: FormatTool[],
+	markers: FormatMarkers = defaultFormatMarkers(),
+	paragraphs = false
+): string {
+	const tagMap = buildTagMap(tools);
+
+	if (paragraphs) return serializeParagraphs(root, storage, tagMap, markers).trim();
+
+	const inline = serializeInline(root.childNodes, storage, tagMap, markers);
+	if (storage === "html")
+		return inline
+			.replace(/^(?:<br>)+/, "")
+			.replace(/(?:<br>)+$/, "")
+			.trim();
+	return inline.replace(/^\n+/, "").replace(/\n+$/, "").trim();
+}
+
+// Markdown-разметка одного абзаца → инлайновый HTML (escape, \n→<br>, маркеры).
+function markdownInline(text: string, tools: FormatTool[], markers: FormatMarkers): string {
+	let html = escapeHtml(text).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).
+ * При paragraphs=true строит <p>-абзацы; HTML-значения санитизируются до разрешённых тегов,
+ * Markdown/Plain — разбивается на абзацы по \n\n (мягкий перенос \n → <br>).
+ */
+export function deserialize(
+	value: string,
+	storage: FormatStorage,
+	tools: FormatTool[],
+	markers: FormatMarkers = defaultFormatMarkers(),
+	paragraphs = false
+): string {
+	if (!value) return "";
+
+	if (storage === "markdown") {
+		if (!paragraphs) return markdownInline(value, tools, markers);
+		return value
+			.split(/\n{2,}/)
+			.map((p) => `<p>${markdownInline(p, tools, markers) || "<br>"}</p>`)
+			.join("");
+	}
+
+	// html: парсим и пересобираем, отбрасывая всё, кроме разрешённых тегов
+	const template = document.createElement("template");
+	template.innerHTML = value;
+	const tagMap = buildTagMap(tools);
+
+	if (!paragraphs) return serializeInline(template.content.childNodes, "html", tagMap, defaultFormatMarkers());
+
+	return serializeParagraphs(template.content, "html", tagMap, defaultFormatMarkers()).replace(
+		/<p><\/p>/g,
+		"<p><br></p>"
+	);
+}

package/source/toolbar.ts

@@ -0,0 +1,150 @@
+// Общий (единый для всех редакторов) тулбар форматирования.
+// По умолчанию живёт в document.body и позиционируется над активным редактором (position: fixed).
+// Если редактор задал toolbarContainer — панель монтируется в него и позиционируется
+// относительно него (position: absolute; над контейнером).
+// Кнопки диспатчат форматирование напрямую активному редактору (без системы команд,
+// т.к. тулбар находится вне привязанных UIElement).
+
+import { DOM } from "@brandup/ui";
+import { FORMAT_TOOLS, type FormatTool } from "./format";
+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 TOOLBAR_CLASS = "ui-richeditor-toolbar";
+
+/** Редактор, которым управляет общий тулбар. */
+export interface ToolbarHost {
+	readonly editable: HTMLElement;
+	readonly formatTools: FormatTool[];
+	/** Контейнер для тулбара; null/undefined — document.body (position: fixed над редактором). */
+	readonly toolbarContainer?: HTMLElement | null;
+	applyFormat(tool: FormatTool): void;
+	isToolActive(tool: FormatTool): boolean;
+}
+
+const MARGIN = 6;
+
+class FormatToolbar {
+	private __elem: HTMLElement | null = null;
+	private __buttons: Array<[FormatTool, HTMLButtonElement]> = [];
+	private __active: ToolbarHost | null = null;
+	private __toolsKey = "";
+	private __inContainer = false;
+	private readonly __reposition = () => this.reposition();
+	private __resizeObserver: ResizeObserver | null = null;
+
+	constructor() {
+		// единый листенер на весь app: подсветка активных инструментов по текущему выделению.
+		// refresh() сам проверяет наличие активного редактора, поэтому отдельных per-editor листенеров не нужно.
+		if (typeof document !== "undefined") document.addEventListener("selectionchange", () => this.refresh());
+	}
+
+	/** Показать тулбар для редактора (на фокусе): перестроить кнопки, спозиционировать, показать. */
+	attach(host: ToolbarHost) {
+		if (!host.formatTools.length) return;
+
+		this.__active = host;
+		this.__build(host.formatTools);
+		this.refresh();
+
+		const elem = this.__ensure();
+		const container = host.toolbarContainer ?? document.body;
+		this.__inContainer = container !== document.body;
+
+		if (elem.parentElement !== container) container.appendChild(elem);
+		elem.classList.toggle("in-container", this.__inContainer);
+		elem.classList.add("visible");
+
+		if (this.__inContainer) {
+			// позиционирование задаёт CSS (absolute; bottom: 100% относительно контейнера) — JS не нужен;
+			// сбрасываем inline-координаты от предыдущего body-режима, чтобы не перекрывали CSS
+			elem.style.left = "";
+			elem.style.top = "";
+			this.__removeViewportListeners();
+		} else {
+			window.addEventListener("scroll", this.__reposition, { passive: true });
+			window.addEventListener("resize", this.__reposition, { passive: true });
+			// рост высоты редактора (многострочный ввод) сдвигает его верх — пересчитываем позицию
+			if (typeof ResizeObserver !== "undefined") {
+				this.__resizeObserver ??= new ResizeObserver(this.__reposition);
+				this.__resizeObserver.observe(host.editable);
+			}
+			this.reposition();
+		}
+	}
+
+	/** Скрыть тулбар, если он обслуживает этот редактор (на blur/destroy). */
+	detach(host: ToolbarHost) {
+		if (this.__active !== host) return;
+
+		this.__active = null;
+		if (this.__elem) this.__elem.classList.remove("visible");
+		this.__removeViewportListeners();
+	}
+
+	/** Обновить подсветку активных инструментов по текущему выделению. */
+	refresh() {
+		if (!this.__active) return;
+		for (const [tool, btn] of this.__buttons) btn.classList.toggle("active", this.__active.isToolActive(tool));
+	}
+
+	/** Пересчитать позицию над активным редактором (только для режима body/fixed). */
+	reposition() {
+		if (!this.__active || !this.__elem || this.__inContainer) return;
+
+		const rect = this.__active.editable.getBoundingClientRect();
+		const elem = this.__elem;
+		const top = rect.top - elem.offsetHeight - MARGIN;
+		elem.style.left = `${Math.max(4, rect.left)}px`;
+		elem.style.top = `${Math.max(4, top)}px`;
+	}
+
+	private __removeViewportListeners() {
+		// capture должен совпадать с addEventListener (там { passive: true } → capture=false), иначе не снимется
+		window.removeEventListener("scroll", this.__reposition);
+		window.removeEventListener("resize", this.__reposition);
+		this.__resizeObserver?.disconnect();
+	}
+
+	private __ensure(): HTMLElement {
+		if (!this.__elem) this.__elem = DOM.tag("div", { class: TOOLBAR_CLASS });
+		return this.__elem;
+	}
+
+	private __build(tools: FormatTool[]) {
+		const key = tools.join(",");
+		const elem = this.__ensure();
+		if (key === this.__toolsKey && this.__buttons.length) return; // тот же состав — переиспользуем кнопки
+
+		this.__toolsKey = key;
+		DOM.empty(elem);
+		this.__buttons = [];
+
+		for (const tool of tools) {
+			const def = FORMAT_TOOLS[tool];
+			const btn = DOM.tag(
+				"button",
+				{ type: "button", class: "format-button", "data-format-tool": tool, title: def.title },
+				FORMAT_ICONS[tool]
+			);
+			// не даём кнопке забрать фокус, иначе теряется выделение в редакторе
+			btn.addEventListener("mousedown", (e) => e.preventDefault());
+			btn.addEventListener("click", () => this.__active?.applyFormat(tool));
+
+			elem.appendChild(btn);
+			this.__buttons.push([tool, btn]);
+		}
+	}
+}
+
+/** Единый экземпляр тулбара для всех редакторов. */
+export const formatToolbar = new FormatToolbar();

package/source/typings/less.d.ts

@@ -0,0 +1 @@
+declare module "*.less";

package/source/typings/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+	const content: any;
+	export default content;
+}

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>