@brandup/ui-richeditor 1.0.41 → 1.0.42

package/README.md

@@ -49,6 +49,7 @@ editor.onChange(({ value }) => console.log(value));
 | `placeholder` | `string \| null` | Текст-заглушка |
 | `multiline` | `boolean` | Многострочный режим |
 | `paragraph` | `"block" \| "break"` | Что делает Enter: новый абзац (по умолчанию) или мягкий перенос |
+| `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию только `paragraph`) |
 | `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются) |
 | `toolbarContainer` | `HTMLElement \| null` | Контейнер для панели; по умолчанию `document.body` (`position: fixed`). Если задан — панель монтируется в него и позиционируется над ним (`position: absolute`). Контейнер должен быть `position: relative` |
 | `value` | `string` | Начальное значение |
@@ -71,7 +72,13 @@ editor.onChange(({ value }) => console.log(value));
 | `getLength(): number` | Длина текста (без учёта переводов строк) |
 | `focus(): void` | Установить фокус |
 | `applyFormat(tool): void` | Переключить формат на выделении (слово целиком) |
+| `applyBlock(type): void` | Переключить тип блоков под выделением; повторное применение возвращает обычный текст |
+| `applyCode(): void` | Код по выделению: моноширинный для части строки, блок — для целых строк |
+| `isCodeActive(): boolean` | Включён ли код в любом виде — подсветка объединённой кнопки |
+| `currentBlock: BlockType` | Тип блока под кареткой |
+| `blockTypes: BlockType[]` | Доступные типы блоков |
 | `isToolActive(tool): boolean` | Активен ли формат на текущем выделении |
+| `isToolEnabled(tool): boolean` | Доступен ли инструмент сейчас (внутри кода остальные выключены) |
 | `activeTools(): ReadonlySet<FormatTool>` | Активные форматы всех инструментов сразу (панель обновляется на каждое движение каретки, поштучный опрос обходил бы содержимое на каждую кнопку) |
 | `clearFormat(): void` | Снять всё форматирование с выделения (без выделения — со слова под кареткой) |
 | `clearAllFormat(): void` | Снять всё форматирование со всего содержимого |
@@ -152,6 +159,49 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются.
 
+## Блоки: цитата и код
+
+Кроме абзаца многострочный режим знает и другие типы блоков верхнего уровня. Они подключаются **явно** — их понимает не каждый получатель:
+
+```typescript
+new RichEditor(elem, { format: true, multiline: true, blocks: ["quote", "code"] });
+```
+
+| Тип | Тег | Разметка | Enter внутри |
+| --- | --- | --- | --- |
+| `paragraph` | `<p>` | — | по режиму `paragraph` |
+| `quote` | `<blockquote>` | `>` с пробелом в начале каждой строки | заканчивает блок |
+| `code` | `<pre>` | ограждение ```` ``` ```` | заканчивает блок |
+
+Обычный текст — такой же тип, а не «тип не задан»: он есть в наборе всегда, им становится содержимое, не попавшее ни в какой блок, и в него же блок возвращают. Кнопки в панели (`.block-button`) получают только остальные типы.
+
+Кнопки кода (моноширинного и блока) и спойлера временно скрыты (`HIDDEN_TOOLS`/`HIDDEN_BLOCKS` в `./toolbar`): сами возможности работают — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`, `applyBlock`, `applyCode`), — но в панель они пока не выводятся.
+
+### Одна кнопка на моноширинный и блок кода
+
+Когда включены и инструмент `code`, и тип блока `code`, панель показывает **одну** кнопку — так это устроено в мессенджерах. Вид выбирается по выделению, как и в самой разметке:
+
+- выделена одна строка или её часть → моноширинный (`` `код` ``);
+- выделено больше одной строки → блок кода из этих строк. Остальные строки остаются как были: в мессенджерском режиме всё сообщение — это один блок, и иначе кодом становился бы весь текст;
+- без выделения → блок кода из строки под кареткой. Моноширинным там делать нечего, а иначе блок был бы недостижим: в пустом поле не выделить строки, которых ещё нет;
+- код уже включён → повторное нажатие снимает именно его вид, целиком по блоку.
+
+Тем же занимается `applyCode()`, а `isCodeActive()` отвечает, включён ли код в любом виде — им подсвечена кнопка.
+
+В коде разметки нет — ни в моноширинном, ни в блоке: значение берёт оттуда голый текст, и любое форматирование внутри до получателя не доедет. Поэтому при переходе в моноширинный прежнее форматирование с этого куска снимается, внутри кода остальные инструменты недоступны (`isToolEnabled()` — кнопки гаснут), а разметка, попавшая внутрь как-то ещё (вставка, чужое значение), вычищается при первой же нормализации. Если включено только что-то одно, кнопка остаётся обычной: инструмента (`.format-button`) или блока (`.block-button`).
+
+Переключение:
+
+- кнопка панели или `applyBlock(type)` — на все блоки, которых касается выделение; повторное применение того же типа возвращает обычный текст;
+- **Enter** внутри цитаты или кода заканчивает блок и начинает обычный абзац, **Shift/Ctrl/Cmd+Enter** переносит строку внутри блока. Выходить из блока приходится чаще, чем продолжать его, а иначе уйти можно было бы только мышью;
+- **Backspace** в начале блока возвращает его к обычному тексту, не трогая содержимого.
+
+Особенности блока кода: инлайновое форматирование внутри не размечается (написанное остаётся буквальным) и снимается при переключении в этот тип, а пробелы внутри не схлопываются — отступы там часть текста.
+
+Подряд идущие строки с маркером цитаты — одна цитата; пустая строка между ними разделяет цитаты. Незакрытое ограждение блоком не считается: его строки остаются текстом, иначе одна случайная кавычка съедала бы весь остаток сообщения. Блок отключённого типа, пришедший вставкой или из значения, сохраняется как обычный текст — разметки от него в значении не будет, но текст не теряется.
+
+В режиме `paragraph: "break"` блоки работают так же, но пустая строка их не разделяет — там она сама по себе строка сообщения. Блок узнаётся по собственной разметке, поэтому между обычным текстом и цитатой в значении стоит один перенос, а не два.
+
 ## Вставка текста
 
 При включённом форматировании вставка (`paste`) сохраняет форматирование из буфера обмена (`text/html`):
@@ -172,8 +222,8 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 | `storage` | Хранение | Абзац / мягкий перенос | Маркеры форматирования |
 | --- | --- | --- | --- |
-| `html` | Санитизированный HTML | `<p>…</p>` / `<br>` | `<b>`, `<i>`, `<s>`, `<u>` |
-| `markdown` | Лёгкая разметка | `\n\n` / `\n` | `**жирный**`, `_курсив_`, `~зачёркнутый~`, `__подчёркнутый__` |
+| `html` | Санитизированный HTML | `<p>…</p>` / `<br>` | `<b>`, `<i>`, `<s>`, `<u>`, `<spoiler>`, `<code>` |
+| `markdown` | Лёгкая разметка | `\n\n` / `\n` | `**жирный**`, `_курсив_`, `~зачёркнутый~`, `__подчёркнутый__`, `\|\|спойлер\|\|`, `` `моноширинный` `` |
 
 Без форматирования (plain) значение хранится как markdown без инструментов: абзацы `\n\n`, мягкий перенос `\n`.
 

package/package.json

@@ -27,12 +27,12 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.7",
-    "@brandup/ui-kit": "^1.0.41"
+    "@brandup/ui-kit": "^1.0.42"
   },
   "files": [
     "source",

package/source/editing.ts

@@ -3,14 +3,12 @@
 // редактора и без истории — вызывающий сам решает, когда записывать undo-шаг.
 
 import { deserialize } from "./serialize";
-import { isBlock } from "./paragraphs";
+import { blockAt, blockTypeOf, blocksInRange, createBlock, isBlock } from "./paragraphs";
 import { documentSelection, innerSelection } from "./selection";
-import type { FormatMarkers, FormatTool } from "./format-config";
+import { BLOCK_TYPES, DEFAULT_BLOCK, type BlockType, type FormatMarkers, type FormatTool } from "./format-config";
 
 function emptyParagraph(): HTMLParagraphElement {
-	const p = document.createElement("p");
-	p.appendChild(document.createElement("br"));
-	return p;
+	return createBlock(DEFAULT_BLOCK) as HTMLParagraphElement;
 }
 
 // убирает пустые текст-узлы и ставит <br>-заполнитель в пустой абзац (для видимости и каретки)
@@ -51,21 +49,155 @@ export function selectAllContent(editable: HTMLElement) {
 	documentSelection(editable)?.selectAllChildren(editable);
 }
 
-/** Enter в multiline: разбить текущий абзац по каретке на два <p>. */
-export function insertParagraph(editable: HTMLElement) {
+/** Что сделала правка блоков: менялось ли содержимое и не появился ли блок из части строк. */
+export interface BlockChange {
+	changed: boolean;
+	/** Блок, собранный из выделенных строк (разделение); null — блоки меняли целиком. */
+	created: HTMLElement | null;
+}
+
+/**
+ * Меняет тип блоков, которых касается выделение. `changed: false` — менять было нечего:
+ * тогда ни содержимое, ни история не трогаются.
+ *
+ * У типа без инлайновой разметки (код) форматирование снимается: внутри него написанное
+ * остаётся буквальным, и сохранить его всё равно было бы негде.
+ */
+export function applyBlocks(editable: HTMLElement, range: Range, type: BlockType): BlockChange {
+	const blocks = blocksInRange(editable, range);
+
+	// Пустой редактор: блоков ещё нет, но тип задать можно — иначе в пустое поле его было бы
+	// не поставить вовсе, а набор блока обычно с этого и начинают.
+	if (!blocks.length && !editable.firstChild && type !== DEFAULT_BLOCK) {
+		const block = createBlock(type);
+		editable.appendChild(block);
+		caretToStart(block);
+
+		return { changed: true, created: block };
+	}
+
+	// Выделена часть строк блока — правим их, а не весь блок: иначе в мессенджерском режиме,
+	// где всё сообщение это один блок, кодом становился бы весь текст.
+	if (blocks.length === 1 && type !== DEFAULT_BLOCK && blockTypeOf(blocks[0]) !== type) {
+		const created = splitLines(blocks[0], range, type);
+		if (created) return { changed: true, created };
+	}
+
+	let changed = false;
+
+	for (const block of blocks) {
+		if (blockTypeOf(block) === type) continue;
+
+		const replacement = retagBlock(block, type);
+		if (!BLOCK_TYPES[type].inline) unwrapFormatting(replacement);
+
+		block.replaceWith(replacement);
+		fillEmptyParagraph(replacement);
+		changed = true;
+	}
+
+	return { changed, created: null };
+}
+
+/**
+ * Собирает блок нужного типа из строк, которых коснулось выделение; остальные строки остаются
+ * блоками прежнего типа до и после. Строки берутся целиком: код из половины строки — это уже
+ * моноширинный, а не блок.
+ *
+ * null — делить нечего: выделение и так захватило все строки блока.
+ */
+function splitLines(block: HTMLElement, range: Range, type: BlockType): HTMLElement | null {
+	const breaks = Array.from(block.querySelectorAll("br"));
+
+	// последний перенос перед выделением и первый после него — по ним и режем
+	const head = breaks.filter((br) => range.comparePoint(br, 0) < 0).pop();
+	const tail = breaks.find((br) => range.comparePoint(br, 0) > 0);
+	if (!head && !tail) return null;
+
+	const original = blockTypeOf(block) ?? DEFAULT_BLOCK;
+
+	// Хвост выносим первым: он дальше по дереву, и вынос головы сдвинул бы его границы.
+	// Сам перенос-разделитель уходит вместе с ним — строки разъезжаются по блокам.
+	const cut = (from: "before" | "after", br: HTMLElement): HTMLElement => {
+		const part = document.createRange();
+
+		if (from === "after") {
+			part.setStartAfter(br);
+			part.setEnd(block, block.childNodes.length);
+		} else {
+			part.setStart(block, 0);
+			part.setEndBefore(br);
+		}
+
+		const piece = document.createElement(BLOCK_TYPES[original].tag);
+		piece.appendChild(part.extractContents());
+		br.remove();
+		fillEmptyParagraph(piece);
+
+		return piece;
+	};
+
+	const after = tail ? cut("after", tail) : null;
+	const before = head ? cut("before", head) : null;
+
+	const created = retagBlock(block, type);
+	if (!BLOCK_TYPES[type].inline) unwrapFormatting(created);
+
+	block.replaceWith(created);
+	fillEmptyParagraph(created);
+
+	if (before) created.before(before);
+	if (after) created.after(after);
+
+	return created;
+}
+
+// Разворачивает инлайновые теги, оставляя текст и мягкие переносы. Список снимается заранее:
+// разворот внешнего тега поднимает вложенные к блоку, и обойти их нужно тоже.
+function unwrapFormatting(block: HTMLElement) {
+	for (const el of Array.from(block.querySelectorAll<HTMLElement>("*"))) {
+		if (el.tagName === "BR") continue;
+		el.replaceWith(...Array.from(el.childNodes));
+	}
+	block.normalize();
+}
+
+/**
+ * Стоит ли каретка в начале своего блока — по тексту до неё, а не по узлу: началом считается
+ * и позиция перед вложенным форматированием, и позиция в его первом текстовом узле.
+ */
+export function atBlockStart(editable: HTMLElement, range: Range): boolean {
+	if (!range.collapsed) return false;
+
+	const block = blockAt(editable, range.startContainer);
+	if (!block) return false;
+
+	const before = document.createRange();
+	before.selectNodeContents(block);
+	before.setEnd(range.startContainer, range.startOffset);
+
+	// Начало блока — это и начало его первой строки. Перед кареткой стоит перенос — значит
+	// строка не первая, и удалять нужно сам перенос, а не тип блока.
+	if (before.cloneContents().querySelector("br")) return false;
+
+	return before.toString().length === 0;
+}
+
+/** Enter в multiline: разбить текущий блок по каретке; хвост становится блоком типа `type`. */
+export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT_BLOCK) {
 	const selection = innerSelection(editable);
 	if (!selection) return;
 
 	const range = selection.getRangeAt(0);
 	range.deleteContents();
 
-	// текущий абзац (ближайший <p>/<div> внутри редактора)
+	// текущий блок (ближайший блочный предок внутри редактора)
 	let para: Node | null = range.startContainer;
 	while (para && para !== editable && !isBlock(para)) para = para.parentNode;
 
 	// каретка не внутри абзаца — создаём абзац сразу с видимым результатом (иначе Enter «срабатывает со 2-го раза»)
 	if (!para || para === editable) {
-		const next = emptyParagraph();
+		const next = createBlock(type);
 		if (editable.childNodes.length === 0) {
 			// пустой редактор: пустая строка-источник + новая строка с кареткой
 			editable.appendChild(emptyParagraph());
@@ -85,10 +217,13 @@ export function insertParagraph(editable: HTMLElement) {
 	tail.setStart(range.endContainer, range.endOffset);
 	const fragment = tail.extractContents();
 
-	const next = document.createElement("p");
+	const next = document.createElement(BLOCK_TYPES[type].tag);
 	next.appendChild(fragment);
 	(para as ChildNode).after(next);
 
+	// хвост уехал в блок другого типа — его правила распространяются и на содержимое
+	if (!BLOCK_TYPES[type].inline) unwrapFormatting(next);
+
 	// extractContents в конце абзаца оставляет пустой текст-узел → <p></p> без заполнителя
 	// (невидим/нефокусируем, каретка не встаёт). Чистим и ставим <br> в опустевшие абзацы.
 	fillEmptyParagraph(para as HTMLElement);
@@ -141,6 +276,9 @@ export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement
 	}
 
 	const block = para as HTMLElement;
+	// Вставка в цитату или код остаётся в них: разорвать блок посреди вставки — не то,
+	// чего ждут, а тип целевого блока диктует и правила его содержимого.
+	const type = blockTypeOf(block) ?? DEFAULT_BLOCK;
 
 	// хвост текущего абзаца после каретки — выносим, чтобы вернуть в конец вставки
 	const tailRange = document.createRange();
@@ -148,6 +286,8 @@ export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement
 	tailRange.setStart(range.startContainer, range.startOffset);
 	const tail = tailRange.extractContents();
 
+	if (!BLOCK_TYPES[type].inline) for (const p of paras) unwrapFormatting(p);
+
 	// первый вставляемый абзац вливается в текущий (после содержимого до каретки)
 	while (paras[0].firstChild) block.appendChild(paras[0].firstChild);
 
@@ -156,15 +296,27 @@ export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement
 		return;
 	}
 
-	// остальные абзацы — отдельными <p> после текущего; хвост — в конец последнего
+	// остальные абзацы — отдельными блоками того же типа после текущего; хвост — в конец последнего
 	let anchor: ChildNode = block;
 	for (let i = 1; i < paras.length; i++) {
+		paras[i] = retagBlock(paras[i], type);
 		anchor.after(paras[i]);
 		anchor = paras[i];
 	}
 	paras[paras.length - 1].appendChild(tail);
 }
 
+// Тот же блок, но другим тегом. Содержимое переносится как есть — правила типа к нему
+// применяет вызывающий, он же знает, откуда это содержимое взялось.
+function retagBlock(block: HTMLElement, type: BlockType): HTMLElement {
+	if (blockTypeOf(block) === type) return block;
+
+	const replacement = document.createElement(BLOCK_TYPES[type].tag);
+	while (block.firstChild) replacement.appendChild(block.firstChild);
+
+	return replacement;
+}
+
 /** Обрезает пробелы по краям абзаца (после схлопывания) — у крайних текстовых узлов. */
 function trimParagraphEdges(p: HTMLElement) {
 	const walker = document.createTreeWalker(p, NodeFilter.SHOW_TEXT);
@@ -215,7 +367,12 @@ export function buildParagraphs(lines: string[], blocks: boolean): HTMLElement[]
  * Разбирает HTML из буфера обмена в абзацы `<p>`, оставляя только разрешённые инструменты.
  * Пустой результат — вставлять нечего (вызывающий откатится на простой текст).
  */
-export function sanitizePastedHtml(html: string, tools: FormatTool[], markers: FormatMarkers): HTMLElement[] {
+export function sanitizePastedHtml(
+	html: string,
+	tools: FormatTool[],
+	markers: FormatMarkers,
+	types: BlockType[] = [DEFAULT_BLOCK]
+): HTMLElement[] {
 	// убираем мусорные элементы (Word/браузер: стили, скрипты, заголовок документа)
 	const source = document.createElement("template");
 	source.innerHTML = html;
@@ -223,7 +380,7 @@ export function sanitizePastedHtml(html: string, tools: FormatTool[], markers: F
 
 	// единый источник санитизации — deserialize (теги-синонимы → канонические, лишнее развёрнуто)
 	const holder = document.createElement("template");
-	holder.innerHTML = deserialize(source.innerHTML, "html", tools, markers, true);
+	holder.innerHTML = deserialize(source.innerHTML, "html", tools, markers, true, types);
 
 	// внешний HTML: пробелы/переводы строк между тегами не значимы — схлопываем,
 	// иначе литеральные \n (pre-wrap) и отступы дают лишние переносы

package/source/format-config.ts

@@ -1,6 +1,6 @@
 // Конфигурация форматирования: типы, набор инструментов, markdown-маркеры и Ctrl/Cmd-хоткеи.
 
-export type FormatTool = "bold" | "italic" | "strike" | "underline";
+export type FormatTool = "bold" | "italic" | "strike" | "underline" | "spoiler" | "code";
 export type FormatStorage = "html" | "markdown";
 
 /**
@@ -15,7 +15,85 @@ export type ParagraphMode = "block" | "break";
 /** Действие редактора (не формат): вставка смайлика, очистка форматирования, отмена и повтор. */
 export type EditorAction = "emoji" | "erase" | "undo" | "redo";
 
-export const ALL_FORMAT_TOOLS: FormatTool[] = ["bold", "italic", "strike", "underline"];
+/**
+ * Тип блока верхнего уровня. Обычный абзац — такой же тип, а не «тип не задан»: тогда
+ * и разбор, и печать, и переключение в панели работают одинаково для всех блоков.
+ */
+export type BlockType = "paragraph" | "quote" | "code";
+
+export const ALL_BLOCK_TYPES: BlockType[] = ["paragraph", "quote", "code"];
+
+/** Куда попадает содержимое, не попавшее ни в какой блок: вставка, чужой `<div>`, блуждающий текст. */
+export const DEFAULT_BLOCK: BlockType = "paragraph";
+
+interface BlockDef {
+	/** Канонический тег при построении и сериализации. */
+	tag: string;
+	/** Теги, распознаваемые при разборе входного HTML. */
+	matchTags: string[];
+	/** Подсказка на кнопке панели. */
+	title: string;
+	/**
+	 * Маркер в начале каждой строки блока (цитата). Подряд идущие строки с ним — один блок:
+	 * так эту разметку понимают и мессенджеры.
+	 */
+	linePrefix?: string;
+	/** Ограждение блока целиком (код): строка до и строка после содержимого. */
+	fence?: string;
+	/**
+	 * Размечается ли содержимое инлайновыми инструментами. У кода нет: написанное в нём
+	 * буквально таким и остаётся — как и внутри моноширинного.
+	 */
+	inline: boolean;
+	/**
+	 * Что делает Enter внутри: `paragraph` — заканчивает блок (хвост уходит в обычный текст),
+	 * `break` — переносит строку. Модификатор делает обратное.
+	 */
+	enter: "paragraph" | "break";
+}
+
+export const BLOCK_TYPES: Record<BlockType, BlockDef> = {
+	paragraph: {
+		tag: "p",
+		matchTags: ["P", "DIV"],
+		title: "Обычный текст",
+		inline: true,
+		enter: "paragraph",
+	},
+	quote: {
+		tag: "blockquote",
+		matchTags: ["BLOCKQUOTE"],
+		title: "Цитата",
+		linePrefix: "> ",
+		inline: true,
+		// Enter заканчивает цитату, строка внутри — Shift+Enter: выход нужен чаще, чем
+		// продолжение, а уйти из блока иначе можно только мышью.
+		enter: "paragraph",
+	},
+	code: {
+		tag: "pre",
+		matchTags: ["PRE"],
+		title: "Блок кода",
+		fence: "```",
+		inline: false,
+		enter: "paragraph",
+	},
+};
+
+// Тег → тип блока. Собирается один раз: спрашивается на каждый узел верхнего уровня и на каждую
+// единицу обхода координат каретки.
+const BLOCK_TAGS: Record<string, BlockType> = (() => {
+	const map: Record<string, BlockType> = {};
+	for (const type of ALL_BLOCK_TYPES) for (const tag of BLOCK_TYPES[type].matchTags) map[tag] = type;
+	return map;
+})();
+
+/** Тип блока по имени тега (как `tagName`, в верхнем регистре); null — тег не блочный. */
+export function blockTypeOfTag(tagName: string): BlockType | null {
+	return BLOCK_TAGS[tagName] ?? null;
+}
+
+export const ALL_FORMAT_TOOLS: FormatTool[] = ["bold", "italic", "strike", "underline", "spoiler", "code"];
 
 export const ALL_EDITOR_ACTIONS: EditorAction[] = ["emoji", "erase", "undo", "redo"];
 
@@ -61,6 +139,22 @@ export const FORMAT_TOOLS: Record<FormatTool, FormatToolDef> = {
 		hotkey: "u",
 		title: "Подчёркнутый",
 	},
+	spoiler: {
+		// Своего элемента для скрытого текста в HTML нет. Берём собственный тег, а разбирать
+		// умеем и телеграмный: значения приходят и из его разметки.
+		tag: "spoiler",
+		matchTags: ["SPOILER", "TG-SPOILER"],
+		md: "||",
+		hotkey: "",
+		title: "Спойлер",
+	},
+	code: {
+		tag: "code",
+		matchTags: ["CODE"],
+		md: "`",
+		hotkey: "",
+		title: "Моноширинный",
+	},
 };
 
 interface EditorActionDef {
@@ -78,7 +172,7 @@ export const EDITOR_ACTIONS: Record<EditorAction, EditorActionDef> = {
 /** Markdown-маркер для каждого инструмента форматирования. */
 export type FormatMarkers = Record<FormatTool, string>;
 
-/** Маркеры по умолчанию (из FORMAT_TOOLS): bold=**, italic=*, strike=~~, underline=++. */
+/** Маркеры по умолчанию (из FORMAT_TOOLS): bold=**, italic=_, strike=~, underline=__, spoiler=||, code=`. */
 export function defaultFormatMarkers(): FormatMarkers {
 	const markers = {} as FormatMarkers;
 	for (const tool of ALL_FORMAT_TOOLS) markers[tool] = FORMAT_TOOLS[tool].md;
@@ -114,3 +208,23 @@ export function parseFormatTools(value: string | null): FormatTool[] {
 export function parseEditorActions(value: string | null): EditorAction[] {
 	return value === null ? [] : parseList(value, ALL_EDITOR_ACTIONS);
 }
+
+/**
+ * Разбирает значение атрибута data-blocks. Блоки подключаются явно: без атрибута доступен
+ * только обычный текст. Он в наборе есть всегда — иначе блок некуда было бы вернуть.
+ */
+export function parseBlockTypes(value: string | null): BlockType[] {
+	return value === null ? [DEFAULT_BLOCK] : normalizeBlockTypes(parseList(value, ALL_BLOCK_TYPES));
+}
+
+/**
+ * Приводит набор типов к порядку объявления. Обычный текст в наборе есть всегда: им становится
+ * содержимое, не попавшее ни в какой блок, и в него же блок возвращают.
+ */
+export function normalizeBlockTypes(types: BlockType[] | undefined): BlockType[] {
+	if (!types) return [DEFAULT_BLOCK];
+
+	const list = ALL_BLOCK_TYPES.filter((type) => types.includes(type));
+
+	return list.includes(DEFAULT_BLOCK) ? list : [DEFAULT_BLOCK, ...list];
+}

package/source/format.ts

@@ -5,14 +5,20 @@
 //   paragraphs    — нормализация пробелов и приведение к абзацам <p>
 
 export {
+	ALL_BLOCK_TYPES,
 	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,
+	BLOCK_TYPES,
+	DEFAULT_BLOCK,
 	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
 	HOTKEY_TOOLS,
 	defaultFormatMarkers,
+	normalizeBlockTypes,
+	parseBlockTypes,
 	parseEditorActions,
 	parseFormatTools,
+	type BlockType,
 	type EditorAction,
 	type FormatMarkers,
 	type FormatStorage,
@@ -25,6 +31,8 @@ export {
 	innerSelection,
 	preserveCaret,
 	selectionCharBounds,
+	editorText,
+	charLength,
 	restoreSelection,
 	mapCharOffset,
 	activeFormats,
@@ -36,4 +44,13 @@ export {
 	insertFormattedText,
 	isFormatActive,
 } from "./selection";
-export { isBlock, normalizeWhitespace, normalizeParagraphs, ensureParagraphs } from "./paragraphs";
+export {
+	isBlock,
+	blockAt,
+	blockTypeOf,
+	blocksInRange,
+	createBlock,
+	normalizeWhitespace,
+	normalizeParagraphs,
+	ensureParagraphs,
+} from "./paragraphs";

package/source/index.ts

@@ -2,10 +2,14 @@ export { default } from "./richeditor";
 export * from "./richeditor";
 export { EMOJIS, EMOJI_GROUPS, type EmojiGroup } from "./emoji";
 export {
+	ALL_BLOCK_TYPES,
 	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,
+	BLOCK_TYPES,
+	DEFAULT_BLOCK,
 	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
+	parseBlockTypes,
 	parseEditorActions,
 	parseFormatTools,
 	defaultFormatMarkers,
@@ -13,6 +17,7 @@ export {
 	selectionCharBounds,
 	restoreSelection,
 	preserveCaret,
+	type BlockType,
 	type EditorAction,
 	type FormatTool,
 	type FormatStorage,