carbon-react 153.3.1 → 153.4.0

package/esm/components/note/note.component.js

@@ -43,8 +43,7 @@ export const Note = ({
   };
   return /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
     value: {
-      onLinkAdded,
-      readOnly: true
+      onLinkAdded
     }
   }, /*#__PURE__*/React.createElement(StyledNote, _extends({
     width: width

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
 export interface ContentEditorProps {
-    /** The active error message of the editor */
-    error?: string;
     /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
     /** The namespace of the editor that this content editor belongs to */
@@ -10,8 +8,8 @@ export interface ContentEditorProps {
     previews?: React.JSX.Element[];
     /** The number of rows to render in the editor */
     rows?: number;
-    /** The active warning message of the editor */
-    warning?: string;
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
 }
-declare const ContentEditor: ({ error, inputHint, namespace, previews, rows, warning, }: ContentEditorProps) => React.JSX.Element;
+declare const ContentEditor: React.ForwardRefExoticComponent<ContentEditorProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentEditor;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js

@@ -3,25 +3,24 @@
  * as per their documentation. It also uses the `LinkPreviewerPlugin` to render link previews.
  */
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import React from "react";
+import React, { forwardRef } from "react";
 import StyledContentEditable from "./content-editor.style";
 import { LinkPreviewerPlugin, useCursorAtEnd } from "..";
-const ContentEditor = ({
-  error,
+const ContentEditor = /*#__PURE__*/forwardRef(({
   inputHint,
   namespace,
   previews = [],
   rows,
-  warning
-}) => {
+  readOnly
+}, ref) => {
   const focusAtEnd = useCursorAtEnd();
   return /*#__PURE__*/React.createElement(StyledContentEditable, {
     "data-role": `${namespace}-content-editable`,
-    error: error,
     namespace: namespace,
     rows: rows,
-    warning: warning
+    readOnly: readOnly
   }, /*#__PURE__*/React.createElement(ContentEditable, {
+    ref: ref,
     "aria-describedby": inputHint && `${namespace}-input-hint`,
     "aria-labelledby": `${namespace}-label`,
     className: `${namespace}-editable`,
@@ -37,9 +36,7 @@ const ContentEditor = ({
     "aria-autocomplete": undefined,
     "aria-readonly": undefined
   }), /*#__PURE__*/React.createElement(LinkPreviewerPlugin, {
-    error: error,
-    previews: previews,
-    warning: warning
+    previews: previews
   }));
-};
+});
 export default ContentEditor;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.d.ts

@@ -1,6 +1,7 @@
 import { ContentEditorProps } from "./content-editor.component";
 interface StyledContentEditableProps extends ContentEditorProps {
     showBorders?: boolean;
+    readOnly?: boolean;
 }
 declare const StyledContentEditable: import("styled-components").StyledComponent<"div", any, StyledContentEditableProps, never>;
 export default StyledContentEditable;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.js

@@ -3,28 +3,22 @@ const DEFAULT_EDITOR_HEIGHT = 210;
 const FIXED_LINE_HEIGHT = 21;
 const StyledContentEditable = styled.div`
   ${({
-  error,
   namespace,
   rows,
-  warning
+  readOnly
 }) => css`
     .${namespace}-editable {
       min-height: ${rows && rows > 2 ? rows * FIXED_LINE_HEIGHT : DEFAULT_EDITOR_HEIGHT}px;
       background-color: var(--colorsUtilityYang100);
-      border-top: 1px solid var(--colorsUtilityMajor200);
-      border-left: 1px solid var(--colorsUtilityMajor200);
-      border-right: 1px solid var(--colorsUtilityMajor200);
+      ${!readOnly && "border-top: 1px solid var(--colorsUtilityMajor200);"}
+      ${readOnly && `
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);      
+      `}
       margin: 0;
       padding: 2px 8px;
-      border-top-left-radius: var(--borderWidth600);
-      border-top-right-radius: var(--borderWidth600);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-
-      ${(error || warning) && css`
-        border: none;
-      `}
-
+      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
       :focus {
         outline: none;
       }

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.d.ts

@@ -1,11 +1,5 @@
 import React from "react";
-export interface LinkPreviewerProps {
-    /** The active error message of the editor */
-    error?: string;
-    /** The link previews to render at the foot of the editor */
-    previews?: React.JSX.Element[];
-    /** The active warning message of the editor */
-    warning?: string;
-}
-declare const LinkPreviewer: ({ error, previews, warning, }: LinkPreviewerProps) => React.JSX.Element;
+declare const LinkPreviewer: ({ previews, }: {
+    previews?: React.JSX.Element[] | undefined;
+}) => React.JSX.Element;
 export default LinkPreviewer;

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.js

@@ -1,18 +1,6 @@
-import React, { useContext } from "react";
-import TextEditorContext from "../../../text-editor.context";
+import React from "react";
 import StyledLinkPreviewer from "./link-previewer.style";
 const LinkPreviewer = ({
-  error,
-  previews = [],
-  warning
-}) => {
-  const {
-    readOnly
-  } = useContext(TextEditorContext);
-  return /*#__PURE__*/React.createElement(StyledLinkPreviewer, {
-    error: error,
-    readOnly: readOnly,
-    warning: warning
-  }, previews);
-};
+  previews = []
+}) => /*#__PURE__*/React.createElement(StyledLinkPreviewer, null, previews);
 export default LinkPreviewer;

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.d.ts

@@ -1,6 +1,2 @@
-import { LinkPreviewerProps } from "./link-previewer.component";
-interface StyledLinkPreviewerProps extends LinkPreviewerProps {
-    readOnly?: boolean;
-}
-declare const StyledLinkPreviewer: import("styled-components").StyledComponent<"div", any, StyledLinkPreviewerProps, never>;
+declare const StyledLinkPreviewer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default StyledLinkPreviewer;

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.js

@@ -1,29 +1,6 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 const StyledLinkPreviewer = styled.div`
-  ${({
-  error,
-  readOnly,
-  warning
-}) => css`
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: var(--colorsUtilityYang100);
-    border-bottom: 1px solid var(--colorsUtilityMajor200);
-    border-left: 1px solid var(--colorsUtilityMajor200);
-    border-right: 1px solid var(--colorsUtilityMajor200);
-    margin: 0;
-    padding: 2px 8px;
-
-    ${(error || warning) && css`
-      border-left: none;
-      border-right: none;
-      border-bottom: none;
-    `}
-
-    ${readOnly && css`
-      border-bottom-left-radius: var(--borderWidth600);
-      border-bottom-right-radius: var(--borderWidth600);
-    `}
-  `}
+  margin: 0;
+  padding: 2px 8px;
 `;
 export default StyledLinkPreviewer;

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

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

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

@@ -10,6 +10,7 @@ import { BoldButton, ItalicButton, ListControls } from "./buttons";
 import SaveButton from "./buttons/save.component";
 const Toolbar = ({
   namespace,
+  hasHeader,
   onCancel,
   onSave
 }) => {
@@ -80,6 +81,7 @@ const Toolbar = ({
   }, [buttons]);
   return /*#__PURE__*/React.createElement(StyledToolbar, {
     role: "toolbar",
+    hasHeader: hasHeader,
     "aria-label": locale.textEditor.toolbarAriaLabel(),
     "data-role": `${namespace}-toolbar`,
     id: `${namespace}-toolbar`,

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

@@ -4,7 +4,9 @@ interface FormattingButtonProps extends ButtonProps {
     tabIndex?: number;
     isActive?: boolean;
 }
-declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {
+    hasHeader?: boolean | undefined;
+}, never>;
 declare const FormattingButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CommandButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const FormattingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, FormattingButtonProps, never>;

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

@@ -4,12 +4,16 @@ const StyledToolbar = styled.div`
   display: flex;
   flex-direction: row;
   gap: 8px;
-  background-color: var(--colorsUtilityMajor025);
-  outline: 1px solid var(--colorsUtilityMajor200);
+  background-color: var(--colorsActionMajorYang100);
   padding: 12px;
-  border-radius: var(--borderRadius100);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: ${({
+  hasHeader
+}) => hasHeader ? "0" : "var(--borderRadius100)"};
+  border-top-right-radius: ${({
+  hasHeader
+}) => hasHeader ? "0" : "var(--borderRadius100)"};
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   justify-content: space-between;
   align-items: center;
   margin-left: 1px;

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

@@ -8,6 +8,10 @@ export interface TextEditorProps extends MarginProps, TagProps {
     characterLimit?: number;
     /** The message to be shown when the editor is in an error state */
     error?: string;
+    /** Custom footer content to be displayed below the editor */
+    footer?: React.ReactNode;
+    /** Custom header content to be displayed above the editor */
+    header?: React.ReactNode;
     /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
     /** Whether the content of the editor can be empty */
@@ -39,5 +43,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, 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, onCancel, onChange, 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

@@ -18,7 +18,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import { COMPONENT_PREFIX, markdownNodes, theme } from "./__internal__/constants";
 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 StyledTextEditor, { StyledEditorToolbarWrapper, StyledHeaderWrapper, StyledFooterWrapper, StyledTextEditorWrapper, StyledValidationMessage, StyledWrapper } from "./text-editor.style";
 import { createEmpty } from "./utils";
 import HintText from "../../__internal__/hint-text";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -26,6 +26,8 @@ import tagComponent from "../../__internal__/utils/helpers/tags";
 export const TextEditor = ({
   characterLimit = 3000,
   error,
+  footer,
+  header,
   inputHint,
   isOptional = false,
   labelText,
@@ -46,7 +48,25 @@ export const TextEditor = ({
   const editorRef = useRef(undefined);
   const locale = useLocale();
   const [characterLimitWarning, setCharacterLimitWarning] = useState(undefined);
+  const hasWarningOrError = Boolean(error || characterLimitWarning || warning);
+  const contentEditorRef = useRef(null);
   const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    const editorElement = contentEditorRef?.current;
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    editorElement?.addEventListener("focus", handleFocus);
+    editorElement?.addEventListener("blur", handleBlur);
+    const cleanup = () => {
+      editorElement?.removeEventListener("focus", handleFocus);
+      editorElement?.removeEventListener("blur", handleBlur);
+    };
+    return cleanup;
+  }, [contentEditorRef]);
   const [cancelTrigger, setCancelTrigger] = useState(false);
   const debounceWaitTime = 500;
   const initialConfig = useMemo(() => {
@@ -110,8 +130,7 @@ export const TextEditor = ({
     "data-role": `${namespace}-editor-wrapper`
   }, filterStyledSystemMarginProps(rest), tagComponent("text-editor", rest)), /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
     value: {
-      onLinkAdded,
-      readOnly
+      onLinkAdded
     }
   }, /*#__PURE__*/React.createElement(Label, {
     isRequired: required,
@@ -135,19 +154,22 @@ export const TextEditor = ({
   }, error || characterLimitWarning || warning), /*#__PURE__*/React.createElement(StyledEditorToolbarWrapper, {
     "data-role": `${namespace}-editor-toolbar-wrapper`,
     id: `${namespace}-editor-toolbar-wrapper`,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
-    focused: isFocused
-  }, /*#__PURE__*/React.createElement(StyledTextEditor, {
+    focused: isFocused,
+    hasWarningOrError: hasWarningOrError
+  }, header && /*#__PURE__*/React.createElement(StyledHeaderWrapper, {
+    "data-role": `${namespace}-header-wrapper`
+  }, header), !readOnly && /*#__PURE__*/React.createElement(ToolbarPlugin, _extends({
+    hasHeader: Boolean(header)
+  }, toolbarProps)), /*#__PURE__*/React.createElement(StyledTextEditor, {
     "data-role": `${namespace}-editor`
   }, /*#__PURE__*/React.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(ContentEditor, {
-      error: error,
+      ref: contentEditorRef,
       inputHint: inputHint,
       namespace: namespace,
       previews: previews,
       rows: rows,
-      warning: warning
+      readOnly: readOnly
     }),
     placeholder: /*#__PURE__*/React.createElement(Placeholder, {
       namespace: namespace,
@@ -160,7 +182,9 @@ export const TextEditor = ({
     validateUrl: validateUrl
   }), /*#__PURE__*/React.createElement(ClickableLinkPlugin, {
     newTab: true
-  }), /*#__PURE__*/React.createElement(AutoLinkerPlugin, null)), !readOnly && /*#__PURE__*/React.createElement(ToolbarPlugin, toolbarProps), /*#__PURE__*/React.createElement(LinkMonitorPlugin, null)), characterLimit > 0 && !readOnly && /*#__PURE__*/React.createElement(CharacterCounterPlugin, {
+  }), /*#__PURE__*/React.createElement(AutoLinkerPlugin, null)), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, {
+    "data-role": `${namespace}-footer-wrapper`
+  }, footer), /*#__PURE__*/React.createElement(LinkMonitorPlugin, null)), characterLimit > 0 && !readOnly && /*#__PURE__*/React.createElement(CharacterCounterPlugin, {
     maxChars: characterLimit,
     namespace: namespace
   })))));

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

@@ -1,6 +1,5 @@
 import React from "react";
 declare const _default: React.Context<{
     onLinkAdded?: ((link: string, state: string) => void) | undefined;
-    readOnly?: boolean | undefined;
 }>;
 export default _default;

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

@@ -11,10 +11,13 @@ interface StyledValidationMessageProps {
 }
 interface StyledEditorToolbarWrapperProps {
     focused?: boolean;
+    hasWarningOrError?: boolean;
 }
 export declare const StyledTextEditor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const StyledTextEditorWrapper: import("styled-components").StyledComponent<"div", any, StyledTextEditorWrapperProps, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, StyledWrapperProps, never>;
 export declare const StyledEditorToolbarWrapper: import("styled-components").StyledComponent<"div", any, StyledEditorToolbarWrapperProps, never>;
+export declare const StyledHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledValidationMessage: import("styled-components").StyledComponent<"div", any, StyledValidationMessageProps, never>;
 export default StyledTextEditor;

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

@@ -35,24 +35,28 @@ export const StyledWrapper = styled.div`
         .${namespace}-editable, #${namespace}-toolbar {
           outline: none;
         }
-
-        #${namespace}-toolbar {
-          border-top: 1px solid var(--colorsUtilityMajor200);
-        }
       }
     `}
   `};
 `;
 export const StyledEditorToolbarWrapper = styled.div`
   ${({
-  focused
+  focused,
+  hasWarningOrError
 }) => css`
     border-radius: var(--borderRadius100);
-    outline: none;
+    outline: ${hasWarningOrError ? "none" : "1px solid var(--colorsUtilityMajor200)"};
 
     ${focused && addFocusStyling()}
   `}
 `;
+export const StyledHeaderWrapper = styled.div`
+  padding: var(--spacing200);
+`;
+export const StyledFooterWrapper = styled.div`
+  border-top: 1px solid var(--colorsUtilityMajor200);
+  padding: var(--spacing200);
+`;
 export const StyledValidationMessage = styled.div`
   ${({
   error

package/esm/locales/de-de.js

@@ -148,6 +148,24 @@ const deDE = {
   pod: {
     undo: () => "Rückgängig"
   },
+  textEditor: {
+    boldAria: () => "Fett",
+    cancelButton: () => "Abbrechen",
+    cancelButtonAria: () => "Abbrechen",
+    characterCounter(count) {
+      return `Noch ${typeof count === "number" ? count.toString() : count} Zeichen`;
+    },
+    characterLimit(count) {
+      return `Sie sind ${count} Zeichen über dem Zeichenlimit`;
+    },
+    contentEditorAria: () => "Editor für Rich-Text-Inhalte",
+    italicAria: () => "Kursiv",
+    orderedListAria: () => "Sortierte Liste",
+    saveButton: () => "Speichern",
+    saveButtonAria: () => "Speichern",
+    toolbarAriaLabel: () => "Formatierung",
+    unorderedListAria: () => "Unsortierte Liste"
+  },
   search: {
     searchButtonText: () => "Suchen"
   },

package/esm/locales/es-es.js

@@ -149,6 +149,24 @@ const esES = {
   pod: {
     undo: () => "Deshacer"
   },
+  textEditor: {
+    boldAria: () => "Negrita",
+    cancelButton: () => "Cancelar",
+    cancelButtonAria: () => "Cancelar",
+    characterCounter(count) {
+      return `Quedan ${typeof count === "number" ? count.toString() : count} caracteres`;
+    },
+    characterLimit(count) {
+      return `El límite de ${count} caracteres se ha superado.`;
+    },
+    contentEditorAria: () => "Editor de contenidos de texto enriquecido",
+    italicAria: () => "Cursiva",
+    orderedListAria: () => "Lista ordenada",
+    saveButton: () => "Guardar",
+    saveButtonAria: () => "Guardar",
+    toolbarAriaLabel: () => "Formato",
+    unorderedListAria: () => "Lista no ordenada"
+  },
   search: {
     searchButtonText: () => "Buscar"
   },

package/esm/locales/fr-ca.js

@@ -149,6 +149,24 @@ const frCA = {
   pod: {
     undo: () => "Annuler"
   },
+  textEditor: {
+    boldAria: () => "Gras",
+    cancelButton: () => "Annuler",
+    cancelButtonAria: () => "Annuler",
+    characterCounter(count) {
+      return `${typeof count === "number" ? count.toString() : count} caractères restants`;
+    },
+    characterLimit(count) {
+      return `Vous avez dépassé de ${count} caractères la limite autorisée`;
+    },
+    contentEditorAria: () => "Éditeur de texte enrichi",
+    italicAria: () => "Italique",
+    orderedListAria: () => "Liste ordonnée",
+    saveButton: () => "Enregistrer",
+    saveButtonAria: () => "Enregistrer",
+    toolbarAriaLabel: () => "Mise en forme",
+    unorderedListAria: () => "Liste non ordonnée"
+  },
   search: {
     searchButtonText: () => "Chercher"
   },

package/esm/locales/fr-fr.js

@@ -149,6 +149,24 @@ const frFR = {
   pod: {
     undo: () => "Annuler"
   },
+  textEditor: {
+    boldAria: () => "Gras",
+    cancelButton: () => "Annuler",
+    cancelButtonAria: () => "Annuler",
+    characterCounter(count) {
+      return `${typeof count === "number" ? count.toString() : count} caractères restants`;
+    },
+    characterLimit(count) {
+      return `Vous avez dépassé de ${count} caractères la limite autorisée`;
+    },
+    contentEditorAria: () => "Éditeur de texte enrichi",
+    italicAria: () => "Italique",
+    orderedListAria: () => "Liste ordonnée",
+    saveButton: () => "Enregistrer",
+    saveButtonAria: () => "Enregistrer",
+    toolbarAriaLabel: () => "Mise en forme",
+    unorderedListAria: () => "Liste non ordonnée"
+  },
   search: {
     searchButtonText: () => "Rechercher"
   },

package/lib/components/note/note.component.js

@@ -50,8 +50,7 @@ const Note = ({
   };
   return /*#__PURE__*/_react.default.createElement(_textEditor.default.Provider, {
     value: {
-      onLinkAdded,
-      readOnly: true
+      onLinkAdded
     }
   }, /*#__PURE__*/_react.default.createElement(_note.StyledNote, _extends({
     width: width

package/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
 export interface ContentEditorProps {
-    /** The active error message of the editor */
-    error?: string;
     /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
     /** The namespace of the editor that this content editor belongs to */
@@ -10,8 +8,8 @@ export interface ContentEditorProps {
     previews?: React.JSX.Element[];
     /** The number of rows to render in the editor */
     rows?: number;
-    /** The active warning message of the editor */
-    warning?: string;
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
 }
-declare const ContentEditor: ({ error, inputHint, namespace, previews, rows, warning, }: ContentEditorProps) => React.JSX.Element;
+declare const ContentEditor: React.ForwardRefExoticComponent<ContentEditorProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentEditor;

package/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js

@@ -5,31 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _contentEditor = _interopRequireDefault(require("./content-editor.style"));
 var _ = require("..");
 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); }
+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; }
 /**
  * This is where the actual content editor is rendered. It uses the `ContentEditable` component from the `@lexical/react` package
  * as per their documentation. It also uses the `LinkPreviewerPlugin` to render link previews.
  */
 
-const ContentEditor = ({
-  error,
+const ContentEditor = /*#__PURE__*/(0, _react.forwardRef)(({
   inputHint,
   namespace,
   previews = [],
   rows,
-  warning
-}) => {
+  readOnly
+}, ref) => {
   const focusAtEnd = (0, _.useCursorAtEnd)();
   return /*#__PURE__*/_react.default.createElement(_contentEditor.default, {
     "data-role": `${namespace}-content-editable`,
-    error: error,
     namespace: namespace,
     rows: rows,
-    warning: warning
+    readOnly: readOnly
   }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, {
+    ref: ref,
     "aria-describedby": inputHint && `${namespace}-input-hint`,
     "aria-labelledby": `${namespace}-label`,
     className: `${namespace}-editable`,
@@ -45,9 +46,7 @@ const ContentEditor = ({
     "aria-autocomplete": undefined,
     "aria-readonly": undefined
   }), /*#__PURE__*/_react.default.createElement(_.LinkPreviewerPlugin, {
-    error: error,
-    previews: previews,
-    warning: warning
+    previews: previews
   }));
-};
+});
 var _default = exports.default = ContentEditor;

package/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.d.ts

@@ -1,6 +1,7 @@
 import { ContentEditorProps } from "./content-editor.component";
 interface StyledContentEditableProps extends ContentEditorProps {
     showBorders?: boolean;
+    readOnly?: boolean;
 }
 declare const StyledContentEditable: import("styled-components").StyledComponent<"div", any, StyledContentEditableProps, never>;
 export default StyledContentEditable;

package/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.js

@@ -11,28 +11,22 @@ const DEFAULT_EDITOR_HEIGHT = 210;
 const FIXED_LINE_HEIGHT = 21;
 const StyledContentEditable = _styledComponents.default.div`
   ${({
-  error,
   namespace,
   rows,
-  warning
+  readOnly
 }) => (0, _styledComponents.css)`
     .${namespace}-editable {
       min-height: ${rows && rows > 2 ? rows * FIXED_LINE_HEIGHT : DEFAULT_EDITOR_HEIGHT}px;
       background-color: var(--colorsUtilityYang100);
-      border-top: 1px solid var(--colorsUtilityMajor200);
-      border-left: 1px solid var(--colorsUtilityMajor200);
-      border-right: 1px solid var(--colorsUtilityMajor200);
+      ${!readOnly && "border-top: 1px solid var(--colorsUtilityMajor200);"}
+      ${readOnly && `
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);      
+      `}
       margin: 0;
       padding: 2px 8px;
-      border-top-left-radius: var(--borderWidth600);
-      border-top-right-radius: var(--borderWidth600);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-
-      ${(error || warning) && (0, _styledComponents.css)`
-        border: none;
-      `}
-
+      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
       :focus {
         outline: none;
       }

package/lib/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.d.ts

@@ -1,11 +1,5 @@
 import React from "react";
-export interface LinkPreviewerProps {
-    /** The active error message of the editor */
-    error?: string;
-    /** The link previews to render at the foot of the editor */
-    previews?: React.JSX.Element[];
-    /** The active warning message of the editor */
-    warning?: string;
-}
-declare const LinkPreviewer: ({ error, previews, warning, }: LinkPreviewerProps) => React.JSX.Element;
+declare const LinkPreviewer: ({ previews, }: {
+    previews?: React.JSX.Element[] | undefined;
+}) => React.JSX.Element;
 export default LinkPreviewer;

package/lib/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.js

@@ -4,24 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _textEditor = _interopRequireDefault(require("../../../text-editor.context"));
+var _react = _interopRequireDefault(require("react"));
 var _linkPreviewer = _interopRequireDefault(require("./link-previewer.style"));
 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); }
-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; }
 const LinkPreviewer = ({
-  error,
-  previews = [],
-  warning
-}) => {
-  const {
-    readOnly
-  } = (0, _react.useContext)(_textEditor.default);
-  return /*#__PURE__*/_react.default.createElement(_linkPreviewer.default, {
-    error: error,
-    readOnly: readOnly,
-    warning: warning
-  }, previews);
-};
+  previews = []
+}) => /*#__PURE__*/_react.default.createElement(_linkPreviewer.default, null, previews);
 var _default = exports.default = LinkPreviewer;

package/lib/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.d.ts

@@ -1,6 +1,2 @@
-import { LinkPreviewerProps } from "./link-previewer.component";
-interface StyledLinkPreviewerProps extends LinkPreviewerProps {
-    readOnly?: boolean;
-}
-declare const StyledLinkPreviewer: import("styled-components").StyledComponent<"div", any, StyledLinkPreviewerProps, never>;
+declare const StyledLinkPreviewer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default StyledLinkPreviewer;

package/lib/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.js

@@ -4,34 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-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; }
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledLinkPreviewer = _styledComponents.default.div`
-  ${({
-  error,
-  readOnly,
-  warning
-}) => (0, _styledComponents.css)`
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: var(--colorsUtilityYang100);
-    border-bottom: 1px solid var(--colorsUtilityMajor200);
-    border-left: 1px solid var(--colorsUtilityMajor200);
-    border-right: 1px solid var(--colorsUtilityMajor200);
-    margin: 0;
-    padding: 2px 8px;
-
-    ${(error || warning) && (0, _styledComponents.css)`
-      border-left: none;
-      border-right: none;
-      border-bottom: none;
-    `}
-
-    ${readOnly && (0, _styledComponents.css)`
-      border-bottom-left-radius: var(--borderWidth600);
-      border-bottom-right-radius: var(--borderWidth600);
-    `}
-  `}
+  margin: 0;
+  padding: 2px 8px;
 `;
 var _default = exports.default = StyledLinkPreviewer;

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

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

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

@@ -19,6 +19,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const Toolbar = ({
   namespace,
+  hasHeader,
   onCancel,
   onSave
 }) => {
@@ -89,6 +90,7 @@ const Toolbar = ({
   }, [buttons]);
   return /*#__PURE__*/_react.default.createElement(_toolbar.StyledToolbar, {
     role: "toolbar",
+    hasHeader: hasHeader,
     "aria-label": locale.textEditor.toolbarAriaLabel(),
     "data-role": `${namespace}-toolbar`,
     id: `${namespace}-toolbar`,

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

@@ -4,7 +4,9 @@ interface FormattingButtonProps extends ButtonProps {
     tabIndex?: number;
     isActive?: boolean;
 }
-declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {
+    hasHeader?: boolean | undefined;
+}, never>;
 declare const FormattingButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CommandButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const FormattingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, FormattingButtonProps, never>;

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

@@ -13,12 +13,16 @@ const StyledToolbar = exports.StyledToolbar = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   gap: 8px;
-  background-color: var(--colorsUtilityMajor025);
-  outline: 1px solid var(--colorsUtilityMajor200);
+  background-color: var(--colorsActionMajorYang100);
   padding: 12px;
-  border-radius: var(--borderRadius100);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: ${({
+  hasHeader
+}) => hasHeader ? "0" : "var(--borderRadius100)"};
+  border-top-right-radius: ${({
+  hasHeader
+}) => hasHeader ? "0" : "var(--borderRadius100)"};
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   justify-content: space-between;
   align-items: center;
   margin-left: 1px;

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

@@ -8,6 +8,10 @@ export interface TextEditorProps extends MarginProps, TagProps {
     characterLimit?: number;
     /** The message to be shown when the editor is in an error state */
     error?: string;
+    /** Custom footer content to be displayed below the editor */
+    footer?: React.ReactNode;
+    /** Custom header content to be displayed above the editor */
+    header?: React.ReactNode;
     /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
     /** Whether the content of the editor can be empty */
@@ -39,5 +43,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, 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, onCancel, onChange, 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

@@ -34,6 +34,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const TextEditor = ({
   characterLimit = 3000,
   error,
+  footer,
+  header,
   inputHint,
   isOptional = false,
   labelText,
@@ -54,7 +56,25 @@ const TextEditor = ({
   const editorRef = (0, _react.useRef)(undefined);
   const locale = (0, _useLocale.default)();
   const [characterLimitWarning, setCharacterLimitWarning] = (0, _react.useState)(undefined);
+  const hasWarningOrError = Boolean(error || characterLimitWarning || warning);
+  const contentEditorRef = (0, _react.useRef)(null);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const editorElement = contentEditorRef?.current;
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    editorElement?.addEventListener("focus", handleFocus);
+    editorElement?.addEventListener("blur", handleBlur);
+    const cleanup = () => {
+      editorElement?.removeEventListener("focus", handleFocus);
+      editorElement?.removeEventListener("blur", handleBlur);
+    };
+    return cleanup;
+  }, [contentEditorRef]);
   const [cancelTrigger, setCancelTrigger] = (0, _react.useState)(false);
   const debounceWaitTime = 500;
   const initialConfig = (0, _react.useMemo)(() => {
@@ -118,8 +138,7 @@ const TextEditor = ({
     "data-role": `${namespace}-editor-wrapper`
   }, (0, _utils2.filterStyledSystemMarginProps)(rest), (0, _tags.default)("text-editor", rest)), /*#__PURE__*/_react.default.createElement(_textEditor.default.Provider, {
     value: {
-      onLinkAdded,
-      readOnly
+      onLinkAdded
     }
   }, /*#__PURE__*/_react.default.createElement(_label.default, {
     isRequired: required,
@@ -143,19 +162,22 @@ const TextEditor = ({
   }, error || characterLimitWarning || warning), /*#__PURE__*/_react.default.createElement(_textEditor2.StyledEditorToolbarWrapper, {
     "data-role": `${namespace}-editor-toolbar-wrapper`,
     id: `${namespace}-editor-toolbar-wrapper`,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
-    focused: isFocused
-  }, /*#__PURE__*/_react.default.createElement(_textEditor2.default, {
+    focused: isFocused,
+    hasWarningOrError: hasWarningOrError
+  }, header && /*#__PURE__*/_react.default.createElement(_textEditor2.StyledHeaderWrapper, {
+    "data-role": `${namespace}-header-wrapper`
+  }, header), !readOnly && /*#__PURE__*/_react.default.createElement(_plugins.ToolbarPlugin, _extends({
+    hasHeader: Boolean(header)
+  }, toolbarProps)), /*#__PURE__*/_react.default.createElement(_textEditor2.default, {
     "data-role": `${namespace}-editor`
   }, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/_react.default.createElement(_plugins.ContentEditor, {
-      error: error,
+      ref: contentEditorRef,
       inputHint: inputHint,
       namespace: namespace,
       previews: previews,
       rows: rows,
-      warning: warning
+      readOnly: readOnly
     }),
     placeholder: /*#__PURE__*/_react.default.createElement(_plugins.Placeholder, {
       namespace: namespace,
@@ -168,7 +190,9 @@ const TextEditor = ({
     validateUrl: _helpers.validateUrl
   }), /*#__PURE__*/_react.default.createElement(_LexicalClickableLinkPlugin.ClickableLinkPlugin, {
     newTab: true
-  }), /*#__PURE__*/_react.default.createElement(_plugins.AutoLinkerPlugin, null)), !readOnly && /*#__PURE__*/_react.default.createElement(_plugins.ToolbarPlugin, toolbarProps), /*#__PURE__*/_react.default.createElement(_plugins.LinkMonitorPlugin, null)), characterLimit > 0 && !readOnly && /*#__PURE__*/_react.default.createElement(_plugins.CharacterCounterPlugin, {
+  }), /*#__PURE__*/_react.default.createElement(_plugins.AutoLinkerPlugin, null)), footer && /*#__PURE__*/_react.default.createElement(_textEditor2.StyledFooterWrapper, {
+    "data-role": `${namespace}-footer-wrapper`
+  }, footer), /*#__PURE__*/_react.default.createElement(_plugins.LinkMonitorPlugin, null)), characterLimit > 0 && !readOnly && /*#__PURE__*/_react.default.createElement(_plugins.CharacterCounterPlugin, {
     maxChars: characterLimit,
     namespace: namespace
   })))));

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

@@ -1,6 +1,5 @@
 import React from "react";
 declare const _default: React.Context<{
     onLinkAdded?: ((link: string, state: string) => void) | undefined;
-    readOnly?: boolean | undefined;
 }>;
 export default _default;

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

@@ -11,10 +11,13 @@ interface StyledValidationMessageProps {
 }
 interface StyledEditorToolbarWrapperProps {
     focused?: boolean;
+    hasWarningOrError?: boolean;
 }
 export declare const StyledTextEditor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const StyledTextEditorWrapper: import("styled-components").StyledComponent<"div", any, StyledTextEditorWrapperProps, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, StyledWrapperProps, never>;
 export declare const StyledEditorToolbarWrapper: import("styled-components").StyledComponent<"div", any, StyledEditorToolbarWrapperProps, never>;
+export declare const StyledHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledValidationMessage: import("styled-components").StyledComponent<"div", any, StyledValidationMessageProps, never>;
 export default StyledTextEditor;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledWrapper = exports.StyledValidationMessage = exports.StyledTextEditorWrapper = exports.StyledTextEditor = exports.StyledEditorToolbarWrapper = void 0;
+exports.default = exports.StyledWrapper = exports.StyledValidationMessage = exports.StyledTextEditorWrapper = exports.StyledTextEditor = exports.StyledHeaderWrapper = exports.StyledFooterWrapper = exports.StyledEditorToolbarWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _box = _interopRequireDefault(require("../box"));
@@ -44,24 +44,28 @@ const StyledWrapper = exports.StyledWrapper = _styledComponents.default.div`
         .${namespace}-editable, #${namespace}-toolbar {
           outline: none;
         }
-
-        #${namespace}-toolbar {
-          border-top: 1px solid var(--colorsUtilityMajor200);
-        }
       }
     `}
   `};
 `;
 const StyledEditorToolbarWrapper = exports.StyledEditorToolbarWrapper = _styledComponents.default.div`
   ${({
-  focused
+  focused,
+  hasWarningOrError
 }) => (0, _styledComponents.css)`
     border-radius: var(--borderRadius100);
-    outline: none;
+    outline: ${hasWarningOrError ? "none" : "1px solid var(--colorsUtilityMajor200)"};
 
     ${focused && (0, _addFocusStyling.default)()}
   `}
 `;
+const StyledHeaderWrapper = exports.StyledHeaderWrapper = _styledComponents.default.div`
+  padding: var(--spacing200);
+`;
+const StyledFooterWrapper = exports.StyledFooterWrapper = _styledComponents.default.div`
+  border-top: 1px solid var(--colorsUtilityMajor200);
+  padding: var(--spacing200);
+`;
 const StyledValidationMessage = exports.StyledValidationMessage = _styledComponents.default.div`
   ${({
   error

package/lib/locales/de-de.js

@@ -154,6 +154,24 @@ const deDE = {
   pod: {
     undo: () => "Rückgängig"
   },
+  textEditor: {
+    boldAria: () => "Fett",
+    cancelButton: () => "Abbrechen",
+    cancelButtonAria: () => "Abbrechen",
+    characterCounter(count) {
+      return `Noch ${typeof count === "number" ? count.toString() : count} Zeichen`;
+    },
+    characterLimit(count) {
+      return `Sie sind ${count} Zeichen über dem Zeichenlimit`;
+    },
+    contentEditorAria: () => "Editor für Rich-Text-Inhalte",
+    italicAria: () => "Kursiv",
+    orderedListAria: () => "Sortierte Liste",
+    saveButton: () => "Speichern",
+    saveButtonAria: () => "Speichern",
+    toolbarAriaLabel: () => "Formatierung",
+    unorderedListAria: () => "Unsortierte Liste"
+  },
   search: {
     searchButtonText: () => "Suchen"
   },

package/lib/locales/es-es.js

@@ -155,6 +155,24 @@ const esES = {
   pod: {
     undo: () => "Deshacer"
   },
+  textEditor: {
+    boldAria: () => "Negrita",
+    cancelButton: () => "Cancelar",
+    cancelButtonAria: () => "Cancelar",
+    characterCounter(count) {
+      return `Quedan ${typeof count === "number" ? count.toString() : count} caracteres`;
+    },
+    characterLimit(count) {
+      return `El límite de ${count} caracteres se ha superado.`;
+    },
+    contentEditorAria: () => "Editor de contenidos de texto enriquecido",
+    italicAria: () => "Cursiva",
+    orderedListAria: () => "Lista ordenada",
+    saveButton: () => "Guardar",
+    saveButtonAria: () => "Guardar",
+    toolbarAriaLabel: () => "Formato",
+    unorderedListAria: () => "Lista no ordenada"
+  },
   search: {
     searchButtonText: () => "Buscar"
   },

package/lib/locales/fr-ca.js

@@ -155,6 +155,24 @@ const frCA = {
   pod: {
     undo: () => "Annuler"
   },
+  textEditor: {
+    boldAria: () => "Gras",
+    cancelButton: () => "Annuler",
+    cancelButtonAria: () => "Annuler",
+    characterCounter(count) {
+      return `${typeof count === "number" ? count.toString() : count} caractères restants`;
+    },
+    characterLimit(count) {
+      return `Vous avez dépassé de ${count} caractères la limite autorisée`;
+    },
+    contentEditorAria: () => "Éditeur de texte enrichi",
+    italicAria: () => "Italique",
+    orderedListAria: () => "Liste ordonnée",
+    saveButton: () => "Enregistrer",
+    saveButtonAria: () => "Enregistrer",
+    toolbarAriaLabel: () => "Mise en forme",
+    unorderedListAria: () => "Liste non ordonnée"
+  },
   search: {
     searchButtonText: () => "Chercher"
   },

package/lib/locales/fr-fr.js

@@ -155,6 +155,24 @@ const frFR = {
   pod: {
     undo: () => "Annuler"
   },
+  textEditor: {
+    boldAria: () => "Gras",
+    cancelButton: () => "Annuler",
+    cancelButtonAria: () => "Annuler",
+    characterCounter(count) {
+      return `${typeof count === "number" ? count.toString() : count} caractères restants`;
+    },
+    characterLimit(count) {
+      return `Vous avez dépassé de ${count} caractères la limite autorisée`;
+    },
+    contentEditorAria: () => "Éditeur de texte enrichi",
+    italicAria: () => "Italique",
+    orderedListAria: () => "Liste ordonnée",
+    saveButton: () => "Enregistrer",
+    saveButtonAria: () => "Enregistrer",
+    toolbarAriaLabel: () => "Mise en forme",
+    unorderedListAria: () => "Liste non ordonnée"
+  },
   search: {
     searchButtonText: () => "Rechercher"
   },

package/package.json

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