@brandup/ui-textbox 1.0.40 → 1.0.42

package/package.json

@@ -24,15 +24,15 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "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.40",
-    "@brandup/ui-kit": "^1.0.40",
-    "@brandup/ui-richeditor": "^1.0.40"
+    "@brandup/ui-input": "^1.0.42",
+    "@brandup/ui-kit": "^1.0.42",
+    "@brandup/ui-richeditor": "^1.0.42"
   },
   "files": [
     "source",

package/source/index.ts

@@ -7,10 +7,12 @@ export {
 	ALL_FORMAT_TOOLS,
 	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
+	parseBlockTypes,
 	parseEditorActions,
 	parseFormatTools,
 	defaultFormatMarkers,
 	normalizeWhitespace,
+	type BlockType,
 	type EditorAction,
 	type FormatTool,
 	type FormatStorage,

package/source/textbox.less

@@ -49,26 +49,7 @@
 		z-index: 2;
 		margin-right: 5px;
 		padding-right: calc(var(--input-padding-lr) - 5px);
-		scrollbar-width: 6px;
-		overflow-y: auto;
-
-		&::-webkit-scrollbar {
-			width: 6px;
-			background: none;
-		}
-
-		&::-webkit-scrollbar-track {
-			border-radius: 3px;
-			background-color: transparent;
-			margin: 6px 0;
-			cursor: default;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: #8696a0;
-			border-radius: 3px;
-			cursor: default;
-		}
+		overflow-y: auto; // полоса прокрутки — общая, от .ui-scrollable кита
 	}
 
 	// редактор (@brandup/ui-richeditor) — занимает доступное место; внутреннее оформление в richeditor.less

package/source/textbox.ts

@@ -1,11 +1,12 @@
 import "./textbox.less"; // стили компонента
 
 import { InputControl } from "@brandup/ui-input";
-import { IS_TOUCH_DEVICE } from "@brandup/ui-kit";
+import { IS_TOUCH_DEVICE, SCROLLABLE_CLASS } from "@brandup/ui-kit";
 import { DOM } from "@brandup/ui";
 import { FuncHelper } from "@brandup/ui-helpers";
 import RichEditor, {
 	defaultFormatMarkers,
+	parseBlockTypes,
 	parseEditorActions,
 	parseFormatTools,
 	type FormatMarkers,
@@ -101,16 +102,18 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		// форматирование доступно только для обычного текстового ввода
 		const format = type === "text" && valueElem.hasAttribute("data-format");
-		const formatStorage: FormatStorage =
-			valueElem.getAttribute("data-format-storage") === "markdown" ? "markdown" : "html";
-		const formatTools = format ? parseFormatTools(valueElem.getAttribute("data-format-tools")) : [];
+		const formatStorage: FormatStorage = valueElem.dataset.formatStorage === "markdown" ? "markdown" : "html";
+		const formatTools = format ? parseFormatTools(valueElem.dataset.formatTools ?? null) : [];
 		// кнопки действий панели (очистка формата, отмена, повтор) — подключаются явно
-		const editorActions = format ? parseEditorActions(valueElem.getAttribute("data-editor-actions")) : [];
+		const editorActions = format ? parseEditorActions(valueElem.dataset.editorActions ?? null) : [];
+		// типы блоков (цитата, блок кода) — тоже явно и только в многострочном поле
+		const blocks = parseBlockTypes(multyline ? (valueElem.dataset.blocks ?? null) : null);
 
 		// markdown-маркеры с дефолтами, переопределяются атрибутами data-format-md-<tool>
 		const formatMarkers = defaultFormatMarkers();
 		if (format) {
 			for (const tool of Object.keys(formatMarkers) as FormatTool[]) {
+				// имя атрибута собирается на ходу: у dataset оно потребовало бы ручного camelCase
 				const marker = valueElem.getAttribute(`data-format-md-${tool}`)?.trim();
 				if (marker) formatMarkers[tool] = marker;
 			}
@@ -122,7 +125,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		const container = DOM.tag("div", { class: ROOT_CLASS }, [
 			DOM.tag("div", { class: "decorator" }),
-			DOM.tag("div", { class: "editor" }, [inputElem, symbolsCountElem]),
+			DOM.tag("div", { class: ["editor", SCROLLABLE_CLASS] }, [inputElem, symbolsCountElem]),
 			actionsElem,
 		]);
 
@@ -139,7 +142,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			// команда объявляется атрибутом data-command — по нему её ищет обработчик @brandup/ui
 			const buttonElem = DOM.tag(
 				"button",
-				{ "data-command": "copy-text", title: "Скопировать в буфер обмена" },
+				{ command: "copy-text", title: "Скопировать в буфер обмена" },
 				copyIcon
 			);
 			if (disabled) buttonElem.disabled = true;
@@ -184,6 +187,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			markers: formatMarkers,
 			placeholder,
 			multiline: multyline,
+			blocks,
 			readonly,
 			// тулбар позиционируется относительно контейнера TextBox (а не document.body)
 			toolbarContainer: container,