@datarobot/design-system 28.4.0 → 28.5.0

package/cjs/chat/chat-message-body.js

@@ -152,10 +152,15 @@ function ChatMessageBodyBase({
             // 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
-            const existingMentionsCount = (0, _utils.getMentionsCount)(editor.children);
-            if (_slate.Editor.string(editor, []).length + existingMentionsCount + (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')) {
+              const existingMentionsCount = (0, _utils.getMentionsCount)(editor.children);
+              if (!!event.data && _slate.Editor.string(editor, []).length + existingMentionsCount + (event?.data?.length ?? 0) > maxLength) {
+                event.preventDefault();
+              }
             }
           }
         })

package/cjs/chat/hocs.d.ts

@@ -1,3 +1,3 @@
 import { ReactEditor } from 'slate-react';
-export declare const withMaxLength: (maxLength: number) => (editor: ReactEditor) => ReactEditor;
+export declare const withMaxLength: (maxLength: number | undefined) => (editor: ReactEditor) => ReactEditor;
 export declare const withMentions: (editor: any) => any;

package/cjs/chat/hocs.js

@@ -8,31 +8,30 @@ var _slate = require("slate");
 var _utils = require("./utils");
 const withMaxLength = maxLength => function Plugin(editor) {
   const {
-    insertText,
     insertData
   } = editor;
 
-  // 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 = text => {
-    const existingMentionsCount = (0, _utils.getMentionsCount)(editor.children);
-    if (_slate.Editor.string(editor, []).length + existingMentionsCount < maxLength) {
-      insertText(text);
-    }
-  };
-  editor.insertData = data => {
-    const existingMentionsCount = (0, _utils.getMentionsCount)(editor.children);
-    const text = data.getData('text/plain');
-    const html = data.getData('text/html');
-    const parsedHtml = new DOMParser().parseFromString(html, 'text/html');
-    const mentionNodes = parsedHtml.querySelectorAll('.mention');
-    const mentionsText = Array.from(mentionNodes).map(node => node.innerText).join('');
-    const itemsLengthToBeInserted = mentionNodes.length ? text.length - mentionsText.length : text.length;
-    if (_slate.Editor.string(editor, []).length + itemsLengthToBeInserted + existingMentionsCount <= maxLength) {
-      insertData(data);
-    }
-  };
+  // 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 = data => {
+      const existingMentionsCount = (0, _utils.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
+      const text = data.getData('text/plain')?.replace(/\n/g, '');
+      const html = data.getData('text/html');
+      const parsedHtml = new DOMParser().parseFromString(html, 'text/html');
+      const mentionNodes = parsedHtml.querySelectorAll('.mention');
+      const mentionsText = Array.from(mentionNodes).map(node => node.innerText).join('');
+      const itemsLengthToBeInserted = mentionNodes.length ? text.length - mentionsText.length : text.length;
+      if (_slate.Editor.string(editor, []).length + itemsLengthToBeInserted + existingMentionsCount <= maxLength) {
+        insertData(data);
+      }
+    };
+  }
   return editor;
 };
 exports.withMaxLength = withMaxLength;

package/cjs/chat/index.d.ts

@@ -1,5 +1,7 @@
 export { Chat } from './chat';
+export { CharactersCounter } from './characters-counter';
 export { isMentionElement, resetNodes } from './utils';
+export { withMaxLength } from './hocs';
 export { DEFAULT_VALUE, NEW_ITEM_KEY } from './constants';
 export type { ChatMessageItem, ActiveItems } from './types';
 export type { ChatProps } from './chat';

package/cjs/chat/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CharactersCounter", {
+  enumerable: true,
+  get: function () {
+    return _charactersCounter.CharactersCounter;
+  }
+});
 Object.defineProperty(exports, "Chat", {
   enumerable: true,
   get: function () {
@@ -33,6 +39,14 @@ Object.defineProperty(exports, "resetNodes", {
     return _utils.resetNodes;
   }
 });
+Object.defineProperty(exports, "withMaxLength", {
+  enumerable: true,
+  get: function () {
+    return _hocs.withMaxLength;
+  }
+});
 var _chat = require("./chat");
+var _charactersCounter = require("./characters-counter");
 var _utils = require("./utils");
+var _hocs = require("./hocs");
 var _constants = require("./constants");

package/cjs/text-editor/inline-text-editor.d.ts

@@ -24,5 +24,7 @@ export type InlineTextEditorProps = {
     readOnly?: boolean;
     deleteEditorContentButtonAriaLabel?: string;
     autoFocus?: boolean;
+    maxLength?: number;
+    getCharactersCounterString?: (count: number) => string;
 };
-export default function InlineTextEditor({ name, type, readOnly, initialValue, placeholder, ariaLabel, className, enabledTools, header, toolbarPosition, height, onCancel, onSave, autoFocus, deleteEditorContentButtonAriaLabel, }: InlineTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function InlineTextEditor({ name, type, readOnly, initialValue, placeholder, ariaLabel, className, enabledTools, header, toolbarPosition, height, onCancel, onSave, autoFocus, deleteEditorContentButtonAriaLabel, maxLength, getCharactersCounterString, }: InlineTextEditorProps): import("react/jsx-runtime").JSX.Element;

package/cjs/text-editor/inline-text-editor.js

@@ -30,7 +30,9 @@ function InlineTextEditor({
   onCancel,
   onSave,
   autoFocus = false,
-  deleteEditorContentButtonAriaLabel
+  deleteEditorContentButtonAriaLabel,
+  maxLength,
+  getCharactersCounterString
 }) {
   const {
     t
@@ -102,7 +104,9 @@ function InlineTextEditor({
           height: height,
           testId: "inline-text-editor-edit",
           contentAriaLabel: ariaLabel || titleValue,
-          deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel ?? t('Delete Editor Content')
+          deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel ?? t('Delete Editor Content'),
+          maxLength: maxLength,
+          getCharactersCounterString: getCharactersCounterString
         }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           "test-id": "inline-text-editor-view-container",
           className: (0, _classnames.default)('inline-text-editor-view-container', isFlex && 'is-flex'),

package/cjs/text-editor/text-editor-constants.d.ts

@@ -74,8 +74,6 @@ export interface SlateReact {
     Slate: FC<SlateComponent>;
     withReact: typeof withReact;
 }
-export declare function instanceOfContentChild(obj: TextEditorValue | TextEditorValueChild): obj is TextEditorValueChild;
-export declare function instanceOfContent(obj: TextEditorValue | TextEditorValueChild): obj is TextEditorValue;
 export declare const TEXT_EDITOR_DEFAULT_VALUE: TextEditorValue[];
 export declare const TEXT_EDITOR_DEFAULT_TOOLS: TextEditorTool[];
 export interface TextEditorToolbarLabels {

package/cjs/text-editor/text-editor-constants.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TOOLBAR_POSITION = exports.TEXT_EDITOR_TOOLS = exports.TEXT_EDITOR_DEFAULT_VALUE = exports.TEXT_EDITOR_DEFAULT_TOOLS = exports.MARK_TYPES = exports.INLINE_EDITOR_TYPES = exports.HEADER_TITLE_MAX_LENGTH = exports.HEADER_HEIGHT = exports.BLOCK_TYPES = void 0;
-exports.instanceOfContent = instanceOfContent;
-exports.instanceOfContentChild = instanceOfContentChild;
 const MARK_TYPES = exports.MARK_TYPES = {
   BOLD: 'bold',
   ITALIC: 'italic',
@@ -39,12 +37,6 @@ const TEXT_EDITOR_TOOLS = exports.TEXT_EDITOR_TOOLS = {
   CODE: 'code',
   CLEAR_FORMATTING: 'clear-formatting'
 };
-function instanceOfContentChild(obj) {
-  return 'text' in obj;
-}
-function instanceOfContent(obj) {
-  return !('text' in obj);
-}
 const TEXT_EDITOR_DEFAULT_VALUE = exports.TEXT_EDITOR_DEFAULT_VALUE = [{
   type: BLOCK_TYPES.REGULAR_TEXT,
   children: [{

package/cjs/text-editor/text-editor-content.d.ts

@@ -35,5 +35,6 @@ export type TextEditorContentProps = {
     leafRender?: FC<LeafProps>;
     onBlur?: () => void;
     onFocus?: () => void;
+    maxLength?: number;
 };
-export default function TextEditorContent({ ariaAttrs, testId, placeholder, readOnly, autoFocus, isScrollable, elementRender, leafRender, onBlur, onFocus, }: TextEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export default function TextEditorContent({ ariaAttrs, testId, placeholder, readOnly, autoFocus, isScrollable, elementRender, leafRender, onBlur, onFocus, maxLength, }: TextEditorContentProps): import("react/jsx-runtime").JSX.Element;

package/cjs/text-editor/text-editor-content.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Placeholder = exports.Leaf = exports.Element = void 0;
 exports.default = TextEditorContent;
 var _react = _interopRequireWildcard(require("react"));
+var _slate = require("slate");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _textEditorContext = _interopRequireDefault(require("./text-editor-context"));
 var _textEditorConstants = require("./text-editor-constants");
@@ -158,14 +159,17 @@ function TextEditorContent({
   elementRender = Element,
   leafRender = Leaf,
   onBlur = () => {},
-  onFocus = () => {}
+  onFocus = () => {},
+  maxLength
 }) {
   const {
     slateReact
   } = (0, _react.useContext)(_textEditorContext.default);
   const {
-    Editable
+    Editable,
+    useSlate
   } = slateReact;
+  const editor = useSlate();
   /* eslint-disable-next-line testing-library/render-result-naming-convention */
   const ElementNode = elementRender;
   /* eslint-disable-next-line testing-library/render-result-naming-convention */
@@ -202,6 +206,22 @@ function TextEditorContent({
       renderLeaf: renderLeaf,
       onBlur: onBlur,
       onFocus: onFocus,
+      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')) {
+          const currentTextLength = _slate.Editor.string(editor, []).length;
+          let newText = '';
+          if (!!event.data) {
+            newText = event.data;
+          }
+          if (currentTextLength + newText.length > maxLength) {
+            event.preventDefault();
+          }
+        }
+      },
       ...ariaAttrs
     })
   });

package/cjs/text-editor/text-editor-header.js

@@ -29,7 +29,6 @@ function TextEditorHeader({
   const {
     t
   } = (0, _useTranslation.useTranslation)();
-  const [isDelete, setIsDelete] = (0, _react.useState)(false);
   const {
     slate,
     slateReact
@@ -41,13 +40,6 @@ function TextEditorHeader({
   const editor = slateReact.useSlate();
   const hasReadOnlyTitle = title && !isEditable;
   const hasEditableTitle = isEditable && onChangeTitle;
-  (0, _react.useEffect)(() => {
-    if (isDelete) {
-      onChangeTitle('');
-      onDelete();
-      setIsDelete(false);
-    }
-  }, [isDelete]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
     className: "text-editor-header",
     "test-id": "text-editor-header",
@@ -71,7 +63,8 @@ function TextEditorHeader({
         onClick: () => {
           textEditorService.deleteContent(editor);
           ReactEditor.focus(editor);
-          setIsDelete(true);
+          onChangeTitle('');
+          onDelete();
         },
         accentType: _button.ACCENT_TYPES.ROUND_ICON,
         tooltipText: t('Delete'),

package/cjs/text-editor/text-editor-helpers.d.ts

@@ -10,6 +10,7 @@ export declare function isEmptyTextEditorValue(value: TextEditorValue[]): boolea
  * @returns {boolean}
  */
 export declare function isLongerTextEditorValueThan(value: TextEditorValue[] | TextEditorValueChild[], maxLength?: number): boolean;
+export declare function getTextEditorValueLength(value: TextEditorValue[] | TextEditorValueChild[]): number;
 /**
  * @param {Array} value - the type of value is defined with TextEditorValue
  * @param {number} maxTextLines

package/cjs/text-editor/text-editor-helpers.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertTextToTextEditorValue = convertTextToTextEditorValue;
+exports.getTextEditorValueLength = getTextEditorValueLength;
 exports.hasGreaterTextEditorLinesThan = hasGreaterTextEditorLinesThan;
 exports.isEmptyTextEditorValue = isEmptyTextEditorValue;
 exports.isLongerTextEditorValueThan = isLongerTextEditorValueThan;
@@ -26,29 +27,33 @@ function isEmptyTextEditorValue(value) {
 function isLongerTextEditorValueThan(value, maxLength = 120) {
   let length = 0;
   for (const record of value) {
-    if ((0, _textEditorConstants.instanceOfContentChild)(record) && !!record.text) {
-      length += record.text.length;
-    }
-    if ((0, _textEditorConstants.instanceOfContent)(record) && !!record.children) {
-      for (const childRecord of record.children) {
-        if (!!childRecord.text) {
-          length += childRecord.text.length;
-        }
-
-        // We already know the result
-        if (length > maxLength) {
-          break;
-        }
-      }
-    }
-
-    // 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) {
+      length += record?.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);
+    }
   }
   return length > maxLength;
 }
+function getTextEditorValueLength(value) {
+  let length = 0;
+  for (const record of value) {
+    // if this is leaf node that has text - sum it up
+    if (record.hasOwnProperty('text') && !!record.text) {
+      length += record?.text?.length ?? 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);
+    }
+  }
+  return length;
+}
 
 /**
  * @param {Array} value - the type of value is defined with TextEditorValue

package/cjs/text-editor/text-editor.d.ts

@@ -38,6 +38,8 @@ export type TextEditorComponentProps = {
     onBlur?: () => void;
     deleteEditorContentButtonAriaLabel: string;
     id: string;
+    maxLength?: number;
+    getCharactersCounterString?: (count: number) => string;
 };
 export type TextEditorProps = {
     name: string;
@@ -94,9 +96,11 @@ export type TextEditorProps = {
     linkInputLabelText?: string;
     deleteEditorContentButtonAriaLabel: string;
     id?: string;
+    maxLength?: number;
+    getCharactersCounterString?: (count: number) => string;
 };
 /**
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-export default function TextEditor({ name, header, type, value, initialValue, validity, label, placeholder, autoFocus, readOnly, testId, contentTestId, contentAriaLabel, className, height, enabledTools, toolbarPosition, elementRender, leafRender, onChange, onCancel, onSave, tooltipTextBold, tooltipTextItalic, tooltipTextUnderline, tooltipTextSuperscript, tooltipTextLink, tooltipTextRemoveLink, tooltipTextBulletedList, tooltipTextNumberedList, tooltipTextClearFormatting, tooltipTextCode, urlIsRequiredMessage, enterValidUrlMessage, saveButtonText, headingLargeText, headingMediumText, headingSmallText, regularText, validationErrorWarningMessage, linkInputLabelText, deleteEditorContentButtonAriaLabel, id, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function TextEditor({ name, header, type, value, initialValue, validity, label, placeholder, autoFocus, readOnly, testId, contentTestId, contentAriaLabel, className, height, enabledTools, toolbarPosition, elementRender, leafRender, onChange, onCancel, onSave, tooltipTextBold, tooltipTextItalic, tooltipTextUnderline, tooltipTextSuperscript, tooltipTextLink, tooltipTextRemoveLink, tooltipTextBulletedList, tooltipTextNumberedList, tooltipTextClearFormatting, tooltipTextCode, urlIsRequiredMessage, enterValidUrlMessage, saveButtonText, headingLargeText, headingMediumText, headingSmallText, regularText, validationErrorWarningMessage, linkInputLabelText, deleteEditorContentButtonAriaLabel, id, maxLength, getCharactersCounterString, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;

package/cjs/text-editor/text-editor.js

@@ -18,6 +18,8 @@ var _withLinks = _interopRequireDefault(require("./hooks/with-links"));
 var _textEditorLoader = _interopRequireDefault(require("./text-editor-loader"));
 var _textEditorConstants = require("./text-editor-constants");
 var _textEditorHooks = require("./text-editor-hooks");
+var _textEditorHelpers = require("./text-editor-helpers");
+var _useTranslation = require("../hooks/use-translation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -46,8 +48,13 @@ function TextEditorComponent({
   leafRender = _textEditorContent.Leaf,
   onChange = () => {},
   deleteEditorContentButtonAriaLabel,
-  id = ''
+  id = '',
+  maxLength,
+  getCharactersCounterString
 }) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
   const {
     slate,
     slateReact
@@ -62,7 +69,15 @@ function TextEditorComponent({
     withReact,
     Slate
   } = slateReact;
-  const editor = (0, _react.useMemo)(() => (0, _withLinks.default)((0, _slateHistory.withHistory)(withReact(createEditor()))), []);
+  const getCharactersCounterStringText = (0, _react.useCallback)(count => {
+    if (getCharactersCounterString) {
+      return getCharactersCounterString(count);
+    }
+    return t('{{count}} characters remaining', {
+      count
+    });
+  }, [getCharactersCounterString]);
+  const editor = (0, _react.useMemo)(() => (0, _chat.withMaxLength)(maxLength)((0, _withLinks.default)((0, _slateHistory.withHistory)(withReact(createEditor())))), [maxLength]);
   const selection = (0, _react.useRef)(null);
   const slateValue = value || initialValue || _textEditorConstants.TEXT_EDITOR_DEFAULT_VALUE;
   (0, _react.useEffect)(() => {
@@ -127,7 +142,8 @@ function TextEditorComponent({
           hasDeleteButton: header.hasDeleteButton,
           onDelete: header.onDelete,
           deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel,
-          inputAriaLabel: header.inputAriaLabel
+          inputAriaLabel: header.inputAriaLabel,
+          maxLength: header.maxLength
         }), toolbarPosition === _textEditorConstants.TOOLBAR_POSITION.TOP && toolbarMemo, /*#__PURE__*/(0, _jsxRuntime.jsx)(_textEditorContent.default, {
           placeholder: placeholder,
           readOnly: readOnly,
@@ -137,9 +153,14 @@ function TextEditorComponent({
           leafRender: leafRender,
           onBlur: saveSelection,
           onFocus: recoverSelection,
-          ariaAttrs: ariaAttrs
+          ariaAttrs: ariaAttrs,
+          maxLength: maxLength
         }), toolbarPosition === _textEditorConstants.TOOLBAR_POSITION.BOTTOM && toolbarMemo]
       })
+    }), maxLength && /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat.CharactersCounter, {
+      currLength: (0, _textEditorHelpers.getTextEditorValueLength)(slateValue),
+      maxLength: maxLength,
+      getCharactersCounterString: getCharactersCounterStringText
     }), validity && /*#__PURE__*/(0, _jsxRuntime.jsx)(_formField.ValidityMessages, {
       validity: validity,
       validationTestId: `${name}-validity`,
@@ -194,7 +215,9 @@ function TextEditor({
   validationErrorWarningMessage,
   linkInputLabelText,
   deleteEditorContentButtonAriaLabel,
-  id = ''
+  id = '',
+  maxLength,
+  getCharactersCounterString
 }) {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const defaultTranslations = (0, _textEditorHooks.useTextEditorDefaultTranslations)();
@@ -252,7 +275,9 @@ function TextEditor({
         leafRender: leafRender,
         onChange: onChange,
         deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel,
-        id: id
+        id: id,
+        maxLength: maxLength,
+        getCharactersCounterString: getCharactersCounterString
       })
     })
   });

package/esm/chat/chat-message-body.js

@@ -144,10 +144,15 @@ function ChatMessageBodyBase({
             // 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
-            const existingMentionsCount = getMentionsCount(editor.children);
-            if (Editor.string(editor, []).length + existingMentionsCount + (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')) {
+              const existingMentionsCount = getMentionsCount(editor.children);
+              if (!!event.data && Editor.string(editor, []).length + existingMentionsCount + (event?.data?.length ?? 0) > maxLength) {
+                event.preventDefault();
+              }
             }
           }
         })

package/esm/chat/hocs.d.ts

@@ -1,3 +1,3 @@
 import { ReactEditor } from 'slate-react';
-export declare const withMaxLength: (maxLength: number) => (editor: ReactEditor) => ReactEditor;
+export declare const withMaxLength: (maxLength: number | undefined) => (editor: ReactEditor) => ReactEditor;
 export declare const withMentions: (editor: any) => any;

package/esm/chat/hocs.js

@@ -2,31 +2,30 @@ import { Editor } from 'slate';
 import { getMentionsCount, isMentionElement } from './utils';
 export const withMaxLength = maxLength => function Plugin(editor) {
   const {
-    insertText,
     insertData
   } = editor;
 
-  // 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 = text => {
-    const existingMentionsCount = getMentionsCount(editor.children);
-    if (Editor.string(editor, []).length + existingMentionsCount < maxLength) {
-      insertText(text);
-    }
-  };
-  editor.insertData = data => {
-    const existingMentionsCount = getMentionsCount(editor.children);
-    const text = data.getData('text/plain');
-    const html = data.getData('text/html');
-    const parsedHtml = new DOMParser().parseFromString(html, 'text/html');
-    const mentionNodes = parsedHtml.querySelectorAll('.mention');
-    const mentionsText = Array.from(mentionNodes).map(node => node.innerText).join('');
-    const itemsLengthToBeInserted = mentionNodes.length ? text.length - mentionsText.length : text.length;
-    if (Editor.string(editor, []).length + itemsLengthToBeInserted + existingMentionsCount <= maxLength) {
-      insertData(data);
-    }
-  };
+  // 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 = data => {
+      const existingMentionsCount = 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
+      const text = data.getData('text/plain')?.replace(/\n/g, '');
+      const html = data.getData('text/html');
+      const parsedHtml = new DOMParser().parseFromString(html, 'text/html');
+      const mentionNodes = parsedHtml.querySelectorAll('.mention');
+      const mentionsText = Array.from(mentionNodes).map(node => node.innerText).join('');
+      const itemsLengthToBeInserted = mentionNodes.length ? text.length - mentionsText.length : text.length;
+      if (Editor.string(editor, []).length + itemsLengthToBeInserted + existingMentionsCount <= maxLength) {
+        insertData(data);
+      }
+    };
+  }
   return editor;
 };
 export const withMentions = editor => {

package/esm/chat/index.d.ts

@@ -1,5 +1,7 @@
 export { Chat } from './chat';
+export { CharactersCounter } from './characters-counter';
 export { isMentionElement, resetNodes } from './utils';
+export { withMaxLength } from './hocs';
 export { DEFAULT_VALUE, NEW_ITEM_KEY } from './constants';
 export type { ChatMessageItem, ActiveItems } from './types';
 export type { ChatProps } from './chat';

package/esm/chat/index.js

@@ -1,3 +1,5 @@
 export { Chat } from './chat';
+export { CharactersCounter } from './characters-counter';
 export { isMentionElement, resetNodes } from './utils';
+export { withMaxLength } from './hocs';
 export { DEFAULT_VALUE, NEW_ITEM_KEY } from './constants';

package/esm/text-editor/inline-text-editor.d.ts

@@ -24,5 +24,7 @@ export type InlineTextEditorProps = {
     readOnly?: boolean;
     deleteEditorContentButtonAriaLabel?: string;
     autoFocus?: boolean;
+    maxLength?: number;
+    getCharactersCounterString?: (count: number) => string;
 };
-export default function InlineTextEditor({ name, type, readOnly, initialValue, placeholder, ariaLabel, className, enabledTools, header, toolbarPosition, height, onCancel, onSave, autoFocus, deleteEditorContentButtonAriaLabel, }: InlineTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function InlineTextEditor({ name, type, readOnly, initialValue, placeholder, ariaLabel, className, enabledTools, header, toolbarPosition, height, onCancel, onSave, autoFocus, deleteEditorContentButtonAriaLabel, maxLength, getCharactersCounterString, }: InlineTextEditorProps): import("react/jsx-runtime").JSX.Element;

package/esm/text-editor/inline-text-editor.js

@@ -22,7 +22,9 @@ export default function InlineTextEditor({
   onCancel,
   onSave,
   autoFocus = false,
-  deleteEditorContentButtonAriaLabel
+  deleteEditorContentButtonAriaLabel,
+  maxLength,
+  getCharactersCounterString
 }) {
   const {
     t
@@ -94,7 +96,9 @@ export default function InlineTextEditor({
           height: height,
           testId: "inline-text-editor-edit",
           contentAriaLabel: ariaLabel || titleValue,
-          deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel ?? t('Delete Editor Content')
+          deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel ?? t('Delete Editor Content'),
+          maxLength: maxLength,
+          getCharactersCounterString: getCharactersCounterString
         }) : /*#__PURE__*/_jsxs("div", {
           "test-id": "inline-text-editor-view-container",
           className: classnames('inline-text-editor-view-container', isFlex && 'is-flex'),

package/esm/text-editor/text-editor-constants.d.ts

@@ -74,8 +74,6 @@ export interface SlateReact {
     Slate: FC<SlateComponent>;
     withReact: typeof withReact;
 }
-export declare function instanceOfContentChild(obj: TextEditorValue | TextEditorValueChild): obj is TextEditorValueChild;
-export declare function instanceOfContent(obj: TextEditorValue | TextEditorValueChild): obj is TextEditorValue;
 export declare const TEXT_EDITOR_DEFAULT_VALUE: TextEditorValue[];
 export declare const TEXT_EDITOR_DEFAULT_TOOLS: TextEditorTool[];
 export interface TextEditorToolbarLabels {

package/esm/text-editor/text-editor-constants.js

@@ -31,12 +31,6 @@ export const TEXT_EDITOR_TOOLS = {
   CODE: 'code',
   CLEAR_FORMATTING: 'clear-formatting'
 };
-export function instanceOfContentChild(obj) {
-  return 'text' in obj;
-}
-export function instanceOfContent(obj) {
-  return !('text' in obj);
-}
 export const TEXT_EDITOR_DEFAULT_VALUE = [{
   type: BLOCK_TYPES.REGULAR_TEXT,
   children: [{

package/esm/text-editor/text-editor-content.d.ts

@@ -35,5 +35,6 @@ export type TextEditorContentProps = {
     leafRender?: FC<LeafProps>;
     onBlur?: () => void;
     onFocus?: () => void;
+    maxLength?: number;
 };
-export default function TextEditorContent({ ariaAttrs, testId, placeholder, readOnly, autoFocus, isScrollable, elementRender, leafRender, onBlur, onFocus, }: TextEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export default function TextEditorContent({ ariaAttrs, testId, placeholder, readOnly, autoFocus, isScrollable, elementRender, leafRender, onBlur, onFocus, maxLength, }: TextEditorContentProps): import("react/jsx-runtime").JSX.Element;