@brandup/ui-textbox 1.0.42 → 1.0.44

package/README.md

@@ -54,17 +54,17 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `data-allow-empty-strings` | Разрешает значение из одних пробелов |
 | `data-readonly` | Альтернативный способ задать режим только для чтения |
 | `data-format` | Включает форматирование текста (только для `type="text"`) |
-| `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline` |
+| `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline spoiler code` |
 | `data-editor-actions` | Кнопки действий в панели через пробел (по умолчанию нет): `erase undo redo` |
+| `data-blocks` | Типы блоков многострочного поля через пробел (по умолчанию все): `quote code`; пустое значение оставляет только обычный текст |
 | `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-md-<tool>` | Markdown-маркер инструмента: `bold` — `**`, `italic` — `_`, `strike` — `~`, `underline` — `__`, `spoiler` — `\|\|`, `code` — `` ` `` |
 
 ## Форматирование текста
 
-Атрибут `data-format` включает панель форматирования с инструментами: жирный, курсив, зачёркивание, подчёркивание. Панель всплывает над контролом, пока он в фокусе (класс состояния `focused`). Работает поверх существующего `contenteditable`-редактора, поэтому доступно только для текстового ввода (`type="text"` и `<textarea>`).
+Атрибут `data-format` включает панель форматирования с инструментами: жирный, курсив, зачёркивание, подчёркивание, спойлер, моноширинный. Панель всплывает над контролом, пока он в фокусе (класс состояния `focused`). Работает поверх существующего `contenteditable`-редактора, поэтому доступно только для текстового ввода (`type="text"` и `<textarea>`).
+
+Кнопка спойлера в панели временно скрыта (см. [`@brandup/ui-richeditor`](../brandup-ui-richeditor)): сам инструмент работает — значение разбирается, показывается и сохраняется.
 
 ```html
 <!-- все инструменты, хранение в HTML -->
@@ -82,21 +82,32 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 
 ### Состав инструментов — `data-format-tools`
 
-Список через пробел из значений `bold`, `italic`, `strike`, `underline`. Неизвестные значения игнорируются. Если атрибут не задан — включаются все инструменты.
+Список через пробел из значений `bold`, `italic`, `strike`, `underline`, `spoiler`, `code`. Неизвестные значения игнорируются. Если атрибут не задан — включаются все инструменты.
 
 ### Кнопки действий — `data-editor-actions`
 
-Список через пробел из значений `erase` (очистить форматирование), `undo` (отменить), `redo` (повторить). В отличие от инструментов, действия подключаются явно: без атрибута кнопок действий нет. Они добавляются в панель после инструментов форматирования, отделяются разделителем и блокируются, когда действие недоступно (нечего отменять или очищать).
+Список через пробел из значений `erase` (очистить форматирование), `undo` (отменить), `redo` (повторить). В отличие от инструментов, действия подключаются явно: без атрибута кнопок действий нет. Они добавляются в панель после инструментов форматирования, в один ряд с ними — всё это правка оформления, — и блокируются, когда действие недоступно (нечего отменять или очищать).
 
 `erase` снимает все форматы с выделения, а без выделения — со слова под кареткой. Чтобы очистить всё поле, выделите текст целиком (`Ctrl+A`) и нажмите кнопку.
 
+### Блоки — `data-blocks`
+
+В многострочном поле (`<textarea>`) верхний уровень состоит из блоков. Обычный текст доступен всегда, цитата (`quote`) и блок кода (`code`) — тоже; набор ограничивают списком через пробел:
+
+```html
+<textarea data-content-script="textbox" data-format data-blocks="quote"></textarea>
+```
+
+**Enter** внутри блока заканчивает его, **Shift+Enter** переносит строку внутри, **Backspace** в начале блока возвращает обычный текст. Разбор, хранение и правку блоков описывает [`@brandup/ui-richeditor`](../brandup-ui-richeditor).
+
 ### Применение формата
 
 - Формат — **переключатель** (toggle): повторное применение к уже отформатированному тексту снимает его.
 - Форматирование применяется **к слову целиком**: если курсор стоит внутри слова без выделения или выделена лишь его часть — формат охватывает всё слово. При выделении части нескольких слов каждая граница доводится до целого слова. Исходное выделение/каретка после применения сохраняются (слово не выделяется автоматически).
 - **Режим набора**: если под кареткой нет слова (курсор между пробелами или поле пустое), кнопка/хоткей не форматируют текст, а включают «ожидающий» формат — он подсветится активным и применится к следующему введённому тексту. Режим сбрасывается при перемещении каретки, клике или потере фокуса.
 - Кнопка инструмента подсвечивается (`active`), когда выделение целиком отформатировано этим инструментом или активен режим набора.
-- Реализация работает на стандартном Selection/Range API — без устаревшего `document.execCommand`, поэтому разметка всегда семантическая (`<b>`, `<i>`, `<s>`, `<u>`) и предсказуема между браузерами.
+- Внутри моноширинного разметки нет: значение берёт оттуда голый текст, поэтому остальные инструменты там недоступны, а попавшее внутрь форматирование снимается.
+- Реализация работает на стандартном Selection/Range API — без устаревшего `document.execCommand`, поэтому разметка всегда семантическая (`<b>`, `<i>`, `<s>`, `<u>`, `<spoiler>`, `<code>`) и предсказуема между браузерами.
 
 ### Хоткеи
 
@@ -108,8 +119,8 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 
 | Значение | Хранение | Поддерживаемые теги/маркеры |
 | --- | --- | --- |
-| `html` (по умолчанию) | Санитизированный HTML | `<b>`, `<i>`, `<s>`, `<u>`, переводы строк через `<br>` |
-| `markdown` | Лёгкая разметка | `**жирный**`, `*курсив*`, `~~зачёркнутый~~`, `++подчёркнутый++` |
+| `html` (по умолчанию) | Санитизированный HTML | `<b>`, `<i>`, `<s>`, `<u>`, `<spoiler>`, `<code>`, переводы строк через `<br>` |
+| `markdown` | Лёгкая разметка | `**жирный**`, `_курсив_`, `~зачёркнутый~`, `__подчёркнутый__`, `\|\|спойлер\|\|`, `` `моноширинный` `` |
 
 Маркеры для каждого инструмента настраиваются атрибутами `data-format-md-<tool>` (актуально только при `data-format-storage="markdown"`):
 
@@ -123,9 +134,11 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 ></textarea>
 ```
 
-При разборе маркеры применяются по убыванию длины, поэтому более длинный маркер (`__`) корректно срабатывает раньше короткого-префикса (`_`). Маркеры разных инструментов должны различаться.
+При разборе маркеры применяются по убыванию длины, поэтому более длинный маркер (`__`) срабатывает раньше короткого-префикса (`_`). Маркеры разных инструментов должны различаться.
+
+Разметку чужих диалектов редактор понимает наравне со своей и возвращает в значение такой же, какой она пришла: `*жирный*` из WhatsApp остаётся `*жирный*`, а настроенный маркер ставится только на то, что отформатировали в поле.
 
-> Markdown-режим не имеет стандартного маркера для подчёркивания — по умолчанию используется `++текст++`. Глубоко вложенные комбинации форматов (например, жирный внутри курсива) гарантированно сохраняются только в режиме `html`.
+> Глубоко вложенные комбинации форматов (например, жирный внутри курсива) гарантированно сохраняются только в режиме `html`.
 
 ## API
 
@@ -154,6 +167,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `formatStorage` | `FormatStorage` | Формат хранения: `"html"` \| `"markdown"` |
 | `formatTools` | `FormatTool[]` | Включённые инструменты форматирования |
 | `formatMarkers` | `FormatMarkers` | Markdown-маркеры по инструментам (с учётом переопределений) |
+| `editor` | `RichEditor` | Встроенный редактор: выделение, вставка текста, блоки |
 
 ### Событие textbox-change
 

package/package.json

@@ -24,15 +24,15 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.7",
     "@brandup/ui-helpers": "^2.0.7",
-    "@brandup/ui-input": "^1.0.42",
-    "@brandup/ui-kit": "^1.0.42",
-    "@brandup/ui-richeditor": "^1.0.42"
+    "@brandup/ui-input": "^1.0.44",
+    "@brandup/ui-kit": "^1.0.44",
+    "@brandup/ui-richeditor": "^1.0.44"
   },
   "files": [
     "source",