carbon-react 148.0.0 → 149.0.0

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalAutoLinkPlugin = require("@lexical/react/LexicalAutoLinkPlugin");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* 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.
+ */
+
+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 = [(0, _LexicalAutoLinkPlugin.createLinkMatcherWithRegExp)(URL_REGEX, text => {
+  return text.startsWith("http") ? text : `https://${text}`;
+}), (0, _LexicalAutoLinkPlugin.createLinkMatcherWithRegExp)(EMAIL_REGEX, text => {
+  return `mailto:${text}`;
+})];
+const AutoLinkerPlugin = () => {
+  return /*#__PURE__*/_react.default.createElement(_LexicalAutoLinkPlugin.AutoLinkPlugin, {
+    matchers: MATCHERS
+  });
+};
+var _default = exports.default = AutoLinkerPlugin;

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

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

package/lib/components/text-editor/__internal__/{editor-link → plugins/AutoLinker}/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _editorLink.default;
+    return _autoLink.default;
   }
 });
-var _editorLink = _interopRequireDefault(require("./editor-link.component"));
+var _autoLink = _interopRequireDefault(require("./auto-link.component"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

package/lib/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/lib/components/text-editor/__internal__/plugins/CharacterCounter/__test__/character-counter.component.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lexical = require("lexical");
+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 CharacterCounterPlugin = ({
+  maxChars,
+  editor
+}) => {
+  const [rawContent, setRawContent] = (0, _react.useState)("");
+
+  // Simplified update listener using Lexical v0.21.0 approach
+  (0, _react.useEffect)(() => {
+    const removeListener = editor.registerUpdateListener(() => {
+      const editorState = editor.getEditorState();
+      editorState.read(() => {
+        const newContent = (0, _lexical.$getRoot)().getTextContent();
+        setRawContent(newContent);
+      });
+    });
+    return () => {
+      removeListener();
+    };
+  }, [editor]);
+
+  // Calculate the number of characters remaining
+  const rawCharactersRemaining = (0, _react.useMemo)(() => {
+    const activeCount = maxChars - (rawContent ? rawContent.length : 0);
+    return activeCount >= 0 ? activeCount : 0;
+  }, [maxChars, rawContent]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-role": "visible-counter"
+  }, rawCharactersRemaining));
+};
+var _default = exports.default = CharacterCounterPlugin;

package/lib/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/lib/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.component.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+var _characterCounter = require("./character-counter.style");
+var _useDebounce = _interopRequireDefault(require("../../../../../hooks/__internal__/useDebounce"));
+var _useLocale = _interopRequireDefault(require("../../../../../hooks/__internal__/useLocale"));
+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 CharacterCounterPlugin = ({
+  maxChars,
+  namespace
+}) => {
+  const [rawContent, setRawContent] = (0, _react.useState)("");
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  (0, _react.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 = (0, _lexical.$getRoot)().getTextContent();
+        setRawContent(newContent);
+      });
+    });
+  }, [editor]);
+
+  // Get the locale to enable translations
+  const locale = (0, _useLocale.default)();
+
+  // Get the current locale and format the number
+  const getFormatNumber = (0, _react.useCallback)(rawValue => {
+    return new Intl.NumberFormat(locale.locale()).format(rawValue);
+  }, [locale]);
+  const [debouncedValue, setDebouncedValue] = (0, _react.useState)(0);
+
+  // Calculate the number of characters remaining
+  const rawCharactersRemaining = (0, _react.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 = (0, _useDebounce.default)(newValue => {
+    setDebouncedValue(newValue || 0);
+  }, 2000);
+  (0, _react.useEffect)(() => {
+    debouncedText(rawCharactersRemaining);
+  }, [rawCharactersRemaining, debouncedText]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_characterCounter.StyledCharacterCounter, {
+    "data-role": `${namespace}-character-limit`
+  }, locale.textEditor.characterCounter(getFormatNumber(rawCharactersRemaining))), /*#__PURE__*/_react.default.createElement(_characterCounter.VisuallyHiddenCharacterCounter, {
+    "aria-live": "polite"
+  }, locale.textEditor.characterCounter(getFormatNumber(debouncedValue))));
+};
+var _default = exports.default = CharacterCounterPlugin;

package/lib/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/lib/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.style.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VisuallyHiddenCharacterCounter = exports.StyledCharacterCounter = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _visuallyHidden = _interopRequireDefault(require("../../../../../style/utils/visually-hidden"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledCharacterCounter = exports.StyledCharacterCounter = _styledComponents.default.div`
+  text-align: left;
+  font-size: var(--fontSizes100);
+  margin-top: var(--spacing050);
+  margin-bottom: var(--spacing050);
+  color: var(--colorsUtilityYin055);
+`;
+const VisuallyHiddenCharacterCounter = exports.VisuallyHiddenCharacterCounter = _styledComponents.default.div`
+  ::after {
+    content: " ";
+  }
+
+  ${_visuallyHidden.default}
+`;
+var _default = exports.default = StyledCharacterCounter;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _characterCounter.default;
+  }
+});
+var _characterCounter = _interopRequireDefault(require("./character-counter.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

package/lib/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/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _contentEditor = _interopRequireDefault(require("./content-editor.style"));
+var _ = require("..");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+ */
+
+const ContentEditor = ({
+  error,
+  inputHint,
+  namespace,
+  previews = [],
+  rows,
+  warning
+}) => {
+  const focusAtEnd = (0, _.useCursorAtEnd)();
+  return /*#__PURE__*/_react.default.createElement(_contentEditor.default, {
+    "data-role": `${namespace}-content-editable`,
+    error: error,
+    namespace: namespace,
+    rows: rows,
+    warning: warning
+  }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.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.default.createElement(_.LinkPreviewerPlugin, {
+    error: error,
+    previews: previews,
+    warning: warning
+  }));
+};
+var _default = exports.default = ContentEditor;

package/lib/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/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 DEFAULT_EDITOR_HEIGHT = 210;
+const FIXED_LINE_HEIGHT = 21;
+const StyledContentEditable = _styledComponents.default.div`
+  ${({
+  error,
+  namespace,
+  rows,
+  warning
+}) => (0, _styledComponents.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) && (0, _styledComponents.css)`
+        border: none;
+      `}
+
+      :focus {
+        outline: none;
+      }
+    }
+  `}
+`;
+var _default = exports.default = StyledContentEditable;

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

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

package/lib/components/text-editor/__internal__/{toolbar/toolbar-button → plugins/ContentEditor}/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _toolbarButton.default;
+    return _contentEditor.default;
   }
 });
-var _toolbarButton = _interopRequireDefault(require("./toolbar-button.component"));
+var _contentEditor = _interopRequireDefault(require("./content-editor.component"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

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

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

package/lib/components/text-editor/__internal__/{label-wrapper → plugins/LinkMonitor}/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _labelWrapper.default;
+    return _linkMonitor.default;
   }
 });
-var _labelWrapper = _interopRequireDefault(require("./label-wrapper.component"));
+var _linkMonitor = _interopRequireDefault(require("./link-monitor.plugin"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _link = require("@lexical/link");
+var _react = require("react");
+var _helpers = require("../../helpers");
+var _textEditor = _interopRequireDefault(require("../../../text-editor.context"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* 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).
+ */
+
+const LinkMonitorPlugin = () => {
+  // Get the editor instance
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  // Get the onLinkAdded function from the context
+  const {
+    onLinkAdded
+  } = (0, _react.useContext)(_textEditor.default);
+  (0, _react.useEffect)(() => {
+    // Register a mutation listener for AutoLinkNodes
+    const removeAutoLinkMutationListener = editor.registerMutationListener(_link.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 = (0, _helpers.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;
+};
+var _default = exports.default = LinkMonitorPlugin;

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

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

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _linkPreviewer.default;
+  }
+});
+var _linkPreviewer = _interopRequireDefault(require("./link-previewer.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/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/lib/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _textEditor = _interopRequireDefault(require("../../../text-editor.context"));
+var _linkPreviewer = _interopRequireDefault(require("./link-previewer.style"));
+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 LinkPreviewer = ({
+  error,
+  previews = [],
+  warning
+}) => {
+  const {
+    readOnly
+  } = (0, _react.useContext)(_textEditor.default);
+  return /*#__PURE__*/_react.default.createElement(_linkPreviewer.default, {
+    error: error,
+    readOnly: readOnly,
+    warning: warning
+  }, previews);
+};
+var _default = exports.default = LinkPreviewer;

package/lib/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/lib/components/text-editor/__internal__/{toolbar/toolbar-button/toolbar-button.style.js → plugins/LinkPreviewer/link-previewer.style.js}

@@ -5,43 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _themes = require("../../../../../style/themes");
-var _addFocusStyling = _interopRequireDefault(require("../../../../../style/utils/add-focus-styling"));
-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 StyledToolbarButton = _styledComponents.default.button.attrs({
-  type: "button"
-})`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 6px;
-  background-color: inherit;
-  border-radius: var(--borderRadius100);
-  border: none;
-  cursor: pointer;
-
+const StyledLinkPreviewer = _styledComponents.default.div`
   ${({
-  isActive
+  error,
+  readOnly,
+  warning
 }) => (0, _styledComponents.css)`
-    :focus,
-    :active {
-      z-index: 1;
-      position: relative;
-      ${(0, _addFocusStyling.default)()}
-    }
+    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;
 
-    :hover {
-      background-color: ${!isActive && "var(--colorsActionMinor200)"};
-    }
+    ${(error || warning) && (0, _styledComponents.css)`
+      border-left: none;
+      border-right: none;
+      border-bottom: none;
+    `}
 
-    ${isActive && (0, _styledComponents.css)`
-      background-color: var(--colorsActionMinor600);
+    ${readOnly && (0, _styledComponents.css)`
+      border-bottom-left-radius: var(--borderWidth600);
+      border-bottom-right-radius: var(--borderWidth600);
     `}
   `}
 `;
-StyledToolbarButton.defaultProps = {
-  theme: _themes.baseTheme
-};
-var _default = exports.default = StyledToolbarButton;
+var _default = exports.default = StyledLinkPreviewer;

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

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

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

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