carbon-react 158.6.1 → 158.7.0

package/esm/components/text-editor/__internal__/__ui__/Toolbar/buttons/typography-dropdown/dropdown.style.d.ts

@@ -0,0 +1,13 @@
+type ButtonProps = {
+    size: "small" | "medium" | "large";
+    menuOpen?: boolean;
+};
+type ListProps = {
+    size: "small" | "medium" | "large";
+};
+export declare const StyledButton: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, ListProps, never>;
+export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", any, {
+    isFocused: boolean;
+}, never>;
+export {};

package/esm/components/text-editor/__internal__/__ui__/Toolbar/buttons/typography-dropdown/dropdown.style.js

@@ -0,0 +1 @@
+import o,{css as e}from"styled-components";import t from"../../../../../../../style/utils/add-focus-styling.js";const r=o.button.withConfig({displayName:"dropdown.style__StyledButton",componentId:"sc-658dffa6-0"})(["width:100%;min-height:32px;display:flex;justify-content:space-between;align-items:center;border:none;background:transparent;border-radius:var(--borderRadius100);cursor:pointer;font-size:var(--fontSizes100);font-weight:var(--fontWeights500);height:",";"," &:focus{","}"],(({size:o})=>(o=>{switch(o){case"small":return"32px";case"large":return"48px";default:return"40px"}})(o)),(({menuOpen:o})=>o&&e(["",""],t())),t()),i=o.ul.withConfig({displayName:"dropdown.style__StyledMenu",componentId:"sc-658dffa6-1"})(["position:absolute;top:",";left:0;z-index:1;background:white;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.15);list-style:none;margin:0;padding:8px 0;width:100%;max-height:200px;overflow-y:auto;"],(({size:o})=>"small"===o?"38px":"large"===o?"54px":"46px")),n=o.li.withConfig({displayName:"dropdown.style__StyledMenuItem",componentId:"sc-658dffa6-2"})(["background:",";cursor:pointer;user-select:none;padding:8px 16px;color:var(--colorsUtilityYin055);&&{&:hover{background:#f0f0f0;color:var(--colorsUtilityYin100);}}&:focus-visible{box-shadow:inset 0px 0px 0px var(--borderWidth300) var(--colorsUtilityYin090);outline:none;background:white;&:hover{background-color:var(--colorsUtilityYang100);}}"],(o=>o.isFocused?"#f0f0f0":"white"));export{r as StyledButton,i as StyledMenu,n as StyledMenuItem};

package/esm/components/text-editor/__internal__/__ui__/Toolbar/buttons/typography.component.d.ts

@@ -0,0 +1,20 @@
+import { RangeSelection } from "lexical";
+import React, { RefObject } from "react";
+import { StyledSpanNode } from "../../../__nodes__/styled-span.node";
+export type TypographyKey = "paragraph" | "title" | "subtitle" | "sectionHeader" | "sectionSubheader";
+export type TypographySelectorProps = {
+    /** Reference to the editor for the toolbar to consume */
+    contentEditorRef: RefObject<HTMLDivElement>;
+    /** The namespace of the editor that this dropdown belongs to */
+    namespace: string;
+    /** Whether the button is the first in a group of buttons */
+    isFirstButton?: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    focusedIndex?: number;
+    setFocusedIndex?: (index: number) => void;
+    size?: "small" | "medium" | "large";
+};
+export declare function getStyledSpanFromSelection(selection: RangeSelection): StyledSpanNode | null;
+declare const TypographySelector: ({ contentEditorRef, namespace, isFirstButton, isOpen, setIsOpen, focusedIndex, setFocusedIndex, size, }: TypographySelectorProps) => React.JSX.Element;
+export default TypographySelector;

package/esm/components/text-editor/__internal__/__ui__/Toolbar/buttons/typography.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{SELECTION_CHANGE_COMMAND as o,$getSelection as n,$isRangeSelection as r,COMMAND_PRIORITY_LOW as s,TextNode as a,$getRoot as i,$isParagraphNode as p}from"lexical";import{useState as c,useEffect as d}from"react";import{Box as m}from"../../../../../box/box.component.js";import{StyledSpanNode as l}from"../../../__nodes__/styled-span.node.js";import f from"./typography-dropdown/dropdown.component.js";function u(e){let t=e.anchor.getNode();for(;t;){if(t instanceof l)return t;t=t.getParent()}return null}const g=({contentEditorRef:g,namespace:h,isFirstButton:x=!1,isOpen:C,setIsOpen:y,focusedIndex:F=-1,setFocusedIndex:I,size:O})=>{const[T]=t(),[b,j]=c("paragraph");d((()=>T.registerCommand(o,(()=>(setTimeout((()=>{T.getEditorState().read((()=>{const e=n();if(r(e)){const t=u(e);j(t?t.getTypographyKey():"paragraph")}}))}),0),!1)),s)),[T]);const v=e=>{const t=e;j(t),T.update((()=>{const e=n();if(r(e)){const o=e.getNodes(),n=e.anchor.offset,r=e.focus.offset;let s=null;o.forEach((e=>{if(e instanceof a||e instanceof l){let o;o="paragraph"===t?new a(e.getTextContent()):l.createFromOption(t,e.getTextContent()),e.replace(o),s||(s=o)}})),s&&s.select(n,r)}else{let e;e="paragraph"===t?new a(""):l.createFromOption(t,"");const o=i(),n=o.getLastChild();p(n)?n.append(e):o.append(e),e.select()}}),{discrete:!0}),setTimeout((()=>{var e;null==g||null===(e=g.current)||void 0===e||e.focus(),T.dispatchCommand(o,void 0)}),0)};return e(m,{minWidth:"150px",marginRight:"spacing05",children:e(f,{size:O,namespace:h,onChange:e=>{v(e)},value:b,isFirstButton:x,options:["title","subtitle","sectionHeader","sectionSubheader","paragraph"].map((e=>({id:e,key:e,onClick:()=>{v(e)}}))),isOpen:C,setIsOpen:y,focusedIndex:F,setFocusedIndex:I})})};export{g as default,u as getStyledSpanFromSelection};

package/esm/components/text-editor/__internal__/__ui__/Toolbar/buttons/underline.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FormattingButtonProps } from "../../../__utils__/interfaces.types";
+declare const UnderlineButton: React.ForwardRefExoticComponent<FormattingButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default UnderlineButton;

package/esm/components/text-editor/__internal__/__ui__/Toolbar/buttons/underline.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{FORMAT_TEXT_COMMAND as r}from"lexical";import o from"react";import{FormattingButton as i}from"../toolbar.style.js";import a from"../../../../../../hooks/__internal__/useLocale/useLocale.js";import{TEXT_EDITOR_ACTION_TYPES as n}from"../../../__utils__/constants.js";const s=o.forwardRef((({isActive:o,isFirstButton:s=!1,namespace:l,size:m},c)=>{const[u]=t(),p=a();return e(i,{size:m,"aria-label":p.textEditor.underlineAria(),onClick:()=>{u.isEditable()&&u.dispatchCommand(r,n.Underline)},iconType:"underline",onMouseDown:e=>e.preventDefault(),buttonType:o?"primary":"tertiary",isActive:o,"aria-pressed":o,"data-role":`${l}-underline-button`,id:`${l}-underline-button`,tabIndex:s?0:-1,className:"toolbar-button",ref:c})}));export{s as default};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ToolbarProps } from "../../__utils__/interfaces.types";
+declare const Toolbar: ({ contentEditorRef, namespace, hasHeader, onCancel, onSave, size, toolbarControls, }: ToolbarProps) => React.JSX.Element | null;
+export default Toolbar;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useLexicalComposerContext as n}from"@lexical/react/LexicalComposerContext";import{mergeRegister as i}from"@lexical/utils";import{$getSelection as r,$isRangeSelection as l,$getRoot as a,$createTextNode as s,$createParagraphNode as d,$isParagraphNode as c}from"lexical";import{useRef as u,useState as m,useCallback as p,useEffect as b}from"react";import{StyledToolbarWrapper as f,StyledToolbar as h,CommandButtons as g}from"./toolbar.style.js";import v from"../../../../button/button.component.js";import y from"../../../../../hooks/__internal__/useLocale/useLocale.js";import x from"./buttons/bold.component.js";import k from"./buttons/hyperlink.component.js";import j from"./buttons/italic.component.js";import E from"./buttons/list.component.js";import F from"./buttons/save.component.js";import w from"./buttons/typography.component.js";import z from"./buttons/underline.component.js";import B from"./button-group/button-group.component.js";import{TEXT_EDITOR_ACTION_TYPES as C}from"../../__utils__/constants.js";import{Textbox as D}from"../../../../textbox/textbox.component.js";import{$createLinkNode as L}from"@lexical/link";import{Dialog as $}from"../../../../dialog/dialog.component.js";import{Form as A}from"../../../../form/form.component.js";import"../../../../form/required-fields-indicator/required-fields-indicator.component.js";const I=({contentEditorRef:I,namespace:S,hasHeader:_,onCancel:q,onSave:O,size:T="medium",toolbarControls:H=["typography","bold","italic","underline","unordered-list","ordered-list","link"]})=>{const[R]=n(),U=R.isEditable(),N=u(null),[K,G]=m(!1),[J,M]=m(!1),[P,Q]=m(!1),[V,W]=m(!1),[X,Y]=m(!1),[Z,ee]=m(-1),[te,oe]=m(""),[ne,ie]=m(""),re=y(),le=H.includes("typography"),ae=H.includes("bold")||H.includes("italic")||H.includes("underline"),se=H.includes("unordered-list")||H.includes("ordered-list"),de=H.includes("link"),ce=p((()=>{const e=r();l(e)&&(G(e.hasFormat(C.Bold)),M(e.hasFormat(C.Italic)),Q(e.hasFormat(C.Underline)))}),[]);b((()=>i(R.registerUpdateListener((({editorState:e})=>{e.read((()=>{R.isEditable()&&ce()}))})))),[ce,R]);const ue=()=>{oe(""),ie(""),W(!1)};if(!U)return null;const me=te.length&&ne.length;return e(f,{"data-role":`${S}-toolbar-wrapper`,hasHeader:_,id:`${S}-toolbar-wrapper`,size:T,children:[e(h,{role:"toolbar","aria-label":re.textEditor.toolbarAriaLabel(),"data-role":`${S}-toolbar`,id:`${S}-toolbar`,ref:N,onKeyDown:e=>{var t,o;if(0===H.length||!N.current)return;const n=Array.from(null===(t=N.current)||void 0===t?void 0:t.querySelectorAll("button.toolbar-button"));if(!n.length)return;const i=n.findIndex((e=>{var t;return e.id===(null===(t=document.activeElement)||void 0===t?void 0:t.id)}));let r=-1;switch(e.key){case"ArrowRight":e.preventDefault(),X||(r=i<n.length-1?i+1:0);break;case"ArrowLeft":e.preventDefault(),X||(r=i>0?i-1:n.length-1);break;case"Home":e.preventDefault(),r=0;break;case"End":e.preventDefault(),r=n.length-1;break;default:return}n.forEach(((e,t)=>{e.tabIndex=t===r?0:-1})),r>-1&&(null===(o=n[r])||void 0===o||o.focus())},tabIndex:-1,children:[e(o,{children:[le&&t(B,{name:"typography-formatting-buttons",namespace:S,showDivider:ae||se||de,children:t(w,{contentEditorRef:I,namespace:S,isFirstButton:!0,isOpen:X,setIsOpen:Y,focusedIndex:Z,setFocusedIndex:ee,size:T})}),ae&&e(B,{name:"text-formatting-buttons",namespace:S,showDivider:se||de,children:[H.includes("bold")&&t(x,{isActive:K,namespace:S,isFirstButton:!le,size:T}),H.includes("italic")&&t(j,{isActive:J,namespace:S,isFirstButton:!le&&!H.includes("bold"),size:T}),H.includes("underline")&&t(z,{isActive:P,namespace:S,isFirstButton:!le&&!H.includes("bold")&&!H.includes("italic"),size:T})]}),se&&t(B,{name:"list-formatting-buttons",namespace:S,showDivider:de,children:t(E,{namespace:S,olIsFirstButton:!le&&!ae&&!H.includes("unordered-list"),showOL:H.includes("ordered-list"),showUL:H.includes("unordered-list"),ulIsFirstButton:!le&&!ae,size:T})}),de&&t(B,{name:"hyperlink-formatting-buttons",namespace:S,showDivider:!1,children:t(k,{namespace:S,isFirstButton:!le&&!ae&&!se,setDialogOpen:W,size:T})})]}),t($,{open:V,onCancel:()=>{ue()},title:re.textEditor.hyperlink.dialogTitle(),"data-role":`${S}-hyperlink-dialog`,"aria-label":re.textEditor.hyperlink.dialogTitle(),size:"small",children:e(A,{leftSideButtons:t(v,{"data-role":`${S}-hyperlink-cancel-button`,onClick:()=>{ue()},children:"Cancel"}),saveButton:t(v,{buttonType:"primary",type:"submit",disabled:!me,"data-role":`${S}-hyperlink-save-button`,children:"Save"}),onSubmit:e=>{e.preventDefault(),R.isEditable()&&(R.update((()=>{const e=a(),t=e.getChildrenSize(),o=r(),n=L(ne);if(n.append(s(te)),0===t){const t=d();t.append(n),e.append(t),t.selectEnd()}else if(l(o))o.insertNodes([n]);else{const t=e.getLastChild();c(t)&&t.append(n)}})),ue())},children:[t(D,{label:re.textEditor.hyperlink.textFieldLabel(),name:"text",required:!0,"data-role":`${S}-hyperlink-text-field`,value:te,onChange:e=>oe(e.target.value)}),t(D,{label:re.textEditor.hyperlink.linkFieldLabel(),name:"link",required:!0,"data-role":`${S}-hyperlink-link-field`,value:ne,onChange:e=>ie(e.target.value)})]})})]}),e(g,{"data-role":`${S}-command-buttons`,children:[q&&t(v,{buttonType:"tertiary","data-role":`${S}-cancel-button`,"aria-label":re.textEditor.cancelButtonAria(),onClick:()=>null==q?void 0:q(R),size:T,className:"command-button",children:re.textEditor.cancelButton()}),O&&t(F,{namespace:S,onSave:O,size:T})]})]})};export{I as default};

package/esm/components/text-editor/__internal__/{plugins → __ui__}/Toolbar/toolbar.style.d.ts

@@ -2,11 +2,15 @@ import { ButtonProps } from "../../../../button";
 interface FormattingButtonProps extends ButtonProps {
     tabIndex?: number;
     isActive?: boolean;
+    onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
+    size?: "small" | "medium" | "large";
 }
-declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {
+export declare const getPaddingForSize: (size?: "small" | "medium" | "large") => "16px" | "12px" | "8px";
+declare const StyledToolbarWrapper: import("styled-components").StyledComponent<"div", any, {
     hasHeader?: boolean;
+    size?: "small" | "medium" | "large";
 }, never>;
-declare const FormattingButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledToolbar: 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>;
-export { StyledToolbar, FormattingButtons, CommandButtons, FormattingButton };
+export { StyledToolbar, StyledToolbarWrapper, CommandButtons, FormattingButton, };

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

@@ -0,0 +1 @@
+import r,{css as o}from"styled-components";import t from"../../../../button/button.component.js";const i=r=>{switch(r){case"small":return"8px";case"large":return"16px";default:return"12px"}},e=r.div.withConfig({displayName:"toolbar.style__StyledToolbarWrapper",componentId:"sc-524b490c-0"})(["display:flex;flex-direction:row;gap:8px;background-color:var(--colorsActionMajorYang100);padding:",";border-top-left-radius:",";border-top-right-radius:",";border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px solid var(--colorsUtilityMajor200);align-items:center;flex-wrap:wrap;"],(r=>i(r.size)),(({hasHeader:r})=>r?"0":"var(--borderRadius100)"),(({hasHeader:r})=>r?"0":"var(--borderRadius100)")),a=r.div.withConfig({displayName:"toolbar.style__StyledToolbar",componentId:"sc-524b490c-1"})(["display:flex;flex-direction:row;gap:8px;background-color:var(--colorsActionMajorYang100);align-items:center;flex-wrap:wrap;"]),n=r.div.withConfig({displayName:"toolbar.style__CommandButtons",componentId:"sc-524b490c-2"})(["display:flex;flex-direction:row;gap:8px;"]),l=r(t).withConfig({displayName:"toolbar.style__FormattingButton",componentId:"sc-524b490c-3"})(["display:inline-flex;justify-content:center;align-items:center;padding:6px;border-radius:var(--borderRadius100);border:medium;cursor:pointer;&:hover{> span{color:var(--colorsUtilityYang100) !important;}}"," "," > span{","}"],(({size:r})=>{switch(r){case"large":return o(["min-width:48px;min-height:48px;"]);case"small":return o(["min-width:32px;min-height:32px;"]);default:return o(["min-width:40px;min-height:40px;"])}}),(({isActive:r})=>o(["background-color:",";"],r?"var(--colorsActionMajor600)":"transparent")),(({isActive:r})=>o(["color:"," !important;"],r?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin100) ")));export{n as CommandButtons,l as FormattingButton,a as StyledToolbar,e as StyledToolbarWrapper,i as getPaddingForSize};

package/esm/components/text-editor/__internal__/{plugins → __ui__}/index.d.ts

@@ -1,8 +1,7 @@
-export { default as AutoLinkerPlugin } from "./AutoLinker";
 export { default as CharacterCounterPlugin } from "./CharacterCounter";
 export { default as ContentEditor } from "./ContentEditor";
-export { default as LinkMonitorPlugin } from "./LinkMonitor";
 export { default as LinkPreviewerPlugin } from "./LinkPreviewer";
+export { default as Mentions } from "./Mentions";
 export { default as Placeholder } from "./Placeholder";
 export { default as ToolbarPlugin } from "./Toolbar";
-export { default as useCursorAtEnd } from "./useCursorAtEnd";
+export type { Mention } from "./Mentions";

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

@@ -0,0 +1 @@
+export{default as CharacterCounterPlugin}from"./CharacterCounter/character-counter.component.js";export{default as ContentEditor}from"./ContentEditor/content-editor.component.js";export{default as LinkPreviewerPlugin}from"./LinkPreviewer/link-previewer.component.js";export{MentionsPlugin as Mentions}from"./Mentions/mentions.component.js";export{default as Placeholder}from"./Placeholder/placeholder.component.js";export{default as ToolbarPlugin}from"./Toolbar/toolbar.component.js";

package/esm/components/text-editor/__internal__/{constants.d.ts → __utils__/constants.d.ts}

@@ -3,18 +3,19 @@ import { LinkNode } from "@lexical/link";
 import { ListNode, ListItemNode, ListType } from "@lexical/list";
 import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { EditorThemeClasses, TextFormatType } from "lexical";
+import { TextFormatType } from "lexical";
+import { StyledSpanNode } from "../__nodes__/styled-span.node";
+import { MentionNode } from "../__nodes__/mention.node";
 /** The default prefix applied to the editor's internal class names, IDs, etc. */
 declare const COMPONENT_PREFIX = "carbon-rte";
-/** The theme overrides needed to correctly style the editor */
-declare const theme: EditorThemeClasses;
 /** The available actions that can be used in the editor */
-declare const TextEditorActionTypes: {
+declare const TEXT_EDITOR_ACTION_TYPES: {
     Bold: TextFormatType;
     Italic: TextFormatType;
+    Underline: TextFormatType;
     OrderedList: ListType;
     UnorderedList: ListType;
 };
 /** The nodes supported by markdown */
-declare const markdownNodes: (typeof LinkNode | typeof CodeNode | typeof ListNode | typeof ListItemNode | typeof HeadingNode | typeof QuoteNode | typeof HorizontalRuleNode)[];
-export { COMPONENT_PREFIX, markdownNodes, TextEditorActionTypes, theme };
+declare const MARKDOWN_NODES: (typeof StyledSpanNode | typeof MentionNode | typeof LinkNode | typeof CodeNode | typeof ListNode | typeof ListItemNode | typeof HeadingNode | typeof QuoteNode | typeof HorizontalRuleNode)[];
+export { COMPONENT_PREFIX, MARKDOWN_NODES, TEXT_EDITOR_ACTION_TYPES };

package/esm/components/text-editor/__internal__/__utils__/constants.js

@@ -0,0 +1 @@
+import{CodeNode as e}from"@lexical/code";import{AutoLinkNode as o,LinkNode as r}from"@lexical/link";import{ListNode as i,ListItemNode as l}from"@lexical/list";import{HorizontalRuleNode as t}from"@lexical/react/LexicalHorizontalRuleNode";import{HeadingNode as n,QuoteNode as m}from"@lexical/rich-text";import{StyledSpanNode as d}from"../__nodes__/styled-span.node.js";import{MentionNode as c}from"../__nodes__/mention.node.js";const a="carbon-rte",s={Bold:"bold",Italic:"italic",Underline:"underline",OrderedList:"number",UnorderedList:"bullet"},p=[o,e,r,i,l,n,m,t,d,c];export{a as COMPONENT_PREFIX,p as MARKDOWN_NODES,s as TEXT_EDITOR_ACTION_TYPES};

package/{lib/components/text-editor/__internal__ → esm/components/text-editor/__internal__/__utils__}/helpers.d.ts

@@ -17,4 +17,7 @@ declare const SerializeLexical: (editor: LexicalEditor) => {
 declare const DeserializeHTML: (html: string) => string;
 /** Function to validate a given URL */
 declare function validateUrl(url: string): boolean;
-export { DeserializeHTML, SerializeLexical, validateUrl };
+declare const createFromHTML: (html: string) => string;
+/** Creates and returns a string representation of an empty editor */
+declare const createEmpty: () => string;
+export { createEmpty, createFromHTML, DeserializeHTML, SerializeLexical, validateUrl, };

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

@@ -0,0 +1 @@
+import{createHeadlessEditor as t}from"@lexical/headless";import{$generateNodesFromDOM as e,$generateHtmlFromNodes as r}from"@lexical/html";import{$getRoot as o,$getSelection as n}from"lexical";import{MARKDOWN_NODES as i}from"./constants.js";import{getTheme as s}from"./theme.js";import l from"../../../../__internal__/utils/logger/index.js";const a=t=>{let e,o;return t.read((()=>{const n=t.getEditorState();o=n.toJSON(),e=r(t,null)})),{htmlString:e,json:o}},m=r=>{const a=t({namespace:"html-to-json",onError:t=>l.error(t.message),theme:s(),nodes:i});let m;if(a.update((()=>{const t=(new DOMParser).parseFromString(r,"text/html"),i=e(a,t);o().select();const s=n();if(s)try{s.insertNodes(i)}catch(t){m=t}}),{discrete:!0}),m)throw m;const c=a.getEditorState().toJSON();return JSON.stringify(c)},c=new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);function p(t){return"https://"===t||c.test(t)}const d=t=>m(t),h=()=>'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';export{m as DeserializeHTML,a as SerializeLexical,h as createEmpty,d as createFromHTML,p as validateUrl};

package/esm/components/text-editor/__internal__/__utils__/interfaces.types.d.ts

@@ -0,0 +1,185 @@
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../../../__internal__/utils/helpers/tags";
+import { LexicalEditor } from "lexical";
+import { RefObject } from "react";
+export interface TextEditorHandle {
+    /** Programmatically focus on the text editor. */
+    focus: () => void;
+}
+export interface TextEditorProps extends MarginProps, TagProps {
+    /** The maximum number of characters allowed in the editor */
+    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;
+    /** The label to display above the editor */
+    labelText: string;
+    /** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
+    namespace?: string;
+    /** Callback that is triggered when the editor loses focus. */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * [Legacy] Callback that is triggered when the editor's cancel button is activated. The cancel button is rendered when this function is provided.
+     * @deprecated Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.
+     */
+    onCancel?: () => void;
+    /** Callback that is triggered when the editor's text content is modified or styled. */
+    onChange?: (value: string, formattedValues: EditorFormattedValues) => void;
+    /** Callback that is triggered when the editor gains focus. */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /** Callback that is triggered when a link is added in the editor's content. */
+    onLinkAdded?: (link: string, state: string) => void;
+    /**
+     * [Legacy] Callback that is triggered when the editor's save button is activated. The save button is rendered when this function is provided.
+     * @deprecated Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality.
+     */
+    onSave?: (value: EditorFormattedValues) => void;
+    /** The placeholder to display when the editor is empty */
+    placeholder?: string;
+    /** An array of link preview nodes to render in the editor */
+    previews?: React.JSX.Element[];
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
+    /** Whether the content of the editor is required to have a value */
+    required?: boolean;
+    /** Number greater than 2 multiplied to override the default min-height of the editor */
+    rows?: number;
+    /** The size of the toolbar */
+    size?: "small" | "medium" | "large";
+    /** The message to be shown when the editor is in an warning state */
+    warning?: string;
+    /**
+     * Alias of `initialValue` prop.
+     * @deprecated Please use `initialValue` instead.
+     */
+    value?: string | undefined;
+    /** The initial value of the editor, as a HTML string, or JSON */
+    initialValue?: string | undefined;
+    /**
+     * Allows the injection of one or more Lexical-compatible React components into the editor to extend its functionality.
+     * This prop is optional and supports a single plugin, multiple plugins (via fragments or arrays), or `null`.
+     */
+    customPlugins?: React.ReactNode;
+    /** Render the ValidationMessage above the TextEditor */
+    validationMessagePositionTop?: boolean;
+    /**  */
+    toolbarControls?: ToolbarControl[];
+}
+export interface PlaceholderProps {
+    /** The namespace of the editor that this placeholder belongs to */
+    namespace: string;
+    /** The text to display in the placeholder */
+    text: string | undefined;
+}
+export interface ContentEditorProps {
+    /** 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 editor has focused */
+    isFocused?: boolean;
+    /** The namespace of the editor that this content editor belongs to */
+    namespace: string;
+    /** The link previews to render at the foot of the editor */
+    previews?: React.JSX.Element[];
+    /** The number of rows to render in the editor */
+    rows?: number;
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
+    /** Whether the editor is required */
+    required?: boolean;
+    /** Editor has an error */
+    error?: boolean;
+    /** Editor has a warning */
+    warning?: boolean;
+    /** Render the ValidationMessage above the Editor */
+    validationMessagePositionTop?: boolean;
+    /** The size of the content editor */
+    size?: "small" | "medium" | "large";
+}
+export interface CharacterCounterPluginProps {
+    /** Whether the content editor has focused */
+    isFocused?: boolean;
+    /** The maximum number of characters to allow before showing the warning */
+    maxChars: number;
+    /** The namespace of the editor that this counter belongs to */
+    namespace: string;
+    /** The size of the content editor */
+    marginTop?: string;
+}
+export interface FocusCommandPayload {
+    defaultToEnd: boolean;
+}
+export interface ToolbarProps {
+    /** Reference to the editor for the toolbar to consume */
+    contentEditorRef: RefObject<HTMLDivElement>;
+    /** 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?: (editor: LexicalEditor) => void;
+    /** The callback to call when the save button is clicked */
+    onSave?: (value: EditorFormattedValues) => void;
+    /** The size of the toolbar */
+    size?: "small" | "medium" | "large";
+    /** The list of enabled controls */
+    toolbarControls?: ToolbarControl[];
+}
+export type ButtonGroupProps = {
+    /** The children of the button group */
+    children?: React.ReactNode | React.ReactNode[];
+    /** The name of the button group */
+    name: string;
+    /** The namespace of the containing editor */
+    namespace?: string;
+    /** Determines if the button group should show a divider */
+    showDivider?: boolean;
+};
+export interface FormattingButtonProps {
+    /** Whether the button is active or not, relative to the text at the current cursor position */
+    isActive: boolean;
+    /** Whether the button is the first in a group of buttons */
+    isFirstButton?: boolean;
+    /** The namespace of the editor that this button belongs to */
+    namespace: string;
+    /** The size of the button */
+    size?: "small" | "medium" | "large";
+}
+export interface SaveObjectProps {
+    detail: number;
+    format: number;
+    mode: string;
+    style: string;
+    text: string;
+    type: string;
+    version: number;
+}
+export interface SaveProps {
+    children: SaveObjectProps[];
+}
+export interface EditorFormattedValues {
+    htmlString?: string;
+    json?: {
+        root: {
+            children: SaveProps[];
+            direction: string;
+            format: string;
+            indent: number;
+            type: string;
+            version: string;
+        };
+    };
+}
+export 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: EditorFormattedValues) => void;
+    /** The size of the button */
+    size?: "small" | "medium" | "large";
+}
+export type ToolbarControl = "typography" | "bold" | "italic" | "underline" | "unordered-list" | "ordered-list" | "link";

package/esm/components/text-editor/__internal__/__utils__/theme.d.ts

@@ -0,0 +1,5 @@
+import { EditorThemeClasses } from "lexical";
+/** The theme overrides needed to correctly style the editor */
+declare const THEME: EditorThemeClasses;
+declare const getTheme: () => EditorThemeClasses;
+export { getTheme, THEME };

package/esm/components/text-editor/__internal__/__utils__/theme.js

@@ -0,0 +1 @@
+const t={text:{bold:"textBold",italic:"textItalic",underline:"textUnderline"}},e=()=>t;export{t as THEME,e as getTheme};

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

@@ -1 +1 @@
-export { default } from "./read-only-rte.component";
+export { default } from "./__ui__/Mentions/";

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

@@ -1 +1 @@
-export{default}from"./read-only-rte.component.js";
+export{MentionsPlugin as default}from"./__ui__/Mentions/mentions.component.js";

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

@@ -1,3 +1,5 @@
 export { default } from "./text-editor.component";
-export { createEmpty, createFromHTML } from "./utils";
-export type { TextEditorHandle, TextEditorProps, EditorFormattedValues, } from "./text-editor.component";
+export { createEmpty, createFromHTML } from "./__internal__/__utils__/helpers";
+export type { TextEditorHandle, TextEditorProps, EditorFormattedValues, } from "./__internal__/__utils__/interfaces.types";
+export { default as MentionsPlugin } from "./__internal__/__ui__/Mentions/";
+export type { Mention } from "./__internal__/__ui__/Mentions";

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

@@ -1 +1 @@
-export{TextEditor as default}from"./text-editor.component.js";export{createEmpty,createFromHTML}from"./utils.js";
+export{TextEditor as default}from"./text-editor.component.js";export{createEmpty,createFromHTML}from"./__internal__/__utils__/helpers.js";export{MentionsPlugin}from"./__internal__/__ui__/Mentions/mentions.component.js";

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

@@ -1,65 +1,4 @@
 import React from "react";
-import { MarginProps } from "styled-system";
-import { EditorFormattedValues as SaveCallbackProps } from "./__internal__/plugins/Toolbar/buttons/save.component";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface TextEditorHandle {
-    /** Programmatically focus on the text editor. */
-    focus: () => void;
-}
-export type EditorFormattedValues = SaveCallbackProps;
-export interface TextEditorProps extends MarginProps, TagProps {
-    /** The maximum number of characters allowed in the editor */
-    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;
-    /** The label to display above the editor */
-    labelText: string;
-    /** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
-    namespace?: string;
-    /** Callback that is triggered when the editor loses focus. */
-    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
-    /** Callback that is triggered when the editor's cancel button is activated. The cancel button is rendered when this function is provided.  */
-    onCancel?: () => void;
-    /** Callback that is triggered when the editor's text content is modified or styled. */
-    onChange?: (value: string, formattedValues: EditorFormattedValues) => void;
-    /** Callback that is triggered when the editor gains focus. */
-    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
-    /** Callback that is triggered when a link is added in the editor's content. */
-    onLinkAdded?: (link: string, state: string) => void;
-    /** Callback that is triggered when the editor's save button is activated. The save button is rendered when this function is provided. */
-    onSave?: (value: SaveCallbackProps) => void;
-    /** The placeholder to display when the editor is empty */
-    placeholder?: string;
-    /** An array of link preview nodes to render in the editor */
-    previews?: React.JSX.Element[];
-    /** Whether the editor is read-only */
-    readOnly?: boolean;
-    /** Whether the content of the editor is required to have a value */
-    required?: boolean;
-    /** Number greater than 2 multiplied to override the default min-height of the editor */
-    rows?: number;
-    /** The message to be shown when the editor is in an warning state */
-    warning?: string;
-    /**
-     * Alias of `initialValue` prop.
-     * @deprecated Please use `initialValue` instead.
-     */
-    value?: string | undefined;
-    /** The initial value of the editor, as a HTML string, or JSON */
-    initialValue?: string | undefined;
-    /**
-     * Allows the injection of one or more Lexical-compatible React components into the editor to extend its functionality.
-     * This prop is optional and supports a single plugin, multiple plugins (via fragments or arrays), or `null`.
-     */
-    customPlugins?: React.ReactNode;
-    /** Render the ValidationMessage above the TextEditor */
-    validationMessagePositionTop?: boolean;
-}
+import { TextEditorHandle, TextEditorProps } from "./__internal__/__utils__/interfaces.types";
 export declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<TextEditorHandle>>;
 export default TextEditor;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as s}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as c}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as p}from"@lexical/react/LexicalListPlugin";import{OnChangePlugin as d}from"@lexical/react/LexicalOnChangePlugin";import{$getRoot as u}from"lexical";import{forwardRef as m,useRef as g,useState as f,useImperativeHandle as _,useEffect as v,useMemo as h,useCallback as b}from"react";import{SerializeLexical as x,validateUrl as j}from"./__internal__/helpers.js";import y from"../../__internal__/label/label.component.js";import w from"../../hooks/__internal__/useLocale/useLocale.js";import O from"../../__internal__/utils/logger/index.js";import{COMPONENT_PREFIX as P,theme as L,markdownNodes as C}from"./__internal__/constants.js";import E from"./__internal__/plugins/AutoLinker/auto-link.component.js";import k from"./__internal__/plugins/CharacterCounter/character-counter.component.js";import T from"./__internal__/plugins/ContentEditor/content-editor.component.js";import S from"./__internal__/plugins/LinkMonitor/link-monitor.plugin.js";import"./__internal__/plugins/LinkPreviewer/link-previewer.style.js";import $ from"./__internal__/plugins/Placeholder/placeholder.component.js";import M from"./__internal__/plugins/Toolbar/toolbar.component.js";import"./__internal__/plugins/useCursorAtEnd/index.js";import B from"./text-editor.context.js";import{StyledTextEditorWrapper as H,StyledWrapper as A,StyledEditorToolbarWrapper as q,StyledHeaderWrapper as D,StyledTextEditor as I,StyledFooterWrapper as F}from"./text-editor.style.js";import{createEmpty as R}from"./utils.js";import{HintText as V}from"../../__internal__/hint-text/hint-text.component.js";import U from"../../__internal__/validation-message/validation-message.component.js";import z from"../textbox/textbox.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import G from"../../style/utils/filter-styled-system-margin-props.js";import J from"../../__internal__/utils/helpers/tags/tags.js";function K(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function N(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){K(e,r,t[r])}))}return e}let Q=!1;const W=m(((m,K)=>{var W,X,{characterLimit:Y=3e3,error:Z,footer:ee,header:re,inputHint:te,labelText:ne,namespace:oe=P,onBlur:ie,onCancel:ae,onChange:le,onFocus:se,onLinkAdded:ce,onSave:pe,placeholder:de,previews:ue=[],readOnly:me=!1,required:ge=!1,rows:fe,warning:_e,customPlugins:ve,validationMessagePositionTop:he=!0}=m,be=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(m,["characterLimit","error","footer","header","inputHint","labelText","namespace","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","warning","customPlugins","validationMessagePositionTop"]);!Q&&be.value&&(Q=!0,O.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead."));const xe=g(null!==(X=null!==(W=be.initialValue)&&void 0!==W?W:be.value)&&void 0!==X?X:R()),je=w(),[ye,we]=f(void 0),Oe=g(null),[Pe,Le]=f(!1);_(K,(()=>({focus(){var e;null===(e=Oe.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==Oe?void 0:Oe.current,r=()=>{Le(!0)},t=()=>{Le(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[Oe]);const Ce=h((()=>({namespace:oe,nodes:C,onError:e=>O.error(e.message),theme:L,editorState:xe.current,editable:!me})),[oe,me]),Ee=b(((e,r)=>{const t=e.read((()=>u().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(le){const e=x(r);null==le||le(t,e)}if(Y>0){const e=Y-t.length;we(e<0?je.textEditor.characterLimit(Math.abs(e)):void 0)}}),[Y,je.textEditor,le]),ke=b((e=>{if(!e.isEditable())return;if(!ae)return;const r=e.parseEditorState(xe.current);e.setEditorState(r),ae()}),[ae]),Te=h((()=>({namespace:oe,onCancel:ae?ke:void 0,onSave:pe})),[ke,oe,ae,pe]),Se=_e||ye;return e(H,($e=N({"data-role":`${oe}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==ie||ie(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==se||se(e)}},G(be),J("text-editor",be)),Me=null!=(Me={children:r(B.Provider,{value:{onLinkAdded:ce},children:[e(y,{isRequired:ge,labelId:`${oe}-label`,children:ne}),te&&e(V,{id:`${oe}-input-hint`,marginBottom:"var(--spacing100)",children:te}),e(n,{initialConfig:Ce,children:r(A,{"data-role":`${oe}-wrapper`,children:[he&&r(t,{children:[e(U,{error:Z,warning:Se,validationId:`${oe}-validation-message`,"data-role":`${oe}-validation-message`,validationMessagePositionTop:he}),(Z||Se)&&e(z,{warning:!(Z||!Se)})]}),r(q,{"data-role":`${oe}-editor-toolbar-wrapper`,id:`${oe}-editor-toolbar-wrapper`,focused:Pe,error:!!Z,children:[re&&e(D,{"data-role":`${oe}-header-wrapper`,children:re}),!me&&e(M,N({hasHeader:Boolean(re)},Te)),r(I,{"data-role":`${oe}-editor`,children:[e(s,{contentEditable:e(T,{ref:Oe,inputHint:te,namespace:oe,previews:ue,rows:fe,readOnly:me,required:ge,error:!!Z,warning:!!_e||!!ye,validationMessagePositionTop:he}),placeholder:e($,{namespace:oe,text:de}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(d,{onChange:Ee,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:j}),e(o,{newTab:!0}),e(E,{}),ve]}),ee&&e(F,{"data-role":`${oe}-footer-wrapper`,children:ee}),e(S,{})]}),!he&&r(t,{children:[e(U,{error:Z,warning:Se,validationId:`${oe}-validation-message`,"data-role":`${oe}-validation-message`,validationMessagePositionTop:he}),(Z||Se)&&e(z,{warning:!(Z||!Se)})]}),Y>0&&!me&&e(k,{maxChars:Y,namespace:oe})]})})]})})?Me:{},Object.getOwnPropertyDescriptors?Object.defineProperties($e,Object.getOwnPropertyDescriptors(Me)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Me)).forEach((function(e){Object.defineProperty($e,e,Object.getOwnPropertyDescriptor(Me,e))})),$e));var $e,Me}));export{W as TextEditor,W as default};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as s}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as c}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as p}from"@lexical/react/LexicalListPlugin";import{OnChangePlugin as d}from"@lexical/react/LexicalOnChangePlugin";import{$getRoot as _}from"lexical";import{forwardRef as u,useRef as m,useState as f,useImperativeHandle as g,useEffect as h,useMemo as v,useCallback as b}from"react";import x from"../../__internal__/label/label.component.js";import y from"../../hooks/__internal__/useLocale/useLocale.js";import j from"../../__internal__/utils/logger/index.js";import{COMPONENT_PREFIX as w,MARKDOWN_NODES as O}from"./__internal__/__utils__/constants.js";import P from"./__internal__/__plugins__/AutoLinker/auto-link.component.js";import L from"./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js";import E from"./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js";import"./__internal__/__plugins__/useCursorAtEnd/index.js";import C from"./text-editor.context.js";import{StyledTextEditorWrapper as T,StyledWrapper as k,StyledEditorToolbarWrapper as S,StyledHeaderWrapper as M,StyledTextEditor as $,StyledFooterWrapper as B}from"./text-editor.style.js";import{createEmpty as F,SerializeLexical as H,validateUrl as z}from"./__internal__/__utils__/helpers.js";import{HintText as A}from"../../__internal__/hint-text/hint-text.component.js";import q from"../../__internal__/validation-message/validation-message.component.js";import D from"../textbox/textbox.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import I from"../../style/utils/filter-styled-system-margin-props.js";import R from"../../__internal__/utils/helpers/tags/tags.js";import V from"./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js";import{getTheme as U}from"./__internal__/__utils__/theme.js";import G from"./__internal__/__ui__/CharacterCounter/character-counter.component.js";import J from"./__internal__/__ui__/ContentEditor/content-editor.component.js";import"./__internal__/__ui__/LinkPreviewer/link-previewer.style.js";import"@lexical/react/LexicalComposerContext";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"./__internal__/__ui__/Mentions/constants.js";import"./__internal__/__ui__/Mentions/mentions.style.js";import"../tooltip/tooltip.component.js";import"../portrait/portrait.style.js";import K from"./__internal__/__ui__/Placeholder/placeholder.component.js";import N from"./__internal__/__ui__/Toolbar/toolbar.component.js";function Q(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function W(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){Q(e,r,t[r])}))}return e}let X=!1,Y=!1,Z=!1;const ee=u(((u,Q)=>{var ee,re,te,{characterLimit:ne=3e3,error:oe,footer:ie,header:ae,inputHint:le,labelText:se,namespace:ce=w,onBlur:pe,onCancel:de,onChange:_e,onFocus:ue,onLinkAdded:me,onSave:fe,placeholder:ge,previews:he=[],readOnly:ve=!1,required:be=!1,rows:xe,size:ye="medium",warning:je,customPlugins:we,validationMessagePositionTop:Oe=!1,toolbarControls:Pe}=u,Le=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(u,["characterLimit","error","footer","header","inputHint","labelText","namespace","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!X&&Le.value&&(X=!0,j.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!Y&&de&&(Y=!0,j.deprecate("`onCancel` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.")),!Z&&fe&&(Z=!0,j.deprecate("`onSave` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality."));const Ee=m(null!==(te=null!==(re=Le.initialValue)&&void 0!==re?re:Le.value)&&void 0!==te?te:F()),Ce=y(),[Te,ke]=f(void 0),Se=m(null),[Me,$e]=f(!1);g(Q,(()=>({focus(){var e;null===(e=Se.current)||void 0===e||e.focus()}})),[]),h((()=>{const e=null==Se?void 0:Se.current,r=()=>{$e(!0)},t=()=>{$e(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[Se]);const Be=v((()=>({namespace:ce,nodes:O,onError:e=>j.error(e.message),theme:U(),editorState:Ee.current,editable:!ve})),[ce,ve]),Fe=b(((e,r)=>{const t=e.read((()=>_().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(_e){const e=H(r);null==_e||_e(t,e)}if(ne>0){const e=ne-t.length;ke(e<0?Ce.textEditor.characterLimit(Math.abs(e)):void 0)}}),[ne,Ce.textEditor,_e]),He=b((e=>{if(!e.isEditable())return;if(!de)return;const r=e.parseEditorState(Ee.current);e.setEditorState(r),de()}),[de]),ze=v((()=>({namespace:ce,onCancel:de?He:void 0,onSave:fe,toolbarControls:Pe})),[He,ce,de,fe,Pe]),Ae=je||Te,qe=()=>{switch(ye){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e(T,(De=W({"data-role":`${ce}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==pe||pe(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==ue||ue(e)}},I(Le),R("text-editor",Le)),Ie=null!=(Ie={children:r(C.Provider,{value:{onLinkAdded:me},children:[e(x,{isRequired:be,labelId:`${ce}-label`,children:se}),le&&!ve&&e(A,{id:`${ce}-input-hint`,marginBottom:qe(),children:le}),e(n,{initialConfig:Be,children:r(k,{"data-role":`${ce}-wrapper`,children:[Oe&&r(t,{children:[e(q,{error:oe,warning:Ae,validationId:`${ce}-validation-message`,"data-role":`${ce}-validation-message`,validationMessagePositionTop:Oe}),(oe||Ae)&&e(D,{warning:!(oe||!Ae)})]}),r(S,{"data-role":`${ce}-editor-toolbar-wrapper`,error:!!oe,id:`${ce}-editor-toolbar-wrapper`,children:[ae&&e(M,{"data-role":`${ce}-header-wrapper`,children:ae}),ve?e(V,{initialValue:(null===(ee=Se.current)||void 0===ee?void 0:ee.innerHTML)||Ee.current,size:ye}):r(t,{children:[e(N,W({contentEditorRef:Se,hasHeader:Boolean(ae),size:ye},ze)),r($,{"data-role":`${ce}-editor`,error:!!oe,children:[e(s,{contentEditable:e(J,{ref:Se,inputHint:le,isFocused:Me,namespace:ce,previews:he,rows:xe,readOnly:ve,required:be,error:!!oe,warning:!!je||!!Te,validationMessagePositionTop:Oe,size:ye}),placeholder:e(K,{namespace:ce,text:ge}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(d,{onChange:Fe,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:z}),e(o,{newTab:!0}),e(P,{}),e(E,{}),we]})]}),ie&&e(B,{"data-role":`${ce}-footer-wrapper`,size:ye,children:ie}),e(L,{})]}),!Oe&&r(t,{children:[e(q,{error:oe,warning:Ae,validationId:`${ce}-validation-message`,"data-role":`${ce}-validation-message`,validationMessagePositionTop:Oe}),(oe||Ae)&&e(D,{warning:!(oe||!Ae)})]}),ne>0&&!ve&&e(G,{isFocused:Me,maxChars:ne,namespace:ce,marginTop:qe()})]})})]})})?Ie:{},Object.getOwnPropertyDescriptors?Object.defineProperties(De,Object.getOwnPropertyDescriptors(Ie)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Ie)).forEach((function(e){Object.defineProperty(De,e,Object.getOwnPropertyDescriptor(Ie,e))})),De));var De,Ie}));export{ee as TextEditor,ee as default};

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

@@ -1,13 +1,16 @@
 import { MarginProps } from "styled-system";
 type StyledTextEditorWrapperProps = MarginProps;
 interface StyledEditorToolbarWrapperProps {
-    focused?: boolean;
     error?: boolean;
 }
-export declare const StyledTextEditor: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTextEditor: import("styled-components").StyledComponent<"div", any, {
+    error?: boolean;
+}, never>;
 export declare const StyledTextEditorWrapper: import("styled-components").StyledComponent<"div", any, StyledTextEditorWrapperProps, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, 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 StyledFooterWrapper: import("styled-components").StyledComponent<"div", any, {
+    size: "small" | "medium" | "large";
+}, never>;
 export default StyledTextEditor;

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

@@ -1 +1 @@
-import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/utils/add-focus-styling.js";const i=o.div.withConfig({displayName:"text-editor.style__StyledTextEditor",componentId:"sc-cb8130a9-0"})(["position:relative;"]),a=o.div.withConfig({displayName:"text-editor.style__StyledTextEditorWrapper",componentId:"sc-cb8130a9-1"})(["margin-bottom:var(--fieldSpacing);",""],e),d=o.div.withConfig({displayName:"text-editor.style__StyledWrapper",componentId:"sc-cb8130a9-2"})(['position:relative;.textBold{font-weight:bold;}.textItalic{font-style:italic;}a:not([data-component="link-preview"]){color:var(--colorsActionMajor500);cursor:pointer;&:hover{color:var(--colorsActionMajor600);}&:focus{outline:none;text-decoration:none;color:var(--colorsActionMajorYin090);background-color:var(--colorsSemanticFocus250);border-radius:var(--borderRadius025);box-shadow:0 var(--spacing050) 0 0 var(--colorsUtilityYin090);}}']),n=o.div.withConfig({displayName:"text-editor.style__StyledEditorToolbarWrapper",componentId:"sc-cb8130a9-3"})(["",""],(({focused:o,error:e})=>t(["border-radius:var(--borderRadius100);outline:1px solid var(--colorsUtilityMajor200);"," ",""],e&&t(["outline:none;border:2px solid var(--colorsSemanticNegative500);"]),o&&r()))),s=o.div.withConfig({displayName:"text-editor.style__StyledHeaderWrapper",componentId:"sc-cb8130a9-4"})(["padding:var(--spacing200);"]),l=o.div.withConfig({displayName:"text-editor.style__StyledFooterWrapper",componentId:"sc-cb8130a9-5"})(["border-top:1px solid var(--colorsUtilityMajor200);padding:var(--spacing200);"]);export{n as StyledEditorToolbarWrapper,l as StyledFooterWrapper,s as StyledHeaderWrapper,i as StyledTextEditor,a as StyledTextEditorWrapper,d as StyledWrapper,i as default};
+import o,{css as t}from"styled-components";import{margin as r}from"styled-system";const e=o.div.withConfig({displayName:"text-editor.style__StyledTextEditor",componentId:"sc-f35af111-0"})(["position:relative;box-sizing:border-box;",""],(({error:o})=>o&&t(["margin:-1px;"]))),i=o.div.withConfig({displayName:"text-editor.style__StyledTextEditorWrapper",componentId:"sc-f35af111-1"})(["margin-bottom:var(--fieldSpacing);"," min-width:288px;"],r),a=o.div.withConfig({displayName:"text-editor.style__StyledWrapper",componentId:"sc-f35af111-2"})(['position:relative;.textBold{font-weight:bold;}.textItalic{font-style:italic;}.textUnderline{text-decoration:underline;}a:not([data-component="link-preview"]){color:var(--colorsActionMajor500);cursor:pointer;&:hover{color:var(--colorsActionMajor600);}&:focus{outline:none;text-decoration:none;color:var(--colorsActionMajorYin090);background-color:var(--colorsSemanticFocus250);border-radius:var(--borderRadius025);box-shadow:0 var(--spacing050) 0 0 var(--colorsUtilityYin090);}}']),d=o.div.withConfig({displayName:"text-editor.style__StyledEditorToolbarWrapper",componentId:"sc-f35af111-3"})(["border-radius:var(--borderRadius100);",""],(({error:o})=>t(o?["border:1px solid var(--colorsUtilityMajor200);"]:["outline:1px solid var(--colorsUtilityMajor200);"]))),n=o.div.withConfig({displayName:"text-editor.style__StyledHeaderWrapper",componentId:"sc-f35af111-4"})(["padding:var(--spacing200);"]),l=o.div.withConfig({displayName:"text-editor.style__StyledFooterWrapper",componentId:"sc-f35af111-5"})(["border-top:1px solid var(--colorsUtilityMajor200);padding:",";"],(({size:o})=>{switch(o){case"large":return"var(--spacing200)";case"small":return"var(--spacing100)";default:return"var(--spacing150)"}}));export{d as StyledEditorToolbarWrapper,l as StyledFooterWrapper,n as StyledHeaderWrapper,e as StyledTextEditor,i as StyledTextEditorWrapper,a as StyledWrapper,e as default};