@atlaskit/editor-core 151.2.0 → 152.0.1

package/dist/esm/plugins/find-replace/ui/Replace.js

@@ -10,10 +10,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl';
 import Textfield from '@atlaskit/textfield';
-import { SectionWrapper, ReplaceSectionButton } from './styles';
+import { sectionWrapperStyles, replaceSectionButtonStyles } from './styles';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, TRIGGER_METHOD } from '../../analytics/types';
 var messages = defineMessages({
   replaceWith: {
@@ -158,7 +161,9 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var replaceText = this.state.replaceText;
       var canReplace = this.props.canReplace;
-      return /*#__PURE__*/React.createElement(SectionWrapper, null, /*#__PURE__*/React.createElement(Textfield, {
+      return jsx("div", {
+        css: sectionWrapperStyles
+      }, jsx(Textfield, {
         name: "replace",
         appearance: "none",
         placeholder: this.replaceWith,
@@ -169,11 +174,13 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onKeyDown: this.handleReplaceKeyDown,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+      }), jsx(Button, {
+        css: replaceSectionButtonStyles,
         testId: this.replace,
         onClick: this.handleReplaceClick,
         isDisabled: !canReplace
-      }, this.replace), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+      }, this.replace), jsx(Button, {
+        css: replaceSectionButtonStyles,
         testId: this.replaceAll,
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace

package/dist/esm/plugins/find-replace/ui/styles.js

@@ -1,19 +1,40 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css } from '@emotion/core';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import Button from '@atlaskit/button/standard-button';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // This is a workaround because React.memo does not play well with styled-components
-
-function StyledComponentsButton(props) {
-  return /*#__PURE__*/React.createElement(Button, props);
-}
-
-export var ReplaceSectionButton = styled(StyledComponentsButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* increase specificity to override default Button styles */\n  && {\n    margin-left: 4px;\n  }\n"])));
-export var Rule = styled.hr(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  border: none;\n  background-color: ", ";\n  margin: 4px 0px;\n  height: 1px;\n  border-radius: 1px;\n"])), N30A);
-export var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  > *:not(", ") {\n    margin: 0px 4px;\n  }\n"])), Rule);
-export var SectionWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > * {\n    flex: 0 0 auto;\n    display: inline-flex;\n    height: 32px;\n  }\n"])));
-export var Count = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  flex: 0 0 auto;\n  justify-content: center;\n  align-items: center;\n  margin-left: 4px;\n  margin-right: 8px;\n"])), N60, relativeFontSizeToBase16(12));
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+export var replaceSectionButtonStyles = css({
+  marginLeft: '4px'
+});
+export var ruleStyles = css({
+  width: '100%',
+  border: 'none',
+  backgroundColor: "".concat(N30A),
+  margin: '4px 0px',
+  height: '1px',
+  borderRadius: '1px'
+});
+export var wrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: '0px 4px'
+  }
+});
+export var sectionWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'column',
+  '> *': {
+    display: 'inline-flex',
+    height: '32px',
+    flex: '0 0 auto'
+  }
+});
+export var countStyles = css({
+  color: "".concat(N60),
+  fontSize: "".concat(relativeFontSizeToBase16(12)),
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: '4px',
+  marginRight: '8px'
+});

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

@@ -16,7 +16,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/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import React from 'react';
 import styled from 'styled-components';
@@ -11,7 +11,11 @@ import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
 
-var EmojiPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var EmojiPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // helps to vertically align emoji picker
+// both top and bottom margin should be 2px
+// https://product-fabric.atlassian.net/browse/CETI-148
+
+var EmojiPickerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
 
@@ -28,6 +32,7 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
 
   var updateEmoji = function updateEmoji(emoji) {
     setIsPopupOpen(false);
+    props.editorView && props.editorView.focus();
     props.onChange && props.onChange(emoji);
   };
 
@@ -55,11 +60,11 @@ export var EmojiPickerButton = function 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
-    }));
+    })));
   };
 
   var title = props.title || '';

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

@@ -267,7 +267,7 @@ var Toolbar = /*#__PURE__*/function (_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/esm/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
+  });
+}
+
+var fragmentMarkPlugin = function fragmentMarkPlugin() {
+  return {
+    name: 'fragmentPlugin',
+    marks: function marks() {
+      return [{
+        name: 'fragment',
+        mark: fragment
+      }];
+    }
+  };
+};
+
+export default fragmentMarkPlugin;

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

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

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

@@ -22,7 +22,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';
@@ -42,7 +42,7 @@ import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { ScreenReaderText } from '../../styles';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var ClearText = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding-right: 8px;\n  color: ", ";\n"])), N80);
+var ClearText = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding-right: 8px;\n  color: ", ";\n"])), N90);
 var TextInputWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), InputWrapper, N30, N30);
 var IconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), N80);
 export var messages = defineMessages({

package/dist/esm/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/esm/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(_ref) {
   var tr = _ref.tr,
       nextListNodeType = _ref.nextListNodeType;
@@ -29,84 +30,50 @@ export function convertListType(_ref) {
   var parentNode = nodeRangeAroundList.parent;
   var startIndex = nodeRangeAroundList.startIndex,
       endIndex = nodeRangeAroundList.endIndex,
-      depth = nodeRangeAroundList.depth;
-  var before = {
-    from: !isListNode(parentNode.child(startIndex)) ? // @ts-ignore
-    doc.resolve(nodeRangeAroundList.$from.posAtIndex(startIndex, depth) + 1) : null,
-    to: null
-  };
-  var after = {
-    from: null,
-    to: !isListNode(parentNode.child(endIndex - 1)) ? doc.resolve( // @ts-ignore
-    nodeRangeAroundList.$from.posAtIndex(endIndex - 1, depth) + 1) : null
-  };
-  var isListNodeFound = false;
-  var firstEmptyParagraphAfterListFound = false;
-
-  for (var i = startIndex; i < endIndex; i++) {
-    // @ts-ignore posAtIndex is a public API but has no type yet
-    var position = nodeRangeAroundList.$from.posAtIndex(i, depth);
-    var 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;
-      var endNodePosition = doc.resolve(resolvedPosition.pos + 1).end() + 1;
-
-      if (doc.resolve(endNodePosition).nodeAfter) {
-        after.from = doc.resolve(endNodePosition + 1);
+      depth = nodeRangeAroundList.depth; // 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 (var i = startIndex; i < endIndex; i++) {
+      var position = nodeRangeAroundList.$from.posAtIndex(i, depth);
+      var resolvedPosition = doc.resolve(position);
+      var currentChild = parentNode.child(i);
+      var currentNodeRange = resolvedPosition.blockRange(tr.doc.resolve(position + currentChild.nodeSize));
+
+      if (currentNodeRange && !isListNode(currentChild) && !findWrapping(currentNodeRange, nextListNodeType)) {
+        return;
       }
     }
-  }
-
-  var beforeConversionArgs, beforeRange, afterConversionArgs, afterRange;
-
-  if (after.from && after.to) {
-    var mappedFrom = tr.mapping.map(after.from.pos);
-    var mappedTo = tr.mapping.map(after.to.pos);
-    afterRange = new NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    afterConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: afterRange
-    };
-  }
+  } // Checking for any non list nodes and wrapping them in a list
+  // so they can be converted
 
-  if (before.from && before.to) {
-    var _mappedFrom = tr.mapping.map(before.from.pos);
 
-    var _mappedTo = tr.mapping.map(before.to.pos);
+  tr.doc.nodesBetween(nodeRangeAroundList.start, nodeRangeAroundList.end, function (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
 
-    beforeRange = new NodeRange(tr.doc.resolve(_mappedFrom), tr.doc.resolve(_mappedTo), nodeRangeAroundList.depth);
-    beforeConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: beforeRange
-    };
-  }
 
-  if (!afterRange && !beforeRange || afterRange && !findWrapping(afterRange, nextListNodeType) || beforeRange && !findWrapping(beforeRange, nextListNodeType)) {
-    return;
-  }
+    var currentNodeNotWrappedInList = node;
+    var isNotAnEmptyParagraphAndIsParagraphOrLeafNode = !isEmptyParagraph(currentNodeNotWrappedInList) && (!node.type.isBlock || node.type.name === 'paragraph');
 
-  if (afterConversionArgs) {
-    convertAroundList(afterConversionArgs);
-  }
-
-  if (beforeConversionArgs) {
-    convertAroundList(beforeConversionArgs);
-  }
+    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode) {
+      var remainingNodeRange = new NodeRange(tr.doc.resolve(tr.mapping.map(pos)), tr.doc.resolve(tr.mapping.map(pos) + currentNodeNotWrappedInList.nodeSize), nodeRangeAroundList.depth);
+      convertAroundList({
+        tr: tr,
+        nextListNodeType: nextListNodeType,
+        nodeRange: remainingNodeRange
+      });
+      return false;
+    }
+  });
+  convertSelectedList({
+    tr: tr,
+    nextListNodeType: nextListNodeType
+  });
 
   if (tr.docChanged) {
     joinSiblingLists({

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

@@ -194,11 +194,17 @@ var extractListFromParagraph = function extractListFromParagraph(node, parent, s
     } // 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
 
 
+    var containsList = listified.some(function (node) {
+      return node.type === bulletList || node.type === orderedList;
+    });
+
     if (listified.some(function (node) {
       return node.isText;
-    })) {
+    }) && !containsList) {
       return false;
     }
 

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

@@ -33,11 +33,10 @@ var mediaPlugin = function mediaPlugin(options) {
           allowMediaGroup = _ref$allowMediaGroup === void 0 ? true : _ref$allowMediaGroup,
           _ref$allowMediaSingle = _ref.allowMediaSingle,
           allowMediaSingle = _ref$allowMediaSingle === void 0 ? false : _ref$allowMediaSingle,
-          _ref$allowMediaInline = _ref.allowMediaInline,
-          allowMediaInline = _ref$allowMediaInline === void 0 ? false : _ref$allowMediaInline,
           featureFlags = _ref.featureFlags;
 
       var captions = getMediaFeatureFlag('captions', featureFlags);
+      var allowMediaInline = getMediaFeatureFlag('mediaInline', featureFlags);
       var mediaSingleNode = captions ? mediaSingleWithCaption : mediaSingle;
       return [{
         name: 'mediaGroup',
@@ -229,7 +228,7 @@ var mediaPlugin = function mediaPlugin(options) {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return _floatingToolbar(state, intl, {
           providerFactory: 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/esm/plugins/media/nodeviews/mediaGroup.js

@@ -28,6 +28,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';
 
 var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
@@ -160,7 +161,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             setNodeSelection(_this.props.view, getNodePos());
           }
-        }, mediaInlineOptions(mediaOptions.allowMediaInline));
+        }, mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags)));
       });
 
       return /*#__PURE__*/React.createElement(Filmstrip, {

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

@@ -1,5 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
@@ -12,9 +13,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 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 var MediaInline = function MediaInline(props) {
   var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -66,12 +68,13 @@ export var MediaInline = function MediaInline(props) {
     collectionName: collection
   };
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
   });
 };
-export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(MediaInlineNodeView, _ReactNodeView);
+export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  _inherits(MediaInlineNodeView, _SelectionBasedNodeVi);
 
   var _super = _createSuper(MediaInlineNodeView);
 
@@ -86,6 +89,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function createDomRef() {
       var domRef = document.createElement('span');
       domRef.contentEditable = 'false';
+      domRef.classList.add(MediaInlineNodeSelector);
       return domRef;
     }
   }, {
@@ -108,7 +112,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
         return true;
       }
 
-      return false;
+      return _get(_getPrototypeOf(MediaInlineNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
     }
   }, {
     key: "render",
@@ -129,7 +133,8 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return /*#__PURE__*/React.createElement(MediaInline, {
             identifier: _this.node.attrs.id,
             mediaProvider: mediaProvider,
-            node: _this.node
+            node: _this.node,
+            isSelected: _this.nodeInsideSelection()
           });
         }
       });
@@ -137,7 +142,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }]);
 
   return MediaInlineNodeView;
-}(ReactNodeView);
+}(SelectionBasedNodeView);
 export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory) {
   return function (node, view, getPos) {
     return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {

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

@@ -31,7 +31,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';
@@ -416,7 +416,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       var lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
       var isSelected = selected();
       var shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
-      var MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, null, /*#__PURE__*/React.createElement("div", {
+      var MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, {
+        className: MediaSingleNodeSelector
+      }, /*#__PURE__*/React.createElement("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
         onClick: this.clickPlaceholder
@@ -541,7 +543,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     }
   }, {
     key: "update",
-    value: function update(node, decorations, isValidUpdate) {
+    value: function update(node, decorations, _innerDecorations, isValidUpdate) {
       var _this3 = this;
 
       if (!isValidUpdate) {
@@ -550,7 +552,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         };
       }
 
-      return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, isValidUpdate);
+      return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
     }
   }, {
     key: "render",
@@ -611,7 +613,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         if (offsetLeft !== this.lastOffsetLeft) {
           this.lastOffsetLeft = offsetLeft;
           this.forceViewUpdate = true;
-          this.update(this.node, [], function () {
+          this.update(this.node, [], [], function () {
             return true;
           });
         }

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

@@ -4,6 +4,8 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import React from 'react';
 import styled from 'styled-components';
+export var MediaInlineNodeSelector = 'media-inline-node';
+export var MediaSingleNodeSelector = 'media-single-node';
 export var FigureWrapper = styled.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
 FigureWrapper.displayName = 'FigureWrapper';
 var AbsoluteDiv = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n"])));

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

@@ -168,6 +168,8 @@ export var AltTextEditComponent = /*#__PURE__*/function (_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,
@@ -184,7 +186,9 @@ export var AltTextEditComponent = /*#__PURE__*/function (_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)));
     }
   }, {
     key: "fireAnalytics",