carbon-react 148.0.0 → 149.0.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export { default } from "./on-change.plugin";

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

@@ -0,0 +1 @@
+export { default } from "./on-change.plugin";

package/esm/components/text-editor/__internal__/plugins/OnChange/on-change.plugin.d.ts

@@ -0,0 +1,5 @@
+import { EditorState } from "lexical";
+declare const OnChangePlugin: (props: {
+    onChange: (editorState: EditorState) => void;
+}) => null;
+export default OnChangePlugin;

package/esm/components/text-editor/__internal__/plugins/OnChange/on-change.plugin.js

@@ -0,0 +1,25 @@
+/**
+ * This plugin listens to changes in the editor and calls the `onChange` prop with the new editor state.
+ */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+const OnChangePlugin = props => {
+  // Get the editor instance
+  const [editor] = useLexicalComposerContext();
+  const {
+    onChange
+  } = props;
+
+  // Register an update listener to call the `onChange` prop
+  useEffect(() => {
+    return editor.registerUpdateListener(({
+      editorState
+    }) => {
+      const isEditable = editor.isEditable();
+      /* istanbul ignore else */
+      if (isEditable) onChange(editorState);
+    });
+  }, [editor, onChange]);
+  return null;
+};
+export default OnChangePlugin;

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

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

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

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

package/esm/components/text-editor/__internal__/plugins/Placeholder/placeholder.component.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The placeholder component does not reside in the editor in a traditional sense, but is instead rendered
+ * in a separate component which is then styled to appear as if it is part of the editor. This is by design
+ * in the Lexical project to allow for greater flexibility in the design of the editor (apparently).
+ */
+import React from "react";
+interface PlaceholderProps {
+    /** The namespace of the editor that this placeholder belongs to */
+    namespace: string;
+    /** The text to display in the placeholder */
+    text: string | undefined;
+}
+declare const Placeholder: ({ namespace, text }: PlaceholderProps) => React.JSX.Element;
+export default Placeholder;

package/esm/components/text-editor/__internal__/plugins/Placeholder/placeholder.component.js

@@ -0,0 +1,17 @@
+/**
+ * The placeholder component does not reside in the editor in a traditional sense, but is instead rendered
+ * in a separate component which is then styled to appear as if it is part of the editor. This is by design
+ * in the Lexical project to allow for greater flexibility in the design of the editor (apparently).
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import StyledPlaceholder from "./placeholder.style";
+const Placeholder = ({
+  namespace,
+  text = ""
+}) => {
+  return /*#__PURE__*/React.createElement(StyledPlaceholder, {
+    "data-role": `${namespace}-placeholder`
+  }, text);
+};
+export default Placeholder;

package/esm/components/text-editor/__internal__/plugins/Placeholder/placeholder.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledPlaceholder;

package/esm/components/text-editor/__internal__/plugins/Placeholder/placeholder.style.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const StyledPlaceholder = styled.div`
+  position: absolute;
+  top: 16px;
+  color: var(--colorsUtilityYin055);
+  left: 10px;
+`;
+export default StyledPlaceholder;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { FormattingButtonProps } from "./common";
+declare const BoldButton: ({ isActive, namespace }: FormattingButtonProps) => React.JSX.Element;
+export default BoldButton;

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

@@ -0,0 +1,41 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattingButton } from "../toolbar.style";
+import { TextEditorActionTypes } from "../../../constants";
+import useLocale from "../../../../../../hooks/__internal__/useLocale";
+// The `BoldButton` component is a button that applies bold formatting to the selected text in the editor.
+const BoldButton = ({
+  isActive,
+  namespace
+}) => {
+  // Get the locale to enable translations
+  const locale = useLocale();
+  // Get the editor instance
+  const [editor] = useLexicalComposerContext();
+
+  // When the button is clicked, dispatch the `FORMAT_TEXT_COMMAND` with the `Bold` action
+  const handleClick = () => {
+    const isEditable = editor.isEditable();
+
+    /* istanbul ignore else */
+    if (isEditable) {
+      // Focus the editor before dispatching the command
+      editor.focus();
+      editor.dispatchCommand(FORMAT_TEXT_COMMAND, TextEditorActionTypes.Bold);
+    }
+  };
+  return /*#__PURE__*/React.createElement(FormattingButton, {
+    size: "small",
+    "aria-label": locale.textEditor.boldAria(),
+    onClick: () => handleClick(),
+    iconType: "bold",
+    buttonType: isActive ? "primary" : "tertiary",
+    isActive: isActive,
+    "aria-pressed": isActive,
+    "data-role": `${namespace}-bold-button`,
+    tabIndex: 0
+  });
+};
+export default BoldButton;

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

@@ -0,0 +1,6 @@
+export interface FormattingButtonProps {
+    /** Whether the button is active or not, relative to the text at the current cursor position */
+    isActive: boolean;
+    /** The namespace of the editor that this button belongs to */
+    namespace: string;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export { default as BoldButton } from "./bold.component";
+export { default as ItalicButton } from "./italic.component";
+export { default as ListControls } from "./list.component";
+export { default as SaveButton } from "./save.component";

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

@@ -0,0 +1,4 @@
+export { default as BoldButton } from "./bold.component";
+export { default as ItalicButton } from "./italic.component";
+export { default as ListControls } from "./list.component";
+export { default as SaveButton } from "./save.component";

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

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

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

@@ -0,0 +1,41 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattingButton } from "../toolbar.style";
+import { TextEditorActionTypes } from "../../../constants";
+import useLocale from "../../../../../../hooks/__internal__/useLocale";
+
+// The `ItalicButton` component is a button that applies italic formatting to the selected text in the editor.
+const ItalicButton = ({
+  isActive,
+  namespace
+}) => {
+  // Get the editor instance
+  const [editor] = useLexicalComposerContext();
+  // Get the locale to enable translations
+  const locale = useLocale();
+
+  // When the button is clicked, dispatch the `FORMAT_TEXT_COMMAND` with the `Italic` action
+  const handleClick = () => {
+    const isEditable = editor.isEditable();
+
+    /* istanbul ignore else */
+    if (isEditable)
+      // Focus the editor before dispatching the command
+      editor.focus();
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, TextEditorActionTypes.Italic);
+  };
+  return /*#__PURE__*/React.createElement(FormattingButton, {
+    size: "small",
+    "aria-label": locale.textEditor.italicAria(),
+    onClick: () => handleClick(),
+    iconType: "italic",
+    buttonType: isActive ? "primary" : "tertiary",
+    isActive: isActive,
+    "aria-pressed": isActive,
+    "data-role": `${namespace}-italic-button`,
+    tabIndex: -1
+  });
+};
+export default ItalicButton;

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const ListControls: ({ namespace }: {
+    namespace: string;
+}) => React.JSX.Element;
+export default ListControls;

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

@@ -0,0 +1,317 @@
+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 PropTypes from "prop-types";
+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
+  }), /*#__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
+  }));
+};
+export default ListControls;

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

@@ -0,0 +1,34 @@
+import React from "react";
+interface SaveObjectProps {
+    detail: number;
+    format: number;
+    mode: string;
+    style: string;
+    text: string;
+    type: string;
+    version: number;
+}
+interface SaveProps {
+    children: SaveObjectProps[];
+}
+export interface SaveCallbackProps {
+    htmlString?: string;
+    json?: {
+        root: {
+            children: SaveProps[];
+            direction: string;
+            format: string;
+            indent: number;
+            type: string;
+            version: string;
+        };
+    };
+}
+interface SaveButtonProps {
+    /** The namespace of the editor that this button belongs to */
+    namespace: string;
+    /** The callback to call when the save button is clicked */
+    onSave: (value: SaveCallbackProps) => void;
+}
+declare const SaveButton: ({ namespace, onSave }: SaveButtonProps) => React.JSX.Element;
+export default SaveButton;

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

@@ -0,0 +1,29 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import React from "react";
+import PropTypes from "prop-types";
+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;