carbon-react 148.0.0 → 149.0.0

package/lib/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/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/save.component.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../../../helpers");
+var _button = _interopRequireDefault(require("../../../../../button"));
+var _useLocale = _interopRequireDefault(require("../../../../../../hooks/__internal__/useLocale"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// The `SaveButton` component is a button that saves the current state of the editor
+const SaveButton = ({
+  namespace,
+  onSave
+}) => {
+  // Get the editor instance
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  // Get the locale to enable translations
+  const locale = (0, _useLocale.default)();
+  return /*#__PURE__*/_react.default.createElement(_button.default, {
+    "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 = (0, _helpers.SerializeLexical)(editor);
+      onSave?.(values);
+    }
+  }, locale.textEditor.saveButton());
+};
+var _default = exports.default = SaveButton;

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

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

package/lib/components/text-editor/__internal__/plugins/Toolbar/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../../esm/components/text-editor/__internal__/plugins/Toolbar/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { SaveCallbackProps } from "./buttons/save.component";
+interface ToolbarProps {
+    /** The namespace of the editor that this toolbar belongs to */
+    namespace: string;
+    /** The callback to call when the cancel button is clicked */
+    onCancel?: () => void;
+    /** The callback to call when the save button is clicked */
+    onSave?: (value: SaveCallbackProps) => void;
+}
+declare const Toolbar: ({ namespace, onCancel, onSave }: ToolbarProps) => React.JSX.Element;
+export default Toolbar;

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _utils = require("@lexical/utils");
+var _lexical = require("lexical");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _toolbar = require("./toolbar.style");
+var _constants = require("../../constants");
+var _button = _interopRequireDefault(require("../../../../button"));
+var _useLocale = _interopRequireDefault(require("../../../../../hooks/__internal__/useLocale"));
+var _buttons = require("./buttons");
+var _save = _interopRequireDefault(require("./buttons/save.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Toolbar = ({
+  namespace,
+  onCancel,
+  onSave
+}) => {
+  // Get the editor instance
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  const toolbarRef = (0, _react.useRef)(null);
+
+  // Set the initial state of the formatting buttons
+  const [isBold, setIsBold] = (0, _react.useState)(false);
+  const [isItalic, setIsItalic] = (0, _react.useState)(false);
+  const [buttons, setButtons] = (0, _react.useState)([]);
+
+  // If the UI updates, re-fetch the formatting buttons
+  (0, _react.useLayoutEffect)(() => {
+    const formattingButtons = document.querySelectorAll(`[data-role="${namespace}-formatting-buttons"] button`);
+    setButtons(Array.from(formattingButtons));
+  }, [namespace]);
+
+  // Get the locale to enable translations
+  const locale = (0, _useLocale.default)();
+
+  // Update the toolbar based on the current selection
+  const updateToolbar = (0, _react.useCallback)(() => {
+    // Get the current selection
+    const selection = (0, _lexical.$getSelection)();
+    // If the selection is a range selection, update the formatting buttons
+    if ((0, _lexical.$isRangeSelection)(selection)) {
+      setIsBold(selection.hasFormat(_constants.TextEditorActionTypes.Bold));
+      setIsItalic(selection.hasFormat(_constants.TextEditorActionTypes.Italic));
+    }
+  }, []);
+
+  // Register an update listener to update the toolbar when the editor state changes
+  (0, _react.useEffect)(() => {
+    return (0, _utils.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
+  (0, _react.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.default.createElement(_toolbar.StyledToolbar, {
+    role: "toolbar",
+    "aria-label": locale.textEditor.toolbarAriaLabel(),
+    "data-role": `${namespace}-toolbar`,
+    id: `${namespace}-toolbar`,
+    onFocus: e => e.stopPropagation(),
+    ref: toolbarRef
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.FormattingButtons, {
+    "data-role": `${namespace}-formatting-buttons`
+  }, /*#__PURE__*/_react.default.createElement(_buttons.BoldButton, {
+    isActive: isBold,
+    namespace: namespace
+  }), /*#__PURE__*/_react.default.createElement(_buttons.ItalicButton, {
+    isActive: isItalic,
+    namespace: namespace
+  }), /*#__PURE__*/_react.default.createElement(_buttons.ListControls, {
+    namespace: namespace
+  })), /*#__PURE__*/_react.default.createElement(_toolbar.CommandButtons, {
+    "data-role": `${namespace}-command-buttons`
+  }, onCancel && /*#__PURE__*/_react.default.createElement(_button.default, {
+    buttonType: "tertiary",
+    "data-role": `${namespace}-cancel-button`,
+    "aria-label": locale.textEditor.cancelButtonAria(),
+    onClick: () => onCancel?.()
+  }, locale.textEditor.cancelButton()), onSave && /*#__PURE__*/_react.default.createElement(_save.default, {
+    namespace: namespace,
+    onSave: onSave
+  })));
+};
+var _default = exports.default = Toolbar;

package/lib/components/text-editor/__internal__/plugins/Toolbar/toolbar.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ButtonProps } from "../../../../button";
+interface FormattingButtonProps extends ButtonProps {
+    tabIndex?: number;
+    isActive?: boolean;
+}
+declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const FormattingButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CommandButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const FormattingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, FormattingButtonProps, never>;
+export { StyledToolbar, FormattingButtons, CommandButtons, FormattingButton };

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledToolbar = exports.FormattingButtons = exports.FormattingButton = exports.CommandButtons = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _button = _interopRequireDefault(require("../../../../button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledToolbar = exports.StyledToolbar = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  background-color: var(--colorsUtilityMajor025);
+  outline: 1px solid var(--colorsUtilityMajor200);
+  padding: 12px;
+  border-radius: var(--borderRadius100);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 1px;
+  margin-right: 1px;
+`;
+const FormattingButtons = exports.FormattingButtons = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`;
+const CommandButtons = exports.CommandButtons = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`;
+const FormattingButton = exports.FormattingButton = (0, _styledComponents.default)(_button.default)`
+  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
+}) => (0, _styledComponents.css)`
+    background-color: ${isActive ? "var(--colorsActionMajor600)" : "transparent"};
+  `}
+
+  > span {
+    ${({
+  isActive
+}) => (0, _styledComponents.css)`
+      color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin100) "} !important;
+    `}
+  }
+`;

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

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

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AutoLinkerPlugin", {
+  enumerable: true,
+  get: function () {
+    return _AutoLinker.default;
+  }
+});
+Object.defineProperty(exports, "CharacterCounterPlugin", {
+  enumerable: true,
+  get: function () {
+    return _CharacterCounter.default;
+  }
+});
+Object.defineProperty(exports, "ContentEditor", {
+  enumerable: true,
+  get: function () {
+    return _ContentEditor.default;
+  }
+});
+Object.defineProperty(exports, "LinkMonitorPlugin", {
+  enumerable: true,
+  get: function () {
+    return _LinkMonitor.default;
+  }
+});
+Object.defineProperty(exports, "LinkPreviewerPlugin", {
+  enumerable: true,
+  get: function () {
+    return _LinkPreviewer.default;
+  }
+});
+Object.defineProperty(exports, "OnChangePlugin", {
+  enumerable: true,
+  get: function () {
+    return _OnChange.default;
+  }
+});
+Object.defineProperty(exports, "Placeholder", {
+  enumerable: true,
+  get: function () {
+    return _Placeholder.default;
+  }
+});
+Object.defineProperty(exports, "ToolbarPlugin", {
+  enumerable: true,
+  get: function () {
+    return _Toolbar.default;
+  }
+});
+Object.defineProperty(exports, "useCursorAtEnd", {
+  enumerable: true,
+  get: function () {
+    return _useCursorAtEnd.default;
+  }
+});
+var _AutoLinker = _interopRequireDefault(require("./AutoLinker"));
+var _CharacterCounter = _interopRequireDefault(require("./CharacterCounter"));
+var _ContentEditor = _interopRequireDefault(require("./ContentEditor"));
+var _LinkMonitor = _interopRequireDefault(require("./LinkMonitor"));
+var _LinkPreviewer = _interopRequireDefault(require("./LinkPreviewer"));
+var _OnChange = _interopRequireDefault(require("./OnChange"));
+var _Placeholder = _interopRequireDefault(require("./Placeholder"));
+var _Toolbar = _interopRequireDefault(require("./Toolbar"));
+var _useCursorAtEnd = _interopRequireDefault(require("./useCursorAtEnd"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/text-editor/__internal__/{toolbar → plugins}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../../../esm/components/text-editor/__internal__/toolbar/index.js",
+  "module": "../../../../../esm/components/text-editor/__internal__/plugins/index.js",
   "main": "./index.js",
   "types": "./index.d.ts"
 }

package/lib/components/text-editor/__internal__/plugins/useCursorAtEnd/index.d.ts

@@ -0,0 +1,2 @@
+declare function useCursorAtEnd(): (e: React.FocusEvent) => void;
+export default useCursorAtEnd;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _react = require("react");
+var _lexical = require("lexical");
+/* istanbul ignore file */
+// Ignore this file in coverage reports because it's a plugin and not part of the main logic.
+
+const FOCUS_COMMAND = (0, _lexical.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] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  (0, _react.useEffect)(() => {
+    return editor.registerCommand(FOCUS_COMMAND, payload => {
+      editor.update(() => {
+        if (!payload.defaultToEnd) {
+          const currentSelection = (0, _lexical.$getSelection)();
+          if (currentSelection) {
+            (0, _lexical.$setSelection)(currentSelection);
+            return;
+          }
+        }
+        const root = (0, _lexical.$getRoot)();
+        const numberOfChildren = root.getChildrenSize();
+        const selection = (0, _lexical.$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 = (0, _lexical.$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");
+                }
+              }
+              (0, _lexical.$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");
+            (0, _lexical.$setSelection)(selection);
+          }
+        }
+      });
+      return true;
+    }, _lexical.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;
+}
+var _default = exports.default = useCursorAtEnd;

package/lib/components/text-editor/__internal__/plugins/useCursorAtEnd/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../../esm/components/text-editor/__internal__/plugins/useCursorAtEnd/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/text-editor/__internal__/read-only-rte.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TextEditorProps } from "../text-editor.component";
+declare const ReadOnlyEditor: ({ namespace, value, }: Partial<TextEditorProps>) => React.JSX.Element;
+export default ReadOnlyEditor;

package/lib/components/text-editor/__internal__/read-only-rte.component.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposer = require("@lexical/react/LexicalComposer");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _LexicalErrorBoundary = require("@lexical/react/LexicalErrorBoundary");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("./utils");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable no-console */
+
+const wrapLinksInAnchors = value => {
+  const urlRegex = /((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/g;
+  return value.replace(urlRegex, "<a href='$1'>$1</a>");
+};
+const determineFormat = value => {
+  let isJson;
+  if (!value) {
+    return (0, _utils.createFromHTML)("<p><br></p>");
+  }
+  try {
+    const isValidJSON = JSON.parse(value);
+    /* istanbul ignore else */
+    if (isValidJSON) isJson = true;
+  } catch (e) {
+    isJson = false;
+  }
+  if (!isJson) {
+    const isHTML = /<[a-z][\s\S]*>/i.test(value);
+    if (isHTML) {
+      return (0, _utils.createFromHTML)(value);
+    }
+    const wrappedPlainText = `<p dir="ltr"><span data-lexical-text="true">${wrapLinksInAnchors(value)}</span></p>`;
+    return (0, _utils.createFromHTML)(wrappedPlainText);
+  }
+  return value;
+};
+const ReadOnlyEditor = ({
+  namespace = "carbon-rte-readonly",
+  value
+}) => {
+  const initialConfig = (0, _react.useMemo)(() => {
+    return {
+      namespace,
+      nodes: _constants.markdownNodes,
+      onError: console.error,
+      theme: _constants.theme,
+      editorState: determineFormat(value),
+      editable: false
+    };
+  }, [namespace, value]);
+  return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, {
+      "data-role": `${namespace}-content-editor`
+      /** 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
+    }),
+    ErrorBoundary: _LexicalErrorBoundary.LexicalErrorBoundary
+  }));
+};
+var _default = exports.default = ReadOnlyEditor;

package/lib/components/text-editor/__internal__/style.css

@@ -0,0 +1,7 @@
+
+.textBold {
+  font-weight: bold;
+}
+.textItalic {
+  font-style: italic;
+}

package/lib/components/text-editor/__internal__/utils.d.ts

@@ -0,0 +1,4 @@
+declare const createFromHTML: (html: string) => string;
+/** Creates and returns a string representation of an empty editor */
+declare const createEmpty: () => string;
+export { createEmpty, createFromHTML };

package/lib/components/text-editor/__internal__/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createFromHTML = exports.createEmpty = void 0;
+var _helpers = require("./helpers");
+const createFromHTML = html => {
+  // DeserializeHTML is tested as part of the helper tests
+  /* istanbul ignore next */
+  return (0, _helpers.DeserializeHTML)(html);
+};
+
+/** Creates and returns a string representation of an empty editor */
+exports.createFromHTML = createFromHTML;
+const createEmpty = () => {
+  // Create a default empty state
+  const value = '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+  return value;
+};
+exports.createEmpty = createEmpty;

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

@@ -1,2 +1,3 @@
-export { default, TextEditorState as EditorState, TextEditorContentState as ContentState, } from "./text-editor.component";
+export { default } from "./text-editor.component";
+export { createEmpty, createFromHTML } from "./__internal__";
 export type { TextEditorProps } from "./text-editor.component";

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

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ContentState", {
+Object.defineProperty(exports, "createEmpty", {
   enumerable: true,
   get: function () {
-    return _textEditor.TextEditorContentState;
+    return _internal__.createEmpty;
   }
 });
-Object.defineProperty(exports, "EditorState", {
+Object.defineProperty(exports, "createFromHTML", {
   enumerable: true,
   get: function () {
-    return _textEditor.TextEditorState;
+    return _internal__.createFromHTML;
   }
 });
 Object.defineProperty(exports, "default", {
@@ -21,6 +21,6 @@ Object.defineProperty(exports, "default", {
     return _textEditor.default;
   }
 });
-var _textEditor = _interopRequireWildcard(require("./text-editor.component"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _textEditor = _interopRequireDefault(require("./text-editor.component"));
+var _internal__ = require("./__internal__");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }