@atlaskit/editor-core 151.3.0 → 152.0.0

package/dist/es2019/plugins/find-replace/index.js

@@ -1,13 +1,7 @@
 import React from 'react';
 import { createPlugin } from './plugin';
-import { findReplacePluginKey } from './types';
 import keymapPlugin from './keymap';
-import WithPluginState from '../../ui/WithPluginState';
-import { cancelSearchWithAnalytics, replaceWithAnalytics, replaceAllWithAnalytics, findWithAnalytics, findNextWithAnalytics, findPrevWithAnalytics, activateWithAnalytics } from './commands-with-analytics';
-import { blur, toggleMatchCase } from './commands';
-import FindReplaceToolbarButton from './ui/FindReplaceToolbarButton';
-import { TRIGGER_METHOD } from '../analytics';
-import { getFeatureFlags } from '../feature-flags-context';
+import FindReplaceToolbarButtonWithState from './FindReplaceToolbarButtonWithState';
 export const findReplacePlugin = props => {
   return {
     name: 'findReplace',
@@ -33,127 +27,20 @@ export const findReplacePlugin = props => {
       containerElement,
       dispatchAnalyticsEvent
     }) {
-      // we need the editor to be in focus for scrollIntoView() to work
-      // so we focus it while we run the command, then put focus back into
-      // whatever element was previously focused in find replace component
-      const runWithEditorFocused = fn => {
-        const activeElement = document.activeElement;
-        editorView.focus();
-        fn();
-        activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
-      };
-
-      const dispatchCommand = cmd => {
-        const {
-          state,
-          dispatch
-        } = editorView;
-        cmd(state, dispatch);
-      };
-
-      const handleActivate = () => {
-        runWithEditorFocused(() => dispatchCommand(activateWithAnalytics({
-          triggerMethod: TRIGGER_METHOD.TOOLBAR
-        })));
-      };
-
-      const handleFind = keyword => {
-        runWithEditorFocused(() => dispatchCommand(findWithAnalytics({
-          editorView,
-          containerElement,
-          keyword
-        })));
-      };
-
-      const handleFindNext = ({
-        triggerMethod
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(findNextWithAnalytics({
-          triggerMethod
-        })));
-      };
-
-      const handleFindPrev = ({
-        triggerMethod
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(findPrevWithAnalytics({
-          triggerMethod
-        })));
-      };
-
-      const handleReplace = ({
-        triggerMethod,
-        replaceText
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(replaceWithAnalytics({
-          triggerMethod,
-          replaceText
-        })));
-      };
-
-      const handleReplaceAll = ({
-        replaceText
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(replaceAllWithAnalytics({
-          replaceText
-        })));
-      };
-
-      const handleFindBlur = () => {
-        dispatchCommand(blur());
-      };
-
-      const handleCancel = ({
-        triggerMethod
-      }) => {
-        dispatchCommand(cancelSearchWithAnalytics({
-          triggerMethod
-        }));
-        editorView.focus();
-      };
-
-      const handleToggleMatchCase = () => {
-        dispatchCommand(toggleMatchCase());
-      };
-
-      const {
-        findReplaceMatchCase
-      } = getFeatureFlags(editorView.state);
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        debounce: false,
-        plugins: {
-          findReplaceState: findReplacePluginKey
-        },
-        render: ({
-          findReplaceState
-        }) => {
-          return /*#__PURE__*/React.createElement(FindReplaceToolbarButton, {
-            allowMatchCase: findReplaceMatchCase,
-            shouldMatchCase: findReplaceState.shouldMatchCase,
-            onToggleMatchCase: handleToggleMatchCase,
-            isActive: findReplaceState.isActive,
-            findText: findReplaceState.findText,
-            index: findReplaceState.index,
-            numMatches: findReplaceState.matches.length,
-            replaceText: findReplaceState.replaceText,
-            shouldFocus: findReplaceState.shouldFocus,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsMountPoint: popupsMountPoint,
-            popupsScrollableElement: popupsScrollableElement,
-            isReducedSpacing: isToolbarReducedSpacing,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            onFindBlur: handleFindBlur,
-            onCancel: handleCancel,
-            onActivate: handleActivate,
-            onFind: handleFind,
-            onFindNext: handleFindNext,
-            onFindPrev: handleFindPrev,
-            onReplace: handleReplace,
-            onReplaceAll: handleReplaceAll,
-            takeFullWidth: props.takeFullWidth
-          });
-        }
-      });
+      if (props.twoLineEditorToolbar) {
+        return null;
+      } else {
+        return /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          editorView: editorView,
+          containerElement: containerElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          takeFullWidth: props.takeFullWidth
+        });
+      }
     }
 
   };

package/dist/es2019/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { Component } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { B400 } from '@atlaskit/theme/colors';
+import { B400 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item, { itemThemeNamespace } from '@atlaskit/item';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';

package/dist/es2019/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -8,6 +8,13 @@ import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position
 
 const EmojiPickerButtonWrapper = styled.div`
   position: relative;
+`; // helps to vertically align emoji picker
+// both top and bottom margin should be 2px
+// https://product-fabric.atlassian.net/browse/CETI-148
+
+const EmojiPickerWrapper = styled.div`
+  margin-bottom: -12px;
+  margin-top: -4px;
 `;
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
@@ -20,6 +27,7 @@ export const EmojiPickerButton = props => {
 
   const updateEmoji = emoji => {
     setIsPopupOpen(false);
+    props.editorView && props.editorView.focus();
     props.onChange && props.onChange(emoji);
   };
 
@@ -47,11 +55,11 @@ export const EmojiPickerButton = props => {
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/React.createElement(WithProviders, {
+    }, /*#__PURE__*/React.createElement(EmojiPickerWrapper, null, /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    }));
+    })));
   };
 
   const title = props.title || '';

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -224,7 +224,7 @@ export default class Toolbar extends Component {
           if (item.selectType === 'emoji') {
             return /*#__PURE__*/React.createElement(EmojiPickerButton, {
               key: idx,
-              view: editorView,
+              editorView: editorView,
               title: item.title,
               providerFactory: providerFactory,
               isSelected: item.selected,

package/dist/es2019/plugins/fragment/index.js

@@ -0,0 +1,22 @@
+import { fragment } from '@atlaskit/adf-schema';
+import { Plugin } from 'prosemirror-state';
+import { pluginKey } from './plugin-key';
+export function createPlugin() {
+  return new Plugin({
+    key: pluginKey
+  });
+}
+
+const fragmentMarkPlugin = () => ({
+  name: 'fragmentPlugin',
+
+  marks() {
+    return [{
+      name: 'fragment',
+      mark: fragment
+    }];
+  }
+
+});
+
+export default fragmentMarkPlugin;

package/dist/es2019/plugins/fragment/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('fragmentMarkPlugin');

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -4,7 +4,7 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { N80, N30 } from '@atlaskit/theme/colors';
+import { N90, N80, N30 } from '@atlaskit/theme/colors';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import Tooltip from '@atlaskit/tooltip';
 import { PureComponent } from 'react';
@@ -27,7 +27,7 @@ export const RECENT_SEARCH_LIST_SIZE = 5;
 const ClearText = styled.span`
   cursor: pointer;
   padding-right: 8px;
-  color: ${N80};
+  color: ${N90};
 `;
 const TextInputWrapper = styled.div`
   ${InputWrapper};

package/dist/es2019/plugins/index.js

@@ -42,6 +42,7 @@ export { default as breakoutPlugin } from './breakout';
 export { default as alignmentPlugin } from './alignment';
 export { default as dataConsumerMarkPlugin } from './data-consumer';
 export { default as editorDisabledPlugin } from './editor-disabled';
+export { default as fragmentMarkPlugin } from './fragment';
 export { default as indentationPlugin } from './indentation';
 export { default as annotationPlugin } from './annotation';
 export { default as analyticsPlugin } from './analytics';
@@ -61,4 +62,5 @@ export { default as clipboardPlugin } from './clipboard';
 export { default as undoRedoPlugin } from './undo-redo';
 export { default as avatarGroupPlugin } from './avatar-group';
 export { default as viewUpdateSubscriptionPlugin } from './view-update-subscription';
+export { default as beforePrimaryToolbarPlugin } from './before-primaryToolbar';
 export { default as codeBidiWarningPlugin } from './code-bidi-warning';

package/dist/es2019/plugins/list/actions/conversions.js

@@ -4,6 +4,7 @@ import { findWrapping } from 'prosemirror-transform';
 import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { isListNode, joinSiblingLists } from '../utils/node';
 import { isEmptyParagraph } from '../../../utils';
+import { findFirstParentListNode } from '../utils/find';
 export function convertListType({
   tr,
   nextListNodeType
@@ -35,82 +36,50 @@ export function convertListType({
     startIndex,
     endIndex,
     depth
-  } = nodeRangeAroundList;
-  const before = {
-    from: !isListNode(parentNode.child(startIndex)) ? // @ts-ignore
-    doc.resolve(nodeRangeAroundList.$from.posAtIndex(startIndex, depth) + 1) : null,
-    to: null
-  };
-  const after = {
-    from: null,
-    to: !isListNode(parentNode.child(endIndex - 1)) ? doc.resolve( // @ts-ignore
-    nodeRangeAroundList.$from.posAtIndex(endIndex - 1, depth) + 1) : null
-  };
-  let isListNodeFound = false;
-  let firstEmptyParagraphAfterListFound = false;
-
-  for (let i = startIndex; i < endIndex; i++) {
-    // @ts-ignore posAtIndex is a public API but has no type yet
-    const position = nodeRangeAroundList.$from.posAtIndex(i, depth);
-    const resolvedPosition = doc.resolve(position);
-
-    if (isEmptyParagraph(parentNode.child(i)) && !isListNodeFound) {
-      before.from = doc.resolve( // @ts-ignore posAtIndex is a public API but has no type yet
-      nodeRangeAroundList.$from.posAtIndex(i, depth) + 2);
-    }
-
-    if (isEmptyParagraph(parentNode.child(i)) && isListNodeFound && !firstEmptyParagraphAfterListFound) {
-      after.to = resolvedPosition;
-      firstEmptyParagraphAfterListFound = true;
-    }
-
-    if (!isListNode(parentNode.child(i)) && !isListNodeFound) {
-      before.to = doc.resolve(resolvedPosition.pos + 1);
-    } else if (!isListNodeFound) {
-      isListNodeFound = true;
-      const endNodePosition = doc.resolve(resolvedPosition.pos + 1).end() + 1;
-
-      if (doc.resolve(endNodePosition).nodeAfter) {
-        after.from = doc.resolve(endNodePosition + 1);
+  } = nodeRangeAroundList; // Checking for invalid nodes to prevent conversion
+  // eg. a panel cannot be wrapped in a list so return
+  // It will skip this check if the selection begins within a list
+  // This is to match the behaviour of the toolbar buttons being disabled
+
+  if (!findFirstParentListNode($from)) {
+    for (let i = startIndex; i < endIndex; i++) {
+      const position = nodeRangeAroundList.$from.posAtIndex(i, depth);
+      const resolvedPosition = doc.resolve(position);
+      const currentChild = parentNode.child(i);
+      const currentNodeRange = resolvedPosition.blockRange(tr.doc.resolve(position + currentChild.nodeSize));
+
+      if (currentNodeRange && !isListNode(currentChild) && !findWrapping(currentNodeRange, nextListNodeType)) {
+        return;
       }
     }
-  }
+  } // Checking for any non list nodes and wrapping them in a list
+  // so they can be converted
 
-  let beforeConversionArgs, beforeRange, afterConversionArgs, afterRange;
-
-  if (after.from && after.to) {
-    const mappedFrom = tr.mapping.map(after.from.pos);
-    const mappedTo = tr.mapping.map(after.to.pos);
-    afterRange = new NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    afterConversionArgs = {
-      tr,
-      nextListNodeType,
-      nodeRange: afterRange
-    };
-  }
 
-  if (before.from && before.to) {
-    const mappedFrom = tr.mapping.map(before.from.pos);
-    const mappedTo = tr.mapping.map(before.to.pos);
-    beforeRange = new NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    beforeConversionArgs = {
-      tr,
-      nextListNodeType,
-      nodeRange: beforeRange
-    };
-  }
+  tr.doc.nodesBetween(nodeRangeAroundList.start, nodeRangeAroundList.end, (node, pos) => {
+    // Skip over any nodes that are part of a list
+    if (findFirstParentListNode(tr.doc.resolve(tr.mapping.map(pos)))) {
+      return false;
+    } // The following applies to suitable nodes that are not within a list
 
-  if (!afterRange && !beforeRange || afterRange && !findWrapping(afterRange, nextListNodeType) || beforeRange && !findWrapping(beforeRange, nextListNodeType)) {
-    return;
-  }
 
-  if (afterConversionArgs) {
-    convertAroundList(afterConversionArgs);
-  }
+    const currentNodeNotWrappedInList = node;
+    const isNotAnEmptyParagraphAndIsParagraphOrLeafNode = !isEmptyParagraph(currentNodeNotWrappedInList) && (!node.type.isBlock || node.type.name === 'paragraph');
 
-  if (beforeConversionArgs) {
-    convertAroundList(beforeConversionArgs);
-  }
+    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode) {
+      const remainingNodeRange = new NodeRange(tr.doc.resolve(tr.mapping.map(pos)), tr.doc.resolve(tr.mapping.map(pos) + currentNodeNotWrappedInList.nodeSize), nodeRangeAroundList.depth);
+      convertAroundList({
+        tr,
+        nextListNodeType,
+        nodeRange: remainingNodeRange
+      });
+      return false;
+    }
+  });
+  convertSelectedList({
+    tr,
+    nextListNodeType
+  });
 
   if (tr.docChanged) {
     joinSiblingLists({

package/dist/es2019/plugins/list/transforms.js

@@ -195,9 +195,13 @@ const extractListFromParagraph = (node, parent, schema) => {
     } // Return false to prevent replaceWith from wrapping the text node in a paragraph
     // paragraph since that will be done later. If it's done here, it will fail
     // the paragraph.validContent check.
+    // Dont return false if there are lists, as they arent validContent for paragraphs
+    // and will result in hanging textNodes
 
 
-    if (listified.some(node => node.isText)) {
+    const containsList = listified.some(node => node.type === bulletList || node.type === orderedList);
+
+    if (listified.some(node => node.isText) && !containsList) {
       return false;
     }
 

package/dist/es2019/plugins/media/index.js

@@ -31,10 +31,10 @@ const mediaPlugin = options => ({
     const {
       allowMediaGroup = true,
       allowMediaSingle = false,
-      allowMediaInline = false,
       featureFlags
     } = options || {};
     const captions = getMediaFeatureFlag('captions', featureFlags);
+    const allowMediaInline = getMediaFeatureFlag('mediaInline', featureFlags);
     const mediaSingleNode = captions ? mediaSingleWithCaption : mediaSingle;
     return [{
       name: 'mediaGroup',
@@ -221,7 +221,7 @@ const mediaPlugin = options => ({
     }],
     floatingToolbar: (state, intl, providerFactory) => floatingToolbar(state, intl, {
       providerFactory,
-      allowMediaInline: options && options.allowMediaInline,
+      allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
       allowResizing: options && options.allowResizing,
       allowResizingInTables: options && options.allowResizingInTables,
       allowAnnotation: options && options.allowAnnotation,

package/dist/es2019/plugins/media/nodeviews/mediaGroup.js

@@ -11,6 +11,7 @@ import { isNodeSelectedOrInRange, SelectedState } from '../../../utils/nodes';
 import { pluginKey as editorDisabledPluginKey } from '../../editor-disabled';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 
 const isMediaGroupSelectedFromProps = props => {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
@@ -135,7 +136,7 @@ export default class MediaGroup extends React.Component {
           onClick: () => {
             setNodeSelection(this.props.view, getNodePos());
           },
-          ...mediaInlineOptions(mediaOptions.allowMediaInline)
+          ...mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags))
         };
       });
       return /*#__PURE__*/React.createElement(Filmstrip, {

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { ReactNodeView } from '../../../nodeviews/';
+import { SelectionBasedNodeView } from '../../../nodeviews/';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { WithProviders } from '@atlaskit/editor-common';
+import { MediaInlineNodeSelector } from './styles';
 export const MediaInline = props => {
   const [viewMediaClientConfig, setViewMediaClientConfig] = useState({});
   useEffect(() => {
@@ -27,14 +28,16 @@ export const MediaInline = props => {
     collectionName: collection
   };
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
   });
 };
-export class MediaInlineNodeView extends ReactNodeView {
+export class MediaInlineNodeView extends SelectionBasedNodeView {
   createDomRef() {
     const domRef = document.createElement('span');
     domRef.contentEditable = 'false';
+    domRef.classList.add(MediaInlineNodeSelector);
     return domRef;
   }
 
@@ -54,7 +57,7 @@ export class MediaInlineNodeView extends ReactNodeView {
       return true;
     }
 
-    return false;
+    return super.viewShouldUpdate(nextNode);
   }
 
   render(props) {
@@ -74,7 +77,8 @@ export class MediaInlineNodeView extends ReactNodeView {
         return /*#__PURE__*/React.createElement(MediaInline, {
           identifier: this.node.attrs.id,
           mediaProvider: mediaProvider,
-          node: this.node
+          node: this.node,
+          isSelected: this.nodeInsideSelection()
         });
       }
     });

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -13,7 +13,7 @@ import { stateKey as mediaPluginKey } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { FigureWrapper } from './styles';
+import { FigureWrapper, MediaSingleNodeSelector } from './styles';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../../../utils/rich-media-utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -289,7 +289,9 @@ export default class MediaSingleNode extends Component {
     const lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
     const isSelected = selected();
     const shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
-    const MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, null, /*#__PURE__*/React.createElement("div", {
+    const MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, {
+      className: MediaSingleNodeSelector
+    }, /*#__PURE__*/React.createElement("div", {
       ref: this.props.forwardRef
     }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
       onClick: this.clickPlaceholder
@@ -391,12 +393,12 @@ class MediaSingleNodeView extends ReactNodeView {
     return undefined;
   }
 
-  update(node, decorations, isValidUpdate) {
+  update(node, decorations, _innerDecorations, isValidUpdate) {
     if (!isValidUpdate) {
       isValidUpdate = (currentNode, newNode) => this.getNodeMediaId(currentNode) === this.getNodeMediaId(newNode);
     }
 
-    return super.update(node, decorations, isValidUpdate);
+    return super.update(node, decorations, _innerDecorations, isValidUpdate);
   }
 
   render(props, forwardRef) {
@@ -456,7 +458,7 @@ class MediaSingleNodeView extends ReactNodeView {
       if (offsetLeft !== this.lastOffsetLeft) {
         this.lastOffsetLeft = offsetLeft;
         this.forceViewUpdate = true;
-        this.update(this.node, [], () => true);
+        this.update(this.node, [], [], () => true);
       }
     }
 

package/dist/es2019/plugins/media/nodeviews/styles.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+export const MediaInlineNodeSelector = 'media-inline-node';
+export const MediaSingleNodeSelector = 'media-single-node';
 export const FigureWrapper = styled.figure`
   margin: 0;
 `;

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -186,6 +186,8 @@ export class AltTextEditComponent extends React.Component {
       onClick: this.closeMediaAltTextMenu
     })), /*#__PURE__*/React.createElement(PanelTextInput, {
       testId: "alt-text-input",
+      ariaLabel: formatMessage(messages.placeholder),
+      describedById: "support-text",
       placeholder: formatMessage(messages.placeholder),
       defaultValue: this.state.lastValue,
       onCancel: this.dispatchCancelEvent,
@@ -202,7 +204,9 @@ export class AltTextEditComponent extends React.Component {
       })),
       tooltipContent: formatMessage(messages.clear),
       onClick: this.handleClearText
-    }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/React.createElement(SupportText, null, formatMessage(messages.supportText)));
+    }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/React.createElement(SupportText, {
+      id: "support-text"
+    }, formatMessage(messages.supportText)));
   }
 
   fireAnalytics(actionType) {