carbon-react 153.0.3 → 153.1.1

package/esm/components/grouped-character/grouped-character.component.js

@@ -63,7 +63,9 @@ export const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
       newCursorPos += separatorDiff;
     } else if (isAtOneBeyondSeparator) {
       const isDeleting = value.length > rawValue.length;
-      newCursorPos += isDeleting ? -1 : 1;
+      if (!isDeleting) {
+        newCursorPos += 1;
+      }
     }
     const modifiedEvent = ev;
     modifiedEvent.target = buildCustomTarget(ev, {
@@ -105,6 +107,16 @@ export const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
     if (isCharacterKey && maxRawLength === value.length && !hasSelection) {
       ev.preventDefault();
     }
+    if (ev.key === "Delete") {
+      const cursorPos = selectionStart ?? /* istanbul ignore next */0;
+      const rawValue = sanitizeValue(value);
+      const formattedValue = formatValue(rawValue);
+      if (formattedValue[cursorPos] === separator) {
+        ev.preventDefault();
+        const target = ev.target;
+        setTimeout(() => target.setSelectionRange(cursorPos + 1, cursorPos + 1));
+      }
+    }
     if (onKeyDown) {
       onKeyDown(ev);
     }

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

@@ -1,2 +1 @@
 export { default } from "./read-only-rte.component";
-export { createEmpty, createFromHTML } from "./utils";

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

@@ -1,2 +1 @@
-export { default } from "./read-only-rte.component";
-export { createEmpty, createFromHTML } from "./utils";
+export { default } from "./read-only-rte.component";

package/esm/components/text-editor/__internal__/plugins/Toolbar/buttons/save.component.d.ts

@@ -11,7 +11,7 @@ interface SaveObjectProps {
 interface SaveProps {
     children: SaveObjectProps[];
 }
-export interface SaveCallbackProps {
+export interface EditorFormattedValues {
     htmlString?: string;
     json?: {
         root: {
@@ -28,7 +28,7 @@ interface SaveButtonProps {
     /** The namespace of the editor that this button belongs to */
     namespace: string;
     /** The callback to call when the save button is clicked */
-    onSave: (value: SaveCallbackProps) => void;
+    onSave: (value: EditorFormattedValues) => void;
 }
 declare const SaveButton: ({ namespace, onSave }: SaveButtonProps) => React.JSX.Element;
 export default SaveButton;

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

@@ -1,12 +1,12 @@
 import React from "react";
-import { SaveCallbackProps } from "./buttons/save.component";
+import { EditorFormattedValues } from "./buttons/save.component";
 interface ToolbarProps {
     /** The namespace of the editor that this toolbar belongs to */
     namespace: string;
     /** The callback to call when the cancel button is clicked */
     onCancel?: () => void;
     /** The callback to call when the save button is clicked */
-    onSave?: (value: SaveCallbackProps) => void;
+    onSave?: (value: EditorFormattedValues) => void;
 }
 declare const Toolbar: ({ namespace, onCancel, onSave }: ToolbarProps) => React.JSX.Element;
 export default Toolbar;

package/esm/components/text-editor/__internal__/read-only-rte.component.js

@@ -4,7 +4,7 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import React, { useMemo } from "react";
-import { createFromHTML } from "./utils";
+import { createFromHTML } from "../utils";
 import { markdownNodes, theme } from "./constants";
 const wrapLinksInAnchors = value => {
   const urlRegex = /((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/g;

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

@@ -1,3 +1,3 @@
 export { default } from "./text-editor.component";
-export { createEmpty, createFromHTML } from "./__internal__";
-export type { TextEditorProps } from "./text-editor.component";
+export { createEmpty, createFromHTML } from "./utils";
+export type { TextEditorProps, EditorFormattedValues, } from "./text-editor.component";

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

@@ -1,2 +1,2 @@
 export { default } from "./text-editor.component";
-export { createEmpty, createFromHTML } from "./__internal__";
+export { createEmpty, createFromHTML } from "./utils";

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { SaveCallbackProps } from "./__internal__/plugins/Toolbar/buttons/save.component";
+import { EditorFormattedValues as SaveCallbackProps } from "./__internal__/plugins/Toolbar/buttons/save.component";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
+export type EditorFormattedValues = SaveCallbackProps;
 export interface TextEditorProps extends MarginProps, TagProps {
     /** The maximum number of characters allowed in the editor */
     characterLimit?: number;
@@ -18,7 +19,7 @@ export interface TextEditorProps extends MarginProps, TagProps {
     /** 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) => void;
+    onChange?: (value: string, formattedValues: EditorFormattedValues) => 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 */

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

@@ -11,15 +11,15 @@ import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 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 { COMPONENT_PREFIX, markdownNodes, theme } from "./__internal__/constants";
-import { validateUrl } from "./__internal__/helpers";
 import { AutoLinkerPlugin, CharacterCounterPlugin, ContentEditor, LinkMonitorPlugin, OnChangePlugin, Placeholder, ToolbarPlugin } from "./__internal__/plugins";
 import TextEditorContext from "./text-editor.context";
 import StyledTextEditor, { StyledEditorToolbarWrapper, StyledTextEditorWrapper, StyledValidationMessage, StyledWrapper } from "./text-editor.style";
-import { createEmpty } from "./__internal__";
+import { createEmpty } from "./utils";
 import HintText from "../../__internal__/hint-text";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags";
@@ -65,7 +65,8 @@ export const TextEditor = ({
   const handleChange = useDebounce(newState => {
     const currentTextContent = newState.read(() => $getRoot().getTextContent());
     if (onChange) {
-      onChange?.(currentTextContent);
+      const formattedValues = editorRef.current ? SerializeLexical(editorRef.current) : {};
+      onChange?.(currentTextContent, formattedValues);
     }
 
     // If the character limit is set, check if the limit has been exceeded

package/esm/components/text-editor/{__internal__/utils.js → utils.js}

@@ -1,4 +1,4 @@
-import { DeserializeHTML } from "./helpers";
+import { DeserializeHTML } from "./__internal__/helpers";
 const createFromHTML = html => {
   // DeserializeHTML is tested as part of the helper tests
   /* istanbul ignore next */

package/lib/components/grouped-character/grouped-character.component.js

@@ -72,7 +72,9 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
       newCursorPos += separatorDiff;
     } else if (isAtOneBeyondSeparator) {
       const isDeleting = value.length > rawValue.length;
-      newCursorPos += isDeleting ? -1 : 1;
+      if (!isDeleting) {
+        newCursorPos += 1;
+      }
     }
     const modifiedEvent = ev;
     modifiedEvent.target = buildCustomTarget(ev, {
@@ -114,6 +116,16 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
     if (isCharacterKey && maxRawLength === value.length && !hasSelection) {
       ev.preventDefault();
     }
+    if (ev.key === "Delete") {
+      const cursorPos = selectionStart ?? /* istanbul ignore next */0;
+      const rawValue = sanitizeValue(value);
+      const formattedValue = formatValue(rawValue);
+      if (formattedValue[cursorPos] === separator) {
+        ev.preventDefault();
+        const target = ev.target;
+        setTimeout(() => target.setSelectionRange(cursorPos + 1, cursorPos + 1));
+      }
+    }
     if (onKeyDown) {
       onKeyDown(ev);
     }

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

@@ -1,2 +1 @@
 export { default } from "./read-only-rte.component";
-export { createEmpty, createFromHTML } from "./utils";

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

@@ -3,18 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "createEmpty", {
-  enumerable: true,
-  get: function () {
-    return _utils.createEmpty;
-  }
-});
-Object.defineProperty(exports, "createFromHTML", {
-  enumerable: true,
-  get: function () {
-    return _utils.createFromHTML;
-  }
-});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -22,5 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _readOnlyRte = _interopRequireDefault(require("./read-only-rte.component"));
-var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/save.component.d.ts

@@ -11,7 +11,7 @@ interface SaveObjectProps {
 interface SaveProps {
     children: SaveObjectProps[];
 }
-export interface SaveCallbackProps {
+export interface EditorFormattedValues {
     htmlString?: string;
     json?: {
         root: {
@@ -28,7 +28,7 @@ interface SaveButtonProps {
     /** The namespace of the editor that this button belongs to */
     namespace: string;
     /** The callback to call when the save button is clicked */
-    onSave: (value: SaveCallbackProps) => void;
+    onSave: (value: EditorFormattedValues) => void;
 }
 declare const SaveButton: ({ namespace, onSave }: SaveButtonProps) => React.JSX.Element;
 export default SaveButton;

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

@@ -1,12 +1,12 @@
 import React from "react";
-import { SaveCallbackProps } from "./buttons/save.component";
+import { EditorFormattedValues } from "./buttons/save.component";
 interface ToolbarProps {
     /** The namespace of the editor that this toolbar belongs to */
     namespace: string;
     /** The callback to call when the cancel button is clicked */
     onCancel?: () => void;
     /** The callback to call when the save button is clicked */
-    onSave?: (value: SaveCallbackProps) => void;
+    onSave?: (value: EditorFormattedValues) => void;
 }
 declare const Toolbar: ({ namespace, onCancel, onSave }: ToolbarProps) => React.JSX.Element;
 export default Toolbar;

package/lib/components/text-editor/__internal__/read-only-rte.component.js

@@ -9,7 +9,7 @@ var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
 var _LexicalErrorBoundary = require("@lexical/react/LexicalErrorBoundary");
 var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
 var _react = _interopRequireWildcard(require("react"));
-var _utils = require("./utils");
+var _utils = require("../utils");
 var _constants = require("./constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

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

@@ -1,3 +1,3 @@
 export { default } from "./text-editor.component";
-export { createEmpty, createFromHTML } from "./__internal__";
-export type { TextEditorProps } from "./text-editor.component";
+export { createEmpty, createFromHTML } from "./utils";
+export type { TextEditorProps, EditorFormattedValues, } from "./text-editor.component";

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "createEmpty", {
   enumerable: true,
   get: function () {
-    return _internal__.createEmpty;
+    return _utils.createEmpty;
   }
 });
 Object.defineProperty(exports, "createFromHTML", {
   enumerable: true,
   get: function () {
-    return _internal__.createFromHTML;
+    return _utils.createFromHTML;
   }
 });
 Object.defineProperty(exports, "default", {
@@ -22,5 +22,5 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _textEditor = _interopRequireDefault(require("./text-editor.component"));
-var _internal__ = require("./__internal__");
+var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { SaveCallbackProps } from "./__internal__/plugins/Toolbar/buttons/save.component";
+import { EditorFormattedValues as SaveCallbackProps } from "./__internal__/plugins/Toolbar/buttons/save.component";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
+export type EditorFormattedValues = SaveCallbackProps;
 export interface TextEditorProps extends MarginProps, TagProps {
     /** The maximum number of characters allowed in the editor */
     characterLimit?: number;
@@ -18,7 +19,7 @@ export interface TextEditorProps extends MarginProps, TagProps {
     /** 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) => void;
+    onChange?: (value: string, formattedValues: EditorFormattedValues) => 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 */

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

@@ -15,17 +15,17 @@ var _LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
 var _LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
 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 _constants = require("./__internal__/constants");
-var _helpers = require("./__internal__/helpers");
 var _plugins = require("./__internal__/plugins");
 var _textEditor = _interopRequireDefault(require("./text-editor.context"));
 var _textEditor2 = _interopRequireWildcard(require("./text-editor.style"));
-var _internal__ = require("./__internal__");
+var _utils = require("./utils");
 var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
-var _utils = require("../../style/utils");
+var _utils2 = require("../../style/utils");
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -73,7 +73,8 @@ const TextEditor = ({
   const handleChange = (0, _useDebounce.default)(newState => {
     const currentTextContent = newState.read(() => (0, _lexical.$getRoot)().getTextContent());
     if (onChange) {
-      onChange?.(currentTextContent);
+      const formattedValues = editorRef.current ? (0, _helpers.SerializeLexical)(editorRef.current) : {};
+      onChange?.(currentTextContent, formattedValues);
     }
 
     // If the character limit is set, check if the limit has been exceeded
@@ -100,7 +101,7 @@ 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, _internal__.createEmpty)();
+    const safeValue = value || (0, _utils.createEmpty)();
 
     /* istanbul ignore else */
     if (editor) {
@@ -115,7 +116,7 @@ const TextEditor = ({
   }), [handleCancel, namespace, onCancel, onSave]);
   return /*#__PURE__*/_react.default.createElement(_textEditor2.StyledTextEditorWrapper, _extends({
     "data-role": `${namespace}-editor-wrapper`
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("text-editor", rest)), /*#__PURE__*/_react.default.createElement(_textEditor.default.Provider, {
+  }, (0, _utils2.filterStyledSystemMarginProps)(rest), (0, _tags.default)("text-editor", rest)), /*#__PURE__*/_react.default.createElement(_textEditor.default.Provider, {
     value: {
       onLinkAdded,
       readOnly

package/lib/components/text-editor/{__internal__/utils.js → utils.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createFromHTML = exports.createEmpty = void 0;
-var _helpers = require("./helpers");
+var _helpers = require("./__internal__/helpers");
 const createFromHTML = html => {
   // DeserializeHTML is tested as part of the helper tests
   /* istanbul ignore next */

package/package.json

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