@atlaskit/editor-core 149.0.2 → 150.0.3

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

@@ -1,6 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -201,6 +207,7 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
       HighlightComponent = _ref6.HighlightComponent;
   var sessionId = uuid();
   var firstQueryWithoutResults = null;
+  var subscriptionKeys = new Set();
   var typeAhead = {
     id: TypeAheadAvailableNodes.MENTION,
     trigger: '@',
@@ -247,9 +254,15 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
         var key = "loadingMentionsForTypeAhead_".concat(uuid());
 
         var mentionsSubscribeCallback = function mentionsSubscribeCallback(mentions) {
-          var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+          var resultQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
           var stats = arguments.length > 2 ? arguments[2] : undefined;
+
+          if (query !== resultQuery) {
+            return;
+          }
+
           mentionProvider.unsubscribe(key);
+          subscriptionKeys.delete(key);
           var mentionItems = mentions.map(function (mention) {
             return memoizedToItem.call(mention);
           });
@@ -261,6 +274,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) {
@@ -278,26 +298,15 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
           }
         };
 
+        subscriptionKeys.add(key);
         mentionProvider.subscribe(key, mentionsSubscribeCallback);
         mentionProvider.filter(query || '', _objectSpread(_objectSpread({}, contextIdentifierProvider), {}, {
           sessionId: sessionId
         }));
       });
     },
-    onOpen: function onOpen(editorState) {
+    onOpen: function onOpen() {
       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,
@@ -367,11 +376,33 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
       return insert(Fragment.from([mentionNode, space]));
     },
     dismiss: function dismiss(_ref9) {
-      var query = _ref9.query,
+      var editorState = _ref9.editorState,
+          query = _ref9.query,
           stats = _ref9.stats;
       firstQueryWithoutResults = null;
       var pickerElapsedTime = stats.startedAt ? Date.now() - stats.startedAt : 0;
       fireEvent(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      var pluginState = getMentionPluginState(editorState);
+
+      if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {
+        var mentionProvider = pluginState.mentionProvider;
+
+        var _iterator = _createForOfIteratorHelper(subscriptionKeys),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var key = _step.value;
+            mentionProvider.unsubscribe(key);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+
+      subscriptionKeys.clear();
       sessionId = uuid();
     }
   };

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,