@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/cjs/plugins/media/ui/MediaLinkingToolbar.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +25,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
@@ -45,8 +49,6 @@ var _messages = require("../../../messages");
 
 var _utils = require("../../hyperlink/utils");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _enums = require("../../analytics/types/enums");
@@ -55,13 +57,16 @@ var _mediaLinkingToolbarMessages = require("./media-linking-toolbar-messages");
 
 var _templateObject, _templateObject2;
 
+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; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
 
-var ValidationWrapper = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), _colors.R400);
-
-var ButtonWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 0px;\n"])));
+var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), _colors.R400);
+var buttonWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 0px;\n"])));
 
 var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(LinkAddToolbar, _React$PureComponent);
@@ -138,18 +143,22 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
       var formatUnlinkText = formatMessage(_messages.linkToolbarMessages.unlink);
 
       var errorsList = _this.state.validationErrors.map(function (error, index) {
-        return /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
+        return (0, _react2.jsx)(_ui.ErrorMessage, {
           key: index
         }, error);
       });
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         className: "recent-list"
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarComponents.Container, {
-        provider: !!activityProvider
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarComponents.UrlInputWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      }, (0, _react2.jsx)("div", {
+        css: [_ToolbarComponents.container, !!activityProvider && _ToolbarComponents.containerWithProvider]
+      }, (0, _react2.jsx)("div", {
+        css: _ToolbarComponents.inputWrapper
+      }, (0, _react2.jsx)("span", {
+        css: buttonWrapper
+      }, (0, _react2.jsx)(_Button.default, {
         title: formatLinkAddressText,
-        icon: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
+        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
           label: formatLinkAddressText
         }),
         onClick: function onClick() {
@@ -158,7 +167,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
             inputMethod: currentInputMethod
           });
         }
-      })), /*#__PURE__*/_react.default.createElement(_PanelTextInput.default, {
+      })), (0, _react2.jsx)(_PanelTextInput.default, {
         testId: "media-link-input",
         placeholder: getPlaceholder(!!activityProvider),
         autoFocus: true,
@@ -183,13 +192,15 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           _onChange(value);
         },
         onKeyDown: onKeyDown
-      }), (0, _utils.normalizeUrl)(displayUrl) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Separator.default, null), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      }), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_Separator.default, null), (0, _react2.jsx)(_Button.default, {
         title: formatUnlinkText,
-        icon: /*#__PURE__*/_react.default.createElement(_unlink.default, {
+        icon: (0, _react2.jsx)(_unlink.default, {
           label: formatUnlinkText
         }),
         onClick: _this.handleUnlink
-      }))), !!errorsList.length && /*#__PURE__*/_react.default.createElement(ValidationWrapper, null, errorsList), renderRecentList()));
+      }))), !!errorsList.length && (0, _react2.jsx)("section", {
+        css: validationWrapper
+      }, errorsList), renderRecentList()));
     });
     return _this;
   }
@@ -221,7 +232,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = this.props,
           providerFactory = _this$props2.providerFactory,
           displayUrl = _this$props2.displayUrl;
-      return /*#__PURE__*/_react.default.createElement(_LinkSearch.default, {
+      return (0, _react2.jsx)(_LinkSearch.default, {
         defaultUrl: (0, _utils.normalizeUrl)(displayUrl),
         providerFactory: providerFactory,
         onSubmit: this.handleSubmit,

package/dist/cjs/plugins/media/ui/MediaPicker/PickerFacadeProvider.js

@@ -27,8 +27,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _mediaPicker = require("@atlaskit/media-picker");
-
 var _utils = require("@atlaskit/editor-common/utils");
 
 var _pickerFacade = _interopRequireDefault(require("../../picker-facade"));
@@ -127,7 +125,7 @@ var PickerFacadeProvider = /*#__PURE__*/function (_React$Component) {
                  */
 
                 _context.next = 19;
-                return new _pickerFacade.default('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, _mediaPicker.MediaPicker, analyticsName).init();
+                return new _pickerFacade.default('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
 
               case 19:
                 pickerFacadeInstance = _context.sent;

package/dist/cjs/plugins/media/ui/MediaPicker/index.js

@@ -101,7 +101,7 @@ var MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
             featureFlags: featureFlags,
             editorDomElement: editorDomElement,
             appearance: appearance
-          }), !mediaState.shouldUseMediaPickerPopup() && /*#__PURE__*/_react.default.createElement(_BrowserWrapper.BrowserWrapper, {
+          }), /*#__PURE__*/_react.default.createElement(_BrowserWrapper.BrowserWrapper, {
             onBrowseFn: _this3.onBrowseFn,
             mediaState: mediaState,
             featureFlags: featureFlags

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/index.js

@@ -30,6 +30,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _prosemirrorUtils = require("prosemirror-utils");
 
 var _mediaClient = require("@atlaskit/media-client");
@@ -430,13 +432,15 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         offsetLeft: this.state.offsetLeft,
         wrappedLayout: this.wrappedLayout
       };
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        layout: layout,
-        isResized: !!pctWidth,
-        containerWidth: containerWidth || origWidth,
-        innerRef: this.saveWrapper,
-        fullWidthMode: fullWidthMode
-      }, /*#__PURE__*/_react.default.createElement(_Resizer.default, (0, _extends2.default)({}, this.props, {
+      return (0, _react2.jsx)("div", {
+        ref: this.saveWrapper,
+        css: (0, _styled.wrapperStyle)({
+          layout: layout,
+          isResized: !!pctWidth,
+          containerWidth: containerWidth || origWidth,
+          fullWidthMode: fullWidthMode
+        })
+      }, (0, _react2.jsx)(_Resizer.default, (0, _extends2.default)({}, this.props, {
         ratio: ratio,
         width: initialWidth,
         selected: selected,
@@ -455,7 +459,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         // This workaround adds an empty div inside the resize handler to prevent the issue.
         ,
         handleComponentFunc: function handleComponentFunc() {
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return (0, _react2.jsx)("div", {
             contentEditable: false
           });
         }

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/styled.js

@@ -5,17 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = void 0;
+exports.wrapperStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _ui = require("@atlaskit/editor-common/ui");
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), _ui.MediaSingleDimensionHelper);
+var wrapperStyle = function wrapperStyle(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), (0, _ui.MediaSingleDimensionHelper)(props));
+};
 
-exports.Wrapper = Wrapper;
-Wrapper.displayName = 'ResizerWrapper';
+exports.wrapperStyle = wrapperStyle;

package/dist/cjs/plugins/media/utils/media-single.js

@@ -121,23 +121,27 @@ var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inp
 exports.insertMediaAsMediaSingle = insertMediaAsMediaSingle;
 
 var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert) {
+  var _state$selection$$fro;
+
   if (collection === undefined) {
     return false;
   }
 
   var state = view.state,
       dispatch = view.dispatch;
-  var grandParent = state.selection.$from.node(-1);
+  var grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  var parentType = state.selection.$from.parent.type;
   var node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
-  var shouldSplit = grandParent && grandParent.type.validContent(_prosemirrorModel.Fragment.from(node));
   var fileExtension;
 
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
     fileExtension = extensionIdx >= 0 ? mediaState.fileName.substring(extensionIdx + 1) : undefined;
-  }
+  } // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+
 
-  if (shouldSplit) {
+  if ((0, _insert.shouldSplitSelectedNodeOnNodeInsertion)(parentType, grandParentType, node)) {
     insertNodesWithOptionalParagraph([node], {
       fileExtension: fileExtension,
       inputMethod: inputMethod

package/dist/cjs/plugins/mentions/styles.js

@@ -9,7 +9,7 @@ exports.mentionsStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _mention = require("@atlaskit/editor-common/mention");
 
@@ -19,5 +19,5 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var mentionsStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
+var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
 exports.mentionsStyles = mentionsStyles;

package/dist/cjs/plugins/mentions/ui/InviteItem/index.js

@@ -11,11 +11,13 @@ exports.default = exports.INVITE_ITEM_MIN_HEIGHT = exports.INVITE_ITEM_DESCRIPTI
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("@emotion/react");
+
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -27,6 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+/** @jsx jsx */
 var INVITE_ITEM_MIN_HEIGHT = _styles.AVATAR_HEIGHT + _styles.ROW_SIDE_PADDING * 2;
 exports.INVITE_ITEM_MIN_HEIGHT = INVITE_ITEM_MIN_HEIGHT;
 var INVITE_ITEM_DESCRIPTION = {
@@ -46,34 +49,44 @@ var InviteItem = function InviteItem(_ref) {
       selected = _ref.selected,
       userRole = _ref.userRole,
       intl = _ref.intl;
-  var onSelected = (0, _react.useCallback)(function (event) {
+  var onSelected = (0, _react2.useCallback)(function (event) {
     if (leftClick(event) && onSelection) {
       event.preventDefault();
       onSelection(INVITE_ITEM_DESCRIPTION, event);
     }
   }, [onSelection]);
-  var onItemMouseEnter = (0, _react.useCallback)(function (event) {
+  var onItemMouseEnter = (0, _react2.useCallback)(function (event) {
     if (onMouseEnter) {
       onMouseEnter(INVITE_ITEM_DESCRIPTION, event);
     }
   }, [onMouseEnter]);
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     if (onMount) {
       onMount();
     }
   }, [onMount]);
-  return /*#__PURE__*/_react.default.createElement(_styles.MentionItemStyle, {
-    selected: selected,
+  return (0, _react.jsx)("div", {
+    css: [_styles.mentionItemStyle, selected && _styles.mentionItemSelectedStyle],
     onMouseDown: onSelected,
     onMouseEnter: onItemMouseEnter,
     "data-id": INVITE_ITEM_DESCRIPTION.id
-  }, /*#__PURE__*/_react.default.createElement(_styles.RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, null, /*#__PURE__*/_react.default.createElement(_add.default, {
+  }, (0, _react.jsx)("div", {
+    css: _styles.rowStyle
+  }, (0, _react.jsx)("span", {
+    css: _styles.avatarStyle
+  }, (0, _react.jsx)(_add.default, {
     label: intl.formatMessage(_messages.messages.mentionsAddLabel),
     primaryColor: _colors.N300
-  })), /*#__PURE__*/_react.default.createElement(_styles.NameSectionStyle, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.inviteItemTitle, {
+  })), (0, _react.jsx)("div", {
+    css: _styles.nameSectionStyle,
+    "data-testid": "name-section"
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.inviteItemTitle, {
     values: {
       userRole: userRole || 'basic',
-      productName: /*#__PURE__*/_react.default.createElement(_styles.CapitalizedStyle, null, productName)
+      productName: (0, _react.jsx)("span", {
+        css: _styles.capitalizedStyle,
+        "data-testid": "capitalized-message"
+      }, productName)
     }
   })))));
 };

package/dist/cjs/plugins/mentions/ui/InviteItem/styles.js

@@ -5,41 +5,29 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RowStyle = exports.ROW_SIDE_PADDING = exports.NameSectionStyle = exports.MentionItemStyle = exports.CapitalizedStyle = exports.AvatarStyle = exports.AVATAR_HEIGHT = void 0;
+exports.rowStyle = exports.nameSectionStyle = exports.mentionItemStyle = exports.mentionItemSelectedStyle = exports.capitalizedStyle = exports.avatarStyle = exports.ROW_SIDE_PADDING = exports.AVATAR_HEIGHT = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var ROW_SIDE_PADDING = 14;
 exports.ROW_SIDE_PADDING = ROW_SIDE_PADDING;
-
-var RowStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: 6px ", "px;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), ROW_SIDE_PADDING);
-
-exports.RowStyle = RowStyle;
+var rowStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: 6px ", "px;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), ROW_SIDE_PADDING);
+exports.rowStyle = rowStyle;
 var AVATAR_HEIGHT = 36;
 exports.AVATAR_HEIGHT = AVATAR_HEIGHT;
-
-var AvatarStyle = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n  }\n"])), AVATAR_HEIGHT);
-
-exports.AvatarStyle = AvatarStyle;
-
-var NameSectionStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: ", ";\n"])), _colors.N300, function (props) {
-  return props.restricted ? '0.5' : 'inherit';
-});
-
-exports.NameSectionStyle = NameSectionStyle;
-
-var MentionItemStyle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])), function (props) {
-  return props.selected ? _colors.N30 : 'transparent';
-});
-
-exports.MentionItemStyle = MentionItemStyle;
-
-var CapitalizedStyle = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: capitalize;\n"])));
-
-exports.CapitalizedStyle = CapitalizedStyle;
+var avatarStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n  }\n"])), AVATAR_HEIGHT);
+exports.avatarStyle = avatarStyle;
+var nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), _colors.N300);
+exports.nameSectionStyle = nameSectionStyle;
+var mentionItemStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
+exports.mentionItemStyle = mentionItemStyle;
+var mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _colors.N30);
+exports.mentionItemSelectedStyle = mentionItemSelectedStyle;
+var capitalizedStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: capitalize;\n"])));
+exports.capitalizedStyle = capitalizedStyle;

package/dist/cjs/plugins/panel/actions.js

@@ -17,7 +17,7 @@ var _analytics = require("../analytics");
 
 var _utils = require("./utils");
 
-var _styles = require("@atlaskit/editor-common/styles");
+var _panel = require("@atlaskit/editor-common/panel");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -74,7 +74,7 @@ var changePanelType = function changePanelType(panelType) {
     var newTr;
 
     if (allowCustomPanel) {
-      var previousColor = panelNode.node.attrs.panelColor || (0, _styles.getPanelTypeBackground)(previousType);
+      var previousColor = panelNode.node.attrs.panelColor || (0, _panel.getPanelTypeBackground)(previousType);
       var previousIcon = panelNode.node.attrs.panelIcon;
       var previousIconId = panelNode.node.attrs.panelIconId;
       var previousIconText = panelNode.node.attrs.panelIconText;

package/dist/cjs/plugins/panel/nodeviews/panel.js

@@ -21,7 +21,7 @@ var _hint = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/hint"));
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _styles = require("@atlaskit/editor-common/styles");
+var _panel = require("@atlaskit/editor-common/panel");
 
 var _emoji = require("@atlaskit/editor-common/emoji");
 
@@ -86,7 +86,7 @@ var PanelNodeView = /*#__PURE__*/function () {
     this.getPos = getPos;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.icon = this.dom.querySelector(".".concat(_styles.PanelSharedCssClassName.icon));
+    this.icon = this.dom.querySelector(".".concat(_panel.PanelSharedCssClassName.icon));
 
     if (!this.icon) {
       return;

package/dist/cjs/plugins/panel/pm-plugins/main.js

@@ -7,9 +7,9 @@ exports.createPlugin = void 0;
 
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
-var _styles = require("@atlaskit/editor-common/styles");
+var _panel = require("@atlaskit/editor-common/panel");
 
-var _panel = require("../nodeviews/panel");
+var _panel2 = require("../nodeviews/panel");
 
 var _types = require("../types");
 
@@ -22,10 +22,10 @@ var createPlugin = function createPlugin(dispatch, providerFactory, pluginOption
     key: _types.pluginKey,
     props: {
       nodeViews: {
-        panel: (0, _panel.getPanelNodeView)(pluginOptions, providerFactory)
+        panel: (0, _panel2.getPanelNodeView)(pluginOptions, providerFactory)
       },
       handleClickOn: (0, _utils.createSelectionClickHandler)(['panel'], function (target) {
-        return !!target.closest(".".concat(_styles.PanelSharedCssClassName.prefix));
+        return !!target.closest(".".concat(_panel.PanelSharedCssClassName.prefix));
       }, {
         useLongPressSelection: useLongPressSelection
       })

package/dist/cjs/plugins/panel/styles.js

@@ -9,13 +9,16 @@ exports.panelStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
-var _styles = require("@atlaskit/editor-common/styles");
+var _panel = require("@atlaskit/editor-common/panel");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var panelStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.PanelSharedCssClassName.content, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.panelSharedStyles, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+var panelStyles = function panelStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _panel.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _panel.PanelSharedCssClassName.content, _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _panel.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, (0, _panel.panelSharedStyles)(props), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+};
+
 exports.panelStyles = panelStyles;

package/dist/cjs/plugins/panel/toolbar.js

@@ -31,7 +31,7 @@ var _decoration = require("../base/pm-plugins/decoration");
 
 var _panelBackgroundPalette = require("../../ui/ColorPalette/Palettes/panelBackgroundPalette");
 
-var _styles = require("@atlaskit/editor-common/styles");
+var _panel = require("@atlaskit/editor-common/panel");
 
 var _utils = require("./utils");
 
@@ -125,7 +125,7 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
           return false;
         }
 
-        var previousColor = panelNode.node.attrs.panelColor || (0, _styles.getPanelTypeBackground)(panelNode.node.attrs.panelType);
+        var previousColor = panelNode.node.attrs.panelColor || (0, _panel.getPanelTypeBackground)(panelNode.node.attrs.panelType);
         var emojiInfo = panelNode.node.attrs.panelType;
         var panelEmoji = panelIconMap[emojiInfo];
         var previousEmoji = panelEmoji ? {
@@ -225,7 +225,7 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
       };
     };
 
-    var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _styles.getPanelTypeBackground)(_adfSchema.PanelType.INFO) : (0, _styles.getPanelTypeBackground)(activePanelType);
+    var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _panel.getPanelTypeBackground)(_adfSchema.PanelType.INFO) : (0, _panel.getPanelTypeBackground)(activePanelType);
     var defaultPalette = _panelBackgroundPalette.panelBackgroundPalette.find(function (item) {
       return item.value === panelColor;
     }) || {

package/dist/cjs/plugins/panel/utils.js

@@ -13,7 +13,7 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _styles = require("@atlaskit/editor-common/styles");
+var _panel = require("@atlaskit/editor-common/panel");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -36,7 +36,7 @@ var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   var style = panelColor && isCustomPanel ? "background-color: ".concat(panelColor) : '';
   var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
   var panelAttrs = {
-    class: _styles.PanelSharedCssClassName.prefix,
+    class: _panel.PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || _adfSchema.PanelType.INFO,
     style: style
   };
@@ -50,10 +50,10 @@ var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   }
 
   var iconDiv = ['div', {
-    class: _styles.PanelSharedCssClassName.icon
+    class: _panel.PanelSharedCssClassName.icon
   }];
   var contentDiv = ['div', {
-    class: _styles.PanelSharedCssClassName.content
+    class: _panel.PanelSharedCssClassName.content
   }, 0];
 
   if (hasIcon) {

package/dist/cjs/plugins/paste/handlers.js

@@ -700,12 +700,13 @@ function insertIntoPanel(tr, slice, panel) {
 
 function handleRichText(slice) {
   return function (state, dispatch) {
-    var _slice$content;
+    var _slice$content, _panelParentOverCurre;
 
     var _state$schema$nodes2 = state.schema.nodes,
         codeBlock = _state$schema$nodes2.codeBlock,
         heading = _state$schema$nodes2.heading,
-        paragraph = _state$schema$nodes2.paragraph;
+        paragraph = _state$schema$nodes2.paragraph,
+        panel = _state$schema$nodes2.panel;
     var selection = state.selection;
     var firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild; // In case user is pasting inline code,
     // any backtick ` immediately preceding it should be removed.
@@ -730,8 +731,10 @@ function handleRichText(slice) {
     var textNodes = [heading, paragraph];
     var selectionParent = selection.$to.node(selection.$to.depth - 1);
     var noNeedForSafeInsert = selection.$to.node().type.validContent(slice.content) || textNodes.includes(selection.$to.node().type) && selectionParent.type.validContent(slice.content);
+    var panelParentOverCurrentSelection = (0, _prosemirrorUtils.findParentNodeOfType)(panel)(tr.selection);
+    var isTargetPanelEmpty = panelParentOverCurrentSelection && ((_panelParentOverCurre = panelParentOverCurrentSelection.node) === null || _panelParentOverCurre === void 0 ? void 0 : _panelParentOverCurre.content.size) === 2;
 
-    if (isSliceContentListNodes) {
+    if (isSliceContentListNodes || isTargetPanelEmpty) {
       (0, _edgeCases.insertSliceForLists)({
         tr: tr,
         slice: slice