@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/dropdown-button.js

@@ -1,19 +1,25 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import AddIcon from '@atlaskit/icon/glyph/editor/add';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ToolTipContent } from '../../../../keymaps';
 import ToolbarButton from '../../../../ui/ToolbarButton';
-import { ExpandIconWrapper } from '../../../../ui/styles';
-import { TriggerWrapper } from './styles';
+import { expandIconWrapperStyle } from '../../../../ui/styles';
+import { triggerWrapper } from './styles';
 var DropDownButtonIcon = /*#__PURE__*/React.memo(function (props) {
-  return /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(AddIcon, {
+  return jsx("span", {
+    css: triggerWrapper
+  }, jsx(AddIcon, {
     label: props.label
-  }), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+  }), jsx("span", {
+    css: expandIconWrapperStyle
+  }, jsx(ExpandIcon, {
     label: ""
   })));
 });
 export var DropDownButton = /*#__PURE__*/React.memo(function (props) {
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx(ToolbarButton, {
     ref: props.handleRef,
     selected: props.selected,
     disabled: props.disabled,
@@ -22,10 +28,10 @@ export var DropDownButton = /*#__PURE__*/React.memo(function (props) {
     "aria-expanded": props['aria-expanded'],
     "aria-haspopup": props['aria-haspopup'],
     "aria-label": props.label,
-    iconBefore: /*#__PURE__*/React.createElement(DropDownButtonIcon, {
+    iconBefore: jsx(DropDownButtonIcon, {
       label: ""
     }),
-    title: /*#__PURE__*/React.createElement(ToolTipContent, {
+    title: jsx(ToolTipContent, {
       description: props.label,
       shortcutOverride: "/"
     })

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -15,19 +15,21 @@ 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/react';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import { Popup } from '@atlaskit/editor-common/ui';
 import ToolbarButton from '../../../../ui/ToolbarButton';
-import { Separator, ButtonGroup, Wrapper } from '../../../../ui/styles';
+import { separatorStyles, buttonGroupStyle, wrapperStyle } from '../../../../ui/styles';
 import { createTable } from '../../../table/commands';
 import { insertDate } from '../../../date/actions';
 import { openElementBrowserModal } from '../../../quick-insert/commands';
 import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
 import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
-import { insertTaskDecision } from '../../../tasks-and-decisions/commands';
+import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands';
 import { insertExpand } from '../../../expand/commands';
 import { showLinkToolbar } from '../../../hyperlink/commands';
 import { createTypeAheadTools } from '../../../type-ahead/api';
@@ -260,29 +262,25 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "insertTaskDecision", function (name, inputMethod) {
       return function () {
-        var editorView = _this.props.editorView;
-
-        if (!editorView) {
-          return false;
-        }
-
+        var _this$props$editorVie = _this.props.editorView,
+            state = _this$props$editorVie.state,
+            dispatch = _this$props$editorVie.dispatch;
         var listType = name === 'action' ? 'taskList' : 'decisionList';
-        insertTaskDecision(editorView, listType, inputMethod)(editorView.state, editorView.dispatch);
-        return true;
+        return insertTaskDecisionCommand(listType, inputMethod)(state, dispatch);
       };
     });
 
     _defineProperty(_assertThisInitialized(_this), "insertHorizontalRule", function (inputMethod) {
-      var _this$props$editorVie = _this.props.editorView,
-          state = _this$props$editorVie.state,
-          dispatch = _this$props$editorVie.dispatch;
+      var _this$props$editorVie2 = _this.props.editorView,
+          state = _this$props$editorVie2.state,
+          dispatch = _this$props$editorVie2.dispatch;
       return insertHorizontalRule(inputMethod)(state, dispatch);
     });
 
     _defineProperty(_assertThisInitialized(_this), "insertExpand", function () {
-      var _this$props$editorVie2 = _this.props.editorView,
-          state = _this$props$editorVie2.state,
-          dispatch = _this$props$editorVie2.dispatch;
+      var _this$props$editorVie3 = _this.props.editorView,
+          state = _this$props$editorVie3.state,
+          dispatch = _this$props$editorVie3.dispatch;
       return insertExpand(state, dispatch);
     });
 
@@ -476,7 +474,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Popup, {
+      return jsx(Popup, {
         target: ref,
         fitHeight: 350,
         fitWidth: 350,
@@ -484,7 +482,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement
-      }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
+      }, jsx(EmojiPickerWithListeners, {
         emojiProvider: emojiProvider,
         onSelection: this.handleSelectedEmoji,
         handleClickOutside: this.handleEmojiClickOutside,
@@ -509,10 +507,10 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ButtonGroup, {
-        width: isReducedSpacing ? 'small' : 'large'
+      return jsx("span", {
+        css: buttonGroupStyle
       }, buttons.map(function (btn) {
-        return /*#__PURE__*/React.createElement(ToolbarButton, {
+        return jsx(ToolbarButton, {
           item: btn,
           ref: btn.value.name === 'emoji' ? _this2.handleEmojiButtonRef : noop,
           key: btn.value.name,
@@ -525,7 +523,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           "aria-haspopup": btn['aria-haspopup'],
           onItemClick: _this2.insertToolbarMenuItem
         });
-      }), /*#__PURE__*/React.createElement(Wrapper, null, this.renderPopup(), /*#__PURE__*/React.createElement(BlockInsertMenu, {
+      }), jsx("span", {
+        css: wrapperStyle
+      }, this.renderPopup(), jsx(BlockInsertMenu, {
         popupsMountPoint: this.props.popupsMountPoint,
         popupsBoundariesElement: this.props.popupsBoundariesElement,
         popupsScrollableElement: this.props.popupsScrollableElement,
@@ -544,7 +544,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         onOpenChange: this.onOpenChange,
         togglePlusMenuVisibility: this.togglePlusMenuVisibility,
         replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false
-      })), this.props.showSeparator && /*#__PURE__*/React.createElement(Separator, null));
+      })), this.props.showSeparator && jsx("span", {
+        css: separatorStyles
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
@@ -17,7 +19,7 @@ import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
 import CodeIcon from '@atlaskit/icon/glyph/editor/code';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import QuoteIcon from '@atlaskit/icon/glyph/quote';
-import { Shortcut } from '../../../../ui/styles';
+import { shortcutStyle } from '../../../../ui/styles';
 import { tooltip, addLink, toggleTable } from '../../../../keymaps';
 import { shallowEquals } from './shallow-equals';
 
@@ -28,10 +30,12 @@ var from = function from(init) {
     value: {
       name: init.name
     },
-    elemBefore: /*#__PURE__*/React.createElement(init.Icon, {
+    elemBefore: jsx(init.Icon, {
       label: init.content
     }),
-    elemAfter: init.shortcut ? /*#__PURE__*/React.createElement(Shortcut, null, init.shortcut) : undefined,
+    elemAfter: init.shortcut ? jsx("div", {
+      css: shortcutStyle
+    }, init.shortcut) : undefined,
     'aria-label': init.content,
     'aria-haspopup': init['aria-haspopup'],
     shortcut: init.shortcut,
@@ -199,7 +203,7 @@ export var placeholder = mem(function (init) {
     disabled: init.disabled,
     name: 'placeholder text',
     Icon: function Icon() {
-      return /*#__PURE__*/React.createElement(PlaceholderTextIcon, {
+      return jsx(PlaceholderTextIcon, {
         label: ""
       });
     }
@@ -221,7 +225,7 @@ export var more = mem(function (init) {
     disabled: init.disabled,
     name: 'macro',
     Icon: function Icon() {
-      return /*#__PURE__*/React.createElement(EditorMoreIcon, {
+      return jsx(EditorMoreIcon, {
         label: ""
       });
     }

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/styles.js

@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
-export var TriggerWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 42px;\n\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n"])));
+import { css } from '@emotion/react';
+export var triggerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 42px;\n\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n"])));

package/dist/esm/plugins/list/actions/wrap-and-join-lists.js

@@ -1,5 +1,6 @@
 import { Fragment, Slice, NodeRange } from 'prosemirror-model';
-import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-transform';
+import { ReplaceAroundStep, findWrapping, canSplit } from 'prosemirror-transform';
+import { autoJoinTr } from '../../../utils/prosemirror/autojoin';
 /**
  * Wraps the selection in a list with the given type. If this results in
  * two adjacent lists of the same type, those will be joined together.
@@ -7,7 +8,7 @@ import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-
 
 export function wrapInListAndJoin(nodeType, tr) {
   wrapInList(nodeType)(tr);
-  autoJoin(tr, function (before, after) {
+  autoJoinTr(tr, function (before, after) {
     return before.type === after.type && before.type === nodeType;
   });
 }
@@ -94,75 +95,4 @@ function doWrapInList(tr, range, wrappers, joinBefore, listType) {
   }
 
   return tr;
-}
-/**
- * Checks whether two adjacent nodes can be joined. If so, the document
- * will be updated to join those nodes. If not, the original transaction
- * remains untouched.
- *
- * Nodes are considered joinable if the `isJoinable` predicate returns true.
- *
- * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
- */
-
-
-export function autoJoin(tr, isJoinable) {
-  if (!tr.isGeneric) {
-    return;
-  }
-
-  var ranges = [];
-
-  for (var i = 0; i < tr.mapping.maps.length; i++) {
-    var map = tr.mapping.maps[i];
-
-    for (var j = 0; j < ranges.length; j++) {
-      ranges[j] = map.map(ranges[j]);
-    }
-
-    map.forEach(function (_s, _e, from, to) {
-      return ranges.push(from, to);
-    });
-  } // Figure out which joinable points exist inside those ranges,
-  // by checking all node boundaries in their parent nodes.
-
-
-  var joinable = [];
-
-  for (var _i3 = 0; _i3 < ranges.length; _i3 += 2) {
-    var from = ranges[_i3];
-    var to = ranges[_i3 + 1];
-    var $from = tr.doc.resolve(from);
-    var depth = $from.sharedDepth(to);
-    var parent = $from.node(depth);
-
-    for (var index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
-      var _after = parent.maybeChild(index);
-
-      if (!_after) {
-        break;
-      }
-
-      if (index && joinable.indexOf(pos) === -1) {
-        var _before = parent.child(index - 1);
-
-        if (_before.type === _after.type && isJoinable(_before, _after)) {
-          joinable.push(pos);
-        }
-      }
-
-      pos += _after.nodeSize;
-    }
-  } // Join the joinable points
-
-
-  joinable.sort(function (a, b) {
-    return a - b;
-  });
-
-  for (var _i4 = joinable.length - 1; _i4 >= 0; _i4--) {
-    if (canJoin(tr.doc, joinable[_i4])) {
-      tr.join(joinable[_i4]);
-    }
-  }
 }

package/dist/esm/plugins/list/ui/ToolbarLists/index.js

@@ -10,7 +10,8 @@ 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 from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
 import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
@@ -19,7 +20,7 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, tooltip, ToolTipContent } from '../../../../keymaps';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import DropdownMenu from '../../../../ui/DropdownMenu';
-import { ButtonGroup, Separator, Wrapper, ExpandIconWrapper, Shortcut } from '../../../../ui/styles';
+import { buttonGroupStyle, separatorStyles, wrapperStyle, expandIconWrapperStyle, shortcutStyle } from '../../../../ui/styles';
 import { toggleBulletList, toggleOrderedList } from '../../commands';
 import { messages } from '../../messages';
 import { INPUT_METHOD } from '../../../analytics';
@@ -73,7 +74,9 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
         },
         isDisabled: bulletListDisabled,
         isActive: Boolean(bulletListActive),
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(toggleBulletListKeymap))
       }, {
         key: 'orderedList',
         content: labelOrderedList,
@@ -82,7 +85,9 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
         },
         isDisabled: orderedListDisabled,
         isActive: Boolean(orderedListActive),
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(toggleOrderedListKeymap))
       }];
       return [{
         items: items
@@ -150,9 +155,9 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
       if (!isSmall) {
         var labelUnorderedList = formatMessage(messages.unorderedList);
         var labelOrderedList = formatMessage(messages.orderedList);
-        return /*#__PURE__*/React.createElement(ButtonGroup, {
-          width: isReducedSpacing ? 'small' : 'large'
-        }, /*#__PURE__*/React.createElement(ToolbarButton, {
+        return jsx("span", {
+          css: buttonGroupStyle
+        }, jsx(ToolbarButton, {
           buttonId: TOOLBAR_BUTTON.BULLET_LIST,
           spacing: isReducedSpacing ? 'none' : 'default',
           onClick: this.handleBulletListClick,
@@ -160,14 +165,14 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": bulletListActive,
           "aria-label": labelUnorderedList,
           disabled: bulletListDisabled || disabled,
-          title: /*#__PURE__*/React.createElement(ToolTipContent, {
+          title: jsx(ToolTipContent, {
             description: labelUnorderedList,
             keymap: toggleBulletListKeymap
           }),
-          iconBefore: /*#__PURE__*/React.createElement(BulletListIcon, {
+          iconBefore: jsx(BulletListIcon, {
             label: ""
           })
-        }), /*#__PURE__*/React.createElement(ToolbarButton, {
+        }), jsx(ToolbarButton, {
           buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
           spacing: isReducedSpacing ? 'none' : 'default',
           onClick: this.handleOrderedListClick,
@@ -175,14 +180,16 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": orderedListActive,
           "aria-label": labelOrderedList,
           disabled: orderedListDisabled || disabled,
-          title: /*#__PURE__*/React.createElement(ToolTipContent, {
+          title: jsx(ToolTipContent, {
             description: labelOrderedList,
             keymap: toggleOrderedListKeymap
           }),
-          iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
+          iconBefore: jsx(NumberListIcon, {
             label: ""
           })
-        }), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
+        }), isSeparator && jsx("span", {
+          css: separatorStyles
+        }));
       } else {
         var items = this.createItems();
         var _this$props3 = this.props,
@@ -190,7 +197,9 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
             popupsBoundariesElement = _this$props3.popupsBoundariesElement,
             popupsScrollableElement = _this$props3.popupsScrollableElement;
         var labelLists = formatMessage(messages.lists);
-        return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+        return jsx("span", {
+          css: wrapperStyle
+        }, jsx(DropdownMenu, {
           items: items,
           onItemActivated: this.onItemActivated,
           mountTo: popupsMountPoint,
@@ -201,7 +210,7 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
           fitHeight: 188,
           fitWidth: 175,
           shouldUseDefaultRole: true
-        }, /*#__PURE__*/React.createElement(ToolbarButton, {
+        }, jsx(ToolbarButton, {
           spacing: isReducedSpacing ? 'none' : 'default',
           selected: bulletListActive || orderedListActive,
           "aria-expanded": isDropdownOpen,
@@ -210,12 +219,18 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
           disabled: disabled,
           onClick: this.handleTriggerClick,
           title: labelLists,
-          iconBefore: /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(BulletListIcon, {
+          iconBefore: jsx("span", {
+            css: wrapperStyle
+          }, jsx(BulletListIcon, {
             label: labelLists
-          }), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+          }), jsx("span", {
+            css: expandIconWrapperStyle
+          }, jsx(ExpandIcon, {
             label: ""
           })))
-        })), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
+        })), isSeparator && jsx("span", {
+          css: separatorStyles
+        }));
       }
     }
   }]);

package/dist/esm/plugins/media/commands/helpers.js

@@ -70,34 +70,36 @@ export var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attr
     } else {
       var mediaGroupNode = findMediaNode(mediaPluginState, id, isMediaSingle);
       mediaNodes = mediaGroupNode ? [mediaGroupNode] : [];
-    } // TODO: ED-7784 Clean media plugin state from having media that were previously removed.
-    // Sanity check
+    }
 
+    var isMediaNode = function isMediaNode(pos) {
+      var node = state.doc.nodeAt(pos);
+      return node && node.type.name === 'media';
+    };
 
-    var mediaType = state.schema.nodes.media;
-    mediaNodes = mediaNodes.filter(function (nodeWithPos) {
-      var node;
+    var validMediaNodePositions = mediaNodes.reduce(function (acc, _ref) {
+      var getPos = _ref.getPos;
+      var pos = getPos();
 
-      try {
-        node = state.doc.nodeAt(nodeWithPos.getPos());
-      } catch (e) {
-        return false;
+      if (typeof pos === 'number' && !isMediaNode(pos)) {
+        return acc;
       }
 
-      return node && node.type === mediaType;
-    });
+      acc.push(pos);
+      return acc;
+    }, []);
 
-    if (mediaNodes.length === 0) {
+    if (validMediaNodePositions.length === 0) {
       return false;
     }
 
+    var tr = state.tr;
+    validMediaNodePositions.forEach(function (pos) {
+      return tr.step(new SetAttrsStep(pos, attrs));
+    });
+    tr.setMeta('addToHistory', false);
+
     if (dispatch) {
-      var tr = state.tr;
-      mediaNodes.forEach(function (_ref) {
-        var getPos = _ref.getPos;
-        return tr.step(new SetAttrsStep(getPos(), attrs));
-      });
-      tr.setMeta('addToHistory', false);
       dispatch(tr);
     }
 
@@ -113,8 +115,18 @@ export var updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs, isMed
       return false;
     }
 
+    var tr = state.tr;
+    var pos = mediaNodeWithPos.getPos();
+    var node = tr.doc.nodeAt(pos);
+
+    if (!node || node.type.name !== 'media') {
+      return false;
+    }
+
+    tr.step(new SetAttrsStep(pos, attrs)).setMeta('addToHistory', false);
+
     if (dispatch) {
-      dispatch(state.tr.step(new SetAttrsStep(mediaNodeWithPos.getPos(), attrs)).setMeta('addToHistory', false));
+      dispatch(tr);
     }
 
     return true;
@@ -122,14 +134,22 @@ export var updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs, isMed
 };
 export var replaceExternalMedia = function replaceExternalMedia(pos, attrs) {
   return function (state, dispatch) {
+    var tr = state.tr;
+    var node = tr.doc.nodeAt(pos);
+
+    if (!node || node.type.name !== 'media') {
+      return false;
+    }
+
+    tr.step(new SetAttrsStep(pos, _objectSpread({
+      type: 'file',
+      url: null
+    }, attrs))).setMeta('addToHistory', false);
+
     if (dispatch) {
-      dispatch(state.tr.step(new SetAttrsStep(pos, _objectSpread({
-        type: 'file',
-        url: null
-      }, attrs))).setMeta('addToHistory', false));
-      return true;
+      dispatch(tr);
     }
 
-    return false;
+    return true;
   };
 };

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

@@ -18,7 +18,8 @@ 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 from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
@@ -33,7 +34,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, MediaSingleNodeSelector } 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';
@@ -418,14 +419,15 @@ 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, {
+      var MediaChildren = jsx("figure", {
+        css: figureWrapper,
         className: MediaSingleNodeSelector
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         ref: this.props.forwardRef
-      }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
+      }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
         onClick: this.clickPlaceholder
       }));
-      return canResize ? /*#__PURE__*/React.createElement(ResizableMediaSingle, _extends({}, mediaSingleProps, {
+      return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
         lineLength: lineLength,
         view: this.props.view,
         getPos: getPos,
@@ -436,7 +438,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
         selected: isSelected,
         dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
-      }), MediaChildren) : /*#__PURE__*/React.createElement(MediaSingle, mediaSingleProps, MediaChildren);
+      }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
 
@@ -569,13 +571,13 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
           dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent; // getPos is a boolean for marks, since this is a node we know it must be a function
 
       var getPos = this.getPos;
-      return /*#__PURE__*/React.createElement(WithProviders, {
+      return jsx(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref5) {
           var mediaProvider = _ref5.mediaProvider,
               contextIdentifierProvider = _ref5.contextIdentifierProvider;
-          return /*#__PURE__*/React.createElement(WithPluginState, {
+          return jsx(WithPluginState, {
             editorView: _this4.view,
             plugins: {
               width: widthPluginKey,
@@ -584,7 +586,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
             render: function render(_ref6) {
               var width = _ref6.width,
                   mediaPluginState = _ref6.mediaPluginState;
-              return /*#__PURE__*/React.createElement(MediaSingleNode, {
+              return jsx(MediaSingleNode, {
                 width: width.width,
                 lineLength: width.lineLength,
                 node: _this4.node,

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

@@ -2,22 +2,25 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 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"])));
-var ForcedDimensions = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  padding-bottom: ", "%;\n"])), function (props) {
-  return props.dimensions.height / props.dimensions.width * 100;
-});
+export var figureWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
+var absoluteDiv = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n"])));
+var forcedDimensions = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n"])));
 export var MediaCardWrapper = function MediaCardWrapper(_ref) {
   var dimensions = _ref.dimensions,
       children = _ref.children,
       onContextMenu = _ref.onContextMenu;
-  return /*#__PURE__*/React.createElement(ForcedDimensions, {
-    dimensions: dimensions,
+  return jsx("div", {
+    css: forcedDimensions,
+    style: {
+      paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
+    },
     onContextMenuCapture: onContextMenu
-  }, /*#__PURE__*/React.createElement(AbsoluteDiv, null, children));
+  }, jsx("div", {
+    css: absoluteDiv
+  }, children));
 };