@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -7,7 +7,6 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import commonMessages from '../../../messages';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { hoverDecoration } from '../../base/pm-plugins/decoration';
-import { renderAnnotationButton } from './annotation';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import buildLayoutButtons from '../../../ui/MediaAndEmbedsToolbar';
 import { getMediaLinkingState } from '../pm-plugins/linking';
@@ -179,7 +178,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   } = state.schema.nodes;
   const {
     allowResizing,
-    allowAnnotation,
     allowLinking,
     allowAdvancedToolBarOptions,
     allowResizingInTables,
@@ -190,16 +188,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   if (allowAdvancedToolBarOptions) {
     toolbarButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
 
-    if (toolbarButtons.length) {
-      if (allowAnnotation) {
-        toolbarButtons.push({
-          type: 'custom',
-          fallback: [],
-          render: renderAnnotationButton(pluginState, intl)
-        });
-      }
-    }
-
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'

package/dist/es2019/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { useState, useEffect, Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import LinkIcon from '@atlaskit/icon/glyph/editor/link';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { isSafeUrl } from '@atlaskit/adf-schema';
@@ -11,7 +12,7 @@ import { ToolTipContent, addLink } from '../../../keymaps';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { currentMediaNode } from '../utils/current-media-node';
 // need this wrapper, need to have 4px between items.
-const Wrapper = styled.div`
+const wrapper = css`
   display: flex;
   align-items: center;
   margin-right: 4px;
@@ -56,37 +57,41 @@ export const LinkToolbarAppearance = ({
     const isValidUrl = isSafeUrl(mediaLinkingState.link);
     const title = intl.formatMessage(linkToolbarMessages.editLink);
     const linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx(Fragment, null, jsx("div", {
+      css: wrapper
+    }, jsx(ToolbarButton, {
       onClick: onEditLink,
       title: title,
-      tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+      tooltipContent: jsx(ToolTipContent, {
         description: title,
         keymap: addLink
       })
-    }, title)), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Separator, null)), /*#__PURE__*/React.createElement(ToolbarButton, {
+    }, title)), jsx("div", {
+      css: wrapper
+    }, jsx(Separator, null)), jsx(ToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: /*#__PURE__*/React.createElement(OpenIcon, {
+      icon: jsx(OpenIcon, {
         label: linkTitle
       }),
       className: "hyperlink-open-link"
-    }), /*#__PURE__*/React.createElement(Separator, null));
+    }), jsx(Separator, null));
   } else {
     const title = intl.formatMessage(linkToolbarMessages.addLink);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx(Fragment, null, jsx(ToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,
       title: title,
-      tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+      tooltipContent: jsx(ToolTipContent, {
         description: title,
         keymap: addLink
       }),
-      icon: /*#__PURE__*/React.createElement(LinkIcon, {
+      icon: jsx(LinkIcon, {
         label: title
       })
-    }), /*#__PURE__*/React.createElement(Separator, null));
+    }), jsx(Separator, null));
   }
 };

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

@@ -1,9 +1,9 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-const Placeholder = styled.span`
+const placeholder = css`
   color: ${N200};
   width: 100%;
   text-align: center;
@@ -14,9 +14,10 @@ export const CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 export default (({
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement(Placeholder, {
+  return jsx("span", {
+    css: placeholder,
     onClick: onClick,
     "data-id": CAPTION_PLACEHOLDER_ID,
     "data-testid": "caption-placeholder"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.placeholder));
+  }, jsx(FormattedMessage, messages.placeholder));
 });

package/dist/es2019/plugins/media/ui/Media/DropPlaceholder.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { B400, B300, B200 } from '@atlaskit/theme/colors';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
@@ -7,7 +7,7 @@ import { hexToRgba } from '@atlaskit/adf-schema';
 import { injectIntl } from 'react-intl-next';
 import { dropPlaceholderMessages } from './drop-placeholder-messages';
 import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
-const IconWrapper = styled.div`
+const iconWrapper = css`
   color: ${hexToRgba(B400, 0.4) || B400};
   background: ${hexToRgba(B300, 0.6) || B300};
   border-radius: ${borderRadius()}px;
@@ -18,7 +18,7 @@ const IconWrapper = styled.div`
   align-items: center;
   justify-content: center;
 `;
-const DropLine = styled.div`
+const dropLine = css`
   background: ${B200};
   border-radius: ${borderRadius()}px;
   margin: 2px 0;
@@ -33,7 +33,9 @@ const IconWrapperComponent = props => {
   const {
     dropPlaceholderLabel
   } = dropPlaceholderMessages;
-  return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
+  return jsx("div", {
+    css: iconWrapper
+  }, jsx(DocumentFilledIcon, {
     label: intl.formatMessage(dropPlaceholderLabel),
     size: "medium"
   }));
@@ -42,4 +44,6 @@ const IconWrapperComponent = props => {
 const IntlIconWrapper = injectIntl(IconWrapperComponent);
 export default (({
   type = 'group'
-}) => type === 'single' ? /*#__PURE__*/React.createElement(DropLine, null) : /*#__PURE__*/React.createElement(IntlIconWrapper, null));
+}) => type === 'single' ? jsx("div", {
+  css: dropLine
+}) : jsx(IntlIconWrapper, null));

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

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { ErrorMessage } from '@atlaskit/editor-common/ui';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink'; // Common Translations will live here
@@ -7,16 +10,14 @@ import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink'; // Common Tra
 import PanelTextInput from '../../../ui/PanelTextInput';
 import Button from '../../floating-toolbar/ui/Button';
 import Separator from '../../floating-toolbar/ui/Separator';
-import { Container, UrlInputWrapper } from '../../../ui/LinkSearch/ToolbarComponents';
+import { container, containerWithProvider, inputWrapper } from '../../../ui/LinkSearch/ToolbarComponents';
 import RecentSearch from '../../../ui/LinkSearch';
 import { linkToolbarMessages } from '../../../messages';
 import { normalizeUrl } from '../../hyperlink/utils';
-import styled from 'styled-components';
 import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
-const ValidationWrapper = styled.section`
-  display: flex;
+const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 4px 0 32px;
@@ -25,7 +26,7 @@ const ValidationWrapper = styled.section`
   display: flex;
   flex-direction: column;
 `;
-const ButtonWrapper = styled.span`
+const buttonWrapper = css`
   padding: 4px 8px 4px 0px;
 `;
 export class LinkAddToolbar extends React.PureComponent {
@@ -107,24 +108,28 @@ export class LinkAddToolbar extends React.PureComponent {
       const formatLinkAddressText = formatMessage(mediaLinkToolbarMessages.backLink);
       const formatUnlinkText = formatMessage(linkToolbarMessages.unlink);
       const errorsList = this.state.validationErrors.map(function (error, index) {
-        return /*#__PURE__*/React.createElement(ErrorMessage, {
+        return jsx(ErrorMessage, {
           key: index
         }, error);
       });
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "recent-list"
-      }, /*#__PURE__*/React.createElement(Container, {
-        provider: !!activityProvider
-      }, /*#__PURE__*/React.createElement(UrlInputWrapper, null, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      }, jsx("div", {
+        css: [container, !!activityProvider && containerWithProvider]
+      }, jsx("div", {
+        css: inputWrapper
+      }, jsx("span", {
+        css: buttonWrapper
+      }, jsx(Button, {
         title: formatLinkAddressText,
-        icon: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
+        icon: jsx(ChevronLeftLargeIcon, {
           label: formatLinkAddressText
         }),
         onClick: () => this.handleOnBack({
           url: value,
           inputMethod: currentInputMethod
         })
-      })), /*#__PURE__*/React.createElement(PanelTextInput, {
+      })), jsx(PanelTextInput, {
         testId: "media-link-input",
         placeholder: getPlaceholder(!!activityProvider),
         autoFocus: true,
@@ -147,13 +152,15 @@ export class LinkAddToolbar extends React.PureComponent {
           onChange(value);
         },
         onKeyDown: onKeyDown
-      }), normalizeUrl(displayUrl) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Button, {
+      }), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
         title: formatUnlinkText,
-        icon: /*#__PURE__*/React.createElement(EditorUnlinkIcon, {
+        icon: jsx(EditorUnlinkIcon, {
           label: formatUnlinkText
         }),
         onClick: this.handleUnlink
-      }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), renderRecentList()));
+      }))), !!errorsList.length && jsx("section", {
+        css: validationWrapper
+      }, errorsList), renderRecentList()));
     });
   }
 
@@ -186,7 +193,7 @@ export class LinkAddToolbar extends React.PureComponent {
       providerFactory,
       displayUrl
     } = this.props;
-    return /*#__PURE__*/React.createElement(RecentSearch, {
+    return jsx(RecentSearch, {
       defaultUrl: normalizeUrl(displayUrl),
       providerFactory: providerFactory,
       onSubmit: this.handleSubmit,

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

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { MediaPicker } from '@atlaskit/media-picker';
 import { ErrorReporter } from '@atlaskit/editor-common/utils';
 import PickerFacade from '../../picker-facade';
 const dummyMediaPickerObject = {
@@ -47,7 +46,7 @@ export default class PickerFacadeProvider extends React.Component {
        * Eventually PickerFacade will be removed and replaced with a new abstraction explained here https://product-fabric.atlassian.net/browse/MS-1937
        */
 
-      const pickerFacadeInstance = await new PickerFacade('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, MediaPicker, analyticsName).init();
+      const pickerFacadeInstance = await new PickerFacade('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
       /**
        * Based on the `initPickers` method in `MediaPluginState` we need these 2 `onNewMedia` subscriptions.
        * First one in order to trigger the entire process of uploading a file for when `onPreviewUpdate` is called

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

@@ -59,7 +59,7 @@ export class MediaPickerComponents extends React.Component {
           featureFlags: featureFlags,
           editorDomElement: editorDomElement,
           appearance: appearance
-        }), !mediaState.shouldUseMediaPickerPopup() && /*#__PURE__*/React.createElement(BrowserWrapper, {
+        }), /*#__PURE__*/React.createElement(BrowserWrapper, {
           onBrowseFn: this.onBrowseFn,
           mediaState: mediaState,
           featureFlags: featureFlags

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

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Wrapper } from './styled';
+import { wrapperStyle } from './styled';
 import Resizer from '../../../../ui/Resizer';
 import { snapTo, handleSides, imageAlignmentMap } from '../../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../utils/media-single';
@@ -323,13 +326,15 @@ export default class ResizableMediaSingle extends React.Component {
       offsetLeft: this.state.offsetLeft,
       wrappedLayout: this.wrappedLayout
     };
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      layout: layout,
-      isResized: !!pctWidth,
-      containerWidth: containerWidth || origWidth,
-      innerRef: this.saveWrapper,
-      fullWidthMode: fullWidthMode
-    }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+    return jsx("div", {
+      ref: this.saveWrapper,
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || origWidth,
+        fullWidthMode
+      })
+    }, jsx(Resizer, _extends({}, this.props, {
       ratio: ratio,
       width: initialWidth,
       selected: selected,
@@ -347,7 +352,7 @@ export default class ResizableMediaSingle extends React.Component {
       // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
       // This workaround adds an empty div inside the resize handler to prevent the issue.
       ,
-      handleComponentFunc: () => /*#__PURE__*/React.createElement("div", {
+      handleComponentFunc: () => jsx("div", {
         contentEditable: false
       })
     }), children));

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

@@ -1,10 +1,9 @@
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export const Wrapper = styled.div`
+export const wrapperStyle = props => css`
   & > div {
-    ${MediaSingleDimensionHelper};
+    ${MediaSingleDimensionHelper(props)};
     position: relative;
     clear: both;
   }
-`;
-Wrapper.displayName = 'ResizerWrapper';
+`;

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

@@ -6,7 +6,7 @@ import { checkNodeDown, isEmptyParagraph } from '../../../utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics, ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
-import { safeInsert } from '../../../utils/insert';
+import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { getFeatureFlags } from '../../feature-flags-context';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
@@ -90,6 +90,8 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod) => {
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
 };
 export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert) => {
+  var _state$selection$$fro;
+
   if (collection === undefined) {
     return false;
   }
@@ -98,17 +100,19 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
     state,
     dispatch
   } = view;
-  const grandParent = state.selection.$from.node(-1);
+  const grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  const parentType = state.selection.$from.parent.type;
   const node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
-  const shouldSplit = grandParent && grandParent.type.validContent(Fragment.from(node));
   let fileExtension;
 
   if (mediaState.fileName) {
     const 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 (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, node)) {
     insertNodesWithOptionalParagraph([node], {
       fileExtension,
       inputMethod

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { N500, N30A } from '@atlaskit/theme/colors';

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

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
 import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import { AvatarStyle, CapitalizedStyle, MentionItemStyle, NameSectionStyle, RowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT } from './styles';
+import { avatarStyle, capitalizedStyle, mentionItemStyle, nameSectionStyle, rowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT, mentionItemSelectedStyle } from './styles';
 import { messages } from '../../messages';
 export const INVITE_ITEM_MIN_HEIGHT = AVATAR_HEIGHT + ROW_SIDE_PADDING * 2;
 export const INVITE_ITEM_DESCRIPTION = {
@@ -39,18 +42,28 @@ const InviteItem = ({
       onMount();
     }
   }, [onMount]);
-  return /*#__PURE__*/React.createElement(MentionItemStyle, {
-    selected: selected,
+  return jsx("div", {
+    css: [mentionItemStyle, selected && mentionItemSelectedStyle],
     onMouseDown: onSelected,
     onMouseEnter: onItemMouseEnter,
     "data-id": INVITE_ITEM_DESCRIPTION.id
-  }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, null, /*#__PURE__*/React.createElement(AddIcon, {
+  }, jsx("div", {
+    css: rowStyle
+  }, jsx("span", {
+    css: avatarStyle
+  }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
     primaryColor: N300
-  })), /*#__PURE__*/React.createElement(NameSectionStyle, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.inviteItemTitle, {
+  })), jsx("div", {
+    css: nameSectionStyle,
+    "data-testid": "name-section"
+  }, jsx(FormattedMessage, _extends({}, messages.inviteItemTitle, {
     values: {
       userRole: userRole || 'basic',
-      productName: /*#__PURE__*/React.createElement(CapitalizedStyle, null, productName)
+      productName: jsx("span", {
+        css: capitalizedStyle,
+        "data-testid": "capitalized-message"
+      }, productName)
     }
   })))));
 };

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

@@ -1,8 +1,7 @@
-import styled from 'styled-components'; // prettier-ignore
-
+import { css } from '@emotion/react';
 import { N30, N300 } from '@atlaskit/theme/colors';
 export const ROW_SIDE_PADDING = 14;
-export const RowStyle = styled.div`
+export const rowStyle = css`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -13,7 +12,7 @@ export const RowStyle = styled.div`
   vertical-align: middle;
 `;
 export const AVATAR_HEIGHT = 36;
-export const AvatarStyle = styled.span`
+export const avatarStyle = css`
   position: relative;
   flex: initial;
   opacity: inherit;
@@ -26,20 +25,23 @@ export const AvatarStyle = styled.span`
     padding: 6px;
   }
 `;
-export const NameSectionStyle = styled.div`
+export const nameSectionStyle = css`
   flex: 1;
   min-width: 0;
   margin-left: 14px;
   color: ${N300};
-  opacity: ${props => props.restricted ? '0.5' : 'inherit'};
+  opacity: inherit;
 `;
-export const MentionItemStyle = styled.div`
-  background-color: ${props => props.selected ? N30 : 'transparent'};
+export const mentionItemStyle = css`
+  background-color: transparent;
   display: block;
   overflow: hidden;
   list-style-type: none;
   cursor: pointer;
 `;
-export const CapitalizedStyle = styled.span`
+export const mentionItemSelectedStyle = css`
+  background-color: ${N30};
+`;
+export const capitalizedStyle = css`
   text-transform: capitalize;
 `;

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

@@ -2,7 +2,7 @@ import { removeParentNodeOfType, findSelectedNodeOfType, removeSelectedNode, fin
 import { NodeSelection } from 'prosemirror-state';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, addAnalytics } from '../analytics';
 import { findPanel } from './utils';
-import { getPanelTypeBackground } from '@atlaskit/editor-common/styles';
+import { getPanelTypeBackground } from '@atlaskit/editor-common/panel';
 export const removePanel = () => (state, dispatch) => {
   const {
     schema: {

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

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { DOMSerializer } from 'prosemirror-model';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { Emoji } from '@atlaskit/editor-common/emoji';
 import { panelAttrsToDom } from '../utils';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';

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

@@ -1,5 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../types';
 import { createSelectionClickHandler } from '../../selection/utils';

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

@@ -1,7 +1,7 @@
-import { css } from 'styled-components';
-import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { css } from '@emotion/react';
+import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export const panelStyles = css`
+export const panelStyles = props => css`
   .ProseMirror {
     .${PanelSharedCssClassName.prefix} {
       cursor: pointer;
@@ -33,7 +33,7 @@ export const panelStyles = css`
       }
     }
 
-    ${panelSharedStyles};
+    ${panelSharedStyles(props)};
   }
 
   .${PanelSharedCssClassName.prefix}.${akEditorSelectedNodeClassName}:not(.danger) {

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

@@ -9,7 +9,7 @@ import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { panelBackgroundPalette } from '../../ui/ColorPalette/Palettes/panelBackgroundPalette';
-import { getPanelTypeBackground } from '@atlaskit/editor-common/styles';
+import { getPanelTypeBackground } from '@atlaskit/editor-common/panel';
 import { findPanel } from './utils';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';

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

@@ -1,6 +1,6 @@
 import { findSelectedNodeOfType, findParentNodeOfType } from 'prosemirror-utils';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 export const findPanel = (state, selection) => {
   const {
     panel

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

@@ -610,12 +610,13 @@ export function insertIntoPanel(tr, slice, panel) {
 }
 export function handleRichText(slice) {
   return (state, dispatch) => {
-    var _slice$content;
+    var _slice$content, _panelParentOverCurre;
 
     const {
       codeBlock,
       heading,
-      paragraph
+      paragraph,
+      panel
     } = state.schema.nodes;
     const {
       selection
@@ -643,8 +644,10 @@ export function handleRichText(slice) {
     const textNodes = [heading, paragraph];
     const selectionParent = selection.$to.node(selection.$to.depth - 1);
     const noNeedForSafeInsert = selection.$to.node().type.validContent(slice.content) || textNodes.includes(selection.$to.node().type) && selectionParent.type.validContent(slice.content);
+    let panelParentOverCurrentSelection = findParentNodeOfType(panel)(tr.selection);
+    const isTargetPanelEmpty = panelParentOverCurrentSelection && ((_panelParentOverCurre = panelParentOverCurrentSelection.node) === null || _panelParentOverCurre === void 0 ? void 0 : _panelParentOverCurre.content.size) === 2;
 
-    if (isSliceContentListNodes) {
+    if (isSliceContentListNodes || isTargetPanelEmpty) {
       insertSliceForLists({
         tr,
         slice