@datarobot/design-system 28.4.0 → 28.6.0

package/js/bundle/bundle.js

@@ -44136,15 +44136,20 @@ function ChatMessageBodyBase(_ref) {
     onBlur: onBlur,
     "aria-label": readOnly ? undefined : textBoxAriaLabel,
     onDOMBeforeInput: function onDOMBeforeInput(event) {
-      var _event$data$length, _event$data;
       // we have logic to prevent entering text longer than maxLength in hocs.ts
       // but there we prevent it only from updating slate inner state, html input still
       // adds entered text to the DOM input field causing buggy behavior: https://datarobot.atlassian.net/browse/TESTLIO-2963
       // preventing default from the onDOMBeforeInput won't add new character to the DOM input field.
-      // we still won't to leave logic in hocs.ts as a fallback + it also covers copy+paste logic which doesn't trigger onDOMBeforeInput
-      var existingMentionsCount = (0,_utils__WEBPACK_IMPORTED_MODULE_11__.getMentionsCount)(editor.children);
-      if (slate__WEBPACK_IMPORTED_MODULE_2__.Editor.string(editor, []).length + existingMentionsCount + ((_event$data$length = event === null || event === void 0 || (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.length) !== null && _event$data$length !== void 0 ? _event$data$length : 0) > maxLength) {
-        event.preventDefault();
+      // we still want to leave logic in hocs.ts because it covers copy+paste case, as for some reason
+      // under certain circumstances onDOMBeforeInput stops being triggering for copy+paste so having there is safer
+
+      // we want to always allow deleting text
+      if (!event.inputType.startsWith('delete')) {
+        var _event$data$length, _event$data;
+        var existingMentionsCount = (0,_utils__WEBPACK_IMPORTED_MODULE_11__.getMentionsCount)(editor.children);
+        if (!!event.data && slate__WEBPACK_IMPORTED_MODULE_2__.Editor.string(editor, []).length + existingMentionsCount + ((_event$data$length = event === null || event === void 0 || (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.length) !== null && _event$data$length !== void 0 ? _event$data$length : 0) > maxLength) {
+          event.preventDefault();
+        }
       }
     }
   })), hasMentionsSupport && isFocused && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_dropdown__WEBPACK_IMPORTED_MODULE_5__.PopperDropdownWrapper, {
@@ -44562,32 +44567,32 @@ var MENTION_SEARCH_FIELDS = [MENTION_SEARCH_FIELD];
 
 var withMaxLength = function withMaxLength(maxLength) {
   return function Plugin(editor) {
-    var insertText = editor.insertText,
-      insertData = editor.insertData;
-
-    // we are preventing inserting text if it exceeds maxLength in onDOMBeforeInput event handler in Editor component
-    // but I'd leave it here as well for safety in case onDOMBeforeInput stops working for some reason + we still need
-    // insertData to handle copy+paste logic which doesn't trigger onDOMBeforeInput
-    editor.insertText = function (text) {
-      var existingMentionsCount = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getMentionsCount)(editor.children);
-      if (slate__WEBPACK_IMPORTED_MODULE_0__.Editor.string(editor, []).length + existingMentionsCount < maxLength) {
-        insertText(text);
-      }
-    };
-    editor.insertData = function (data) {
-      var existingMentionsCount = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getMentionsCount)(editor.children);
-      var text = data.getData('text/plain');
-      var html = data.getData('text/html');
-      var parsedHtml = new DOMParser().parseFromString(html, 'text/html');
-      var mentionNodes = parsedHtml.querySelectorAll('.mention');
-      var mentionsText = Array.from(mentionNodes).map(function (node) {
-        return node.innerText;
-      }).join('');
-      var itemsLengthToBeInserted = mentionNodes.length ? text.length - mentionsText.length : text.length;
-      if (slate__WEBPACK_IMPORTED_MODULE_0__.Editor.string(editor, []).length + itemsLengthToBeInserted + existingMentionsCount <= maxLength) {
-        insertData(data);
-      }
-    };
+    var insertData = editor.insertData;
+
+    // usual text insertion prevention is handled in onDOMBeforeInput event on the Editable component
+    // this case prevents copy-paste of text that would exceed the maxLength
+    // copy-paste could have been also handled in onDOMBeforeInput, but for
+    // some reason sometimes Slate stops triggering onDOMBeforeInput for copy-paste ¯\_(ツ)_/¯
+    if (maxLength) {
+      editor.insertData = function (data) {
+        var _data$getData;
+        var existingMentionsCount = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getMentionsCount)(editor.children);
+        // other methods for inserting text does not take into account new lines, so when copy-pasting
+        // we should also remove them, otherwise there is a bug when entered text cannot be cut and pasted
+        // because on paste text length is considered longer due to \n characters
+        var text = (_data$getData = data.getData('text/plain')) === null || _data$getData === void 0 ? void 0 : _data$getData.replace(/\n/g, '');
+        var html = data.getData('text/html');
+        var parsedHtml = new DOMParser().parseFromString(html, 'text/html');
+        var mentionNodes = parsedHtml.querySelectorAll('.mention');
+        var mentionsText = Array.from(mentionNodes).map(function (node) {
+          return node.innerText;
+        }).join('');
+        var itemsLengthToBeInserted = mentionNodes.length ? text.length - mentionsText.length : text.length;
+        if (slate__WEBPACK_IMPORTED_MODULE_0__.Editor.string(editor, []).length + itemsLengthToBeInserted + existingMentionsCount <= maxLength) {
+          insertData(data);
+        }
+      };
+    }
     return editor;
   };
 };
@@ -44617,15 +44622,21 @@ var withMentions = function withMentions(editor) {
 
 "use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CharactersCounter: () => (/* reexport safe */ _characters_counter__WEBPACK_IMPORTED_MODULE_1__.CharactersCounter),
 /* harmony export */   Chat: () => (/* reexport safe */ _chat__WEBPACK_IMPORTED_MODULE_0__.Chat),
-/* harmony export */   DEFAULT_VALUE: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_VALUE),
-/* harmony export */   NEW_ITEM_KEY: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_2__.NEW_ITEM_KEY),
-/* harmony export */   isMentionElement: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_1__.isMentionElement),
-/* harmony export */   resetNodes: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_1__.resetNodes)
+/* harmony export */   DEFAULT_VALUE: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_VALUE),
+/* harmony export */   NEW_ITEM_KEY: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_4__.NEW_ITEM_KEY),
+/* harmony export */   isMentionElement: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_2__.isMentionElement),
+/* harmony export */   resetNodes: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_2__.resetNodes),
+/* harmony export */   withMaxLength: () => (/* reexport safe */ _hocs__WEBPACK_IMPORTED_MODULE_3__.withMaxLength)
 /* harmony export */ });
 /* harmony import */ var _chat__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./chat */ "./src/components/chat/chat.tsx");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ "./src/components/chat/utils.ts");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ "./src/components/chat/constants.ts");
+/* harmony import */ var _characters_counter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./characters-counter */ "./src/components/chat/characters-counter.tsx");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ "./src/components/chat/utils.ts");
+/* harmony import */ var _hocs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./hocs */ "./src/components/chat/hocs.ts");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ "./src/components/chat/constants.ts");
+
+
 
 
 
@@ -44956,7 +44967,9 @@ var Checkbox = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   }));
   if (!hasParentTooltip) {
     if (isTruncatable) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, checkboxInput, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_3__.TruncateWithTooltip, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+        className: "checkbox-wrapper"
+      }, checkboxInput, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_truncate_with_tooltip__WEBPACK_IMPORTED_MODULE_3__.TruncateWithTooltip, {
         tooltipDocsLink: tooltipDocsLink,
         tooltipText: getDefaultTooltipText(),
         tooltipPlacement: tooltipPlacement
@@ -44967,12 +44980,14 @@ var Checkbox = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
         placement: _tooltip__WEBPACK_IMPORTED_MODULE_4__.TOOLTIP_PLACEMENT_TYPES.TOP || tooltipPlacement,
         content: tooltipText
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-        className: "checkbox-tooltip-container",
+        className: "checkbox-wrapper checkbox-tooltip-container",
         "test-id": "checkbox-tooltip-container"
       }, checkboxInput, label));
     }
   }
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, checkboxInput, label);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "checkbox-wrapper"
+  }, checkboxInput, label);
 });
 Checkbox.displayName = 'Checkbox';
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Checkbox);
@@ -63770,6 +63785,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   CardHeader: () => (/* reexport safe */ _custom_card__WEBPACK_IMPORTED_MODULE_22__.CardHeader),
 /* harmony export */   CardLabel: () => (/* reexport safe */ _custom_card__WEBPACK_IMPORTED_MODULE_22__.CardLabel),
 /* harmony export */   CardTitle: () => (/* reexport safe */ _custom_card__WEBPACK_IMPORTED_MODULE_22__.CardTitle),
+/* harmony export */   CharactersCounter: () => (/* reexport safe */ _chat__WEBPACK_IMPORTED_MODULE_13__.CharactersCounter),
 /* harmony export */   ChartLegend: () => (/* reexport safe */ _chart_legend__WEBPACK_IMPORTED_MODULE_12__.ChartLegend),
 /* harmony export */   ChartLegendItem: () => (/* reexport safe */ _chart_legend__WEBPACK_IMPORTED_MODULE_12__.ChartLegendItem),
 /* harmony export */   ChartLegendItemGlyph: () => (/* reexport safe */ _chart_legend__WEBPACK_IMPORTED_MODULE_12__.ChartLegendItemGlyph),
@@ -64095,6 +64111,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useTreeNavigation: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_45__.useTreeNavigation),
 /* harmony export */   useTreeNodeNavigation: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_45__.useTreeNodeNavigation),
 /* harmony export */   withExpandableContent: () => (/* reexport safe */ _table__WEBPACK_IMPORTED_MODULE_86__.withExpandableContent),
+/* harmony export */   withMaxLength: () => (/* reexport safe */ _chat__WEBPACK_IMPORTED_MODULE_13__.withMaxLength),
 /* harmony export */   withTableCellCheckboxes: () => (/* reexport safe */ _table__WEBPACK_IMPORTED_MODULE_86__.withTableCellCheckboxes),
 /* harmony export */   withTableDataSorting: () => (/* reexport safe */ _table__WEBPACK_IMPORTED_MODULE_86__.withTableDataSorting),
 /* harmony export */   withTableRowSelection: () => (/* reexport safe */ _table__WEBPACK_IMPORTED_MODULE_86__.withTableRowSelection),
@@ -79649,7 +79666,9 @@ function InlineTextEditor(_ref) {
     onSave = _ref.onSave,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    deleteEditorContentButtonAriaLabel = _ref.deleteEditorContentButtonAriaLabel;
+    deleteEditorContentButtonAriaLabel = _ref.deleteEditorContentButtonAriaLabel,
+    maxLength = _ref.maxLength,
+    getCharactersCounterString = _ref.getCharactersCounterString;
   var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_6__.useTranslation)(),
     t = _useTranslation.t;
   var initialTitle = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
@@ -79727,7 +79746,9 @@ function InlineTextEditor(_ref) {
     height: height,
     testId: "inline-text-editor-edit",
     contentAriaLabel: ariaLabel || titleValue,
-    deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel !== null && deleteEditorContentButtonAriaLabel !== void 0 ? deleteEditorContentButtonAriaLabel : t('Delete Editor Content')
+    deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel !== null && deleteEditorContentButtonAriaLabel !== void 0 ? deleteEditorContentButtonAriaLabel : t('Delete Editor Content'),
+    maxLength: maxLength,
+    getCharactersCounterString: getCharactersCounterString
   }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _extends({
     "test-id": "inline-text-editor-view-container",
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('inline-text-editor-view-container', isFlex && 'is-flex')
@@ -79757,9 +79778,7 @@ function InlineTextEditor(_ref) {
 /* harmony export */   TEXT_EDITOR_DEFAULT_TOOLS: () => (/* binding */ TEXT_EDITOR_DEFAULT_TOOLS),
 /* harmony export */   TEXT_EDITOR_DEFAULT_VALUE: () => (/* binding */ TEXT_EDITOR_DEFAULT_VALUE),
 /* harmony export */   TEXT_EDITOR_TOOLS: () => (/* binding */ TEXT_EDITOR_TOOLS),
-/* harmony export */   TOOLBAR_POSITION: () => (/* binding */ TOOLBAR_POSITION),
-/* harmony export */   instanceOfContent: () => (/* binding */ instanceOfContent),
-/* harmony export */   instanceOfContentChild: () => (/* binding */ instanceOfContentChild)
+/* harmony export */   TOOLBAR_POSITION: () => (/* binding */ TOOLBAR_POSITION)
 /* harmony export */ });
 var MARK_TYPES = {
   BOLD: 'bold',
@@ -79794,12 +79813,6 @@ var TEXT_EDITOR_TOOLS = {
   CODE: 'code',
   CLEAR_FORMATTING: 'clear-formatting'
 };
-function instanceOfContentChild(obj) {
-  return 'text' in obj;
-}
-function instanceOfContent(obj) {
-  return !('text' in obj);
-}
 var TEXT_EDITOR_DEFAULT_VALUE = [{
   type: BLOCK_TYPES.REGULAR_TEXT,
   children: [{
@@ -79842,12 +79855,14 @@ var HEADER_TITLE_MAX_LENGTH = 50;
 /* unused harmony export Placeholder */
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _text_editor_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./text-editor-context */ "./src/components/text-editor/text-editor-context.ts");
-/* harmony import */ var _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./text-editor-constants */ "./src/components/text-editor/text-editor-constants.ts");
-/* harmony import */ var _text_editor_content_less__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./text-editor-content.less */ "./src/components/text-editor/text-editor-content.less");
-/* harmony import */ var _text_editor_content_less__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_text_editor_content_less__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var slate__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! slate */ "slate");
+/* harmony import */ var slate__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(slate__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _text_editor_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./text-editor-context */ "./src/components/text-editor/text-editor-context.ts");
+/* harmony import */ var _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./text-editor-constants */ "./src/components/text-editor/text-editor-constants.ts");
+/* harmony import */ var _text_editor_content_less__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./text-editor-content.less */ "./src/components/text-editor/text-editor-content.less");
+/* harmony import */ var _text_editor_content_less__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_text_editor_content_less__WEBPACK_IMPORTED_MODULE_5__);
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["opacity"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -79863,39 +79878,40 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 
 
+
 var Element = function Element(_ref) {
   var attributes = _ref.attributes,
     children = _ref.children,
     element = _ref.element;
   switch (element.type) {
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.HEADLINE_LARGE:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.HEADLINE_LARGE:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", _extends({}, attributes, {
         className: "large-text-header",
         "test-id": "large-text"
       }), children);
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.HEADLINE_MEDIUM:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.HEADLINE_MEDIUM:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", _extends({}, attributes, {
         className: "medium-text-header",
         "test-id": "medium-text"
       }), children);
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.HEADLINE_SMALL:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.HEADLINE_SMALL:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", _extends({}, attributes, {
         className: "small-text-header",
         "test-id": "small-text"
       }), children);
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.BULLETED_LIST:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.BULLETED_LIST:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", _extends({}, attributes, {
         className: "list",
         "test-id": "bulleted-list"
       }), children);
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.NUMBERED_LIST:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.NUMBERED_LIST:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ol", _extends({}, attributes, {
         className: "list",
         "test-id": "numbered-list"
       }), children);
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.LIST_ITEM:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.LIST_ITEM:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", attributes, children);
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.LINK:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.LINK:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", _extends({}, attributes, {
         target: "_blank",
         rel: "noreferrer",
@@ -79903,7 +79919,7 @@ var Element = function Element(_ref) {
         href: element.url,
         "test-id": "anchor-link"
       }), children);
-    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.BLOCK_TYPES.CODE:
+    case _text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.BLOCK_TYPES.CODE:
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
         className: "code-block",
         "test-id": "code-block"
@@ -79920,25 +79936,25 @@ var Leaf = function Leaf(_ref2) {
     children = _ref2.children,
     leaf = _ref2.leaf;
   var node = children;
-  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.MARK_TYPES.BOLD]) {
+  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.MARK_TYPES.BOLD]) {
     node = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "bold",
       "test-id": "bold-text"
     }, node);
   }
-  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.MARK_TYPES.ITALIC]) {
+  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.MARK_TYPES.ITALIC]) {
     node = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "italic",
       "test-id": "italic-text"
     }, node);
   }
-  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.MARK_TYPES.UNDERLINE]) {
+  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.MARK_TYPES.UNDERLINE]) {
     node = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "underlined",
       "test-id": "underlined-text"
     }, node);
   }
-  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_3__.MARK_TYPES.SUPERSCRIPT]) {
+  if (leaf[_text_editor_constants__WEBPACK_IMPORTED_MODULE_4__.MARK_TYPES.SUPERSCRIPT]) {
     node = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "superscript",
       "test-id": "superscript-text"
@@ -79981,10 +79997,13 @@ function TextEditorContent(_ref4) {
     _ref4$onBlur = _ref4.onBlur,
     onBlur = _ref4$onBlur === void 0 ? function () {} : _ref4$onBlur,
     _ref4$onFocus = _ref4.onFocus,
-    onFocus = _ref4$onFocus === void 0 ? function () {} : _ref4$onFocus;
-  var _useContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_text_editor_context__WEBPACK_IMPORTED_MODULE_2__["default"]),
+    onFocus = _ref4$onFocus === void 0 ? function () {} : _ref4$onFocus,
+    maxLength = _ref4.maxLength;
+  var _useContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_text_editor_context__WEBPACK_IMPORTED_MODULE_3__["default"]),
     slateReact = _useContext.slateReact;
-  var Editable = slateReact.Editable;
+  var Editable = slateReact.Editable,
+    useSlate = slateReact.useSlate;
+  var editor = useSlate();
   /* eslint-disable-next-line testing-library/render-result-naming-convention */
   var ElementNode = elementRender;
   /* eslint-disable-next-line testing-library/render-result-naming-convention */
@@ -80007,7 +80026,7 @@ function TextEditorContent(_ref4) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Placeholder, props);
   }, []);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('text-editor-content', {
+    className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('text-editor-content', {
       'is-scrollable': isScrollable
     }),
     "test-id": testId
@@ -80020,7 +80039,23 @@ function TextEditorContent(_ref4) {
     renderElement: renderElement,
     renderLeaf: renderLeaf,
     onBlur: onBlur,
-    onFocus: onFocus
+    onFocus: onFocus,
+    onDOMBeforeInput: function onDOMBeforeInput(event) {
+      // NOTE: copy-paste events handled in withMaxLength() plugin because Slate under some
+      // circumstances stops triggering onDOMBeforeInput event for copy-paste ¯\_(ツ)_/¯
+
+      // no need to do any calculations if maxLength is not set or if it's a delete event
+      if (maxLength && !event.inputType.startsWith('delete')) {
+        var currentTextLength = slate__WEBPACK_IMPORTED_MODULE_1__.Editor.string(editor, []).length;
+        var newText = '';
+        if (!!event.data) {
+          newText = event.data;
+        }
+        if (currentTextLength + newText.length > maxLength) {
+          event.preventDefault();
+        }
+      }
+    }
   }, ariaAttrs)));
 }
 
@@ -80076,12 +80111,6 @@ var TextEditorContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default(
 /* harmony import */ var _text_editor_service__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./text-editor-service */ "./src/components/text-editor/text-editor-service.ts");
 /* harmony import */ var _text_editor_header_less__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./text-editor-header.less */ "./src/components/text-editor/text-editor-header.less");
 /* harmony import */ var _text_editor_header_less__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_text_editor_header_less__WEBPACK_IMPORTED_MODULE_8__);
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
@@ -80110,10 +80139,6 @@ function TextEditorHeader(_ref) {
     inputAriaLabel = _ref.inputAriaLabel;
   var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_2__.useTranslation)(),
     t = _useTranslation.t;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDelete = _useState2[0],
-    setIsDelete = _useState2[1];
   var _useContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_text_editor_context__WEBPACK_IMPORTED_MODULE_6__["default"]),
     slate = _useContext.slate,
     slateReact = _useContext.slateReact;
@@ -80122,13 +80147,6 @@ function TextEditorHeader(_ref) {
   var editor = slateReact.useSlate();
   var hasReadOnlyTitle = title && !isEditable;
   var hasEditableTitle = isEditable && onChangeTitle;
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (isDelete) {
-      onChangeTitle('');
-      onDelete();
-      setIsDelete(false);
-    }
-  }, [isDelete]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("header", {
     className: "text-editor-header",
     "test-id": "text-editor-header"
@@ -80151,7 +80169,8 @@ function TextEditorHeader(_ref) {
     onClick: function onClick() {
       textEditorService.deleteContent(editor);
       ReactEditor.focus(editor);
-      setIsDelete(true);
+      onChangeTitle('');
+      onDelete();
     },
     accentType: _button__WEBPACK_IMPORTED_MODULE_3__.ACCENT_TYPES.ROUND_ICON,
     tooltipText: t('Delete'),
@@ -80174,6 +80193,7 @@ function TextEditorHeader(_ref) {
 "use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   convertTextToTextEditorValue: () => (/* binding */ convertTextToTextEditorValue),
+/* harmony export */   getTextEditorValueLength: () => (/* binding */ getTextEditorValueLength),
 /* harmony export */   hasGreaterTextEditorLinesThan: () => (/* binding */ hasGreaterTextEditorLinesThan),
 /* harmony export */   isEmptyTextEditorValue: () => (/* binding */ isEmptyTextEditorValue),
 /* harmony export */   isLongerTextEditorValueThan: () => (/* binding */ isLongerTextEditorValueThan)
@@ -80208,35 +80228,18 @@ function isLongerTextEditorValueThan(value) {
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var record = _step.value;
-      if ((0,_text_editor_constants__WEBPACK_IMPORTED_MODULE_1__.instanceOfContentChild)(record) && !!record.text) {
-        length += record.text.length;
-      }
-      if ((0,_text_editor_constants__WEBPACK_IMPORTED_MODULE_1__.instanceOfContent)(record) && !!record.children) {
-        var _iterator2 = _createForOfIteratorHelper(record.children),
-          _step2;
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var childRecord = _step2.value;
-            if (!!childRecord.text) {
-              length += childRecord.text.length;
-            }
-
-            // We already know the result
-            if (length > maxLength) {
-              break;
-            }
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
-        }
-      }
-
-      // We already know the result
+      // if we reached maxLength - no need to continue
       if (length > maxLength) {
         break;
       }
+      // if this is leaf node that has text - sum it up
+      if (record.hasOwnProperty('text') && !!record.text) {
+        var _text$length, _text;
+        length += (_text$length = record === null || record === void 0 || (_text = record.text) === null || _text === void 0 ? void 0 : _text.length) !== null && _text$length !== void 0 ? _text$length : 0;
+      } else if (record.hasOwnProperty('children') && !!record.children) {
+        // if this is a node that has children - calculate length of children
+        length += getTextEditorValueLength(record.children);
+      }
     }
   } catch (err) {
     _iterator.e(err);
@@ -80245,6 +80248,29 @@ function isLongerTextEditorValueThan(value) {
   }
   return length > maxLength;
 }
+function getTextEditorValueLength(value) {
+  var length = 0;
+  var _iterator2 = _createForOfIteratorHelper(value),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var record = _step2.value;
+      // if this is leaf node that has text - sum it up
+      if (record.hasOwnProperty('text') && !!record.text) {
+        var _text$length2, _text2;
+        length += (_text$length2 = record === null || record === void 0 || (_text2 = record.text) === null || _text2 === void 0 ? void 0 : _text2.length) !== null && _text$length2 !== void 0 ? _text$length2 : 0;
+      } else if (record.hasOwnProperty('children') && !!record.children) {
+        // if this is a node that has children - iterate through them via recursion
+        length += getTextEditorValueLength(record.children);
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return length;
+}
 
 /**
  * @param {Array} value - the type of value is defined with TextEditorValue
@@ -81450,7 +81476,7 @@ function TextEditorToolbar(_ref) {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
+/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
 /* harmony import */ var slate_history__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! slate-history */ "slate-history");
 /* harmony import */ var slate_history__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(slate_history__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _form_field__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../form-field */ "./src/components/form-field/index.ts");
@@ -81463,8 +81489,10 @@ function TextEditorToolbar(_ref) {
 /* harmony import */ var _text_editor_loader__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./text-editor-loader */ "./src/components/text-editor/text-editor-loader.tsx");
 /* harmony import */ var _text_editor_constants__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./text-editor-constants */ "./src/components/text-editor/text-editor-constants.ts");
 /* harmony import */ var _text_editor_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./text-editor-hooks */ "./src/components/text-editor/text-editor-hooks.ts");
-/* harmony import */ var _text_editor_less__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./text-editor.less */ "./src/components/text-editor/text-editor.less");
-/* harmony import */ var _text_editor_less__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_text_editor_less__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var _text_editor_helpers__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./text-editor-helpers */ "./src/components/text-editor/text-editor-helpers.ts");
+/* harmony import */ var _hooks_use_translation__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../hooks/use-translation */ "./src/components/hooks/use-translation/index.ts");
+/* harmony import */ var _text_editor_less__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./text-editor.less */ "./src/components/text-editor/text-editor.less");
+/* harmony import */ var _text_editor_less__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(_text_editor_less__WEBPACK_IMPORTED_MODULE_15__);
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -81492,6 +81520,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
+
 function TextEditorComponent(_ref) {
   var name = _ref.name,
     type = _ref.type,
@@ -81532,7 +81562,11 @@ function TextEditorComponent(_ref) {
     _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     deleteEditorContentButtonAriaLabel = _ref.deleteEditorContentButtonAriaLabel,
     _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id;
+    id = _ref$id === void 0 ? '' : _ref$id,
+    maxLength = _ref.maxLength,
+    getCharactersCounterString = _ref.getCharactersCounterString;
+  var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_14__.useTranslation)(),
+    t = _useTranslation.t;
   var _useContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_text_editor_context__WEBPACK_IMPORTED_MODULE_6__["default"]),
     slate = _useContext.slate,
     slateReact = _useContext.slateReact;
@@ -81542,13 +81576,21 @@ function TextEditorComponent(_ref) {
     createEditor = slate.createEditor;
   var withReact = slateReact.withReact,
     Slate = slateReact.Slate;
+  var getCharactersCounterStringText = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (count) {
+    if (getCharactersCounterString) {
+      return getCharactersCounterString(count);
+    }
+    return t('{{count}} characters remaining', {
+      count: count
+    });
+  }, [getCharactersCounterString]);
   var editor = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
-    return (0,_hooks_with_links__WEBPACK_IMPORTED_MODULE_9__["default"])((0,slate_history__WEBPACK_IMPORTED_MODULE_2__.withHistory)(withReact(createEditor())));
-  }, []);
+    return (0,_chat__WEBPACK_IMPORTED_MODULE_4__.withMaxLength)(maxLength)((0,_hooks_with_links__WEBPACK_IMPORTED_MODULE_9__["default"])((0,slate_history__WEBPACK_IMPORTED_MODULE_2__.withHistory)(withReact(createEditor()))));
+  }, [maxLength]);
   var selection = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var slateValue = value || initialValue || _text_editor_constants__WEBPACK_IMPORTED_MODULE_11__.TEXT_EDITOR_DEFAULT_VALUE;
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (!(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_14__["default"])(editor.children, slateValue)) {
+    if (!(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_16__["default"])(editor.children, slateValue)) {
       // Update the cached value inside the editor
       (0,_chat__WEBPACK_IMPORTED_MODULE_4__.resetNodes)(editor, slateValue);
     }
@@ -81612,7 +81654,8 @@ function TextEditorComponent(_ref) {
     hasDeleteButton: header.hasDeleteButton,
     onDelete: header.onDelete,
     deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel,
-    inputAriaLabel: header.inputAriaLabel
+    inputAriaLabel: header.inputAriaLabel,
+    maxLength: header.maxLength
   }), toolbarPosition === _text_editor_constants__WEBPACK_IMPORTED_MODULE_11__.TOOLBAR_POSITION.TOP && toolbarMemo, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_text_editor_content__WEBPACK_IMPORTED_MODULE_8__["default"], {
     placeholder: placeholder,
     readOnly: readOnly,
@@ -81622,8 +81665,13 @@ function TextEditorComponent(_ref) {
     leafRender: leafRender,
     onBlur: saveSelection,
     onFocus: recoverSelection,
-    ariaAttrs: ariaAttrs
-  }), toolbarPosition === _text_editor_constants__WEBPACK_IMPORTED_MODULE_11__.TOOLBAR_POSITION.BOTTOM && toolbarMemo)), validity && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_form_field__WEBPACK_IMPORTED_MODULE_3__.ValidityMessages, {
+    ariaAttrs: ariaAttrs,
+    maxLength: maxLength
+  }), toolbarPosition === _text_editor_constants__WEBPACK_IMPORTED_MODULE_11__.TOOLBAR_POSITION.BOTTOM && toolbarMemo)), maxLength && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chat__WEBPACK_IMPORTED_MODULE_4__.CharactersCounter, {
+    currLength: (0,_text_editor_helpers__WEBPACK_IMPORTED_MODULE_13__.getTextEditorValueLength)(slateValue),
+    maxLength: maxLength,
+    getCharactersCounterString: getCharactersCounterStringText
+  }), validity && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_form_field__WEBPACK_IMPORTED_MODULE_3__.ValidityMessages, {
     validity: validity,
     validationTestId: "".concat(name, "-validity"),
     fieldId: id
@@ -81693,7 +81741,9 @@ function TextEditor(_ref2) {
     linkInputLabelText = _ref2.linkInputLabelText,
     deleteEditorContentButtonAriaLabel = _ref2.deleteEditorContentButtonAriaLabel,
     _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? '' : _ref2$id;
+    id = _ref2$id === void 0 ? '' : _ref2$id,
+    maxLength = _ref2.maxLength,
+    getCharactersCounterString = _ref2.getCharactersCounterString;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -81757,7 +81807,9 @@ function TextEditor(_ref2) {
     leafRender: leafRender,
     onChange: onChange,
     deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel,
-    id: id
+    id: id,
+    maxLength: maxLength,
+    getCharactersCounterString: getCharactersCounterString
   })));
 }