carbon-react 153.8.0 → 154.0.0

package/esm/components/text-editor/__internal__/helpers.js

@@ -14,7 +14,7 @@ import { markdownNodes, theme } from "./constants";
 const SerializeLexical = editor => {
   let htmlString;
   let json;
-  editor.update(() => {
+  editor.read(() => {
     // Get the current editor state
     const editorState = editor.getEditorState();
     // Serialize the editor state to JSON

package/esm/components/text-editor/__internal__/plugins/EditorRef/editor-ref.plugin.d.ts

@@ -0,0 +1,5 @@
+import { LexicalEditor } from "lexical";
+declare const EditorRefPlugin: ({ setEditorRef, }: {
+    setEditorRef: (editor: LexicalEditor) => void;
+}) => null;
+export default EditorRefPlugin;

package/esm/components/text-editor/__internal__/plugins/EditorRef/editor-ref.plugin.js

@@ -0,0 +1,17 @@
+/**
+ * This plugin allows retrieval of a reference to the current editor. It's useful
+ * for testing purposes, where tests might need to directly interact with the editor to
+ * emulate e.g. blurring.
+ */
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+const EditorRefPlugin = ({
+  setEditorRef
+}) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    setEditorRef(editor);
+  }, [editor, setEditorRef]);
+  return null;
+};
+export default EditorRefPlugin;

package/esm/components/text-editor/__internal__/plugins/EditorRef/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./editor-ref.plugin";

package/esm/components/text-editor/__internal__/plugins/EditorRef/index.js

@@ -0,0 +1 @@
+export { default } from "./editor-ref.plugin";

package/esm/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.js

@@ -85,7 +85,6 @@ const Toolbar = ({
     "aria-label": locale.textEditor.toolbarAriaLabel(),
     "data-role": `${namespace}-toolbar`,
     id: `${namespace}-toolbar`,
-    onFocus: e => e.stopPropagation(),
     ref: toolbarRef
   }, /*#__PURE__*/React.createElement(FormattingButtons, {
     "data-role": `${namespace}-formatting-buttons`

package/esm/components/text-editor/text-editor.component.d.ts

@@ -23,10 +23,14 @@ export interface TextEditorProps extends MarginProps, TagProps {
     labelText: string;
     /** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
     namespace?: string;
+    /** The callback to fire when the editor loses focus */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when the Cancel button within the editor is pressed */
     onCancel?: () => void;
     /** The callback to fire when a change is registered within the editor */
     onChange?: (value: string, formattedValues: EditorFormattedValues) => void;
+    /** The callback to fire when the editor gains focus */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when a link is added into the editor */
     onLinkAdded?: (link: string, state: string) => void;
     /** The callback to fire when the Save button within the editor is pressed */
@@ -46,5 +50,5 @@ export interface TextEditorProps extends MarginProps, TagProps {
     /** The initial value of the editor, as a HTML string, or JSON */
     value?: string | undefined;
 }
-export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onCancel, onChange, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
+export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onBlur, onCancel, onChange, onFocus, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
 export default TextEditor;

package/esm/components/text-editor/text-editor.component.js

@@ -13,7 +13,6 @@ import { $getRoot } from "lexical";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SerializeLexical, validateUrl } from "./__internal__/helpers";
 import Label from "../../__internal__/label";
-import useDebounce from "../../hooks/__internal__/useDebounce";
 import useLocale from "../../hooks/__internal__/useLocale";
 import Logger from "../../__internal__/utils/logger";
 import { COMPONENT_PREFIX, markdownNodes, theme } from "./__internal__/constants";
@@ -34,8 +33,10 @@ export const TextEditor = ({
   isOptional = false,
   labelText,
   namespace = COMPONENT_PREFIX,
+  onBlur,
   onCancel,
   onChange,
+  onFocus,
   onLinkAdded,
   onSave,
   placeholder,
@@ -74,7 +75,6 @@ export const TextEditor = ({
     return cleanup;
   }, [contentEditorRef]);
   const [cancelTrigger, setCancelTrigger] = useState(false);
-  const debounceWaitTime = 500;
   const initialConfig = useMemo(() => {
     return {
       namespace,
@@ -88,7 +88,7 @@ export const TextEditor = ({
 
   // OnChangePlugin is tested separately
   /* istanbul ignore next */
-  const handleChange = useDebounce(newState => {
+  const handleChange = useCallback(newState => {
     const currentTextContent = newState.read(() => $getRoot().getTextContent());
     if (onChange) {
       const formattedValues = editorRef.current ? SerializeLexical(editorRef.current) : {};
@@ -101,11 +101,10 @@ export const TextEditor = ({
       // If the character limit has been exceeded, show the character limit warning
       setCharacterLimitWarning(currentDiff < 0 ? locale.textEditor.characterLimit(Math.abs(currentDiff)) : undefined);
     }
-  }, debounceWaitTime);
+  }, [characterLimit, locale.textEditor, onChange]);
   const handleCancel = useCallback(() => {
-    const editor = editorRef.current;
     /* istanbul ignore next */
-    const isEditable = editor?.isEditable() || false;
+    const isEditable = editorRef.current?.isEditable() || false;
     /* istanbul ignore if */
     if (!isEditable) return;
 
@@ -118,13 +117,12 @@ export const TextEditor = ({
 
   // Reset the value of the editor when the cancel trigger is updated (implements reset on cancel)
   useEffect(() => {
-    const editor = editorRef.current;
     const safeValue = value || createEmpty();
 
     /* istanbul ignore else */
-    if (editor) {
-      const newEditorState = editor.parseEditorState(safeValue);
-      editor.setEditorState(newEditorState);
+    if (editorRef.current) {
+      const newEditorState = editorRef.current.parseEditorState(safeValue);
+      editorRef.current.setEditorState(newEditorState);
     }
   }, [cancelTrigger, value]);
   const toolbarProps = useMemo(() => ({
@@ -133,7 +131,17 @@ export const TextEditor = ({
     onSave
   }), [handleCancel, namespace, onCancel, onSave]);
   return /*#__PURE__*/React.createElement(StyledTextEditorWrapper, _extends({
-    "data-role": `${namespace}-editor-wrapper`
+    "data-role": `${namespace}-editor-wrapper`,
+    onBlur: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onBlur?.(ev);
+      }
+    },
+    onFocus: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onFocus?.(ev);
+      }
+    }
   }, filterStyledSystemMarginProps(rest), tagComponent("text-editor", rest)), /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
     value: {
       onLinkAdded

package/lib/components/text-editor/__internal__/helpers.js

@@ -20,7 +20,7 @@ var _constants = require("./constants");
 const SerializeLexical = editor => {
   let htmlString;
   let json;
-  editor.update(() => {
+  editor.read(() => {
     // Get the current editor state
     const editorState = editor.getEditorState();
     // Serialize the editor state to JSON

package/lib/components/text-editor/__internal__/plugins/EditorRef/editor-ref.plugin.d.ts

@@ -0,0 +1,5 @@
+import { LexicalEditor } from "lexical";
+declare const EditorRefPlugin: ({ setEditorRef, }: {
+    setEditorRef: (editor: LexicalEditor) => void;
+}) => null;
+export default EditorRefPlugin;

package/lib/components/text-editor/__internal__/plugins/EditorRef/editor-ref.plugin.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+/**
+ * This plugin allows retrieval of a reference to the current editor. It's useful
+ * for testing purposes, where tests might need to directly interact with the editor to
+ * emulate e.g. blurring.
+ */
+
+const EditorRefPlugin = ({
+  setEditorRef
+}) => {
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  (0, _react.useEffect)(() => {
+    setEditorRef(editor);
+  }, [editor, setEditorRef]);
+  return null;
+};
+var _default = exports.default = EditorRefPlugin;

package/lib/components/text-editor/__internal__/plugins/EditorRef/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./editor-ref.plugin";

package/lib/components/text-editor/__internal__/plugins/EditorRef/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _editorRef.default;
+  }
+});
+var _editorRef = _interopRequireDefault(require("./editor-ref.plugin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/text-editor/__internal__/plugins/EditorRef/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../../esm/components/text-editor/__internal__/plugins/EditorRef/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.js

@@ -94,7 +94,6 @@ const Toolbar = ({
     "aria-label": locale.textEditor.toolbarAriaLabel(),
     "data-role": `${namespace}-toolbar`,
     id: `${namespace}-toolbar`,
-    onFocus: e => e.stopPropagation(),
     ref: toolbarRef
   }, /*#__PURE__*/_react.default.createElement(_toolbar.FormattingButtons, {
     "data-role": `${namespace}-formatting-buttons`

package/lib/components/text-editor/text-editor.component.d.ts

@@ -23,10 +23,14 @@ export interface TextEditorProps extends MarginProps, TagProps {
     labelText: string;
     /** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
     namespace?: string;
+    /** The callback to fire when the editor loses focus */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when the Cancel button within the editor is pressed */
     onCancel?: () => void;
     /** The callback to fire when a change is registered within the editor */
     onChange?: (value: string, formattedValues: EditorFormattedValues) => void;
+    /** The callback to fire when the editor gains focus */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when a link is added into the editor */
     onLinkAdded?: (link: string, state: string) => void;
     /** The callback to fire when the Save button within the editor is pressed */
@@ -46,5 +50,5 @@ export interface TextEditorProps extends MarginProps, TagProps {
     /** The initial value of the editor, as a HTML string, or JSON */
     value?: string | undefined;
 }
-export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onCancel, onChange, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
+export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onBlur, onCancel, onChange, onFocus, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
 export default TextEditor;

package/lib/components/text-editor/text-editor.component.js

@@ -17,7 +17,6 @@ var _lexical = require("lexical");
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("./__internal__/helpers");
 var _label = _interopRequireDefault(require("../../__internal__/label"));
-var _useDebounce = _interopRequireDefault(require("../../hooks/__internal__/useDebounce"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _constants = require("./__internal__/constants");
@@ -42,8 +41,10 @@ const TextEditor = ({
   isOptional = false,
   labelText,
   namespace = _constants.COMPONENT_PREFIX,
+  onBlur,
   onCancel,
   onChange,
+  onFocus,
   onLinkAdded,
   onSave,
   placeholder,
@@ -82,7 +83,6 @@ const TextEditor = ({
     return cleanup;
   }, [contentEditorRef]);
   const [cancelTrigger, setCancelTrigger] = (0, _react.useState)(false);
-  const debounceWaitTime = 500;
   const initialConfig = (0, _react.useMemo)(() => {
     return {
       namespace,
@@ -96,7 +96,7 @@ const TextEditor = ({
 
   // OnChangePlugin is tested separately
   /* istanbul ignore next */
-  const handleChange = (0, _useDebounce.default)(newState => {
+  const handleChange = (0, _react.useCallback)(newState => {
     const currentTextContent = newState.read(() => (0, _lexical.$getRoot)().getTextContent());
     if (onChange) {
       const formattedValues = editorRef.current ? (0, _helpers.SerializeLexical)(editorRef.current) : {};
@@ -109,11 +109,10 @@ const TextEditor = ({
       // If the character limit has been exceeded, show the character limit warning
       setCharacterLimitWarning(currentDiff < 0 ? locale.textEditor.characterLimit(Math.abs(currentDiff)) : undefined);
     }
-  }, debounceWaitTime);
+  }, [characterLimit, locale.textEditor, onChange]);
   const handleCancel = (0, _react.useCallback)(() => {
-    const editor = editorRef.current;
     /* istanbul ignore next */
-    const isEditable = editor?.isEditable() || false;
+    const isEditable = editorRef.current?.isEditable() || false;
     /* istanbul ignore if */
     if (!isEditable) return;
 
@@ -126,13 +125,12 @@ const TextEditor = ({
 
   // Reset the value of the editor when the cancel trigger is updated (implements reset on cancel)
   (0, _react.useEffect)(() => {
-    const editor = editorRef.current;
     const safeValue = value || (0, _utils.createEmpty)();
 
     /* istanbul ignore else */
-    if (editor) {
-      const newEditorState = editor.parseEditorState(safeValue);
-      editor.setEditorState(newEditorState);
+    if (editorRef.current) {
+      const newEditorState = editorRef.current.parseEditorState(safeValue);
+      editorRef.current.setEditorState(newEditorState);
     }
   }, [cancelTrigger, value]);
   const toolbarProps = (0, _react.useMemo)(() => ({
@@ -141,7 +139,17 @@ const TextEditor = ({
     onSave
   }), [handleCancel, namespace, onCancel, onSave]);
   return /*#__PURE__*/_react.default.createElement(_textEditor2.StyledTextEditorWrapper, _extends({
-    "data-role": `${namespace}-editor-wrapper`
+    "data-role": `${namespace}-editor-wrapper`,
+    onBlur: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onBlur?.(ev);
+      }
+    },
+    onFocus: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onFocus?.(ev);
+      }
+    }
   }, (0, _utils2.filterStyledSystemMarginProps)(rest), (0, _tags.default)("text-editor", rest)), /*#__PURE__*/_react.default.createElement(_textEditor.default.Provider, {
     value: {
       onLinkAdded

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "153.8.0",
+  "version": "154.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",