@atlaskit/editor-core 153.1.4 → 154.0.0

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

@@ -136,26 +136,30 @@ class ToolbarLists extends PureComponent {
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleBulletListClick,
         selected: bulletListActive,
+        "aria-pressed": bulletListActive,
+        "aria-label": labelUnorderedList,
         disabled: bulletListDisabled || disabled,
         title: /*#__PURE__*/React.createElement(ToolTipContent, {
           description: labelUnorderedList,
           keymap: toggleBulletListKeymap
         }),
         iconBefore: /*#__PURE__*/React.createElement(BulletListIcon, {
-          label: labelUnorderedList
+          label: ""
         })
       }), /*#__PURE__*/React.createElement(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleOrderedListClick,
         selected: orderedListActive,
+        "aria-pressed": orderedListActive,
+        "aria-label": labelOrderedList,
         disabled: orderedListDisabled || disabled,
         title: /*#__PURE__*/React.createElement(ToolTipContent, {
           description: labelOrderedList,
           keymap: toggleOrderedListKeymap
         }),
         iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
-          label: labelOrderedList
+          label: ""
         })
       }), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
     } else {
@@ -175,10 +179,14 @@ class ToolbarLists extends PureComponent {
         isOpen: isDropdownOpen,
         onOpenChange: this.onOpenChange,
         fitHeight: 188,
-        fitWidth: 175
+        fitWidth: 175,
+        shouldUseDefaultRole: true
       }, /*#__PURE__*/React.createElement(ToolbarButton, {
         spacing: isReducedSpacing ? 'none' : 'default',
         selected: bulletListActive || orderedListActive,
+        "aria-expanded": isDropdownOpen,
+        "aria-haspopup": true,
+        "aria-label": labelLists,
         disabled: disabled,
         onClick: this.handleTriggerClick,
         title: labelLists,

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

@@ -1,7 +1,7 @@
 import assert from 'assert';
 import { Selection, NodeSelection, TextSelection } from 'prosemirror-state';
 import { safeInsert, replaceSelectedNode, findSelectedNodeOfType, replaceParentNodeOfType } from 'prosemirror-utils';
-import { getValidNode } from '@atlaskit/editor-common';
+import { getValidNode } from '@atlaskit/editor-common/validator';
 import { normaliseNestedLayout } from '../../utils';
 import { getPluginState as getExtensionPluginState } from '../extension/plugin-factory';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, addAnalytics } from '../analytics';

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

@@ -21,6 +21,24 @@ export const findMediaSingleNode = (mediaPluginState, id) => {
     return memo;
   }, null);
 };
+/**
+ * Finds the media inline node with the given id.
+ * Media Inline is inserted like a media single node into the media plugin state.
+ * However it is not of type mediaSingle.
+ *
+ * @param mediaPluginState
+ * @param id
+ * @param isMediaSingle
+ * @returns {MediaNodeWithPosHandler | null}
+ */
+
+export const findMediaInlineNode = (mediaPluginState, id, isMediaSingle) => {
+  if (!isMediaSingle) {
+    return findMediaSingleNode(mediaPluginState, id);
+  }
+
+  return null;
+};
 export const findAllMediaSingleNodes = (mediaPluginState, id) => {
   const {
     mediaNodes
@@ -28,7 +46,12 @@ export const findAllMediaSingleNodes = (mediaPluginState, id) => {
   return mediaNodes.filter(nodeWithHandler => nodeWithHandler.node.attrs.id === id);
 };
 export const findMediaNode = (mediaPluginState, id, isMediaSingle) => {
-  const mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id];
+  const mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id]; // Should attempt to find media inline node if media single node or media group node is not found
+
+  if (!mediaNodeWithPos) {
+    return findMediaInlineNode(mediaPluginState, id, isMediaSingle);
+  }
+
   return mediaNodeWithPos;
 };
 export const isMobileUploadCompleted = (mediaPluginState, mediaId) => !!mediaPluginState.mediaOptions && // This flag tells us that it's a 'mobile' env.

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
 import React from 'react';

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

@@ -1,12 +1,75 @@
 import React, { useEffect, useState } from 'react';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
+import WithPluginState from '../../../ui/WithPluginState';
 import { MediaInlineCard } from '@atlaskit/media-card';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineNodeSelector } from './styles';
+import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { MediaNodeUpdater } from './mediaNodeUpdater';
+export const createMediaNodeUpdater = props => {
+  const node = props.node.firstChild;
+  return new MediaNodeUpdater({ ...props,
+    isMediaSingle: true,
+    node: node ? node : props.node,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+  });
+};
+/**
+ * Handles updating the media inline node attributes
+ * but also handling copy-paste for cross-editor of the same instance
+ * using the contextid
+ *
+ */
+
+export const updateMediaNodeAttributes = async props => {
+  const mediaNodeUpdater = createMediaNodeUpdater(props);
+  const {
+    addPendingTask
+  } = props.mediaPluginState;
+  const node = props.node;
+
+  if (!node) {
+    return;
+  }
+
+  const contextId = mediaNodeUpdater.getNodeContextId();
+
+  if (!contextId) {
+    await mediaNodeUpdater.updateContextId();
+  }
+
+  const hasDifferentContextId = await mediaNodeUpdater.hasDifferentContextId();
+
+  if (hasDifferentContextId) {
+    try {
+      const copyNode = mediaNodeUpdater.copyNode();
+      addPendingTask(copyNode);
+      await copyNode;
+    } catch {
+      return;
+    }
+  }
+};
+export const handleNewNode = props => {
+  const {
+    node,
+    mediaPluginState,
+    getPos
+  } = props;
+  mediaPluginState.handleMediaNodeMount(node, () => getPos());
+};
 export const MediaInline = props => {
   const [viewMediaClientConfig, setViewMediaClientConfig] = useState({});
   useEffect(() => {
+    handleNewNode(props);
+    updateMediaNodeAttributes(props);
     updateViewMediaClientConfig(props);
+    return () => {
+      const {
+        mediaPluginState
+      } = props;
+      mediaPluginState.handleMediaNodeUnmount(props.node);
+    };
   }, [props]);
 
   const updateViewMediaClientConfig = async props => {
@@ -64,29 +127,50 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
     const {
       providerFactory
     } = props;
+    const getPos = this.getPos;
     return /*#__PURE__*/React.createElement(WithProviders, {
-      providers: ['mediaProvider'],
+      providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
-        mediaProvider
+        mediaProvider,
+        contextIdentifierProvider
       }) => {
         if (!mediaProvider) {
           return null;
         }
 
-        return /*#__PURE__*/React.createElement(MediaInline, {
-          identifier: this.node.attrs.id,
-          mediaProvider: mediaProvider,
-          node: this.node,
-          isSelected: this.nodeInsideSelection()
+        return /*#__PURE__*/React.createElement(WithPluginState, {
+          editorView: this.view,
+          plugins: {
+            mediaPluginState: mediaStateKey
+          },
+          render: ({
+            mediaPluginState
+          }) => {
+            if (!mediaPluginState) {
+              return null;
+            }
+
+            return /*#__PURE__*/React.createElement(MediaInline, {
+              identifier: this.node.attrs.id,
+              mediaProvider: mediaProvider,
+              mediaPluginState: mediaPluginState,
+              node: this.node,
+              isSelected: this.nodeInsideSelection(),
+              view: this.view,
+              getPos: getPos,
+              contextIdentifierProvider: contextIdentifierProvider
+            });
+          }
         });
       }
     });
   }
 
 }
-export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory) => (node, view, getPos) => {
+export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent) => (node, view, getPos) => {
   return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-    providerFactory
+    providerFactory,
+    dispatchAnalyticsEvent
   }).init();
 };

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import uuidV4 from 'uuid/v4';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 import { getMediaClient, isMediaBlobUrl, getAttrsFromUrl, isImageRepresentationReady } from '@atlaskit/media-client';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
 import { replaceExternalMedia, updateAllMediaNodesAttrs, updateMediaNodeAttrs } from '../commands/helpers';

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/index.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, browser, WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
 import { SelectionBasedNodeView } from '../../../../nodeviews';

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { withImageLoader } from '@atlaskit/editor-common';
+import { withImageLoader } from '@atlaskit/editor-common/utils';
 import { Card, CardLoading } from '@atlaskit/media-card';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import React, { Component } from 'react';

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

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
-import { MediaSingle, WithProviders, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, browser } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -15,7 +15,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, ACTION } from '../../../../analytics';
 import { RECENT_SEARCH_WIDTH_IN_PX } from '../../../../../ui/LinkSearch/ToolbarComponents';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { ErrorMessage } from '@atlaskit/editor-common';
+import { ErrorMessage } from '@atlaskit/editor-common/ui';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 

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

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { ErrorReporter, browser } from '@atlaskit/editor-common';
+import { ErrorReporter, browser } from '@atlaskit/editor-common/utils';
 import assert from 'assert';
 import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common';
+import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';

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

@@ -81,13 +81,17 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     type: 'dropdown',
     title: intl.formatMessage(messages.displayThumbnail),
     options: [{
+      id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),
       selected: false,
+      disabled: false,
       onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(messages.displayThumbnail),
       selected: true,
+      disabled: false,
       onClick: () => {
         return true;
       },
@@ -143,15 +147,19 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
     type: 'dropdown',
     title: intl.formatMessage(cardMessages.inline),
     options: [{
+      id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),
       selected: true,
+      disabled: false,
       onClick: () => {
         return true;
       },
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(messages.displayThumbnail),
       selected: false,
+      disabled: false,
       onClick: changeInlineToMediaCard,
       testId: 'thumbnail-appearance'
     }]

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { ErrorMessage } from '@atlaskit/editor-common';
+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
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dropzone } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 export const DropzoneWrapper = ({
   mediaState,
   isActive,

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { MediaPicker } from '@atlaskit/media-picker';
-import { ErrorReporter } from '@atlaskit/editor-common';
+import { ErrorReporter } from '@atlaskit/editor-common/utils';
 import PickerFacade from '../../picker-facade';
 const dummyMediaPickerObject = {
   on: () => {},

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common';
+import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { Wrapper } from './styled';
 import Resizer from '../../../../ui/Resizer';

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

@@ -1,4 +1,4 @@
-import { MediaSingleDimensionHelper } from '@atlaskit/editor-common';
+import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
 import styled from 'styled-components';
 export const Wrapper = styled.div`
   & > div {

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

@@ -1,6 +1,6 @@
 import { Fragment, Slice } from 'prosemirror-model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from 'prosemirror-utils';
-import { calcPxFromPct, wrappedLayouts } from '@atlaskit/editor-common';
+import { calcPxFromPct, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 import { checkNodeDown, isEmptyParagraph } from '../../../utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';

package/dist/es2019/plugins/mentions/nodeviews/mention.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import Mention from '../ui/Mention';
 import { ReactNodeView } from '../../../nodeviews';
 import InlineNodeWrapper, { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { MentionSharedCssClassName } from '@atlaskit/editor-common';
+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';
 export const mentionsStyles = css`

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 export default class Mention extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/plugins/mobile-dimensions/actions.js

@@ -4,4 +4,5 @@ export let MobileDimensionsActionTypes;
   MobileDimensionsActionTypes["SET_KEYBOARD_HEIGHT"] = "SET_KEYBOARD_HEIGHT";
   MobileDimensionsActionTypes["SET_WINDOW_HEIGHT"] = "SET_WINDOW_HEIGHT";
   MobileDimensionsActionTypes["SET_MOBILE_PADDING_TOP"] = "SET_MOBILE_PADDING_TOP";
+  MobileDimensionsActionTypes["SET_IS_EXPANDED"] = "SET_IS_EXPANDED";
 })(MobileDimensionsActionTypes || (MobileDimensionsActionTypes = {}));

package/dist/es2019/plugins/mobile-dimensions/commands.js

@@ -11,4 +11,8 @@ export const setWindowHeight = windowHeight => createCommand({
 export const setMobilePaddingTop = paddingTop => createCommand({
   type: MobileDimensionsActionTypes.SET_MOBILE_PADDING_TOP,
   paddingTop
+});
+export const setIsExpanded = isExpanded => createCommand({
+  type: MobileDimensionsActionTypes.SET_IS_EXPANDED,
+  isExpanded
 });

package/dist/es2019/plugins/mobile-dimensions/index.js

@@ -7,7 +7,8 @@ export const MIN_TAP_SIZE_PX = 44;
 const getInitialState = () => ({
   keyboardHeight: -1,
   mobilePaddingTop: 0,
-  windowHeight: window.innerHeight
+  windowHeight: window.innerHeight,
+  isExpanded: false
 });
 /**
  * Plugin to store the dimensions of the mobile such as keyboard height and window size
@@ -22,6 +23,10 @@ const createPlugin = dispatch => {
 
     view(editorView) {
       const handleResize = () => {
+        if (rafId) {
+          window.cancelAnimationFrame(rafId);
+        }
+
         let windowInnerHeight = window.innerHeight;
         let count = 0;
 
@@ -37,7 +42,11 @@ const createPlugin = dispatch => {
             } else {
               rafId = requestAnimationFrame(checkWindowHeight);
             }
+          } else {
+            rafId = requestAnimationFrame(checkWindowHeight);
           }
+
+          windowInnerHeight = window.innerHeight;
         };
 
         rafId = requestAnimationFrame(checkWindowHeight);

package/dist/es2019/plugins/mobile-dimensions/reducer.js

@@ -15,6 +15,11 @@ export default function (state, action) {
       return { ...state,
         mobilePaddingTop: action.paddingTop
       };
+
+    case MobileDimensionsActionTypes.SET_IS_EXPANDED:
+      return { ...state,
+        isExpanded: action.isExpanded
+      };
   }
 
   return state;

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';
+import { getPanelTypeBackground } from '@atlaskit/editor-common/styles';
 export const removePanel = () => (state, dispatch) => {
   const {
     schema: {
@@ -56,13 +56,19 @@ export const changePanelType = (panelType, panelOptions = {}, allowCustomPanel =
   if (allowCustomPanel) {
     let previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(previousType);
     let previousIcon = panelNode.node.attrs.panelIcon;
+    let previousIconId = panelNode.node.attrs.panelIconId;
+    let previousIconText = panelNode.node.attrs.panelIconText;
     let newPanelOptions = {
       color: previousColor,
       emoji: previousIcon,
+      emojiId: previousIconId,
+      emojiText: previousIconText,
       ...panelOptions
     };
     newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
       panelIcon: newPanelOptions.emoji,
+      panelIconId: newPanelOptions.emojiId,
+      panelIconText: newPanelOptions.emojiText,
       panelColor: newPanelOptions.color,
       panelType
     });

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

@@ -139,6 +139,8 @@ const panelPlugin = (options = {}) => ({
             return insertPanelTypeWithAnalytics({
               panelType: PanelType.CUSTOM,
               panelIcon: ':rainbow:',
+              panelIconId: '1f308',
+              panelIconText: '🌈',
               panelColor: T50
             }, state, insert);
           }

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

@@ -1,25 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DOMSerializer } from 'prosemirror-model';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
-import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
-import NoteIcon from '@atlaskit/icon/glyph/editor/note';
-import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
-import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
-import { Emoji } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 import { panelAttrsToDom } from '../utils';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 export const panelIcons = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  note: NoteIcon,
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
   tip: TipIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
-  custom: InfoIcon
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
+  custom: PanelInfoIcon
 };
 export const PanelIcon = props => {
   const {
@@ -27,7 +23,9 @@ export const PanelIcon = props => {
     providerFactory,
     panelAttributes: {
       panelType,
-      panelIcon
+      panelIcon,
+      panelIconId,
+      panelIconText
     }
   } = props;
 
@@ -35,6 +33,8 @@ export const PanelIcon = props => {
     return /*#__PURE__*/React.createElement(Emoji, {
       providers: providerFactory,
       shortName: panelIcon,
+      id: panelIconId,
+      fallback: panelIconText,
       showTooltip: false,
       allowTextFallback: false,
       fitToHeight: akEditorCustomIconSize
@@ -77,7 +77,7 @@ class PanelNodeView {
 
   ignoreMutation(mutation) {
     // ignore mutation if it caused by the icon.
-    return mutation.target === this.icon;
+    return mutation.target === this.icon || mutation.target.parentNode === this.icon;
   }
 
 }

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

@@ -1,5 +1,5 @@
 import { Plugin } from 'prosemirror-state';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 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 'styled-components';
-import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const panelStyles = css`
   .ProseMirror {