@atlaskit/editor-core 149.0.1 → 150.0.2

package/dist/esm/messages.js

@@ -89,10 +89,10 @@ export default defineMessages({
     defaultMessage: 'Remove',
     description: 'Delete the element (image, panel, table, etc.) from your document'
   },
-  hideEmoji: {
-    id: 'fabric.editor.hideEmoji',
-    defaultMessage: 'Hide emoji',
-    description: 'Hide the emoji panel icon from custom panel'
+  removeEmoji: {
+    id: 'fabric.editor.removeEmoji',
+    defaultMessage: 'Remove emoji',
+    description: 'Remove the emoji panel icon from custom panel'
   },
   visit: {
     id: 'fabric.editor.visit',

package/dist/esm/plugins/analytics/types/enums.js

@@ -90,7 +90,6 @@ export var ACTION;
   ACTION["VIEWED"] = "viewed";
   ACTION["VISITED"] = "visited";
   ACTION["WITH_PLUGIN_STATE_CALLED"] = "withPluginStateCalled";
-  ACTION["FIXED"] = "fixed";
   ACTION["RENDERED"] = "rendered";
   ACTION["ON_EDITOR_READY_CALLBACK"] = "onEditorReadyCallback";
   ACTION["ON_CHANGE_CALLBACK"] = "onChangeCalled";

package/dist/esm/plugins/analytics/types/node-events.js

@@ -1,6 +1,7 @@
 export var LAYOUT_TYPE;
 
 (function (LAYOUT_TYPE) {
+  LAYOUT_TYPE["SINGLE_COL"] = "singleColumn";
   LAYOUT_TYPE["TWO_COLS_EQUAL"] = "twoColumnsEqual";
   LAYOUT_TYPE["THREE_COLS_EQUAL"] = "threeColumnsEqual";
   LAYOUT_TYPE["LEFT_SIDEBAR"] = "twoColumnsLeftSidebar";

package/dist/esm/plugins/collab-edit/ui/to-avatar.js

@@ -15,16 +15,12 @@ var toAvatar = function toAvatar(participant) {
   };
 };
 
-var participantEquals = function participantEquals(_ref, _ref2) {
+export default memoizeOne(toAvatar, function participantEquals(_ref, _ref2) {
   var _ref3 = _slicedToArray(_ref, 1),
-      aRaw = _ref3[0];
+      a = _ref3[0];
 
   var _ref4 = _slicedToArray(_ref2, 1),
-      bRaw = _ref4[0];
+      b = _ref4[0];
 
-  var a = aRaw;
-  var b = bRaw;
   return a.name === b.name && a.avatar === b.avatar && a.sessionId === b.sessionId;
-};
-
-export default memoizeOne(toAvatar, participantEquals);
+});

package/dist/esm/plugins/floating-toolbar/ui/{EditorHideEmojiIcon.js → EditorRemoveEmojiIcon.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-export default function EditorHideEmojiIcon() {
+export default function EditorRemoveEmojiIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "24",
     height: "24",

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -6,7 +6,7 @@ var _templateObject;
 import React from 'react';
 import styled from 'styled-components';
 import Button from '@atlaskit/button';
-import { Popup, WithProviders } from '@atlaskit/editor-common';
+import { Popup, withOuterListeners, WithProviders } from '@atlaskit/editor-common';
 import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
@@ -20,6 +20,8 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       isPopupOpen = _React$useState2[0],
       setIsPopupOpen = _React$useState2[1];
 
+  var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
+
   var togglePopup = function togglePopup() {
     setIsPopupOpen(!isPopupOpen);
   };
@@ -34,10 +36,11 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(EmojiPicker, {
+    return /*#__PURE__*/React.createElement(EmojiPickerWithListener, {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
-      onPickerRef: function onPickerRef() {}
+      onPickerRef: function onPickerRef() {},
+      handleClickOutside: togglePopup
     });
   };
 

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.test.js

@@ -48,6 +48,20 @@ describe('emoji-picker-button', function () {
 
     expect(wrapper.find('Popup')).toHaveLength(1);
   });
+  it('should close EmojiPicker popup after clicking outside', function () {
+    // clicking on the button to open the popup
+    wrapper.find('button').simulate('click'); // make sure the popup and picker are shown
+
+    expect(wrapper.find('Popup')).toHaveLength(1);
+    var emojiPicker = wrapper.find('EmojiPickerInternal').instance(); // calling click outside
+
+    act(function () {
+      emojiPicker.props.handleClickOutside();
+    });
+    wrapper.update(); // make sure popup is hidden
+
+    expect(wrapper.find('Popup')).toHaveLength(0);
+  });
   it('should hide popup and call onChange after selecting an emoji', function () {
     // click the button
     wrapper.find('button').simulate('click'); // make sure the popup and picker are shown

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

@@ -38,6 +38,7 @@ import { messages } from './messages';
 import { createItems } from './create-items';
 import { BlockInsertMenu } from './block-insert-menu';
 import { insertHorizontalRule } from '../../../rule/commands';
+import withOuterListeners from '../../../../ui/with-outer-listeners';
 /**
  * Checks if an element is detached (i.e. not in the current document)
  */
@@ -48,6 +49,8 @@ var isDetachedElement = function isDetachedElement(el) {
 
 var noop = function noop() {};
 
+var EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
+
 var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ToolbarInsertBlock, _React$PureComponent);
 
@@ -140,6 +143,20 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleEmojiPressEscape", function () {
+      _this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleEmojiClickOutside", function (e) {
+      // Ignore click events for detached elements.
+      // Workaround for FS-1322 - where two onClicks fire - one when the upload button is
+      // still in the document, and one once it's detached. Does not always occur, and
+      // may be a side effect of a react render optimisation
+      if (e.target && !isDetachedElement(e.target)) {
+        _this.toggleEmojiPicker(INPUT_METHOD.TOOLBAR);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleEmojiButtonRef", function (button) {
       var ref = ReactDOM.findDOMNode(button);
 
@@ -164,27 +181,6 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onPickerRef", function (ref) {
-      if (ref) {
-        document.addEventListener('click', _this.handleClickOutside);
-      } else {
-        document.removeEventListener('click', _this.handleClickOutside);
-      }
-
-      _this.pickerRef = ref;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (e) {
-      var picker = _this.pickerRef && ReactDOM.findDOMNode(_this.pickerRef); // Ignore click events for detached elements.
-      // Workaround for FS-1322 - where two onClicks fire - one when the upload button is
-      // still in the document, and one once it's detached. Does not always occur, and
-      // may be a side effect of a react render optimisation
-
-      if (!picker || e.target && !isDetachedElement(e.target) && !picker.contains(e.target)) {
-        _this.toggleEmojiPicker();
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this), "toggleLinkPanel", function (inputMethod) {
       var editorView = _this.props.editorView;
       showLinkToolbar(inputMethod)(editorView.state, editorView.dispatch);
@@ -489,10 +485,11 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement
-      }, /*#__PURE__*/React.createElement(AkEmojiPicker, {
+      }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
         emojiProvider: emojiProvider,
         onSelection: this.handleSelectedEmoji,
-        onPickerRef: this.onPickerRef
+        handleClickOutside: this.handleEmojiClickOutside,
+        handleEscapeKeydown: this.handleEmojiPressEscape
       }));
     }
   }, {

package/dist/esm/plugins/layout/actions.js

@@ -13,11 +13,15 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analyt
 import { addAnalytics, withAnalytics } from '../analytics/utils';
 import { LAYOUT_TYPE } from '../analytics/types/node-events';
 import { pluginKey } from './pm-plugins/plugin-key';
+export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
 
 var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   switch (presetLayout) {
+    case 'single':
+      return [100];
+
     case 'two_equal':
       return [50, 50];
 
@@ -46,6 +50,9 @@ export var getPresetLayout = function getPresetLayout(section) {
   }).join(',');
 
   switch (widths) {
+    case '100':
+      return 'single';
+
     case '33.33,33.33,33.33':
       return 'three_equal';
 
@@ -101,6 +108,44 @@ export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAn
     eventType: EVENT_TYPE.TRACK
   })(insertLayoutColumns);
 };
+/**
+ * Add a column to the right of existing layout
+ */
+
+function addColumn(schema, pos) {
+  return function (tr) {
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+  };
+}
+
+function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
+  return function (tr) {
+    if (isEmptyDocument(column)) {
+      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(insideRightEdgePos), Slice.empty);
+    } else {
+      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(columnPos + 1), Slice.empty);
+    }
+  };
+}
+
+var fromTwoColsToThree = addColumn;
+var fromOneColToTwo = addColumn;
+var fromTwoColsToOne = removeLastColumnInLayout;
+var fromThreeColsToTwo = removeLastColumnInLayout;
+
+var fromOneColToThree = function fromOneColToThree(schema, pos) {
+  return function (tr) {
+    addColumn(schema, pos)(tr);
+    addColumn(schema, pos)(tr);
+  };
+};
+
+var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePos) {
+  var thirdColumn = node.content.child(2);
+  fromThreeColsToTwo(thirdColumn, insideRightEdgePos - thirdColumn.nodeSize, insideRightEdgePos)(tr);
+  var secondColumn = node.content.child(1);
+  fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
+};
 /**
  * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
  * Switching from 2 -> 3 just adds a new one at the end
@@ -108,25 +153,30 @@ export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAn
  * removing it
  */
 
+
 function forceColumnStructure(state, node, pos, presetLayout) {
   var tr = state.tr;
   var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
-  var numCols = node.childCount;
+  var numCols = node.childCount; // 3 columns -> 2 columns
 
   if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
     var thirdColumn = node.content.child(2);
-    var thirdColumnPos = insideRightEdgeOfLayoutSection - thirdColumn.nodeSize;
-
-    if (isEmptyDocument(thirdColumn)) {
-      tr.replaceRange( // end pos of second column
-      tr.mapping.map(thirdColumnPos - 1), tr.mapping.map(insideRightEdgeOfLayoutSection), Slice.empty);
-    } else {
-      tr.replaceRange( // end pos of second column
-      tr.mapping.map(thirdColumnPos - 1), // start pos of third column
-      tr.mapping.map(thirdColumnPos + 1), Slice.empty);
-    }
+    var columnPos = insideRightEdgeOfLayoutSection - thirdColumn.nodeSize;
+    fromThreeColsToTwo(thirdColumn, columnPos, insideRightEdgeOfLayoutSection)(tr); // 2 columns -> 3 columns
   } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    tr.replaceWith(tr.mapping.map(insideRightEdgeOfLayoutSection), tr.mapping.map(insideRightEdgeOfLayoutSection), state.schema.nodes.layoutColumn.createAndFill());
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr); // 2 columns -> 1 column
+  } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
+    var secondColumn = node.content.child(1);
+
+    var _columnPos = insideRightEdgeOfLayoutSection - secondColumn.nodeSize;
+
+    fromTwoColsToOne(secondColumn, _columnPos, insideRightEdgeOfLayoutSection)(tr); // 3 columns -> 1 column
+  } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
+    fromThreeColstoOne(node, tr, insideRightEdgeOfLayoutSection); // 1 column -> 2 columns
+  } else if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 1) {
+    fromOneColToTwo(state.schema, insideRightEdgeOfLayoutSection)(tr); // 1 column -> 3 columns
+  } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 1) {
+    fromOneColToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
   }
 
   return tr;
@@ -219,7 +269,7 @@ function getLayoutChange(node, pos, schema) {
       return;
     }
 
-    var presetLayout = node.childCount === 2 ? 'two_equal' : 'three_equal';
+    var presetLayout = node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
     var fixedColumns = columnWidth(node, schema, getWidthsForPreset(presetLayout));
     return {
       from: pos + 1,
@@ -312,6 +362,9 @@ export var deleteActiveLayoutNode = function deleteActiveLayoutNode(state, dispa
 
 var formatLayoutName = function formatLayoutName(layout) {
   switch (layout) {
+    case 'single':
+      return LAYOUT_TYPE.SINGLE_COL;
+
     case 'two_equal':
       return LAYOUT_TYPE.TWO_COLS_EQUAL;
 

package/dist/esm/plugins/layout/index.js

@@ -35,10 +35,11 @@ var layoutPlugin = function layoutPlugin() {
         var _ref = pluginKey.getState(state),
             pos = _ref.pos,
             allowBreakout = _ref.allowBreakout,
-            addSidebarLayouts = _ref.addSidebarLayouts;
+            addSidebarLayouts = _ref.addSidebarLayouts,
+            allowSingleColumnLayout = _ref.allowSingleColumnLayout;
 
         if (pos !== null) {
-          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts);
+          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout);
         }
 
         return undefined;

package/dist/esm/plugins/layout/pm-plugins/main.js

@@ -57,13 +57,15 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
   var maybeLayoutSection = findParentNodeOfType(state.schema.nodes.layoutSection)(state.selection);
   var allowBreakout = options.allowBreakout || false;
   var addSidebarLayouts = options.UNSAFE_addSidebarLayouts || false;
+  var allowSingleColumnLayout = options.UNSAFE_allowSingleColumnLayout || false;
   var pos = maybeLayoutSection ? maybeLayoutSection.pos : null;
   var selectedLayout = getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node, DEFAULT_LAYOUT);
   return {
     pos: pos,
     allowBreakout: allowBreakout,
     addSidebarLayouts: addSidebarLayouts,
-    selectedLayout: selectedLayout
+    selectedLayout: selectedLayout,
+    allowSingleColumnLayout: allowSingleColumnLayout
   };
 };
 

package/dist/esm/plugins/layout/toolbar-messages.js

@@ -1,5 +1,10 @@
 import { defineMessages } from 'react-intl';
 export var toolbarMessages = defineMessages({
+  singleColumn: {
+    id: 'fabric.editor.single',
+    defaultMessage: 'Single column',
+    description: 'Layout with one single column'
+  },
   twoColumns: {
     id: 'fabric.editor.twoColumns',
     defaultMessage: 'Two columns',

package/dist/esm/plugins/layout/toolbar.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { findDomRefAtPos } from 'prosemirror-utils';
+import EditorLayoutSingleIcon from '@atlaskit/icon/glyph/editor/layout-single';
 import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
 import LayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-left-sidebar';
@@ -21,6 +22,12 @@ var LAYOUT_TYPES = [{
   title: toolbarMessages.threeColumns,
   icon: LayoutThreeEqualIcon
 }];
+var LAYOUT_TYPES_WITH_SINGLE_COL = [{
+  id: 'editor.layout.singeLayout',
+  type: 'single',
+  title: toolbarMessages.singleColumn,
+  icon: EditorLayoutSingleIcon
+}].concat(LAYOUT_TYPES);
 var SIDEBAR_LAYOUT_TYPES = [{
   id: 'editor.layout.twoRightSidebar',
   type: 'two_right_sidebar',
@@ -51,7 +58,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout) {
 };
 
 export var layoutToolbarTitle = 'Layout floating controls';
-export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts) {
+export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout) {
   var node = state.doc.nodeAt(pos);
 
   if (node) {
@@ -73,13 +80,14 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       onFocus: hoverDecoration(nodeType, true),
       onBlur: hoverDecoration(nodeType, false)
     };
+    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {
         return findDomRefAtPos(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [].concat(_toConsumableArray(LAYOUT_TYPES.map(function (i) {
+      items: [].concat(_toConsumableArray(layoutTypes.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout);
       })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
         return buildLayoutButton(intl, i, currentLayout);

package/dist/esm/plugins/list/pm-plugins/main.js

@@ -7,11 +7,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { findParentNodeOfType } from 'prosemirror-utils';
-import { addAnalytics, ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
 import { isWrappingPossible } from '../utils/selection';
-import { isListNode, JoinDirection, joinSiblingLists } from '../utils/node';
+import { isListNode } from '../utils/node';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
-import { findRootParentListNode } from '../utils/find';
 var listPluginKey = new PluginKey('listPlugin');
 export var pluginKey = listPluginKey;
 var initialState = {
@@ -112,40 +110,6 @@ export var createPlugin = function createPlugin(eventDispatch) {
   return new Plugin({
     state: createPluginState(eventDispatch, createInitialState),
     key: listPluginKey,
-    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
-      var lastTransaction = transactions[transactions.length - 1];
-
-      if (!lastTransaction.docChanged || !lastTransaction.selectionSet) {
-        return;
-      }
-
-      var tr = newState.tr;
-      var rootList = findRootParentListNode(tr.selection.$from);
-
-      if (!rootList) {
-        return;
-      }
-
-      var listsJoined = joinSiblingLists({
-        tr: tr,
-        direction: JoinDirection.RIGHT
-      });
-
-      if (tr.docChanged) {
-        var orderedListsJoined = listsJoined.orderedList,
-            bulletListsJoined = listsJoined.bulletList;
-        addAnalytics(newState, tr, {
-          action: ACTION.FIXED,
-          actionSubject: ACTION_SUBJECT.LIST,
-          eventType: EVENT_TYPE.TRACK,
-          attributes: {
-            orderedListsJoined: orderedListsJoined,
-            bulletListsJoined: bulletListsJoined
-          }
-        });
-        return tr;
-      }
-    },
     props: {
       decorations: function decorations(state) {
         var _getPluginState = getPluginState(state),

package/dist/esm/plugins/mentions/analytics.js

@@ -81,7 +81,7 @@ export var buildTypeAheadInviteItemViewedPayload = function buildTypeAheadInvite
     userRole: userRole
   });
 };
-export var buildTypeAheadInviteExposurePayload = function buildTypeAheadInviteExposurePayload(shouldEnableInvite, sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole) {
+export var buildTypeAheadInviteExposurePayload = function buildTypeAheadInviteExposurePayload(sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole) {
   var _ref2 = contextIdentifierProvider || {},
       containerId = _ref2.containerId,
       objectId = _ref2.objectId,
@@ -89,8 +89,7 @@ export var buildTypeAheadInviteExposurePayload = function buildTypeAheadInviteEx
 
   return buildAnalyticsPayload('feature', 'exposed', OPERATIONAL_EVENT_TYPE, sessionId, {
     flagKey: 'confluence.frontend.invite.from.mention',
-    value: shouldEnableInvite,
-    cohort: inviteExperimentCohort,
+    value: inviteExperimentCohort || 'not-enrolled',
     containerId: containerId,
     objectId: objectId,
     childObjectId: childObjectId,

package/dist/esm/plugins/mentions/type-ahead/index.js

@@ -261,6 +261,13 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
 
           if (mentions.length === 0 && firstQueryWithoutResults === null) {
             firstQueryWithoutResults = query;
+          } // Growth (El-dorado) experiment design hard requirement
+
+
+          if (mentionItems.length <= 2) {
+            var inviteExperimentCohort = mentionProvider.inviteExperimentCohort,
+                userRole = mentionProvider.userRole;
+            fireEvent(buildTypeAheadInviteExposurePayload(sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole));
           }
 
           if (!mentionProvider.shouldEnableInvite || mentionItems.length > 2) {
@@ -286,18 +293,6 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
     },
     onOpen: function onOpen(editorState) {
       firstQueryWithoutResults = null;
-      var pluginState = getMentionPluginState(editorState);
-
-      if (!pluginState || !pluginState.mentionProvider) {
-        return null;
-      }
-
-      var contextIdentifierProvider = pluginState.contextIdentifierProvider,
-          _pluginState$mentionP = pluginState.mentionProvider,
-          shouldEnableInvite = _pluginState$mentionP.shouldEnableInvite,
-          inviteExperimentCohort = _pluginState$mentionP.inviteExperimentCohort,
-          userRole = _pluginState$mentionP.userRole;
-      fireEvent(buildTypeAheadInviteExposurePayload(!!shouldEnableInvite, sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole));
     },
     selectItem: function selectItem(state, item, insert, _ref8) {
       var mode = _ref8.mode,

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

@@ -13,7 +13,7 @@ import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common';
 import { Emoji } from '@atlaskit/editor-common';
 import { panelAttrsToDom } from '../utils';
-var fitToHeight = 20;
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 export var panelIcons = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -36,7 +36,7 @@ export var PanelIcon = function PanelIcon(props) {
       shortName: panelIcon,
       showTooltip: false,
       allowTextFallback: false,
-      fitToHeight: fitToHeight
+      fitToHeight: akEditorCustomIconSize
     });
   }
 
@@ -66,8 +66,10 @@ var PanelNodeView = /*#__PURE__*/function () {
 
     if (!this.icon) {
       return;
-    }
+    } // set contentEditable as false to be able to select the custom panels with keyboard
+
 
+    this.icon.contentEditable = 'false';
     ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
       allowCustomPanel: pluginOptions.UNSAFE_allowCustomPanel,
       panelAttributes: node.attrs,

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

@@ -5,7 +5,7 @@ import NoteIcon from '@atlaskit/icon/glyph/editor/note';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
-import HideEmojiIcon from '../floating-toolbar/ui/EditorHideEmojiIcon';
+import RemoveEmojiIcon from '../floating-toolbar/ui/EditorRemoveEmojiIcon';
 import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
@@ -218,13 +218,15 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
         return changeEmoji(emojiShortName);
       }
     };
-    items.push(emojiPicker, {
-      id: 'editor.panel.hideEmoji',
+    var removeEmojiButton = {
+      id: 'editor.panel.removeEmoji',
       type: 'button',
-      icon: HideEmojiIcon,
+      icon: RemoveEmojiIcon,
       onClick: removeEmoji(),
-      title: formatMessage(commonMessages.hideEmoji)
-    }, {
+      title: formatMessage(commonMessages.removeEmoji),
+      disabled: activePanelIcon ? false : true
+    };
+    items.push(emojiPicker, removeEmojiButton, {
       type: 'separator'
     }, colorPicker);
   }

package/dist/esm/plugins/panel/toolbar.test.js

@@ -80,16 +80,16 @@ describe('getToolbarItems', function () {
         color: '#ABF5D1'
       }, true);
     });
-    it("should call changePanelType when clicked on hide emoji", function () {
-      var hideEmojiButton = itemsWithCustomPanelEnabled.find(function (item) {
-        return item.type === 'button' && item.id === 'editor.panel.hideEmoji';
+    it("should call changePanelType when clicked on remove emoji", function () {
+      var removeEmojiButton = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.removeEmoji';
       });
-      hideEmojiButton.onClick(editorView.state);
+      removeEmojiButton.onClick(editorView.state);
       expect(changePanelTypespy).toBeCalledWith(PanelType.CUSTOM, {
         emoji: undefined
       }, true);
     });
-    it("should not call changePanelType when clicked on hide emoji when no emoji in panel", function () {
+    it("should not call changePanelType when clicked on remove emoji when no emoji in panel", function () {
       var _createEditor2 = createEditor({
         doc: doc(panel({
           panelType: 'custom'
@@ -100,13 +100,27 @@ describe('getToolbarItems', function () {
           editorView = _createEditor2.editorView;
 
       var toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM);
-      var hideEmojiButton = toolbarItems.find(function (item) {
-        return item.type === 'button' && item.id === 'editor.panel.hideEmoji';
+      var removeEmojiButton = toolbarItems.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.removeEmoji';
       });
       changePanelTypespy.mockClear();
-      hideEmojiButton.onClick(editorView.state);
+      removeEmojiButton.onClick(editorView.state);
       expect(changePanelTypespy).not.toBeCalled();
     });
+    it("should have remove emoji button disabled when focus on panel without emoji", function () {
+      var toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM, '#ABF5D1', '');
+      var removeEmojiButton = toolbarItems.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.removeEmoji';
+      });
+      expect(removeEmojiButton.disabled).toBe(true);
+    });
+    it("should have remove emoji button enabled when focus on panel with emoji", function () {
+      var toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM, '#ABF5D1', ':smiley:');
+      var removeEmojiButton = toolbarItems.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.removeEmoji';
+      });
+      expect(removeEmojiButton.disabled).toBe(false);
+    });
   });
   describe('analytics for custom panels', function () {
     var createEditor = createProsemirrorEditorFactory();
@@ -169,14 +183,14 @@ describe('getToolbarItems', function () {
       expect(createAnalyticsEvent).toHaveBeenCalledWith(payload);
     });
     it('Should trigger analytics when Icon is removed', function () {
-      var hideEmojiButton = itemsWithCustomPanelEnabled.find(function (item) {
-        return item.type === 'button' && item.id === 'editor.panel.hideEmoji';
+      var removeEmojiButton = itemsWithCustomPanelEnabled.find(function (item) {
+        return item.type === 'button' && item.id === 'editor.panel.removeEmoji';
       });
       var emojiPickerConfig = itemsWithCustomPanelEnabled.find(function (item) {
         return item.type === 'select' && item.selectType === 'emoji';
       });
       emojiPickerConfig.onChange(':smiley:')(editorView.state, editorView.dispatch);
-      hideEmojiButton.onClick(editorView.state, editorView.dispatch);
+      removeEmojiButton.onClick(editorView.state, editorView.dispatch);
       var payload = {
         action: ACTION.REMOVE_ICON,
         actionSubject: ACTION_SUBJECT.PANEL,