@datarobot/design-system 28.3.4 → 28.5.0

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useContext } from 'react';
+import { Editor } from 'slate';
 import classNames from 'classnames';
 import TextEditorContext from './text-editor-context';
 import { BLOCK_TYPES, MARK_TYPES } from './text-editor-constants';
@@ -146,14 +147,17 @@ export default function TextEditorContent({
   elementRender = Element,
   leafRender = Leaf,
   onBlur = () => {},
-  onFocus = () => {}
+  onFocus = () => {},
+  maxLength
 }) {
   const {
     slateReact
   } = useContext(TextEditorContext);
   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 */
@@ -190,6 +194,22 @@ export default 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 = Editor.string(editor, []).length;
+          let newText = '';
+          if (!!event.data) {
+            newText = event.data;
+          }
+          if (currentTextLength + newText.length > maxLength) {
+            event.preventDefault();
+          }
+        }
+      },
       ...ariaAttrs
     })
   });

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext } from 'react';
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons/faTrashCan';
 import { useTranslation } from '../hooks/use-translation';
 import { ACCENT_TYPES, Button } from '../button';
@@ -21,7 +21,6 @@ export default function TextEditorHeader({
   const {
     t
   } = useTranslation();
-  const [isDelete, setIsDelete] = useState(false);
   const {
     slate,
     slateReact
@@ -33,13 +32,6 @@ export default function TextEditorHeader({
   const editor = slateReact.useSlate();
   const hasReadOnlyTitle = title && !isEditable;
   const hasEditableTitle = isEditable && onChangeTitle;
-  useEffect(() => {
-    if (isDelete) {
-      onChangeTitle('');
-      onDelete();
-      setIsDelete(false);
-    }
-  }, [isDelete]);
   return /*#__PURE__*/_jsx("header", {
     className: "text-editor-header",
     "test-id": "text-editor-header",
@@ -63,7 +55,8 @@ export default function TextEditorHeader({
         onClick: () => {
           textEditorService.deleteContent(editor);
           ReactEditor.focus(editor);
-          setIsDelete(true);
+          onChangeTitle('');
+          onDelete();
         },
         accentType: ACCENT_TYPES.ROUND_ICON,
         tooltipText: t('Delete'),

package/esm/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/esm/text-editor/text-editor-helpers.js

@@ -1,5 +1,5 @@
 import isEqual from 'lodash/isEqual';
-import { BLOCK_TYPES, TEXT_EDITOR_DEFAULT_VALUE, instanceOfContent, instanceOfContentChild } from './text-editor-constants';
+import { BLOCK_TYPES, TEXT_EDITOR_DEFAULT_VALUE } from './text-editor-constants';
 
 /**
  * @param {Array} value - the type of value is defined with TextEditorValue
@@ -17,29 +17,33 @@ export function isEmptyTextEditorValue(value) {
 export function isLongerTextEditorValueThan(value, maxLength = 120) {
   let length = 0;
   for (const record of value) {
-    if (instanceOfContentChild(record) && !!record.text) {
-      length += record.text.length;
-    }
-    if (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;
 }
+export 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/esm/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/esm/text-editor/text-editor.js

@@ -1,9 +1,9 @@
-import React, { useMemo, useRef, useContext, useState, useEffect } from 'react';
+import React, { useMemo, useRef, useContext, useState, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import isEqual from 'lodash-es/isEqual';
 import { withHistory } from 'slate-history';
 import { ValidityMessages, getErrorAriaAttributes, useDefaultValidationValues } from '../form-field';
-import { resetNodes } from '../chat';
+import { resetNodes, CharactersCounter, withMaxLength } from '../chat';
 import { TextEditorToolbar } from './text-editor-toolbar';
 import TextEditorContext from './text-editor-context';
 import TextEditorHeader from './text-editor-header';
@@ -12,6 +12,8 @@ import withLinks from './hooks/with-links';
 import TextEditorLoader from './text-editor-loader';
 import { TEXT_EDITOR_DEFAULT_VALUE, TEXT_EDITOR_DEFAULT_TOOLS, TOOLBAR_POSITION, INLINE_EDITOR_TYPES, HEADER_HEIGHT } from './text-editor-constants';
 import { useTextEditorDefaultTranslations } from './text-editor-hooks';
+import { getTextEditorValueLength } from './text-editor-helpers';
+import { useTranslation } from '../hooks/use-translation';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function TextEditorComponent({
   name,
@@ -38,8 +40,13 @@ function TextEditorComponent({
   leafRender = ContentLeaf,
   onChange = () => {},
   deleteEditorContentButtonAriaLabel,
-  id = ''
+  id = '',
+  maxLength,
+  getCharactersCounterString
 }) {
+  const {
+    t
+  } = useTranslation();
   const {
     slate,
     slateReact
@@ -54,7 +61,15 @@ function TextEditorComponent({
     withReact,
     Slate
   } = slateReact;
-  const editor = useMemo(() => withLinks(withHistory(withReact(createEditor()))), []);
+  const getCharactersCounterStringText = useCallback(count => {
+    if (getCharactersCounterString) {
+      return getCharactersCounterString(count);
+    }
+    return t('{{count}} characters remaining', {
+      count
+    });
+  }, [getCharactersCounterString]);
+  const editor = useMemo(() => withMaxLength(maxLength)(withLinks(withHistory(withReact(createEditor())))), [maxLength]);
   const selection = useRef(null);
   const slateValue = value || initialValue || TEXT_EDITOR_DEFAULT_VALUE;
   useEffect(() => {
@@ -119,7 +134,8 @@ function TextEditorComponent({
           hasDeleteButton: header.hasDeleteButton,
           onDelete: header.onDelete,
           deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel,
-          inputAriaLabel: header.inputAriaLabel
+          inputAriaLabel: header.inputAriaLabel,
+          maxLength: header.maxLength
         }), toolbarPosition === TOOLBAR_POSITION.TOP && toolbarMemo, /*#__PURE__*/_jsx(TextEditorContent, {
           placeholder: placeholder,
           readOnly: readOnly,
@@ -129,9 +145,14 @@ function TextEditorComponent({
           leafRender: leafRender,
           onBlur: saveSelection,
           onFocus: recoverSelection,
-          ariaAttrs: ariaAttrs
+          ariaAttrs: ariaAttrs,
+          maxLength: maxLength
         }), toolbarPosition === TOOLBAR_POSITION.BOTTOM && toolbarMemo]
       })
+    }), maxLength && /*#__PURE__*/_jsx(CharactersCounter, {
+      currLength: getTextEditorValueLength(slateValue),
+      maxLength: maxLength,
+      getCharactersCounterString: getCharactersCounterStringText
     }), validity && /*#__PURE__*/_jsx(ValidityMessages, {
       validity: validity,
       validationTestId: `${name}-validity`,
@@ -186,7 +207,9 @@ export default function TextEditor({
   validationErrorWarningMessage,
   linkInputLabelText,
   deleteEditorContentButtonAriaLabel,
-  id = ''
+  id = '',
+  maxLength,
+  getCharactersCounterString
 }) {
   const [isFocused, setIsFocused] = useState(false);
   const defaultTranslations = useTextEditorDefaultTranslations();
@@ -244,7 +267,9 @@ export default function TextEditor({
         leafRender: leafRender,
         onChange: onChange,
         deleteEditorContentButtonAriaLabel: deleteEditorContentButtonAriaLabel,
-        id: id
+        id: id,
+        maxLength: maxLength,
+        getCharactersCounterString: getCharactersCounterString
       })
     })
   });