@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -46,7 +46,7 @@ const createDropPlaceholder = (intl, allowDropLine) => {
 
 const MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export class MediaPluginStateImplementation {
-  constructor(_state, options, reactContext, mediaOptions, _dispatch) {
+  constructor(_state, options, mediaOptions, _dispatch) {
     _defineProperty(this, "allowsUploads", false);
 
     _defineProperty(this, "ignoreLinks", false);
@@ -145,7 +145,7 @@ export class MediaPluginStateImplementation {
         this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
 
         if (this.mediaProvider.uploadParams && this.uploadMediaClientConfig) {
-          await this.initPickers(this.mediaProvider.uploadParams, PickerFacade, this.reactContext);
+          await this.initPickers(this.mediaProvider.uploadParams, PickerFacade);
         } else {
           this.destroyPickers();
         }
@@ -254,20 +254,11 @@ export class MediaPluginStateImplementation {
       this.onPopupToggleCallback(false);
     });
 
-    _defineProperty(this, "shouldUseMediaPickerPopup", () => {
-      return false;
-    });
-
     _defineProperty(this, "showMediaPicker", () => {
-      if (this.openMediaPickerBrowser && !this.shouldUseMediaPickerPopup()) {
+      if (this.openMediaPickerBrowser) {
         return this.openMediaPickerBrowser();
       }
 
-      if (!this.popupPicker) {
-        return;
-      }
-
-      this.popupPicker.show();
       this.onPopupToggleCallback(true);
     });
 
@@ -348,15 +339,11 @@ export class MediaPluginStateImplementation {
         Promise.all(pickerPromises).then(resolvedPickers => this.destroyAllPickers(resolvedPickers));
       }
 
-      this.popupPicker = undefined;
       this.customPicker = undefined;
     });
 
     _defineProperty(this, "getInputMethod", pickerType => {
       switch (pickerType) {
-        case 'popup':
-          return INPUT_METHOD.PICKER_CLOUD;
-
         case 'clipboard':
           return INPUT_METHOD.CLIPBOARD;
 
@@ -467,7 +454,6 @@ export class MediaPluginStateImplementation {
       dispatch(state.tr);
     });
 
-    this.reactContext = reactContext;
     this.options = options;
     this.mediaOptions = mediaOptions;
     this.dispatch = _dispatch;
@@ -549,7 +535,7 @@ export class MediaPluginStateImplementation {
     this.destroyPickers();
   }
 
-  async initPickers(uploadParams, Picker, reactContext) {
+  async initPickers(uploadParams, Picker) {
     if (this.destroyed || !this.uploadMediaClientConfig) {
       return;
     }
@@ -565,22 +551,11 @@ export class MediaPluginStateImplementation {
         mediaClientConfig: this.uploadMediaClientConfig,
         errorReporter
       };
-      const defaultPickerConfig = {
-        uploadParams,
-        proxyReactContext: reactContext(),
-        useForgePlugins: this.mediaOptions && this.mediaOptions.useForgePlugins || false,
-        featureFlags: this.mediaOptions && this.mediaOptions.featureFlags
-      };
 
       if (this.options.customMediaPicker) {
         const customPicker = new Picker('customMediaPicker', pickerFacadeConfig, this.options.customMediaPicker).init();
         pickerPromises.push(customPicker);
         pickers.push(this.customPicker = await customPicker);
-      } else if (this.shouldUseMediaPickerPopup()) {
-        const popupPicker = new Picker('popup', pickerFacadeConfig, defaultPickerConfig).init();
-        pickerPromises.push(popupPicker);
-        pickers.push(this.popupPicker = await popupPicker);
-        this.removeOnCloseListener = this.popupPicker.onClose(this.onPopupPickerClose);
       }
 
       pickers.forEach(picker => {
@@ -621,7 +596,7 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
   return new SafePlugin({
     state: {
       init(_config, state) {
-        return new MediaPluginStateImplementation(state, options, reactContext, mediaOptions, dispatch);
+        return new MediaPluginStateImplementation(state, options, mediaOptions, dispatch);
       },
 
       apply(tr, pluginState) {

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,15 +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`
+const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 4px 0 32px;
@@ -24,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 {
@@ -106,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,
@@ -146,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()));
     });
   }
 
@@ -185,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/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,5 +1,5 @@
 import { css } from '@emotion/react';
-import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+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 = props => css`
   .ProseMirror {

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