carbon-react 148.0.1 → 149.0.1

package/esm/__internal__/label/label.component.js

@@ -1,11 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import Help from "../../components/help";
 import StyledLabel, { StyledLabelContainer } from "./label.style";
 import ValidationIcon from "../validations/validation-icon.component";
 import StyledIconWrapper from "./icon-wrapper.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
+import createGuid from "../../__internal__/utils/helpers/guid";
 const shouldDisplayValidationIcon = ({
   error,
   warning,
@@ -57,6 +58,7 @@ export const Label = ({
     onMouseEnter: onGroupMouseEnter,
     onMouseLeave: onGroupMouseLeave
   } = useContext(InputGroupContext);
+  const guid = useRef(createGuid());
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
     if (onGroupMouseEnter) onGroupMouseEnter();
@@ -107,6 +109,7 @@ export const Label = ({
   };
   return /*#__PURE__*/React.createElement(StyledLabelContainer, {
     "data-role": "label-container",
+    id: `label-container-${labelId ?? guid.current}`,
     align: alignment,
     inline: inline,
     width: width,

package/esm/components/note/note.component.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { EditorState } from "draft-js";
 import { MarginProps } from "styled-system";
 export interface NoteProps extends MarginProps {
     /** Adds a created on date to the Note footer */
@@ -9,7 +8,7 @@ export interface NoteProps extends MarginProps {
     /** Adds a name to the Note footer */
     name?: string;
     /**  The rich text content to display in the Note */
-    noteContent: EditorState;
+    noteContent: string;
     /** Callback to report a url when a link is added */
     onLinkAdded?: (url: string) => void;
     /** The previews to display of any links added to the Editor */

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

@@ -1,13 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from "react";
 import PropTypes from "prop-types";
-import { Editor } from "draft-js";
 import invariant from "invariant";
 import { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent } from "./note.style";
 import StatusIcon from "./__internal__/status-icon";
 import { ActionPopover } from "../action-popover";
-import { getDecoratedValue } from "../text-editor/__internal__/utils";
-import EditorContext from "../text-editor/__internal__/editor.context";
+import ReadOnlyEditor from "../text-editor/__internal__";
+import TextEditorContext from "../text-editor/text-editor.context";
 import LinkPreview from "../link-preview";
 import Typography from "../typography";
 function hasExpectedDisplayName(child, displayName) {
@@ -42,10 +41,10 @@ export const Note = ({
       tooltipMessage: timeStamp
     }, text));
   };
-  return /*#__PURE__*/React.createElement(EditorContext.Provider, {
+  return /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
     value: {
       onLinkAdded,
-      editMode: false
+      readOnly: true
     }
   }, /*#__PURE__*/React.createElement(StyledNote, _extends({
     width: width
@@ -58,10 +57,8 @@ export const Note = ({
     lineHeight: "21px",
     paddingBottom: "16px",
     variant: "h2"
-  }, title) : /*#__PURE__*/React.createElement(StyledTitleWrapper, null, title)), /*#__PURE__*/React.createElement(Editor, {
-    readOnly: true,
-    editorState: getDecoratedValue(noteContent),
-    onChange: /* istanbul ignore next */() => {}
+  }, title) : /*#__PURE__*/React.createElement(StyledTitleWrapper, null, title)), /*#__PURE__*/React.createElement(ReadOnlyEditor, {
+    value: noteContent
   })), inlineControl && /*#__PURE__*/React.createElement(StyledInlineControl, null, inlineControl)), /*#__PURE__*/React.createElement(StyledNoteContent, null, React.Children.map(previews, preview => /*#__PURE__*/React.isValidElement(preview) && hasExpectedDisplayName(preview, LinkPreview.displayName) ? /*#__PURE__*/React.cloneElement(preview, {
     as: "a",
     onClose: undefined

package/esm/components/text-editor/__internal__/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 { EditorThemeClasses, TextFormatType } from "lexical";
+import "./style.css";
+/** The default prefix applied to the editor's internal class names, IDs, etc. */
+declare const COMPONENT_PREFIX = "carbon-rte";
+/** The theme overrides needed to correctly style the editor */
+declare const theme: EditorThemeClasses;
+/** The available actions that can be used in the editor */
+declare const TextEditorActionTypes: {
+    Bold: TextFormatType;
+    Italic: TextFormatType;
+    OrderedList: ListType;
+    UnorderedList: ListType;
+};
+/** The nodes supported by markdown */
+declare const markdownNodes: (typeof LinkNode | typeof CodeNode | typeof ListNode | typeof ListItemNode | typeof HeadingNode | typeof QuoteNode | typeof HorizontalRuleNode)[];
+export { COMPONENT_PREFIX, markdownNodes, TextEditorActionTypes, theme };

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

@@ -0,0 +1,29 @@
+import { CodeNode } from "@lexical/code";
+import { LinkNode, AutoLinkNode } from "@lexical/link";
+import { ListNode, ListItemNode } from "@lexical/list";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import "./style.css";
+
+/** The default prefix applied to the editor's internal class names, IDs, etc. */
+const COMPONENT_PREFIX = "carbon-rte";
+
+/** The theme overrides needed to correctly style the editor */
+const theme = {
+  text: {
+    bold: "textBold",
+    italic: "textItalic"
+  }
+};
+
+/** The available actions that can be used in the editor */
+const TextEditorActionTypes = {
+  Bold: "bold",
+  Italic: "italic",
+  OrderedList: "number",
+  UnorderedList: "bullet"
+};
+
+/** The nodes supported by markdown */
+const markdownNodes = [AutoLinkNode, CodeNode, LinkNode, ListNode, ListItemNode, HeadingNode, QuoteNode, HorizontalRuleNode];
+export { COMPONENT_PREFIX, markdownNodes, TextEditorActionTypes, theme };

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

@@ -0,0 +1,20 @@
+import { LexicalEditor } from "lexical";
+/**
+ * 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;
+export { DeserializeHTML, SerializeLexical, validateUrl };

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

@@ -0,0 +1,84 @@
+import { createHeadlessEditor } from "@lexical/headless";
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { $getRoot, $getSelection } from "lexical";
+import { markdownNodes, theme } from "./constants";
+
+/**
+ * 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.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SerializeLexical = editor => {
+  let htmlString;
+  let json;
+  editor.update(() => {
+    // Get the current editor state
+    const editorState = editor.getEditorState();
+    // Serialize the editor state to JSON
+    json = editorState.toJSON();
+    // Generate HTML from the editor state
+    htmlString = $generateHtmlFromNodes(editor, null);
+  });
+  return {
+    htmlString,
+    json
+  };
+};
+
+/**
+ * This helper takes an HTML string and deserializes it into the editor.
+ * This allows the editor to be restored from a previously saved state.
+ */
+const DeserializeHTML = html => {
+  // Create a new headless editor instance. This allows us to process the editor state
+  // without needing to render the editor itself.
+  const editor = createHeadlessEditor({
+    namespace: "html-to-json",
+    // eslint-disable-next-line no-console
+    onError: console.error,
+    theme,
+    nodes: markdownNodes
+  });
+  let parsingError;
+  editor.update(() => {
+    // Parse the HTML string into a DOM
+    const parser = new DOMParser();
+    const dom = parser.parseFromString(html, "text/html");
+    // Generate nodes from the DOM
+    const nodes = $generateNodesFromDOM(editor, dom);
+    // Select the root of the editor
+    $getRoot().select();
+    // Insert the nodes into the editor
+    const selection = $getSelection();
+    /* istanbul ignore else */
+    if (selection) {
+      try {
+        selection.insertNodes(nodes);
+      } catch (err) {
+        /* istanbul ignore next */
+        parsingError = err;
+      }
+    }
+  }, {
+    discrete: true
+  });
+
+  /* istanbul ignore next */
+  if (parsingError) {
+    throw parsingError;
+  }
+
+  // Return the editor instance
+  const json = editor.getEditorState().toJSON();
+  return JSON.stringify(json);
+};
+const urlRegExp = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);
+
+/** Function to validate a given URL */
+function validateUrl(url) {
+  return url === "https://" || urlRegExp.test(url);
+}
+export { DeserializeHTML, SerializeLexical, validateUrl };

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

@@ -0,0 +1,2 @@
+export { default } from "./read-only-rte.component";
+export { createEmpty, createFromHTML } from "./utils";

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

@@ -0,0 +1,2 @@
+export { default } from "./read-only-rte.component";
+export { createEmpty, createFromHTML } from "./utils";

package/esm/components/text-editor/__internal__/plugins/AutoLinker/auto-link.component.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const AutoLinkerPlugin: () => React.JSX.Element;
+export default AutoLinkerPlugin;

package/esm/components/text-editor/__internal__/plugins/AutoLinker/auto-link.component.js

@@ -0,0 +1,28 @@
+/* istanbul ignore file */
+/**
+ * Owing to the nature of how this plugin runs, it is not possible to test it in isolation.
+ * It is tested as part of the TextEditor Playwright tests.
+ *
+ * The AutoLinkerPlugin component is a wrapper around the AutoLinkPlugin component provided
+ * by Lexical. It is used to automatically convert URLs and email addresses into clickable
+ * links.
+ *
+ * The regular expressions used to match URLs and email addresses are provided as per the
+ * Lexical documentation; as such not all edge cases may be covered.
+ */
+import { AutoLinkPlugin, createLinkMatcherWithRegExp } from "@lexical/react/LexicalAutoLinkPlugin";
+import React from "react";
+import PropTypes from "prop-types";
+const URL_REGEX = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
+const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+const MATCHERS = [createLinkMatcherWithRegExp(URL_REGEX, text => {
+  return text.startsWith("http") ? text : `https://${text}`;
+}), createLinkMatcherWithRegExp(EMAIL_REGEX, text => {
+  return `mailto:${text}`;
+})];
+const AutoLinkerPlugin = () => {
+  return /*#__PURE__*/React.createElement(AutoLinkPlugin, {
+    matchers: MATCHERS
+  });
+};
+export default AutoLinkerPlugin;

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

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

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

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

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/__test__/character-counter.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { LexicalEditor } from "lexical";
+export interface CharacterCounterPluginProps {
+    /** The maximum number of characters to allow before showing the warning */
+    maxChars: number;
+    /** The Lexical editor instance */
+    editor: LexicalEditor;
+}
+declare const CharacterCounterPlugin: ({ maxChars, editor, }: CharacterCounterPluginProps) => React.JSX.Element;
+export default CharacterCounterPlugin;

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/__test__/character-counter.component.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import { $getRoot } from "lexical";
+const CharacterCounterPlugin = ({
+  maxChars,
+  editor
+}) => {
+  const [rawContent, setRawContent] = useState("");
+
+  // Simplified update listener using Lexical v0.21.0 approach
+  useEffect(() => {
+    const removeListener = editor.registerUpdateListener(() => {
+      const editorState = editor.getEditorState();
+      editorState.read(() => {
+        const newContent = $getRoot().getTextContent();
+        setRawContent(newContent);
+      });
+    });
+    return () => {
+      removeListener();
+    };
+  }, [editor]);
+
+  // Calculate the number of characters remaining
+  const rawCharactersRemaining = useMemo(() => {
+    const activeCount = maxChars - (rawContent ? rawContent.length : 0);
+    return activeCount >= 0 ? activeCount : 0;
+  }, [maxChars, rawContent]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-role": "visible-counter"
+  }, rawCharactersRemaining));
+};
+export default CharacterCounterPlugin;

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface CharacterCounterPluginProps {
+    /** 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;
+}
+declare const CharacterCounterPlugin: ({ maxChars, namespace, }: CharacterCounterPluginProps) => React.JSX.Element;
+export default CharacterCounterPlugin;

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.component.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot } from "lexical";
+import { StyledCharacterCounter, VisuallyHiddenCharacterCounter } from "./character-counter.style";
+import useDebounce from "../../../../../hooks/__internal__/useDebounce";
+import useLocale from "../../../../../hooks/__internal__/useLocale";
+const CharacterCounterPlugin = ({
+  maxChars,
+  namespace
+}) => {
+  const [rawContent, setRawContent] = useState("");
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    // The character counter plugin listens for updates to the editor state
+    // independently to ensure updates do not conflict/interrupt other state
+    // changes
+    editor.registerUpdateListener(({
+      editorState
+    }) => {
+      editorState.read(() => {
+        const newContent = $getRoot().getTextContent();
+        setRawContent(newContent);
+      });
+    });
+  }, [editor]);
+
+  // Get the locale to enable translations
+  const locale = useLocale();
+
+  // Get the current locale and format the number
+  const getFormatNumber = useCallback(rawValue => {
+    return new Intl.NumberFormat(locale.locale()).format(rawValue);
+  }, [locale]);
+  const [debouncedValue, setDebouncedValue] = useState(0);
+
+  // Calculate the number of characters remaining
+  const rawCharactersRemaining = useMemo(() => {
+    // Calculate the number of characters remaining
+    const activeCount = maxChars - (rawContent ? rawContent.length : 0);
+    // Return the active count if it is greater than 0, otherwise return 0
+    return activeCount >= 0 ? activeCount : 0;
+  }, [rawContent, maxChars]);
+
+  // Use a debounced value to update the remaining character count for screen readers to use
+  /* istanbul ignore next */
+  const debouncedText = useDebounce(newValue => {
+    setDebouncedValue(newValue || 0);
+  }, 2000);
+  useEffect(() => {
+    debouncedText(rawCharactersRemaining);
+  }, [rawCharactersRemaining, debouncedText]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledCharacterCounter, {
+    "data-role": `${namespace}-character-limit`
+  }, locale.textEditor.characterCounter(getFormatNumber(rawCharactersRemaining))), /*#__PURE__*/React.createElement(VisuallyHiddenCharacterCounter, {
+    "aria-live": "polite"
+  }, locale.textEditor.characterCounter(getFormatNumber(debouncedValue))));
+};
+export default CharacterCounterPlugin;

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.style.d.ts

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

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.style.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import visuallyHidden from "../../../../../style/utils/visually-hidden";
+export const StyledCharacterCounter = styled.div`
+  text-align: left;
+  font-size: var(--fontSizes100);
+  margin-top: var(--spacing050);
+  margin-bottom: var(--spacing050);
+  color: var(--colorsUtilityYin055);
+`;
+export const VisuallyHiddenCharacterCounter = styled.div`
+  ::after {
+    content: " ";
+  }
+
+  ${visuallyHidden}
+`;
+export default StyledCharacterCounter;

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

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

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ContentEditorProps {
+    /** The active error message of the editor */
+    error?: string;
+    /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: string;
+    /** The namespace of the editor that this content editor belongs to */
+    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;
+    /** The active warning message of the editor */
+    warning?: string;
+}
+declare const ContentEditor: ({ error, inputHint, namespace, previews, rows, warning, }: ContentEditorProps) => React.JSX.Element;
+export default ContentEditor;

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

@@ -0,0 +1,40 @@
+/**
+ * This is where the actual content editor is rendered. It uses the `ContentEditable` component from the `@lexical/react` package
+ * as per their documentation. It also uses the `LinkPreviewerPlugin` to render link previews.
+ */
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import React from "react";
+import PropTypes from "prop-types";
+import StyledContentEditable from "./content-editor.style";
+import { LinkPreviewerPlugin, useCursorAtEnd } from "..";
+const ContentEditor = ({
+  error,
+  inputHint,
+  namespace,
+  previews = [],
+  rows,
+  warning
+}) => {
+  const focusAtEnd = useCursorAtEnd();
+  return /*#__PURE__*/React.createElement(StyledContentEditable, {
+    "data-role": `${namespace}-content-editable`,
+    error: error,
+    namespace: namespace,
+    rows: rows,
+    warning: warning
+  }, /*#__PURE__*/React.createElement(ContentEditable, {
+    "aria-describedby": inputHint && `${namespace}-input-hint`,
+    "aria-labelledby": `${namespace}-label`,
+    className: `${namespace}-editable`,
+    "data-role": `${namespace}-editable`,
+    onFocus: focusAtEnd
+    /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overriden */,
+    "aria-autocomplete": undefined,
+    "aria-readonly": undefined
+  }), /*#__PURE__*/React.createElement(LinkPreviewerPlugin, {
+    error: error,
+    previews: previews,
+    warning: warning
+  }));
+};
+export default ContentEditor;

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

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

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

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

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

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

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

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

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

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

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

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

package/esm/components/text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.d.ts

@@ -0,0 +1,2 @@
+declare const LinkMonitorPlugin: () => null;
+export default LinkMonitorPlugin;

package/esm/components/text-editor/__internal__/plugins/LinkMonitor/link-monitor.plugin.js

@@ -0,0 +1,62 @@
+/* istanbul ignore file */
+/**
+ * Owing to the nature of how this plugin runs, it is not possible to test it in isolation.
+ * It is tested as part of the TextEditor Playwright tests.
+ *
+ * The purpose of this plugin is to monitor the editor for any changes that result in the
+ * creation of AutoLinkNodes, and report these changes to the customer (e.g. to then
+ * generate link previews).
+ */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { AutoLinkNode } from "@lexical/link";
+import { useContext, useEffect } from "react";
+import { validateUrl } from "../../helpers";
+import TextEditorContext from "../../../text-editor.context";
+const LinkMonitorPlugin = () => {
+  // Get the editor instance
+  const [editor] = useLexicalComposerContext();
+  // Get the onLinkAdded function from the context
+  const {
+    onLinkAdded
+  } = useContext(TextEditorContext);
+  useEffect(() => {
+    // Register a mutation listener for AutoLinkNodes
+    const removeAutoLinkMutationListener = editor.registerMutationListener(AutoLinkNode, (mutatedNodes, {
+      prevEditorState
+    }) => {
+      const isEditable = editor.isEditable();
+      if (!isEditable) return;
+
+      // For each AutoLinkNode, check if the text content is present and also a valid URL
+      for (const [nodeKey, mutation] of mutatedNodes) {
+        const node = editor.getElementByKey(nodeKey);
+        const textContent = node?.innerText;
+        if (textContent) {
+          const linkValid = validateUrl(textContent);
+          if (linkValid) {
+            // Assume link has been created, notify user
+            onLinkAdded?.(textContent, mutation);
+          }
+        } else {
+          // Assume link has been destroyed, notify user
+          const deletedData = prevEditorState?._nodeMap.get(nodeKey);
+          if (deletedData) {
+            const {
+              __url
+            } = deletedData;
+            onLinkAdded?.(__url, mutation);
+          }
+        }
+      }
+    }, {
+      skipInitialization: false
+    });
+
+    // Remove the mutation listener when the component is unmounted
+    return () => {
+      removeAutoLinkMutationListener();
+    };
+  }, [editor, onLinkAdded]);
+  return null;
+};
+export default LinkMonitorPlugin;

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

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

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

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

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;