@brandup/ui-textbox 1.0.34 → 1.0.38

package/README.md

@@ -2,11 +2,13 @@
 
 [![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>`, добавляя расширенное поведение: счётчик символов, кнопку копирования, фильтрацию ввода по типу, валидацию и опциональное форматирование текста (жирный, курсив, зачёркивание, подчёркивание).
+Компонент текстового поля. Заменяет стандартные `<input>` и `<textarea>`, добавляя расширенное поведение: счётчик символов, кнопку копирования, фильтрацию ввода по типу, валидацию и опциональное форматирование текста (жирный, курсив, зачёркивание, подчёркивание).
+
+Вся работа с редактируемой областью вынесена в [`@brandup/ui-richeditor`](../brandup-ui-richeditor): `TextBox` создаёт скрытое поле формы и компонует над ним `RichEditor`. Экземпляр редактора доступен через свойство `editor`.
 
 ## Установка
 
-```
+```bash
 npm i @brandup/ui-textbox
 ```
 
@@ -33,7 +35,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 `TextBox` принимает `<input>` со следующими значениями атрибута `type`:
 
 | Тип | Поведение |
-|---|---|
+| --- | --- |
 | `text` | Обычный текст |
 | `email` | Фильтрует недопустимые символы, ограничивает длину до 256 символов (RFC 5321) |
 | `url` | URL-адрес |
@@ -45,7 +47,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 ## Data-атрибуты
 
 | Атрибут | Описание |
-|---|---|
+| --- | --- |
 | `data-symbolcounter` | Показывает счётчик введённых символов (и максимума, если задан `maxlength`) |
 | `data-autofocus` | Автофокус при инициализации (игнорируется на touch-устройствах) |
 | `data-copy-button` | Добавляет кнопку копирования значения в буфер обмена |
@@ -53,6 +55,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `data-readonly` | Альтернативный способ задать режим только для чтения |
 | `data-format` | Включает форматирование текста (только для `type="text"`) |
 | `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline` |
+| `data-editor-actions` | Кнопки действий в панели через пробел (по умолчанию нет): `erase undo redo` |
 | `data-format-storage` | Формат хранения значения: `html` (по умолчанию) или `markdown` |
 | `data-format-md-bold` | Markdown-маркер для жирного (по умолчанию `**`) |
 | `data-format-md-italic` | Markdown-маркер для курсива (по умолчанию `*`) |
@@ -81,6 +84,12 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 
 Список через пробел из значений `bold`, `italic`, `strike`, `underline`. Неизвестные значения игнорируются. Если атрибут не задан — включаются все инструменты.
 
+### Кнопки действий — `data-editor-actions`
+
+Список через пробел из значений `erase` (очистить форматирование), `undo` (отменить), `redo` (повторить). В отличие от инструментов, действия подключаются явно: без атрибута кнопок действий нет. Они добавляются в панель после инструментов форматирования, отделяются разделителем и блокируются, когда действие недоступно (нечего отменять или очищать).
+
+`erase` снимает все форматы с выделения, а без выделения — со слова под кареткой. Чтобы очистить всё поле, выделите текст целиком (`Ctrl+A`) и нажмите кнопку.
+
 ### Применение формата
 
 - Формат — **переключатель** (toggle): повторное применение к уже отформатированному тексту снимает его.
@@ -98,7 +107,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 Значение синхронизируется в скрытое поле в выбранном формате:
 
 | Значение | Хранение | Поддерживаемые теги/маркеры |
-|---|---|---|
+| --- | --- | --- |
 | `html` (по умолчанию) | Санитизированный HTML | `<b>`, `<i>`, `<s>`, `<u>`, переводы строк через `<br>` |
 | `markdown` | Лёгкая разметка | `**жирный**`, `*курсив*`, `~~зачёркнутый~~`, `++подчёркнутый++` |
 
@@ -123,7 +132,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 ### Методы
 
 | Метод | Описание |
-|---|---|
+| --- | --- |
 | `getValue(): string` | Возвращает текущее значение (обрезает пробелы по краям) |
 | `setValue(value: string): void` | Устанавливает значение программно |
 | `hasValue(): boolean` | `true`, если значение не пустое |
@@ -134,7 +143,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 ### Свойства
 
 | Свойство | Тип | Описание |
-|---|---|---|
+| --- | --- | --- |
 | `type` | `TextBoxType` | Тип ввода: `"text"` \| `"email"` \| `"url"` \| `"tel"` \| `"number"` |
 | `multyline` | `boolean` | `true` для `<textarea>` |
 | `maxlength` | `number` | Максимальная длина (из атрибута `maxlength`) |
@@ -174,7 +183,7 @@ textbox.onChange((data) => { ... });
 ## CSS-классы состояний
 
 | Класс | Условие |
-|---|---|
+| --- | --- |
 | `focused` | Поле в фокусе |
 | `invalid` | Значение не прошло валидацию |
 | `incorrect` | Введён недопустимый символ (мигает, затем снимается) |

package/package.json

@@ -1,4 +1,7 @@
 {
+  "publishConfig": {
+    "access": "public"
+  },
   "name": "@brandup/ui-textbox",
   "description": "Textbox control type and styles.",
   "keywords": [
@@ -21,14 +24,15 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.34",
+  "version": "1.0.38",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
-    "@brandup/ui": "^2.0.3",
-    "@brandup/ui-helpers": "^2.0.3",
-    "@brandup/ui-input": "^1.0.34",
-    "@brandup/ui-kit": "^1.0.34"
+    "@brandup/ui": "^2.0.7",
+    "@brandup/ui-helpers": "^2.0.7",
+    "@brandup/ui-input": "^1.0.38",
+    "@brandup/ui-kit": "^1.0.38",
+    "@brandup/ui-richeditor": "^1.0.38"
   },
   "files": [
     "source",

package/source/index.ts

@@ -1,12 +1,18 @@
 export { default } from "./textbox";
 export * from "./textbox";
+
+// реэкспорт типов/утилит форматирования из @brandup/ui-richeditor для обратной совместимости
 export {
+	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,
+	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
+	parseEditorActions,
 	parseFormatTools,
 	defaultFormatMarkers,
 	normalizeWhitespace,
+	type EditorAction,
 	type FormatTool,
 	type FormatStorage,
 	type FormatMarkers,
-} from "./format";
+} from "@brandup/ui-richeditor";

package/source/textbox.less

@@ -46,11 +46,11 @@
 		box-sizing: border-box;
 		cursor: text;
 		position: relative;
-		overflow-y: auto;
 		z-index: 2;
 		margin-right: 5px;
 		padding-right: calc(var(--input-padding-lr) - 5px);
 		scrollbar-width: 6px;
+		overflow-y: auto;
 
 		&::-webkit-scrollbar {
 			width: 6px;
@@ -71,36 +71,15 @@
 		}
 	}
 
-	& .input {
-		appearance: none;
-		position: relative;
+	// редактор (@brandup/ui-richeditor) — занимает доступное место; внутреннее оформление в richeditor.less
+	& .ui-richeditor {
 		flex: 1 1 auto;
-		box-sizing: border-box;
-		word-wrap: anywhere;
-		white-space: pre-wrap; // сохраняем пробелы (в т.ч. ведущие/повторяющиеся), чтобы они были видны
-		outline: none;
-
-		&:empty {
-			&:after {
-				content: attr(data-placeholder);
-				display: block;
-				position: absolute;
-				left: 0;
-				top: 0;
-				right: 0;
-				color: var(--placeholder-color);
-				font-weight: var(--placeholder-font-weight);
-				font-style: var(--placeholder-font-style);
-				box-sizing: border-box;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
+		min-width: 0;
+	}
 
-			& ~ .symbols {
-				display: none;
-			}
-		}
+	// скрываем счётчик, пока редактор пуст (показан placeholder)
+	& .editor:has(.ui-richeditor:empty) .symbols {
+		display: none;
 	}
 
 	& .symbols {
@@ -154,76 +133,6 @@
 		}
 	}
 
-	// панель форматирования — плавающая панель над контролом, появляется в фокусе
-	& .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
@@ -234,15 +143,8 @@
 			gap: 2px;
 		}
 
-		& .input {
+		& .ui-richeditor {
 			flex: 1 10 auto;
-
-			&:empty {
-				&:after {
-					white-space: normal;
-					text-overflow: unset;
-				}
-			}
 		}
 	}