@atlaskit/editor-core 151.3.0 → 151.3.1

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

@@ -11,21 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _plugin = require("./plugin");
 
-var _types = require("./types");
-
 var _keymap = _interopRequireDefault(require("./keymap"));
 
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
-
-var _commandsWithAnalytics = require("./commands-with-analytics");
-
-var _commands = require("./commands");
-
-var _FindReplaceToolbarButton = _interopRequireDefault(require("./ui/FindReplaceToolbarButton"));
-
-var _analytics = require("../analytics");
-
-var _featureFlagsContext = require("../feature-flags-context");
+var _FindReplaceToolbarButtonWithState = _interopRequireDefault(require("./FindReplaceToolbarButtonWithState"));
 
 var findReplacePlugin = function findReplacePlugin(props) {
   return {
@@ -53,131 +41,20 @@ var findReplacePlugin = function findReplacePlugin(props) {
           containerElement = _ref2.containerElement,
           dispatchAnalyticsEvent = _ref2.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
-      var runWithEditorFocused = function runWithEditorFocused(fn) {
-        var activeElement = document.activeElement;
-        editorView.focus();
-        fn();
-        activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
-      };
-
-      var dispatchCommand = function dispatchCommand(cmd) {
-        var state = editorView.state,
-            dispatch = editorView.dispatch;
-        cmd(state, dispatch);
-      };
-
-      var handleActivate = function handleActivate() {
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.activateWithAnalytics)({
-            triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
-          }));
-        });
-      };
-
-      var handleFind = function handleFind(keyword) {
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.findWithAnalytics)({
-            editorView: editorView,
-            containerElement: containerElement,
-            keyword: keyword
-          }));
-        });
-      };
-
-      var handleFindNext = function handleFindNext(_ref3) {
-        var triggerMethod = _ref3.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.findNextWithAnalytics)({
-            triggerMethod: triggerMethod
-          }));
+      if (props.twoLineEditorToolbar) {
+        return null;
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButtonWithState.default, {
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          editorView: editorView,
+          containerElement: containerElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          takeFullWidth: props.takeFullWidth
         });
-      };
-
-      var handleFindPrev = function handleFindPrev(_ref4) {
-        var triggerMethod = _ref4.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.findPrevWithAnalytics)({
-            triggerMethod: triggerMethod
-          }));
-        });
-      };
-
-      var handleReplace = function handleReplace(_ref5) {
-        var triggerMethod = _ref5.triggerMethod,
-            replaceText = _ref5.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.replaceWithAnalytics)({
-            triggerMethod: triggerMethod,
-            replaceText: replaceText
-          }));
-        });
-      };
-
-      var handleReplaceAll = function handleReplaceAll(_ref6) {
-        var replaceText = _ref6.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.replaceAllWithAnalytics)({
-            replaceText: replaceText
-          }));
-        });
-      };
-
-      var handleFindBlur = function handleFindBlur() {
-        dispatchCommand((0, _commands.blur)());
-      };
-
-      var handleCancel = function handleCancel(_ref7) {
-        var triggerMethod = _ref7.triggerMethod;
-        dispatchCommand((0, _commandsWithAnalytics.cancelSearchWithAnalytics)({
-          triggerMethod: triggerMethod
-        }));
-        editorView.focus();
-      };
-
-      var handleToggleMatchCase = function handleToggleMatchCase() {
-        dispatchCommand((0, _commands.toggleMatchCase)());
-      };
-
-      var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(editorView.state),
-          findReplaceMatchCase = _getFeatureFlags.findReplaceMatchCase;
-
-      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        debounce: false,
-        plugins: {
-          findReplaceState: _types.findReplacePluginKey
-        },
-        render: function render(_ref8) {
-          var findReplaceState = _ref8.findReplaceState;
-          return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButton.default, {
-            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
-          });
-        }
-      });
+      }
     }
   };
 };

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

@@ -25,10 +25,15 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 // helps adjusts position of popup
-var EmojiPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+var EmojiPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 
 var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = _react.default.useRef(null);
@@ -46,6 +51,7 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
 
   var updateEmoji = function updateEmoji(emoji) {
     setIsPopupOpen(false);
+    props.editorView && props.editorView.focus();
     props.onChange && props.onChange(emoji);
   };
 
@@ -73,11 +79,11 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+    }, /*#__PURE__*/_react.default.createElement(EmojiPickerWrapper, null, /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    }));
+    })));
   };
 
   var title = props.title || '';

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

@@ -308,7 +308,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             if (item.selectType === 'emoji') {
               return /*#__PURE__*/_react.default.createElement(_EmojiPickerButton.EmojiPickerButton, {
                 key: idx,
-                view: editorView,
+                editorView: editorView,
                 title: item.title,
                 providerFactory: providerFactory,
                 isSelected: item.selected,

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = createPlugin;
+exports.default = void 0;
+
+var _adfSchema = require("@atlaskit/adf-schema");
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _pluginKey = require("./plugin-key");
+
+function createPlugin() {
+  return new _prosemirrorState.Plugin({
+    key: _pluginKey.pluginKey
+  });
+}
+
+var fragmentMarkPlugin = function fragmentMarkPlugin() {
+  return {
+    name: 'fragmentPlugin',
+    marks: function marks() {
+      return [{
+        name: 'fragment',
+        mark: _adfSchema.fragment
+      }];
+    }
+  };
+};
+
+var _default = fragmentMarkPlugin;
+exports.default = _default;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var pluginKey = new _prosemirrorState.PluginKey('fragmentMarkPlugin');
+exports.pluginKey = pluginKey;

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

@@ -92,7 +92,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
 
-var ClearText = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding-right: 8px;\n  color: ", ";\n"])), _colors.N80);
+var ClearText = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding-right: 8px;\n  color: ", ";\n"])), _colors.N90);
 
 var TextInputWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _ToolbarComponents.InputWrapper, _colors.N30, _colors.N30);
 

package/dist/cjs/plugins/index.js

@@ -271,6 +271,12 @@ Object.defineProperty(exports, "editorDisabledPlugin", {
     return _editorDisabled.default;
   }
 });
+Object.defineProperty(exports, "fragmentMarkPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _fragment.default;
+  }
+});
 Object.defineProperty(exports, "indentationPlugin", {
   enumerable: true,
   get: function get() {
@@ -391,6 +397,12 @@ Object.defineProperty(exports, "viewUpdateSubscriptionPlugin", {
     return _viewUpdateSubscription.default;
   }
 });
+Object.defineProperty(exports, "beforePrimaryToolbarPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _beforePrimaryToolbar.default;
+  }
+});
 Object.defineProperty(exports, "codeBidiWarningPlugin", {
   enumerable: true,
   get: function get() {
@@ -484,6 +496,8 @@ var _dataConsumer = _interopRequireDefault(require("./data-consumer"));
 
 var _editorDisabled = _interopRequireDefault(require("./editor-disabled"));
 
+var _fragment = _interopRequireDefault(require("./fragment"));
+
 var _indentation = _interopRequireDefault(require("./indentation"));
 
 var _annotation = _interopRequireDefault(require("./annotation"));
@@ -522,6 +536,8 @@ var _avatarGroup = _interopRequireDefault(require("./avatar-group"));
 
 var _viewUpdateSubscription = _interopRequireDefault(require("./view-update-subscription"));
 
+var _beforePrimaryToolbar = _interopRequireDefault(require("./before-primaryToolbar"));
+
 var _codeBidiWarning = _interopRequireDefault(require("./code-bidi-warning"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

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

@@ -17,6 +17,8 @@ var _node = require("../utils/node");
 
 var _utils = require("../../../utils");
 
+var _find = require("../utils/find");
+
 function convertListType(_ref) {
   var tr = _ref.tr,
       nextListNodeType = _ref.nextListNodeType;
@@ -42,84 +44,50 @@ function convertListType(_ref) {
   var parentNode = nodeRangeAroundList.parent;
   var startIndex = nodeRangeAroundList.startIndex,
       endIndex = nodeRangeAroundList.endIndex,
-      depth = nodeRangeAroundList.depth;
-  var before = {
-    from: !(0, _node.isListNode)(parentNode.child(startIndex)) ? // @ts-ignore
-    doc.resolve(nodeRangeAroundList.$from.posAtIndex(startIndex, depth) + 1) : null,
-    to: null
-  };
-  var after = {
-    from: null,
-    to: !(0, _node.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 ((0, _utils.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 ((0, _utils.isEmptyParagraph)(parentNode.child(i)) && isListNodeFound && !firstEmptyParagraphAfterListFound) {
-      after.to = resolvedPosition;
-      firstEmptyParagraphAfterListFound = true;
-    }
-
-    if (!(0, _node.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 (!(0, _find.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 && !(0, _node.isListNode)(currentChild) && !(0, _prosemirrorTransform.findWrapping)(currentNodeRange, nextListNodeType)) {
+        return;
       }
     }
-  }
+  } // Checking for any non list nodes and wrapping them in a list
+  // so they can be converted
 
-  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 _prosemirrorModel.NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    afterConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: afterRange
-    };
-  }
+  tr.doc.nodesBetween(nodeRangeAroundList.start, nodeRangeAroundList.end, function (node, pos) {
+    // Skip over any nodes that are part of a list
+    if ((0, _find.findFirstParentListNode)(tr.doc.resolve(tr.mapping.map(pos)))) {
+      return false;
+    } // The following applies to suitable nodes that are not within a list
 
-  if (before.from && before.to) {
-    var _mappedFrom = tr.mapping.map(before.from.pos);
 
-    var _mappedTo = tr.mapping.map(before.to.pos);
+    var currentNodeNotWrappedInList = node;
+    var isNotAnEmptyParagraphAndIsParagraphOrLeafNode = !(0, _utils.isEmptyParagraph)(currentNodeNotWrappedInList) && (!node.type.isBlock || node.type.name === 'paragraph');
 
-    beforeRange = new _prosemirrorModel.NodeRange(tr.doc.resolve(_mappedFrom), tr.doc.resolve(_mappedTo), nodeRangeAroundList.depth);
-    beforeConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: beforeRange
-    };
-  }
-
-  if (!afterRange && !beforeRange || afterRange && !(0, _prosemirrorTransform.findWrapping)(afterRange, nextListNodeType) || beforeRange && !(0, _prosemirrorTransform.findWrapping)(beforeRange, nextListNodeType)) {
-    return;
-  }
-
-  if (afterConversionArgs) {
-    convertAroundList(afterConversionArgs);
-  }
-
-  if (beforeConversionArgs) {
-    convertAroundList(beforeConversionArgs);
-  }
+    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode) {
+      var remainingNodeRange = new _prosemirrorModel.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) {
     (0, _node.joinSiblingLists)({

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

@@ -216,11 +216,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/cjs/plugins/media/index.js

@@ -72,11 +72,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 = (0, _mediaCommon.getMediaFeatureFlag)('captions', featureFlags);
+      var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', featureFlags);
       var mediaSingleNode = captions ? _adfSchema.mediaSingleWithCaption : _adfSchema.mediaSingle;
       return [{
         name: 'mediaGroup',
@@ -269,7 +268,7 @@ var mediaPlugin = function mediaPlugin(options) {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return (0, _toolbar.floatingToolbar)(state, intl, {
           providerFactory: providerFactory,
-          allowMediaInline: options && options.allowMediaInline,
+          allowMediaInline: options && (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', options.featureFlags),
           allowResizing: options && options.allowResizing,
           allowResizingInTables: options && options.allowResizingInTables,
           allowAnnotation: options && options.allowAnnotation,

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

@@ -49,6 +49,8 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 
+var _mediaCommon = require("@atlaskit/media-common");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -181,7 +183,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             (0, _utils.setNodeSelection)(_this.props.view, getNodePos());
           }
-        }, mediaInlineOptions(mediaOptions.allowMediaInline));
+        }, mediaInlineOptions((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions.featureFlags)));
       });
 
       return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.Filmstrip, {

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

@@ -13,6 +13,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -33,6 +35,8 @@ var _mediaCard = require("@atlaskit/media-card");
 
 var _editorCommon = require("@atlaskit/editor-common");
 
+var _styles = require("./styles");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -92,6 +96,7 @@ var MediaInline = function MediaInline(props) {
     collectionName: collection
   };
   return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+    isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
   });
@@ -99,8 +104,8 @@ var MediaInline = function MediaInline(props) {
 
 exports.MediaInline = MediaInline;
 
-var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(MediaInlineNodeView, _ReactNodeView);
+var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  (0, _inherits2.default)(MediaInlineNodeView, _SelectionBasedNodeVi);
 
   var _super = _createSuper(MediaInlineNodeView);
 
@@ -114,6 +119,7 @@ var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function createDomRef() {
       var domRef = document.createElement('span');
       domRef.contentEditable = 'false';
+      domRef.classList.add(_styles.MediaInlineNodeSelector);
       return domRef;
     }
   }, {
@@ -136,7 +142,7 @@ var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
         return true;
       }
 
-      return false;
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaInlineNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
     }
   }, {
     key: "render",
@@ -157,14 +163,15 @@ var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return /*#__PURE__*/_react.default.createElement(MediaInline, {
             identifier: _this.node.attrs.id,
             mediaProvider: mediaProvider,
-            node: _this.node
+            node: _this.node,
+            isSelected: _this.nodeInsideSelection()
           });
         }
       });
     }
   }]);
   return MediaInlineNodeView;
-}(_nodeviews.ReactNodeView);
+}(_nodeviews.SelectionBasedNodeView);
 
 exports.MediaInlineNodeView = MediaInlineNodeView;
 

package/dist/cjs/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -192,7 +192,7 @@ var MediaNodeUpdater = /*#__PURE__*/function () {
 
             case 2:
               contextIdentifierProvider = _context3.sent;
-              return _context3.abrupt("return", contextIdentifierProvider && contextIdentifierProvider.objectId);
+              return _context3.abrupt("return", (contextIdentifierProvider === null || contextIdentifierProvider === void 0 ? void 0 : contextIdentifierProvider.objectId) || null);
 
             case 4:
             case "end":
@@ -278,10 +278,10 @@ var MediaNodeUpdater = /*#__PURE__*/function () {
       var attrs = _this.getAttrs();
 
       if (!attrs || attrs.type !== 'file') {
-        return undefined;
+        return null;
       }
 
-      return attrs.__contextId;
+      return attrs.__contextId || null;
     });
     (0, _defineProperty2.default)(this, "updateDimensions", function (dimensions) {
       (0, _helpers.updateAllMediaNodesAttrs)(dimensions.id, {

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

@@ -453,7 +453,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
 
       var shouldShowPlaceholder = (0, _mediaCommon2.getMediaFeatureFlag)('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof _prosemirrorState.NodeSelection;
 
-      var MediaChildren = /*#__PURE__*/_react.default.createElement(_styles.FigureWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      var MediaChildren = /*#__PURE__*/_react.default.createElement(_styles.FigureWrapper, {
+        className: _styles.MediaSingleNodeSelector
+      }, /*#__PURE__*/_react.default.createElement("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && /*#__PURE__*/_react.default.createElement(_CaptionPlaceholder.default, {
         onClick: this.clickPlaceholder
@@ -570,7 +572,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) {
@@ -579,7 +581,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         };
       }
 
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, isValidUpdate);
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
     }
   }, {
     key: "render",
@@ -640,7 +642,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;
           });
         }