@brandup/ui-textbox 1.0.34 → 1.0.36

package/README.md

@@ -2,7 +2,9 @@
 
 [![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`.
 
 ## Установка
 

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.36",
   "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.5",
+    "@brandup/ui-helpers": "^2.0.5",
+    "@brandup/ui-input": "^1.0.36",
+    "@brandup/ui-kit": "^1.0.36",
+    "@brandup/ui-richeditor": "^1.0.36"
   },
   "files": [
     "source",

package/source/index.ts

@@ -1,5 +1,7 @@
 export { default } from "./textbox";
 export * from "./textbox";
+
+// реэкспорт типов/утилит форматирования из @brandup/ui-richeditor для обратной совместимости
 export {
 	ALL_FORMAT_TOOLS,
 	FORMAT_TOOLS,
@@ -9,4 +11,4 @@ export {
 	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;
-				}
-			}
 		}
 	}