carbon-react 154.3.2 → 154.4.0-beta.0

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

@@ -1,318 +1 @@
-import { $createListNode, $isListItemNode, $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode, REMOVE_LIST_COMMAND, insertList, removeList } from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { mergeRegister } from "@lexical/utils";
-import { $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW } from "lexical";
-import React, { useCallback, useEffect, useState } from "react";
-import { FormattingButton } from "../toolbar.style";
-import { TextEditorActionTypes } from "../../../constants";
-import useLocale from "../../../../../../hooks/__internal__/useLocale";
-
-// The `ListControls` component is a set of buttons that allow the user to insert ordered and unordered lists into the editor.
-const ListControls = ({
-  namespace
-}) => {
-  // Get the editor instance
-  const [editor] = useLexicalComposerContext();
-  // Get the locale to enable translations
-  const locale = useLocale();
-  // Set the initial state of the list buttons
-  const [isOLActive, setIsOLActive] = useState(false);
-  const [isULActive, setIsULActive] = useState(false);
-
-  // Register the commands for inserting and removing lists
-  editor.registerCommand(INSERT_ORDERED_LIST_COMMAND, () => {
-    insertList(editor, TextEditorActionTypes.OrderedList);
-    return true;
-  }, COMMAND_PRIORITY_LOW);
-  editor.registerCommand(INSERT_UNORDERED_LIST_COMMAND, () => {
-    insertList(editor, TextEditorActionTypes.UnorderedList);
-    return true;
-  }, COMMAND_PRIORITY_LOW);
-  editor.registerCommand(REMOVE_LIST_COMMAND, () => {
-    removeList(editor);
-    return true;
-  }, COMMAND_PRIORITY_LOW);
-
-  // Recursive function to find the closest list item ancestor
-  const findListItemAncestor = node => {
-    let currentNode = node;
-    while (currentNode !== null) {
-      if (currentNode instanceof ListItemNode) {
-        return currentNode;
-      }
-      currentNode = currentNode?.getParent();
-    }
-    return null;
-  };
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if (!selection) {
-      setIsOLActive(false);
-      setIsULActive(false);
-      return;
-    }
-    const selectedNodes = selection.getNodes();
-
-    /* istanbul ignore if */
-    if (selectedNodes.length === 0) {
-      setIsOLActive(false);
-      setIsULActive(false);
-      return;
-    }
-    const listItemNode = selectedNodes.map(findListItemAncestor).find(node => node !== null);
-    if (!listItemNode) {
-      setIsOLActive(false);
-      setIsULActive(false);
-      return;
-    }
-    let listNode = listItemNode.getParent();
-    /* istanbul ignore next */
-    while (listNode && !(listNode instanceof ListNode)) {
-      listNode = listNode.getParent();
-    }
-
-    /* istanbul ignore else */
-    if (listNode instanceof ListNode) {
-      setIsOLActive(listNode.getListType() === "number");
-      setIsULActive(listNode.getListType() === "bullet");
-    } else {
-      setIsOLActive(false);
-      setIsULActive(false);
-    }
-  }, []);
-
-  // Register an update listener to update the toolbar when the editor state changes
-  useEffect(() => {
-    return mergeRegister(editor.registerUpdateListener(({
-      editorState
-    }) => {
-      editorState.read(() => {
-        const isEditable = editor.isEditable();
-        /* istanbul ignore else */
-        if (isEditable) updateToolbar();
-      });
-    }));
-  }, [updateToolbar, editor]);
-
-  // When the ordered list button is clicked, insert or remove an ordered list
-  const handleOLClick = () => {
-    const isEditable = editor.isEditable();
-    /* istanbul ignore if */
-    if (!isEditable) return;
-
-    // Focus the editor before dispatching the command
-    editor.focus();
-    if (isOLActive) {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-      setIsOLActive(false);
-    } else {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-      setIsOLActive(true);
-    }
-    // If the unordered list button is active, deactivate it
-    setIsULActive(false);
-  };
-
-  // When the unordered list button is clicked, insert or remove an unordered list
-  const handleULClick = () => {
-    const isEditable = editor.isEditable();
-    /* istanbul ignore if */
-    if (!isEditable) return;
-
-    // Focus the editor before dispatching the command
-    editor.focus();
-    if (isULActive) {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-      setIsULActive(false);
-    } else {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-      setIsULActive(true);
-    }
-    // If the ordered list button is active, deactivate it
-    setIsOLActive(false);
-  };
-
-  // Split an array into three parts: before a subset, the subset, and after the subset
-  function splitArray(allEntries, subsetEntries) {
-    let startIndex = -1;
-    for (let i = 0; i <= allEntries.length - subsetEntries.length; i++) {
-      if (allEntries.slice(i, i + subsetEntries.length).toString() === subsetEntries.toString()) {
-        startIndex = i;
-        break;
-      }
-    }
-
-    /* istanbul ignore if */
-    if (startIndex === -1) {
-      throw new Error("Subset B not found in array A");
-    }
-
-    // If the subset matches the full selection, return the original subset
-    if (startIndex === 0 && subsetEntries.length === allEntries.length) {
-      return {
-        beforeSubset: [],
-        subset: allEntries,
-        afterSubset: []
-      };
-    }
-
-    // Split A into three parts
-    const beforeSubset = allEntries.slice(0, startIndex);
-    const subset = allEntries.slice(startIndex, startIndex + subsetEntries.length);
-    const afterSubset = allEntries.slice(startIndex + subsetEntries.length);
-    return {
-      beforeSubset,
-      subset,
-      afterSubset
-    };
-  }
-
-  /* istanbul ignore next */
-  const alignListTypes = (lists, listType) => {
-    lists.forEach(list => {
-      editor.update(() => {
-        list.setListType(listType);
-      });
-    });
-  };
-
-  /* istanbul ignore next */
-  const convertListType = newType => {
-    editor.update(() => {
-      // Get the current selection
-      const selection = $getSelection();
-      // If the selection is not a range selection, return
-      if (!$isRangeSelection(selection)) return;
-
-      // Get the anchor node
-      const anchorNode = selection.anchor.getNode();
-
-      // Find the parent list node
-      let currentList = anchorNode.getParent();
-      while (currentList && !$isListNode(currentList)) {
-        currentList = currentList.getParent();
-      }
-
-      // If the parent node is not a list node, return
-      if (!currentList) {
-        return;
-      }
-
-      // Determine how many lists have been selected
-      const numberOfListsSelected = selection.getNodes().map(node => {
-        return node.getType() === "list" ? node : null;
-      }).filter(node => node !== null);
-
-      // If more than one list is selected, just align the list types to use the selected type
-      if (numberOfListsSelected.length > 1) {
-        alignListTypes(numberOfListsSelected, newType);
-        return;
-      }
-      const preSelectionList = [];
-      const selectionList = [];
-      const postSelectionList = [];
-
-      // Get the keys of the nodes in the selection, filtering out the current list node (the parent)
-      const selectionKeys = selection.getNodes().map(node => {
-        let _p = node.getParent();
-        // If we're not in a list item directly, get the parent of the node
-        if (!$isListItemNode(_p)) {
-          const nodeType = _p?.getType();
-          // If the node is a link or autolink, use the parent of the link node instead
-          if (nodeType && ["link", "autolink"].includes(nodeType)) {
-            _p = _p?.getParent() ?? null;
-          } else {
-            // This node is useless, return null
-            return null;
-          }
-        }
-        const _k = _p?.getKey();
-        if (_k !== currentList?.getKey()) return _k;
-        return null;
-      }).filter(key => key !== null && key !== undefined);
-      // Get the keys of the nodes in the current list node
-      const listKeys = currentList.getChildrenKeys();
-
-      // Remove duplicate keys from the selection
-      const uniqueSelectionKeys = Array.from(new Set(selectionKeys));
-
-      // Split the list keys into three parts: before the selection, the selection, and after the selection
-      const {
-        beforeSubset,
-        subset,
-        afterSubset
-      } = splitArray(listKeys, uniqueSelectionKeys);
-
-      // Get the nodes of the three parts
-      beforeSubset.forEach(key => {
-        const node = $getNodeByKey(key);
-        if ($isListItemNode(node)) preSelectionList.push(node);
-      });
-      subset.forEach(key => {
-        const node = $getNodeByKey(key);
-        if ($isListItemNode(node)) selectionList.push(node);
-      });
-      afterSubset.forEach(key => {
-        const node = $getNodeByKey(key);
-        if ($isListItemNode(node)) postSelectionList.push(node);
-      });
-
-      // Create new list nodes with the new list type
-      const originalListType = currentList.getListType();
-      const newPreNode = $createListNode(originalListType);
-      const newSelectionNode = $createListNode(newType);
-      const newPostNode = $createListNode(originalListType);
-      newPreNode.append(...preSelectionList);
-      newSelectionNode.append(...selectionList);
-      newPostNode.append(...postSelectionList);
-
-      // Insert the new nodes before the current list node if they have children
-      if (newPreNode.getChildren().length > 0) {
-        currentList.insertBefore(newPreNode);
-      }
-      if (newSelectionNode.getChildren().length > 0) {
-        if (newPreNode.getChildren().length > 0) {
-          newPreNode.insertAfter(newSelectionNode);
-        } else {
-          currentList.insertBefore(newSelectionNode);
-        }
-      }
-      if (newPostNode.getChildren().length > 0) {
-        if (newSelectionNode.getChildren().length > 0) {
-          newSelectionNode.insertAfter(newPostNode);
-        } else if (newPreNode.getChildren().length > 0) {
-          newPreNode.insertAfter(newPostNode);
-        } else {
-          currentList.insertBefore(newPostNode);
-        }
-      }
-
-      // Remove the current list node
-      currentList.remove();
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattingButton, {
-    size: "small",
-    "aria-label": locale.textEditor.unorderedListAria(),
-    onClick: () => isOLActive ? convertListType("bullet") : handleULClick(),
-    iconType: "bullet_list_dotted",
-    buttonType: isULActive ? "primary" : "tertiary",
-    isActive: isULActive,
-    "aria-pressed": isULActive,
-    "data-role": `${namespace}-unordered-list-button`,
-    tabIndex: -1,
-    className: "toolbar-button"
-  }), /*#__PURE__*/React.createElement(FormattingButton, {
-    size: "small",
-    "aria-label": locale.textEditor.orderedListAria(),
-    onClick: () => isULActive ? convertListType("number") : handleOLClick(),
-    iconType: "bullet_list_numbers",
-    buttonType: isOLActive ? "primary" : "tertiary",
-    isActive: isOLActive,
-    "aria-pressed": isOLActive,
-    "data-role": `${namespace}-ordered-list-button`,
-    tabIndex: -1,
-    className: "toolbar-button"
-  }));
-};
-export default ListControls;
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{INSERT_ORDERED_LIST_COMMAND as n,insertList as i,INSERT_UNORDERED_LIST_COMMAND as o,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 y,useCallback as C,useEffect as x}from"react";import{FormattingButton as L}from"../toolbar.style.js";import{TextEditorActionTypes as S}from"../../../constants.js";import E from"../../../../../../hooks/__internal__/useLocale/useLocale.js";const T=({namespace:T})=>{const[A]=m(),_=E(),[P,k]=y(!1),[N,j]=y(!1);A.registerCommand(n,(()=>(i(A,S.OrderedList),!0)),p),A.registerCommand(o,(()=>(i(A,S.UnorderedList),!0)),p),A.registerCommand(l,(()=>(s(A),!0)),p);const B=e=>{let t=e;for(;null!==t;){if(t instanceof d)return t;t=null==t?void 0:t.getParent()}return null},w=C((()=>{const e=b();if(!e)return k(!1),void j(!1);const t=e.getNodes();if(0===t.length)return k(!1),void j(!1);const r=t.map(B).find((e=>null!==e));if(!r)return k(!1),void j(!1);let n=r.getParent();for(;n&&!(n instanceof a);)n=n.getParent();n instanceof a?(k("number"===n.getListType()),j("bullet"===n.getListType())):(k(!1),j(!1))}),[]);x((()=>g(A.registerUpdateListener((({editorState:e})=>{e.read((()=>{A.isEditable()&&w()}))})))),[w,A]);const K=e=>{A.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 i=e,void n.forEach((e=>{A.update((()=>{e.setListType(i)}))}));var i;const o=[],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 i=null==t?void 0:t.getKey();return i!==(null==r?void 0:r.getKey())?i:null})).filter((e=>null!=e)),d=r.getChildrenKeys(),m=Array.from(new Set(a)),{beforeSubset:g,subset:p,afterSubset:y}=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)&&o.push(t)})),p.forEach((e=>{const t=v(e);c(t)&&l.push(t)})),y.forEach((e=>{const t=v(e);c(t)&&s.push(t)}));const C=r.getListType(),x=f(C),L=f(e),S=f(C);x.append(...o),L.append(...l),S.append(...s),x.getChildren().length>0&&r.insertBefore(x),L.getChildren().length>0&&(x.getChildren().length>0?x.insertAfter(L):r.insertBefore(L)),S.getChildren().length>0&&(L.getChildren().length>0?L.insertAfter(S):x.getChildren().length>0?x.insertAfter(S):r.insertBefore(S)),r.remove()}))};return e(t,{children:[r(L,{size:"small","aria-label":_.textEditor.unorderedListAria(),onClick:()=>P?K("bullet"):void(A.isEditable()&&(A.focus(),N?(A.dispatchCommand(l,void 0),j(!1)):(A.dispatchCommand(o,void 0),j(!0)),k(!1))),iconType:"bullet_list_dotted",buttonType:N?"primary":"tertiary",isActive:N,"aria-pressed":N,"data-role":`${T}-unordered-list-button`,tabIndex:-1,className:"toolbar-button"}),r(L,{size:"small","aria-label":_.textEditor.orderedListAria(),onClick:()=>N?K("number"):void(A.isEditable()&&(A.focus(),P?(A.dispatchCommand(l,void 0),k(!1)):(A.dispatchCommand(n,void 0),k(!0)),j(!1))),iconType:"bullet_list_numbers",buttonType:P?"primary":"tertiary",isActive:P,"aria-pressed":P,"data-role":`${T}-ordered-list-button`,tabIndex:-1,className:"toolbar-button"})]})};export{T as default};

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

@@ -1,28 +1 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import React from "react";
-import { SerializeLexical } from "../../../helpers";
-import Button from "../../../../../button";
-import useLocale from "../../../../../../hooks/__internal__/useLocale";
-// The `SaveButton` component is a button that saves the current state of the editor
-const SaveButton = ({
-  namespace,
-  onSave
-}) => {
-  // Get the editor instance
-  const [editor] = useLexicalComposerContext();
-  // Get the locale to enable translations
-  const locale = useLocale();
-  return /*#__PURE__*/React.createElement(Button, {
-    "data-role": `${namespace}-save-button`,
-    buttonType: "primary",
-    "aria-label": locale.textEditor.saveButtonAria(),
-    onClick: () => {
-      const isEditable = editor.isEditable();
-      /* istanbul ignore if */
-      if (!isEditable) return;
-      const values = SerializeLexical(editor);
-      onSave?.(values);
-    }
-  }, locale.textEditor.saveButton());
-};
-export default SaveButton;
+import{jsx as t}from"react/jsx-runtime";import{useLexicalComposerContext as o}from"@lexical/react/LexicalComposerContext";import"react";import{SerializeLexical as e}from"../../../helpers.js";import r from"../../../../../button/button.component.js";import a from"../../../../../../hooks/__internal__/useLocale/useLocale.js";const n=({namespace:n,onSave:i})=>{const[s]=o(),l=a();return t(r,{"data-role":`${n}-save-button`,buttonType:"primary","aria-label":l.textEditor.saveButtonAria(),onClick:()=>{if(!s.isEditable())return;const t=e(s);null==i||i(t)},children:l.textEditor.saveButton()})};export{n as default};

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

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

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

@@ -1,111 +1 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { mergeRegister } from "@lexical/utils";
-import { $getSelection, $isRangeSelection } from "lexical";
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { StyledToolbar, FormattingButtons, CommandButtons } from "./toolbar.style";
-import { TextEditorActionTypes } from "../../constants";
-import Button from "../../../../button";
-import useLocale from "../../../../../hooks/__internal__/useLocale";
-import { BoldButton, ItalicButton, ListControls } from "./buttons";
-import SaveButton from "./buttons/save.component";
-const Toolbar = ({
-  namespace,
-  hasHeader,
-  onCancel,
-  onSave
-}) => {
-  // Get the editor instance
-  const [editor] = useLexicalComposerContext();
-  const toolbarRef = useRef(null);
-
-  // Set the initial state of the formatting buttons
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [buttons, setButtons] = useState([]);
-
-  // If the UI updates, re-fetch the formatting buttons
-  useLayoutEffect(() => {
-    const formattingButtons = document.querySelectorAll(`[data-role="${namespace}-formatting-buttons"] button`);
-    setButtons(Array.from(formattingButtons));
-  }, [namespace]);
-
-  // Get the locale to enable translations
-  const locale = useLocale();
-
-  // Update the toolbar based on the current selection
-  const updateToolbar = useCallback(() => {
-    // Get the current selection
-    const selection = $getSelection();
-    // If the selection is a range selection, update the formatting buttons
-    if ($isRangeSelection(selection)) {
-      setIsBold(selection.hasFormat(TextEditorActionTypes.Bold));
-      setIsItalic(selection.hasFormat(TextEditorActionTypes.Italic));
-    }
-  }, []);
-
-  // Register an update listener to update the toolbar when the editor state changes
-  useEffect(() => {
-    return mergeRegister(editor.registerUpdateListener(({
-      editorState
-    }) => {
-      editorState.read(() => {
-        const isEditable = editor.isEditable();
-        /* istanbul ignore else */
-        if (isEditable) updateToolbar();
-      });
-    }));
-  }, [updateToolbar, editor]);
-
-  // Register a keydown listener to enable keyboard navigation
-  useEffect(() => {
-    const tbRef = toolbarRef.current;
-    const handleKeyDown = event => {
-      // Get the current index of the active button
-      const currentIndex = buttons.findIndex(button => button === document.activeElement);
-
-      // If the key pressed is the right arrow key, focus the next button
-      /* istanbul ignore next */
-      if (event.key === "ArrowRight") {
-        const nextIndex = (currentIndex + 1) % buttons.length;
-        buttons[nextIndex].focus();
-        // If the key pressed is the left arrow key, focus the previous button
-      } else if (event.key === "ArrowLeft") {
-        const prevIndex = (currentIndex - 1 + buttons.length) % buttons.length;
-        buttons[prevIndex].focus();
-      }
-    };
-    toolbarRef.current?.addEventListener("keydown", handleKeyDown);
-    return () => {
-      tbRef?.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [buttons]);
-  return /*#__PURE__*/React.createElement(StyledToolbar, {
-    role: "toolbar",
-    hasHeader: hasHeader,
-    "aria-label": locale.textEditor.toolbarAriaLabel(),
-    "data-role": `${namespace}-toolbar`,
-    id: `${namespace}-toolbar`,
-    ref: toolbarRef
-  }, /*#__PURE__*/React.createElement(FormattingButtons, {
-    "data-role": `${namespace}-formatting-buttons`
-  }, /*#__PURE__*/React.createElement(BoldButton, {
-    isActive: isBold,
-    namespace: namespace
-  }), /*#__PURE__*/React.createElement(ItalicButton, {
-    isActive: isItalic,
-    namespace: namespace
-  }), /*#__PURE__*/React.createElement(ListControls, {
-    namespace: namespace
-  })), /*#__PURE__*/React.createElement(CommandButtons, {
-    "data-role": `${namespace}-command-buttons`
-  }, onCancel && /*#__PURE__*/React.createElement(Button, {
-    buttonType: "tertiary",
-    "data-role": `${namespace}-cancel-button`,
-    "aria-label": locale.textEditor.cancelButtonAria(),
-    onClick: () => onCancel?.()
-  }, locale.textEditor.cancelButton()), onSave && /*#__PURE__*/React.createElement(SaveButton, {
-    namespace: namespace,
-    onSave: onSave
-  })));
-};
-export default Toolbar;
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{mergeRegister as r}from"@lexical/utils";import{$getSelection as n,$isRangeSelection as a}from"lexical";import{useRef as l,useState as i,useLayoutEffect as s,useCallback as c,useEffect as m}from"react";import{StyledToolbar as d,FormattingButtons as u,CommandButtons as p}from"./toolbar.style.js";import{TextEditorActionTypes as f}from"../../constants.js";import b from"../../../../button/button.component.js";import h from"../../../../../hooks/__internal__/useLocale/useLocale.js";import v from"./buttons/bold.component.js";import x from"./buttons/italic.component.js";import j from"./buttons/list.component.js";import y from"./buttons/save.component.js";const A=({namespace:A,hasHeader:L,onCancel:g,onSave:E})=>{const[k]=e(),$=l(null),[w,C]=i(!1),[S,_]=i(!1),[B,F]=i([]);s((()=>{const t=document.querySelectorAll(`[data-role="${A}-formatting-buttons"] button`);F(Array.from(t))}),[A]);const H=h(),I=c((()=>{const t=n();a(t)&&(C(t.hasFormat(f.Bold)),_(t.hasFormat(f.Italic)))}),[]);return m((()=>r(k.registerUpdateListener((({editorState:t})=>{t.read((()=>{k.isEditable()&&I()}))})))),[I,k]),m((()=>{var t;const o=$.current,e=t=>{const o=B.findIndex((t=>t===document.activeElement));if("ArrowRight"===t.key){const t=(o+1)%B.length;B[t].focus()}else if("ArrowLeft"===t.key){const t=(o-1+B.length)%B.length;B[t].focus()}};return null===(t=$.current)||void 0===t||t.addEventListener("keydown",e),()=>{null==o||o.removeEventListener("keydown",e)}}),[B]),t(d,{role:"toolbar",hasHeader:L,"aria-label":H.textEditor.toolbarAriaLabel(),"data-role":`${A}-toolbar`,id:`${A}-toolbar`,ref:$,children:[t(u,{"data-role":`${A}-formatting-buttons`,children:[o(v,{isActive:w,namespace:A}),o(x,{isActive:S,namespace:A}),o(j,{namespace:A})]}),t(p,{"data-role":`${A}-command-buttons`,children:[g&&o(b,{buttonType:"tertiary","data-role":`${A}-cancel-button`,"aria-label":H.textEditor.cancelButtonAria(),onClick:()=>null==g?void 0:g(),children:H.textEditor.cancelButton()}),E&&o(y,{namespace:A,onSave:E})]})]})};export{A as default};

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

@@ -1,61 +1 @@
-import styled, { css } from "styled-components";
-import Button from "../../../../button";
-const StyledToolbar = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  background-color: var(--colorsActionMajorYang100);
-  padding: 12px;
-  border-top-left-radius: ${({
-  hasHeader
-}) => hasHeader ? "0" : "var(--borderRadius100)"};
-  border-top-right-radius: ${({
-  hasHeader
-}) => hasHeader ? "0" : "var(--borderRadius100)"};
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  justify-content: space-between;
-  align-items: center;
-  margin-left: 1px;
-  margin-right: 1px;
-`;
-const FormattingButtons = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-`;
-const CommandButtons = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-`;
-const FormattingButton = styled(Button)`
-  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;
-    }
-  }
-
-  ${({
-  isActive
-}) => css`
-    background-color: ${isActive ? "var(--colorsActionMajor600)" : "transparent"};
-  `}
-
-  > span {
-    ${({
-  isActive
-}) => css`
-      color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin100) "} !important;
-    `}
-  }
-`;
-export { StyledToolbar, FormattingButtons, CommandButtons, FormattingButton };
+import o,{css as t}from"styled-components";import r from"../../../../button/button.component.js";const i=o.div.withConfig({displayName:"toolbar.style__StyledToolbar",componentId:"sc-9f02df-0"})(["display:flex;flex-direction:row;gap:8px;background-color:var(--colorsActionMajorYang100);padding:12px;border-top-left-radius:",";border-top-right-radius:",";border-bottom-left-radius:0;border-bottom-right-radius:0;justify-content:space-between;align-items:center;margin-left:1px;margin-right:1px;"],(({hasHeader:o})=>o?"0":"var(--borderRadius100)"),(({hasHeader:o})=>o?"0":"var(--borderRadius100)")),e=o.div.withConfig({displayName:"toolbar.style__FormattingButtons",componentId:"sc-9f02df-1"})(["display:flex;flex-direction:row;gap:8px;"]),a=o.div.withConfig({displayName:"toolbar.style__CommandButtons",componentId:"sc-9f02df-2"})(["display:flex;flex-direction:row;gap:8px;"]),n=o(r).withConfig({displayName:"toolbar.style__FormattingButton",componentId:"sc-9f02df-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{","}"],(({isActive:o})=>t(["background-color:",";"],o?"var(--colorsActionMajor600)":"transparent")),(({isActive:o})=>t(["color:"," !important;"],o?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin100) ")));export{a as CommandButtons,n as FormattingButton,e as FormattingButtons,i as StyledToolbar};

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

@@ -1,9 +1 @@
-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 OnChangePlugin } from "./OnChange";
-export { default as Placeholder } from "./Placeholder";
-export { default as ToolbarPlugin } from "./Toolbar";
-export { default as useCursorAtEnd } from "./useCursorAtEnd";
+export{default as AutoLinkerPlugin}from"./AutoLinker/auto-link.component.js";export{default as CharacterCounterPlugin}from"./CharacterCounter/character-counter.component.js";export{default as ContentEditor}from"./ContentEditor/content-editor.component.js";export{default as LinkMonitorPlugin}from"./LinkMonitor/link-monitor.plugin.js";export{default as LinkPreviewerPlugin}from"./LinkPreviewer/link-previewer.component.js";export{default as OnChangePlugin}from"./OnChange/on-change.plugin.js";export{default as Placeholder}from"./Placeholder/placeholder.component.js";export{default as ToolbarPlugin}from"./Toolbar/toolbar.component.js";export{default as useCursorAtEnd}from"./useCursorAtEnd/index.js";

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

@@ -1,71 +1 @@
-/* istanbul ignore file */
-// Ignore this file in coverage reports because it's a plugin and not part of the main logic.
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useEffect } from "react";
-import { COMMAND_PRIORITY_NORMAL, createCommand, $getRoot, $createRangeSelection, $getSelection, $setSelection, $createTextNode } from "lexical";
-const FOCUS_COMMAND = createCommand("FOCUS_COMMAND");
-// This hook sets the cursor at the end of the editor when it receives focus
-// via keyboard, or at the relevant position when it receives focus via mouse
-function useCursorAtEnd() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return editor.registerCommand(FOCUS_COMMAND, payload => {
-      editor.update(() => {
-        if (!payload.defaultToEnd) {
-          const currentSelection = $getSelection();
-          if (currentSelection) {
-            $setSelection(currentSelection);
-            return;
-          }
-        }
-        const root = $getRoot();
-        const numberOfChildren = root.getChildrenSize();
-        const selection = $createRangeSelection();
-        if (numberOfChildren === 1) {
-          const firstNode = root.getFirstChild();
-          if (firstNode) {
-            if (firstNode && firstNode.getType() === "paragraph") {
-              const firstNodeChildren = firstNode.getChildrenSize();
-              if (firstNode.getType() === "paragraph" && firstNodeChildren === 0) {
-                const emptyTextNode = $createTextNode("");
-                firstNode.append(emptyTextNode);
-                selection.anchor.set(emptyTextNode.getKey(), 0, "text");
-                selection.focus.set(emptyTextNode.getKey(), 0, "text");
-              } else {
-                const lastNode = firstNode.getLastChild();
-                if (lastNode && lastNode.getType() === "text") {
-                  const contentSize = lastNode.getTextContentSize();
-                  const lastNodeKey = lastNode.getKey();
-                  selection.anchor.set(lastNodeKey, contentSize, "text");
-                  selection.focus.set(lastNodeKey, contentSize, "text");
-                }
-              }
-              $setSelection(selection);
-            }
-          }
-        } else {
-          const allTextNodes = root.getAllTextNodes();
-          if (allTextNodes.length === 0) return;
-          const lastNode = allTextNodes[allTextNodes.length - 1];
-          if (lastNode) {
-            const offset = lastNode.getTextContentSize();
-            selection.anchor.set(lastNode.getKey(), offset, "text");
-            selection.focus.set(lastNode.getKey(), offset, "text");
-            $setSelection(selection);
-          }
-        }
-      });
-      return true;
-    }, COMMAND_PRIORITY_NORMAL);
-  }, [editor]);
-  const handleFocus = e => {
-    // Check if the focus was triggered by a mouse click
-    // relatedTarget is null for mouse clicks, but set for keyboard navigation
-    const defaultToEnd = e.relatedTarget !== null;
-    editor.dispatchCommand(FOCUS_COMMAND, {
-      defaultToEnd
-    });
-  };
-  return handleFocus;
-}
-export default useCursorAtEnd;
+import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{useEffect as e}from"react";import{createCommand as o,$getSelection as n,$setSelection as s,$getRoot as r,$createRangeSelection as i,$createTextNode as a,COMMAND_PRIORITY_NORMAL as c}from"lexical";const g=o("FOCUS_COMMAND");function l(){const[o]=t();return e((()=>o.registerCommand(g,(t=>(o.update((()=>{if(!t.defaultToEnd){const t=n();if(t)return void s(t)}const e=r(),o=e.getChildrenSize(),c=i();if(1===o){const t=e.getFirstChild();if(t&&t&&"paragraph"===t.getType()){const e=t.getChildrenSize();if("paragraph"===t.getType()&&0===e){const e=a("");t.append(e),c.anchor.set(e.getKey(),0,"text"),c.focus.set(e.getKey(),0,"text")}else{const e=t.getLastChild();if(e&&"text"===e.getType()){const t=e.getTextContentSize(),o=e.getKey();c.anchor.set(o,t,"text"),c.focus.set(o,t,"text")}}s(c)}}else{const t=e.getAllTextNodes();if(0===t.length)return;const o=t[t.length-1];if(o){const t=o.getTextContentSize();c.anchor.set(o.getKey(),t,"text"),c.focus.set(o.getKey(),t,"text"),s(c)}}})),!0)),c)),[o]),t=>{const e=null!==t.relatedTarget;o.dispatchCommand(g,{defaultToEnd:e})}}export{l as default};