carbon-react 162.12.0-beta.1 → 162.13.0

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormattingButtonProps } from "../../../__utils__/interfaces.types";
+type HyperlinkButtonProps = Pick<FormattingButtonProps, "namespace" | "isFirstButton" | "size"> & {
+    setDialogOpen: (open: boolean) => void;
+};
+declare const HyperlinkButton: ({ isFirstButton, namespace, size, setDialogOpen, }: HyperlinkButtonProps) => React.JSX.Element;
+export default HyperlinkButton;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import"react";import{StyledToolbarButton as e}from"../toolbar.style.js";import o from"../../../../../../hooks/__internal__/useLocale/useLocale.js";const r=({isFirstButton:r,namespace:n,size:a="medium",setDialogOpen:i})=>{const s=o();return t(e,{size:a,"aria-label":s.textEditor.hyperlink.buttonAria(),type:"button",onClick:()=>{i(!0)},onMouseDown:t=>t.preventDefault(),iconType:"link_on",variantType:"tertiary","data-role":`${n}-hyperlink-button`,id:`${n}-hyperlink-button`,tabIndex:r?0:-1,className:"toolbar-button"})};export{r as default};

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

@@ -0,0 +1,7 @@
+export { default as BoldButton } from "./bold.component";
+export { default as HyperlinkButton } from "./hyperlink.component";
+export { default as ItalicButton } from "./italic.component";
+export { default as ListControls } from "./list.component";
+export { default as SaveButton } from "./save.component";
+export { default as TypographySelector } from "./typography.component";
+export { default as UnderlineButton } from "./underline.component";

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

@@ -0,0 +1 @@
+export{default as BoldButton}from"./bold.component.js";export{default as HyperlinkButton}from"./hyperlink.component.js";export{default as ItalicButton}from"./italic.component.js";export{default as ListControls}from"./list.component.js";export{default as SaveButton}from"./save.component.js";export{default as TypographySelector}from"./typography.component.js";export{default as UnderlineButton}from"./underline.component.js";

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { FormattingButtonProps } from "../../../__utils__/interfaces.types";
+declare const ItalicButton: ({ isActive, isFirstButton, namespace, size, }: FormattingButtonProps) => React.JSX.Element;
+export default ItalicButton;

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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+declare const ListControls: ({ namespace, olIsFirstButton, showOL, showUL, ulIsFirstButton, size, }: {
+    namespace: string;
+    olIsFirstButton?: boolean;
+    showOL?: boolean;
+    showUL?: boolean;
+    ulIsFirstButton?: boolean;
+    size?: "small" | "medium" | "large";
+}) => React.JSX.Element;
+export default ListControls;

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

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{INSERT_ORDERED_LIST_COMMAND as n,$insertList as o,INSERT_UNORDERED_LIST_COMMAND as i,REMOVE_LIST_COMMAND as l,$removeList as s,ListNode as a,ListItemNode as d,$isListNode as u,$isListItemNode as c,$createListNode as f}from"@lexical/list";import{useLexicalComposerContext as m}from"@lexical/react/LexicalComposerContext";import{mergeRegister as g}from"@lexical/utils";import{COMMAND_PRIORITY_LOW as p,$getSelection as b,$isRangeSelection as h,$getNodeByKey as v}from"lexical";import{useState as C,useEffect as L,useCallback as y}from"react";import x from"../toolbar-button.component.js";import _ from"../../../../../../hooks/__internal__/useLocale/useLocale.js";import{TEXT_EDITOR_ACTION_TYPES as S}from"../../../__utils__/constants.js";const E=({namespace:E,olIsFirstButton:w,showOL:A=!0,showUL:P=!0,ulIsFirstButton:k,size:B="medium"})=>{const[I]=m(),N=_(),[T,j]=C(!1),[D,$]=C(!1);L((()=>g(I.registerCommand(n,(()=>(o(S.OrderedList),!0)),p),I.registerCommand(i,(()=>(o(S.UnorderedList),!0)),p),I.registerCommand(l,(()=>(s(),!0)),p))),[I]);const z=e=>{let t=e;for(;null!==t;){if(t instanceof d)return t;t=null==t?void 0:t.getParent()}return null},K=y((()=>{const e=b();if(!e)return j(!1),void $(!1);const t=e.getNodes();if(0===t.length)return j(!1),void $(!1);const r=t.map(z).find((e=>null!==e));if(!r)return j(!1),void $(!1);let n=r.getParent();for(;n&&!(n instanceof a);)n=n.getParent();n instanceof a?(j("number"===n.getListType()),$("bullet"===n.getListType())):(j(!1),$(!1))}),[]);L((()=>g(I.registerUpdateListener((({editorState:e})=>{e.read((()=>{I.isEditable()&&K()}))})))),[K,I]);const U=e=>{I.update((()=>{const t=b();if(!h(t))return;let r=t.anchor.getNode().getParent();for(;r&&!u(r);)r=r.getParent();if(!r)return;const n=t.getNodes().map((e=>"list"===e.getType()?e:null)).filter((e=>null!==e));if(n.length>1)return o=e,void n.forEach((e=>{I.update((()=>{e.setListType(o)}))}));var o;const i=[],l=[],s=[],a=t.getNodes().map((e=>{let t=e.getParent();if(!c(t)){const e=null==t?void 0:t.getType();if(!e||!["link","autolink"].includes(e))return null;var n;t=null!==(n=null==t?void 0:t.getParent())&&void 0!==n?n:null}const o=null==t?void 0:t.getKey();return o!==(null==r?void 0:r.getKey())?o:null})).filter((e=>null!=e)),d=r.getChildrenKeys(),m=Array.from(new Set(a)),{beforeSubset:g,subset:p,afterSubset:C}=function(e,t){let r=-1;for(let n=0;n<=e.length-t.length;n++)if(e.slice(n,n+t.length).toString()===t.toString()){r=n;break}if(-1===r)throw new Error("Subset B not found in array A");return 0===r&&t.length===e.length?{beforeSubset:[],subset:e,afterSubset:[]}:{beforeSubset:e.slice(0,r),subset:e.slice(r,r+t.length),afterSubset:e.slice(r+t.length)}}(d,m);g.forEach((e=>{const t=v(e);c(t)&&i.push(t)})),p.forEach((e=>{const t=v(e);c(t)&&l.push(t)})),C.forEach((e=>{const t=v(e);c(t)&&s.push(t)}));const L=r.getListType(),y=f(L),x=f(e),_=f(L);y.append(...i),x.append(...l),_.append(...s),y.getChildren().length>0&&r.insertBefore(y),x.getChildren().length>0&&(y.getChildren().length>0?y.insertAfter(x):r.insertBefore(x)),_.getChildren().length>0&&(x.getChildren().length>0?x.insertAfter(_):y.getChildren().length>0?y.insertAfter(_):r.insertBefore(_)),r.remove()}))};return e(t,{children:[P&&r(x,{type:"button",size:B,"aria-label":N.textEditor.unorderedListAria(),onClick:()=>T?U("bullet"):void(I.isEditable()&&(D?(I.dispatchCommand(l,void 0),$(!1)):(I.dispatchCommand(i,void 0),$(!0)),j(!1))),onMouseDown:e=>e.preventDefault(),buttonIcon:"bullet_list_dotted",pressed:D,"data-role":`${E}-unordered-list-button`,id:`${E}-unordered-list-button`,tabIndex:k?0:-1,className:"toolbar-button"}),A&&r(x,{type:"button",size:B,"aria-label":N.textEditor.orderedListAria(),onClick:()=>D?U("number"):void(I.isEditable()&&(T?(I.dispatchCommand(l,void 0),j(!1)):(I.dispatchCommand(n,void 0),j(!0)),$(!1))),onMouseDown:e=>e.preventDefault(),buttonIcon:"bullet_list_numbers",pressed:T,"data-role":`${E}-ordered-list-button`,id:`${E}-ordered-list-button`,tabIndex:w?0:-1,className:"toolbar-button"})]})};export{E as default};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { SaveButtonProps } from "../../../__utils__/interfaces.types";
+declare const SaveButton: ({ namespace, onSave, size }: SaveButtonProps) => React.JSX.Element;
+export default SaveButton;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{useLexicalComposerContext as o}from"@lexical/react/LexicalComposerContext";import"react";import e from"../../../../../button/button.component.js";import r from"../../../../../../hooks/__internal__/useLocale/useLocale.js";import{SerializeLexical as a}from"../../../__utils__/helpers.js";const n=({namespace:n,onSave:i,size:s})=>{const[m]=o(),l=r();return t(e,{"data-role":`${n}-save-button`,buttonType:"primary","aria-label":l.textEditor.saveButtonAria(),onClick:()=>{if(!m.isEditable())return;const t=a(m);null==i||i(t)},size:s,className:"command-button",children:l.textEditor.saveButton()})};export{n as default};

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

@@ -0,0 +1,21 @@
+import React from "react";
+interface DropdownOption {
+    id: string;
+    label?: string;
+    onClick: () => void;
+    ariaLabel?: string;
+}
+interface ToolbarDropdownProps {
+    namespace: string;
+    onChange?: (value: string) => void;
+    options: DropdownOption[];
+    isFirstButton?: boolean;
+    value: string;
+    isOpen: boolean;
+    setIsOpen?: (open: boolean) => void;
+    focusedIndex: number;
+    setFocusedIndex?: (index: number) => void;
+    size?: "small" | "medium" | "large";
+}
+declare const ToolbarDropdown: ({ namespace, onChange, options, value, isFirstButton, isOpen, setIsOpen, focusedIndex, setFocusedIndex, size, }: ToolbarDropdownProps) => React.JSX.Element;
+export default ToolbarDropdown;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useRef as o,useMemo as r,useEffect as t}from"react";import{StyledButton as l,StyledMenu as a,StyledMenuItem as i}from"./dropdown.style.js";import{Box as u}from"../../../../../../box/box.component.js";import d from"../../../../../../icon/icon.component.js";import"../../../../../../icon/icon.style.js";import p from"../../../../../../../hooks/__internal__/useLocale/useLocale.js";const c=({namespace:c,onChange:s,options:m,value:v,isFirstButton:y=!1,isOpen:b,setIsOpen:f,focusedIndex:h,setFocusedIndex:x,size:g="medium"})=>{var w,k;const D=p(),E=o(null),j=o(null),_=`${c}-typography-menu`,I=r((()=>{const e=m.find((e=>e.id===v));if(!e)return D.textEditor.typography.paragraph();const n=e.id;return D.textEditor.typography[n]()}),[D,m,v]);t((()=>{const e=e=>{E.current&&j.current&&!E.current.contains(e.target)&&!j.current.contains(e.target)&&(null==f||f(!1),null==x||x(-1))};return b&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[b,x,f]),t((()=>{var e;b&&h>=0&&j.current&&(null===(e=j.current.querySelectorAll('[role="option"]')[h])||void 0===e||e.focus())}),[b,h]);const $=e=>{switch(e.key){case"Enter":case" ":if(!b){e.preventDefault(),null==f||f(!0),null==x||x(0);break}var n,o;h>=0&&(e.preventDefault(),null===(n=m[h])||void 0===n||n.onClick(),null==f||f(!1),null==x||x(-1),null===(o=E.current)||void 0===o||o.focus());break;case"ArrowDown":e.preventDefault(),b?null==x||x(h<m.length-1?h+1:0):(null==f||f(!0),null==x||x(0));break;case"ArrowUp":e.preventDefault(),b?null==x||x(h>0?h-1:m.length-1):(null==f||f(!0),null==x||x(m.length-1));break;case"Home":e.preventDefault(),b&&(null==x||x(0));break;case"End":e.preventDefault(),b&&(null==x||x(m.length-1));break;case"Escape":var r;b&&(e.preventDefault(),null==f||f(!1),null==x||x(-1),null===(r=E.current)||void 0===r||r.focus());break;case"Tab":b&&(null==f||f(!1),null==x||x(-1))}};return e(u,{position:"relative",display:"inline-block",minWidth:"large"===g?"180px":"166px","data-role":"toolbar-dropdown-wrapper",children:[e(l,{ref:E,type:"button",role:"combobox","aria-haspopup":"listbox",menuOpen:b,"aria-activedescendant":null===(w=m[h])||void 0===w?void 0:w.id,"aria-controls":b?_:void 0,"aria-expanded":b,"aria-label":D.textEditor.typography.selectAria(),onKeyDown:$,onClick:()=>{null==f||f(!b)},className:"toolbar-button editor-dropdown",tabIndex:y?0:-1,"data-role":`${c}-typography-dropdown`,id:`${c}-typography-dropdown`,size:g,children:[I," ",n("span",{"aria-hidden":"true",children:n(d,{type:b?"caret_up":"caret_down"})})]}),b&&n(a,{ref:j,role:"listbox",id:_,"aria-labelledby":null===(k=E.current)||void 0===k?void 0:k.id,onKeyDown:$,size:g,"aria-expanded":b,children:m.map((e=>{const o=e.id,r=D.textEditor.typography[o]();return n(i,{id:e.id,role:"option","data-role":`${c}-typography-option-${e.id}`,tabIndex:-1,onMouseDown:n=>{n.preventDefault(),(e=>{e.onClick(),null==f||f(!1),null==x||x(-1),null==s||s(e.id)})(e)},size:g,children:r},e.id)}))})]})};export{c as default};

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, {
+    size: "small" | "medium" | "large";
+}, never>;
+export {};

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

@@ -0,0 +1 @@
+import o,{css as t}from"styled-components";import e from"../../../../../../../style/utils/add-focus-styling.js";const a={small:{buttonFont:"var(--global-font-static-comp-medium-s)",buttonHeight:"var(--global-size-s)",dropdownTop:"36px",dropdownPadding:"var(--global-space-comp-xs)",itemHeight:"var(--global-size-s)",itemFont:"var(--global-font-static-comp-regular-s)"},medium:{buttonFont:"var(--global-font-static-comp-medium-m)",buttonHeight:"var(--global-size-m)",dropdownTop:"44px",dropdownPadding:"var(--global-space-comp-s)",itemHeight:"var(--global-size-m)",itemFont:"var(--global-font-static-comp-regular-m)"},large:{buttonFont:"var(--global-font-static-comp-medium-l)",buttonHeight:"var(--global-size-l)",dropdownTop:"52px",dropdownPadding:"var(--global-space-comp-m)",itemHeight:"var(--global-size-l)",itemFont:"var(--global-font-static-comp-regular-l)"}},n=o.button.withConfig({displayName:"dropdown.style__StyledButton",componentId:"carbon_v162_12_0__sc-96f98e55-0"})(["",""],(({size:o,menuOpen:n})=>t(["width:100%;height:",";display:flex;justify-content:space-between;align-items:center;border:none;background:transparent;border-radius:var(--global-radius-action-m);cursor:pointer;padding:0 var(--global-space-comp-xs);color:var(--button-typical-toggle-label-default);font:",";"," &:focus{","}"],a[o].buttonHeight,a[o].buttonFont,n&&t(["",""],e()),e()))),l=o.ul.withConfig({displayName:"dropdown.style__StyledMenu",componentId:"carbon_v162_12_0__sc-96f98e55-1"})(["",""],(({size:o})=>t(["position:absolute;top:",";left:0;z-index:1;background:var(--popover-bg-default);border-radius:var(--global-radius-container-m);box-shadow:var(--global-depth-lvl1);list-style:none;margin:0;padding:"," 0;width:100%;overflow-y:auto;"],a[o].dropdownTop,a[o].dropdownPadding))),r=o.li.withConfig({displayName:"dropdown.style__StyledMenuItem",componentId:"carbon_v162_12_0__sc-96f98e55-2"})(["",""],(({size:o})=>t(["display:flex;align-items:center;box-sizing:border-box;min-height:",";padding:"," var(--global-space-comp-xl);cursor:pointer;user-select:none;color:var(--input-dropdown-label-default);font:",";&:hover{background-color:var(--input-dropdown-bg-hover);color:var(--input-dropdown-label-hover);}&:focus-visible{box-shadow:inset 0px 0px 0px var(--global-borderwidth-s) var(--focus-borderalt);outline:none;}"],a[o].itemHeight,a[o].dropdownPadding,a[o].itemFont)));export{n as StyledButton,l as StyledMenu,r 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,$isParagraphNode as a,TextNode as i,$getRoot as p}from"lexical";import{$isListItemNode as c}from"@lexical/list";import{useState as d,useEffect as m}from"react";import{Box as l}from"../../../../../box/box.component.js";import{StyledSpanNode as f}from"../../../__nodes__/styled-span.node.js";import u from"./typography-dropdown/dropdown.component.js";function g(e){let t=e.anchor.getNode();for(;t;){if(t instanceof f)return t;t=t.getParent()}return null}const h=({contentEditorRef:h,namespace:x,isFirstButton:C=!1,isOpen:y,setIsOpen:F,focusedIndex:I=-1,setFocusedIndex:O,size:b})=>{const[j]=t(),[v,w]=d("paragraph");m((()=>j.registerCommand(o,(()=>(setTimeout((()=>{j.getEditorState().read((()=>{const e=n();if(r(e)){const t=g(e);w(t?t.getTypographyKey():"paragraph")}}))}),0),!1)),s)),[j]);const T=e=>{const t=e;w(t),j.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=>{const o=e instanceof i||e instanceof f,n=a(e),r=c(e);if(!o&&!n&&!r)return;const p="paragraph"===t,d=n||r?"​":e.getTextContent(),m=p?new i(d):f.createFromOption(t,d);o?e.replace(m):e.append(m),s||(s=m)})),s&&s.select(n,r)}else{let e;e="paragraph"===t?new i(""):f.createFromOption(t,"");const o=p(),n=o.getLastChild();a(n)?n.append(e):o.append(e),e.select()}}),{discrete:!0}),setTimeout((()=>{var e;null==h||null===(e=h.current)||void 0===e||e.focus(),j.dispatchCommand(o,void 0)}),0)};return e(l,{minWidth:"150px",marginRight:"spacing05",children:e(u,{size:b,namespace:x,onChange:e=>{T(e)},value:v,isFirstButton:C,options:["title","subtitle","sectionHeader","sectionSubheader","paragraph"].map((e=>({id:e,key:e,onClick:()=>{T(e)}}))),isOpen:y,setIsOpen:F,focusedIndex:I,setFocusedIndex:O})})};export{h as default,g 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: ({ isActive, isFirstButton, namespace, size, }: FormattingButtonProps) => React.JSX.Element;
+export default UnderlineButton;

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

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

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

@@ -0,0 +1 @@
+export { default } from "./toolbar.component";

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

@@ -0,0 +1 @@
+export{default}from"./toolbar.component.js";

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ButtonToggleProps } from "../../../../button-toggle";
+type ToolbarNativeButtonProps = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "onMouseDown" | "tabIndex" | "type">;
+type ToolbarButtonToggleProps = ButtonToggleProps & ToolbarNativeButtonProps;
+declare const ToolbarButtonToggle: ({ onClick, ...props }: ToolbarButtonToggleProps) => React.JSX.Element;
+export default ToolbarButtonToggle;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import"react";import{ButtonToggle as e}from"../../../../button-toggle/button-toggle.component.js";import"../../../../button-toggle/button-toggle-group/button-toggle-group.component.js";function r(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}const n=n=>{var o,c,{onClick:l}=n,u=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},c=Object.keys(t);for(n=0;n<c.length;n++)r=c[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(t);for(n=0;n<c.length;n++)r=c[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(n,["onClick"]);return t(e,(o=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable})))),o.forEach((function(e){r(t,e,n[e])}))}return t}({},u),c=null!=(c={onClick:t=>{t.currentTarget.focus({preventScroll:!0}),null==l||l(t)}})?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(c)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(c)).forEach((function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(c,t))})),o))};export{n 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,Fragment as t,jsx as o}from"react/jsx-runtime";import{useLexicalComposerContext as r}from"@lexical/react/LexicalComposerContext";import{mergeRegister as n}from"@lexical/utils";import{$getSelection as i,$isRangeSelection as l,$getRoot as a,$createTextNode as s,$isParagraphNode as c,$createParagraphNode as d}from"lexical";import{useRef as u,useState as p,useCallback as m,useEffect as f}from"react";import{StyledToolbarWrapper as b,StyledToolbar as h,CommandButtons as x}from"./toolbar.style.js";import y from"../../../../button/button.component.js";import v from"../../../../../hooks/__internal__/useLocale/useLocale.js";import g from"./buttons/bold.component.js";import j from"./buttons/hyperlink.component.js";import k from"./buttons/italic.component.js";import E from"./buttons/list.component.js";import O from"./buttons/save.component.js";import w from"./buttons/typography.component.js";import D from"./buttons/underline.component.js";import F from"./button-group/button-group.component.js";import{TEXT_EDITOR_ACTION_TYPES as B}from"../../__utils__/constants.js";import{Textbox as P}from"../../../../textbox/textbox.component.js";import{$createLinkNode as z}from"@lexical/link";import{Dialog as C}from"../../../../dialog/dialog.component.js";import{Form as L}from"../../../../form/form.component.js";import{RequiredFieldsIndicator as $}from"../../../../form/required-fields-indicator/required-fields-indicator.component.js";import{Box as S}from"../../../../box/box.component.js";function A(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function I(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){A(e,t,o[t])}))}return e}function _(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const T=({contentEditorRef:A,namespace:T,hasHeader:q,onCancel:W,onSave:M,size:R="medium",toolbarControls:H=["typography","bold","italic","underline","unordered-list","ordered-list","link"]})=>{var U,K,N,G,J,Q;const[V]=r(),X=V.isEditable(),Y=u(null),[Z,ee]=p(!1),[te,oe]=p(!1),[re,ne]=p(!1),[ie,le]=p(!1),[ae,se]=p(!1),[ce,de]=p(-1),[ue,pe]=p(""),[me,fe]=p(""),[be,he]=p(!1),[xe,ye]=p(!1),ve=u(null),ge=u(null),je=u(!1),ke=m((()=>{const e=V.getRootElement();e&&(je.current=e.contains(document.activeElement)),le(!0)}),[V]),Ee=v(),Oe=H.includes("typography"),we=H.includes("bold")||H.includes("italic")||H.includes("underline"),De=H.includes("unordered-list")||H.includes("ordered-list"),Fe=H.includes("link"),Be=m((()=>{const e=i();l(e)&&(ee(e.hasFormat(B.Bold)),oe(e.hasFormat(B.Italic)),ne(e.hasFormat(B.Underline)))}),[]);f((()=>n(V.registerUpdateListener((({editorState:e})=>{e.read((()=>{V.isEditable()&&Be()}))})))),[Be,V]),f((()=>{ie&&V.read((()=>{const e=i();if(l(e)){const t=e.getTextContent();pe(t)}}))}),[ie,V]);const Pe=()=>{pe(""),fe(""),he(!1),ye(!1),le(!1)};return X?e(b,{"data-role":`${T}-toolbar-wrapper`,hasHeader:q,id:`${T}-toolbar-wrapper`,size:R,children:[e(h,{role:"toolbar","aria-label":Ee.textEditor.toolbarAriaLabel(),"data-role":`${T}-toolbar`,id:`${T}-toolbar`,ref:Y,onKeyDown:e=>{var t,o;if(0===H.length||!Y.current)return;const r=Array.from(null===(t=Y.current)||void 0===t?void 0:t.querySelectorAll("button.toolbar-button"));if(!r.length)return;const n=r.findIndex((e=>{var t;return e.id===(null===(t=document.activeElement)||void 0===t?void 0:t.id)}));let i=-1;switch(e.key){case"ArrowRight":e.preventDefault(),ae||(i=n<r.length-1?n+1:0);break;case"ArrowLeft":e.preventDefault(),ae||(i=n>0?n-1:r.length-1);break;case"Home":e.preventDefault(),i=0;break;case"End":e.preventDefault(),i=r.length-1;break;default:return}r.forEach(((e,t)=>{e.tabIndex=t===i?0:-1})),i>-1&&(null===(o=r[i])||void 0===o||o.focus())},tabIndex:-1,children:[e(t,{children:[Oe&&o(F,{name:"typography-formatting-buttons",namespace:T,showDivider:we||De||Fe,children:o(w,{contentEditorRef:A,namespace:T,isFirstButton:!0,isOpen:ae,setIsOpen:se,focusedIndex:ce,setFocusedIndex:de,size:R})}),we&&e(F,{name:"text-formatting-buttons",namespace:T,showDivider:De||Fe,children:[H.includes("bold")&&o(g,{isActive:Z,namespace:T,isFirstButton:!Oe,size:R}),H.includes("italic")&&o(k,{isActive:te,namespace:T,isFirstButton:!Oe&&!H.includes("bold"),size:R}),H.includes("underline")&&o(D,{isActive:re,namespace:T,isFirstButton:!Oe&&!H.includes("bold")&&!H.includes("italic"),size:R})]}),De&&o(F,{name:"list-formatting-buttons",namespace:T,showDivider:Fe,children:o(E,{namespace:T,olIsFirstButton:!Oe&&!we&&!H.includes("unordered-list"),showOL:H.includes("ordered-list"),showUL:H.includes("unordered-list"),ulIsFirstButton:!Oe&&!we,size:R})}),Fe&&o(F,{name:"hyperlink-formatting-buttons",namespace:T,showDivider:!1,children:o(j,{namespace:T,isFirstButton:!Oe&&!we&&!De,setDialogOpen:ke,size:R})})]}),o(C,{open:ie,onCancel:()=>{Pe()},title:Ee.textEditor.hyperlink.dialogTitle(),"data-role":`${T}-hyperlink-dialog`,"aria-label":Ee.textEditor.hyperlink.dialogTitle(),size:"medium-small",children:o(L,{leftSideButtons:o(y,{"data-role":`${T}-hyperlink-cancel-button`,onClick:()=>{Pe()},children:Ee.textEditor.cancelButton()}),saveButton:o(y,{buttonType:"primary",type:"submit","data-role":`${T}-hyperlink-save-button`,children:Ee.textEditor.saveButton()}),onSubmit:e=>{e.preventDefault(),e.stopPropagation();const t=!ue.trim(),o=!me.trim();var r,n;(he(t),ye(o),t||o)?t?null===(r=ve.current)||void 0===r||r.focus():null===(n=ge.current)||void 0===n||n.focus():V.isEditable()&&(V.update((()=>{const e=a(),t=z(me);t.append(s(ue));const o=je.current?i():null;if(l(o))o.insertNodes([t]);else{const o=e.getLastChild();if(c(o))o.append(t);else{const o=d();o.append(t),e.append(o)}}})),Pe())},children:e(S,{display:"flex",flexDirection:"column",gap:"16px",children:[o($,{children:null===(U=(K=Ee.textEditor.hyperlink).formKey)||void 0===U?void 0:U.call(K)}),e(S,{display:"flex",gap:"24px",flexWrap:"wrap",children:[o(S,{flex:"1 1 200px",minWidth:"200px",maxWidth:"560px",children:o(P,_(I({label:Ee.textEditor.hyperlink.textFieldLabel(),name:"text",required:!0,validationMessagePositionTop:!1},be&&{error:null===(N=(G=Ee.textEditor.hyperlink).textFieldErrorMessage)||void 0===N?void 0:N.call(G)}),{"data-role":`${T}-hyperlink-text-field`,value:ue,ref:ve,onChange:e=>{pe(e.target.value),he(!1)}}))}),o(S,{flex:"1 1 200px",minWidth:"200px",maxWidth:"560px",children:o(P,_(I({label:Ee.textEditor.hyperlink.linkFieldLabel(),name:"link",required:!0,validationMessagePositionTop:!1},xe&&{error:null===(J=(Q=Ee.textEditor.hyperlink).linkFieldErrorMessage)||void 0===J?void 0:J.call(Q)}),{"data-role":`${T}-hyperlink-link-field`,value:me,ref:ge,onChange:e=>{fe(e.target.value),ye(!1)}}))})]})]})})})]}),e(x,{"data-role":`${T}-command-buttons`,children:[W&&o(y,{buttonType:"tertiary","data-role":`${T}-cancel-button`,"aria-label":Ee.textEditor.cancelButtonAria(),onClick:()=>null==W?void 0:W(V),size:R,className:"command-button",children:Ee.textEditor.cancelButton()}),M&&o(O,{namespace:T,onSave:M,size:R})]})]}):null};export{T as default};

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

@@ -0,0 +1,15 @@
+import { ButtonProps } from "../../../../button/__next__";
+interface StyledToolbarButtonProps extends ButtonProps {
+    tabIndex?: number;
+    onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
+    size: "small" | "medium" | "large";
+}
+interface StyledToolbarProps {
+    hasHeader?: boolean;
+    size: "small" | "medium" | "large";
+}
+declare const StyledToolbarWrapper: import("styled-components").StyledComponent<"div", any, StyledToolbarProps, never>;
+declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CommandButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledToolbarButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledToolbarButtonProps, never>;
+export { StyledToolbar, StyledToolbarWrapper, CommandButtons, StyledToolbarButton, };

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

@@ -0,0 +1 @@
+import o,{css as a}from"styled-components";import{Button as e}from"../../../../button/__next__/button.component.js";const l={small:{toolbarPadding:"var(--global-space-comp-s)",withHeaderPadding:"var(--global-space-comp-xs)",buttonSize:"var(--global-size-s)"},medium:{toolbarPadding:"var(--global-space-comp-m)",withHeaderPadding:"var(--global-space-comp-s)",buttonSize:"var(--global-size-m)"},large:{toolbarPadding:"var(--global-space-comp-l)",withHeaderPadding:"var(--global-space-comp-m)",buttonSize:"var(--global-size-l)"}},t=o.div.withConfig({displayName:"toolbar.style__StyledToolbarWrapper",componentId:"carbon_v162_12_0__sc-bd588fa6-0"})(["",";display:flex;flex-direction:row;gap:var(--global-space-comp-s);border-bottom:var(--global-borderwidth-xs) solid var(--input-typical-border-default);align-items:center;flex-wrap:wrap;"],(({size:o,hasHeader:e})=>a(["padding:",";",""],l[o].toolbarPadding,e&&a(["padding-top:",";"],l[o].withHeaderPadding)))),r=o.div.withConfig({displayName:"toolbar.style__StyledToolbar",componentId:"carbon_v162_12_0__sc-bd588fa6-1"})(["display:flex;flex-direction:row;gap:var(--global-space-comp-s);align-items:center;flex-wrap:wrap;padding:var(--global-space-comp-xs);"]),i=o.div.withConfig({displayName:"toolbar.style__CommandButtons",componentId:"carbon_v162_12_0__sc-bd588fa6-2"})(["display:flex;flex-direction:row;gap:var(--global-space-comp-s);"]),d=o(e).withConfig({displayName:"toolbar.style__StyledToolbarButton",componentId:"carbon_v162_12_0__sc-bd588fa6-3"})(["border:none;color:var(--button-typical-toggle-label-default);&:hover{background-color:var(--button-typical-toggle-bg-hover);color:var(--button-typical-toggle-label-hover);}",""],(({size:o})=>a(["min-width:",";min-height:",";"],l[o].buttonSize,l[o].buttonSize)));export{i as CommandButtons,r as StyledToolbar,d as StyledToolbarButton,t as StyledToolbarWrapper};

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

@@ -0,0 +1,6 @@
+export { default as CharacterCounterPlugin } from "./CharacterCounter";
+export { default as ContentEditor } from "./ContentEditor";
+export { default as Mentions } from "./Mentions";
+export { default as Placeholder } from "./Placeholder";
+export { default as ToolbarPlugin } from "./Toolbar";
+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{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__/__utils__/constants.d.ts

@@ -0,0 +1,21 @@
+import { CodeNode } from "@lexical/code";
+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 { 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 available actions that can be used in the editor */
+declare const TEXT_EDITOR_ACTION_TYPES: {
+    Bold: TextFormatType;
+    Italic: TextFormatType;
+    Underline: TextFormatType;
+    OrderedList: ListType;
+    UnorderedList: ListType;
+};
+/** The nodes supported by markdown */
+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/esm/components/text-editor/__internal__/__utils__/helpers.d.ts

@@ -0,0 +1,37 @@
+import { LexicalEditor } from "lexical";
+/**
+ * Post-processes HTML serialised from the Lexical editor, adding inline text
+ * formatting and applying brand-consistent defaults to all elements.
+ *
+ * Specifically:
+ * - Converts text format classes and semantic formatting tags to inline styles
+ * - Applies the Sage UI font family to all elements
+ * - Applies link styles (color, cursor, underline) to anchor elements
+ * - Preserves any existing inline styles set by Lexical (e.g. white-space: pre-wrap)
+ *
+ * This ensures the output HTML is portable and renders correctly in contexts where
+ * the Lexical stylesheet is not present, such as email templates or external consumers.
+ */
+declare const generateHTMLWithInlineStyles: (html: string) => string;
+/**
+ * This helper takes the current state of the editor and serializes it into two formats:
+ * 1. HTML
+ * 2. JSON
+ * This allows the editor state to be saved and restored at a later time, in a format suitable
+ * for the majority of customers' use cases.
+ */
+declare const SerializeLexical: (editor: LexicalEditor) => {
+    htmlString: undefined;
+    json: undefined;
+};
+/**
+ * This helper takes an HTML string and deserializes it into the editor.
+ * This allows the editor to be restored from a previously saved state.
+ */
+declare const DeserializeHTML: (html: string) => string;
+/** Function to validate a given URL */
+declare function validateUrl(url: string): boolean;
+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, generateHTMLWithInlineStyles, 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="font-family: 'Sage UI', sans-serif;",c=`color: #007e45ff; cursor: pointer; text-decoration: underline; ${a}`,m={textBold:"font-weight: bold;",textItalic:"font-style: italic;",textUnderline:"text-decoration: underline;"},d={STRONG:"font-weight: bold;",B:"font-weight: bold;",EM:"font-style: italic;",I:"font-style: italic;",U:"text-decoration: underline;"},f=t=>{const e=(new DOMParser).parseFromString(t,"text/html");return e.body.querySelectorAll("*").forEach((t=>{const e=t,r=[];Array.from(e.classList).forEach((t=>{const o=m[t];o&&(r.push(o),e.classList.remove(t))}));const o=d[e.tagName];var n;o&&r.push(o),"A"===e.tagName?r.push(c):r.push(a);const i=[null!==(n=e.getAttribute("style"))&&void 0!==n?n:"",...r].filter(Boolean).join(" ");e.setAttribute("style",i),0===e.classList.length&&e.removeAttribute("class")})),e.body.innerHTML},h=t=>{let e,o;return t.read((()=>{const n=t.getEditorState();o=n.toJSON(),e=r(t,null)})),{htmlString:e,json:o}},u=r=>{const a=t({namespace:"html-to-json",onError:t=>l.error(t.message),theme:s(),nodes:i});let c;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){c=t}}),{discrete:!0}),c)throw c;const m=a.getEditorState().toJSON();return JSON.stringify(m)},p=new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);function g(t){return"https://"===t||p.test(t)}const w=t=>u(t),x=()=>'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';export{u as DeserializeHTML,h as SerializeLexical,x as createEmpty,w as createFromHTML,f as generateHTMLWithInlineStyles,g as validateUrl};

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

@@ -0,0 +1,202 @@
+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 aria-label to be rendered when in read-only mode */
+    "aria-label"?: string;
+    /** 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;
+    /** The id attribute, set on the content editable div within the Text Editor */
+    id?: 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;
+    /**
+     * Callback that is triggered when a parent form of the editor is submitted.
+     * The callback returns the current content of the editor in multiple formats, including HTML with inline styles.
+     */
+    onFormSubmission?: (value: EditorFormattedValuesWithInlineStyles) => 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";
+    /** The id attribute */
+    id?: string;
+    /** If the editor has a footer */
+    hasFooter?: boolean;
+}
+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 */
+    size: "small" | "medium" | "large";
+}
+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 EditorFormattedValuesWithInlineStyles extends EditorFormattedValues {
+    htmlStringWithInlineStyles?: string;
+}
+export type onFormSubmissionCallback = (value: EditorFormattedValuesWithInlineStyles) => void;
+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

@@ -0,0 +1 @@
+export { default } from "./__ui__/Mentions/";

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

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

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

@@ -0,0 +1,5 @@
+export { default } from "./text-editor.component";
+export { createEmpty, createFromHTML } from "./__internal__/__utils__/helpers";
+export type { TextEditorHandle, TextEditorProps, EditorFormattedValues, EditorFormattedValuesWithInlineStyles, } 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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,4 @@
+import React from "react";
+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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as o}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as n}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 _}from"@lexical/react/LexicalListPlugin";import{OnChangePlugin as p}from"@lexical/react/LexicalOnChangePlugin";import{PluginProvider as d}from"./__internal__/__providers__/plugin-provider.js";import{$getRoot as u}from"lexical";import{forwardRef as m,useRef as f,useState as g,useContext as h,useImperativeHandle as b,useEffect as v,useMemo as x,useCallback as j}from"react";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,MARKDOWN_NODES as L}from"./__internal__/__utils__/constants.js";import E from"./__internal__/__plugins__/AutoLinker/auto-link.component.js";import C from"./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js";import S from"./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js";import"./__internal__/__plugins__/useCursorAtEnd/index.js";import{FormSubmissionPlugin as T}from"./__internal__/__plugins__/FormSubmission/form-submission.plugin.js";import k from"./text-editor.context.js";import{StyledTextEditorWrapper as z,StyledWrapper as F,StyledEditorToolbarWrapper as $,StyledHeaderWrapper as M,StyledTextEditor as H,StyledFooterWrapper as B}from"./text-editor.style.js";import{createEmpty as R,SerializeLexical as q,validateUrl as A}from"./__internal__/__utils__/helpers.js";import{HintText as D}from"../../__internal__/hint-text/hint-text.component.js";import V from"../../__internal__/validation-message/__next__/validation-message.component.js";import I from"../../__internal__/error-border/error-border.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import U from"../../style/utils/filter-styled-system-margin-props.js";import G from"../../__internal__/utils/helpers/tags/tags.js";import J from"./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js";import{getTheme as K}from"./__internal__/__utils__/theme.js";import N from"./__internal__/__ui__/CharacterCounter/character-counter.component.js";import Q from"./__internal__/__ui__/ContentEditor/content-editor.component.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 W from"./__internal__/__ui__/Placeholder/placeholder.component.js";import X from"./__internal__/__ui__/Toolbar/toolbar.component.js";import Y from"../fieldset/__internal__/fieldset.context.js";function Z(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function ee(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){Z(e,r,t[r])}))}return e}let re=!1,te=!1,oe=!1;const ne=m(((m,Z)=>{var ne,ie,ae,{characterLimit:le=3e3,error:se,footer:ce,header:_e,inputHint:pe,labelText:de,namespace:ue=P,id:me,onBlur:fe,onCancel:ge,onChange:he,onFocus:be,onLinkAdded:ve,onSave:xe,onFormSubmission:je,placeholder:ye,previews:we=[],readOnly:Oe=!1,required:Pe=!1,rows:Le,size:Ee="medium",warning:Ce,customPlugins:Se,validationMessagePositionTop:Te=!1,toolbarControls:ke}=m,ze=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(m,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","onFormSubmission","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!re&&ze.value&&(re=!0,O.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!te&&ge&&(te=!0,O.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.")),!oe&&xe&&(oe=!0,O.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 Fe=f(null!==(ae=null!==(ie=ze.initialValue)&&void 0!==ie?ie:ze.value)&&void 0!==ae?ae:R()),$e=w(),[Me,He]=g(void 0),Be=f(null),[Re,qe]=g(null),[Ae,De]=g(!1),{size:Ve,hasError:Ie,required:Ue}=h(Y),Ge=Ve||Ee,Je=!!se||Ie;b(Z,(()=>({focus(){var e;null===(e=Be.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==Be?void 0:Be.current,r=()=>{De(!0)},t=()=>{De(!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)}}),[Be]);const Ke=x((()=>({namespace:ue,nodes:L,onError:e=>O.error(e.message),theme:K(),editorState:Fe.current,editable:!Oe})),[ue,Oe]),Ne=j(((e,r)=>{const t=e.read((()=>u().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(he){const e=q(r);null==he||he(t,e)}if(le>0){const e=le-t.length;He(e<0?$e.textEditor.characterLimit(Math.abs(e)):void 0)}}),[le,$e.textEditor,he]),Qe=j((e=>{if(!e.isEditable())return;if(!ge)return;const r=e.parseEditorState(Fe.current);e.setEditorState(r),ge()}),[ge]),We=x((()=>({namespace:ue,onCancel:ge?Qe:void 0,onSave:xe,toolbarControls:ke})),[Qe,ue,ge,xe,ke]),Xe=Ce||Me,Ye=r(t,{children:[e(V,{error:se,warning:Xe,id:`${ue}-validation-message`,"data-role":`${ue}-validation-message`,size:Ge}),(se||Xe)&&e(I,{$warning:!(se||!Xe)})]});return e(z,(Ze=ee({"data-role":`${ue}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==fe||fe(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==be||be(e)}},U(ze),G("text-editor",ze)),er={children:r(k.Provider,{value:{onLinkAdded:ve},children:[e(y,{onClick:()=>{var e;return null===(e=Be.current)||void 0===e?void 0:e.focus()},isRequired:Pe,id:`${ue}-label`,size:Ge,children:de}),pe&&e(D,{id:`${ue}-input-hint`,size:Ge,children:pe}),e(o,{initialConfig:Ke,children:r(F,{"data-role":`${ue}-wrapper`,ref:qe,size:Ge,children:[Te&&Ye,r($,{"data-role":`${ue}-editor-toolbar-wrapper`,id:`${ue}-editor-toolbar-wrapper`,isReadOnly:Oe,children:[_e&&e(M,{"data-role":`${ue}-header-wrapper`,size:Ge,children:_e}),Oe?e(J,{"aria-label":de,initialValue:(null===(ne=Be.current)||void 0===ne?void 0:ne.innerHTML)||Fe.current,size:Ge}):r(t,{children:[e(X,ee({contentEditorRef:Be,hasHeader:Boolean(_e),size:Ge},We)),r(H,{"data-role":`${ue}-editor`,error:Je,children:[e(s,{contentEditable:e(Q,{id:me,ref:Be,inputHint:pe,isFocused:Ae,namespace:ue,previews:we,rows:Le,readOnly:Oe,required:Pe||Ue,error:Je,warning:!!Ce||!!Me,validationMessagePositionTop:Te,size:Ge,hasFooter:!!ce}),placeholder:e(W,{namespace:ue,text:ye}),ErrorBoundary:i}),e(_,{}),e(a,{}),e(l,{}),e(p,{onChange:Ne,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:A}),e(n,{newTab:!0}),e(E,{}),e(S,{}),e(T,{onFormSubmission:je}),e(d,{parentRef:Re,size:Ge,children:Se})]})]}),ce&&e(B,{"data-role":`${ue}-footer-wrapper`,size:Ge,children:ce}),e(C,{})]}),!Te&&Ye,le>0&&!Oe&&e(N,{isFocused:Ae,maxChars:le,namespace:ue,size:Ge})]})})]})},er=null!=er?er:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ze,Object.getOwnPropertyDescriptors(er)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(er)).forEach((function(e){Object.defineProperty(Ze,e,Object.getOwnPropertyDescriptor(er,e))})),Ze));var Ze,er}));export{ne as TextEditor,ne as default};

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

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

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

@@ -0,0 +1 @@
+import t from"react";var e=t.createContext({});export{e as default};