@atlaskit/editor-core 149.0.2 → 150.0.3

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

@@ -48,6 +48,20 @@ describe('emoji-picker-button', () => {
 
     expect(wrapper.find('Popup')).toHaveLength(1);
   });
+  it('should close EmojiPicker popup after clicking outside', () => {
+    // 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);
+    const emojiPicker = wrapper.find('EmojiPickerInternal').instance(); // calling click outside
+
+    act(() => {
+      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', () => {
     // click the button
     wrapper.find('button').simulate('click'); // make sure the popup and picker are shown

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

@@ -22,6 +22,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)
  */
@@ -30,6 +31,8 @@ const isDetachedElement = el => !document.body.contains(el);
 
 const noop = () => {};
 
+const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
+
 class ToolbarInsertBlock extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -113,6 +116,20 @@ class ToolbarInsertBlock extends React.PureComponent {
       });
     });
 
+    _defineProperty(this, "handleEmojiPressEscape", () => {
+      this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
+    });
+
+    _defineProperty(this, "handleEmojiClickOutside", 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(this, "handleEmojiButtonRef", button => {
       const ref = ReactDOM.findDOMNode(button);
 
@@ -137,27 +154,6 @@ class ToolbarInsertBlock extends React.PureComponent {
       }
     });
 
-    _defineProperty(this, "onPickerRef", ref => {
-      if (ref) {
-        document.addEventListener('click', this.handleClickOutside);
-      } else {
-        document.removeEventListener('click', this.handleClickOutside);
-      }
-
-      this.pickerRef = ref;
-    });
-
-    _defineProperty(this, "handleClickOutside", e => {
-      const 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(this, "toggleLinkPanel", inputMethod => {
       const {
         editorView
@@ -501,10 +497,11 @@ class ToolbarInsertBlock extends 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/es2019/plugins/layout/actions.js

@@ -7,11 +7,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 const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
 
 const getWidthsForPreset = presetLayout => {
   switch (presetLayout) {
+    case 'single':
+      return [100];
+
     case 'two_equal':
       return [50, 50];
 
@@ -38,6 +42,9 @@ export const getPresetLayout = section => {
   const widths = mapChildren(section, column => column.attrs.width).join(',');
 
   switch (widths) {
+    case '100':
+      return 'single';
+
     case '33.33,33.33,33.33':
       return 'three_equal';
 
@@ -92,6 +99,44 @@ export const insertLayoutColumnsWithAnalytics = inputMethod => withAnalytics({
   },
   eventType: EVENT_TYPE.TRACK
 })(insertLayoutColumns);
+/**
+ * Add a column to the right of existing layout
+ */
+
+function addColumn(schema, pos) {
+  return tr => {
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+  };
+}
+
+function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
+  return 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);
+    }
+  };
+}
+
+const fromTwoColsToThree = addColumn;
+const fromOneColToTwo = addColumn;
+const fromTwoColsToOne = removeLastColumnInLayout;
+const fromThreeColsToTwo = removeLastColumnInLayout;
+
+const fromOneColToThree = (schema, pos) => {
+  return tr => {
+    addColumn(schema, pos)(tr);
+    addColumn(schema, pos)(tr);
+  };
+};
+
+const fromThreeColstoOne = (node, tr, insideRightEdgePos) => {
+  const thirdColumn = node.content.child(2);
+  fromThreeColsToTwo(thirdColumn, insideRightEdgePos - thirdColumn.nodeSize, insideRightEdgePos)(tr);
+  const 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
@@ -99,25 +144,28 @@ export const insertLayoutColumnsWithAnalytics = inputMethod => withAnalytics({
  * removing it
  */
 
+
 function forceColumnStructure(state, node, pos, presetLayout) {
   const tr = state.tr;
   const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
-  const numCols = node.childCount;
+  const numCols = node.childCount; // 3 columns -> 2 columns
 
   if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
     const thirdColumn = node.content.child(2);
-    const 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);
-    }
+    const 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) {
+    const secondColumn = node.content.child(1);
+    const 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;
@@ -209,7 +257,7 @@ function getLayoutChange(node, pos, schema) {
       return;
     }
 
-    const presetLayout = node.childCount === 2 ? 'two_equal' : 'three_equal';
+    const presetLayout = node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
     const fixedColumns = columnWidth(node, schema, getWidthsForPreset(presetLayout));
     return {
       from: pos + 1,
@@ -306,6 +354,9 @@ export const deleteActiveLayoutNode = (state, dispatch) => {
 
 const formatLayoutName = layout => {
   switch (layout) {
+    case 'single':
+      return LAYOUT_TYPE.SINGLE_COL;
+
     case 'two_equal':
       return LAYOUT_TYPE.TWO_COLS_EQUAL;
 

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

@@ -34,11 +34,12 @@ const layoutPlugin = (options = {}) => ({
       const {
         pos,
         allowBreakout,
-        addSidebarLayouts
+        addSidebarLayouts,
+        allowSingleColumnLayout
       } = pluginKey.getState(state);
 
       if (pos !== null) {
-        return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts);
+        return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout);
       }
 
       return undefined;

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

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

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

@@ -1,5 +1,10 @@
 import { defineMessages } from 'react-intl';
 export const 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/es2019/plugins/layout/toolbar.js

@@ -1,4 +1,5 @@
 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';
@@ -20,6 +21,12 @@ const LAYOUT_TYPES = [{
   title: toolbarMessages.threeColumns,
   icon: LayoutThreeEqualIcon
 }];
+const LAYOUT_TYPES_WITH_SINGLE_COL = [{
+  id: 'editor.layout.singeLayout',
+  type: 'single',
+  title: toolbarMessages.singleColumn,
+  icon: EditorLayoutSingleIcon
+}, ...LAYOUT_TYPES];
 const SIDEBAR_LAYOUT_TYPES = [{
   id: 'editor.layout.twoRightSidebar',
   type: 'two_right_sidebar',
@@ -48,7 +55,7 @@ const buildLayoutButton = (intl, item, currentLayout) => ({
 });
 
 export const layoutToolbarTitle = 'Layout floating controls';
-export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts) => {
+export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout) => {
   const node = state.doc.nodeAt(pos);
 
   if (node) {
@@ -70,11 +77,12 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onFocus: hoverDecoration(nodeType, true),
       onBlur: hoverDecoration(nodeType, false)
     };
+    const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     return {
       title: layoutToolbarTitle,
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
       nodeType,
-      items: [...LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout)) : []), separator, deleteButton]
+      items: [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout)) : []), separator, deleteButton]
     };
   }
 

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

@@ -1,11 +1,9 @@
 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';
 const listPluginKey = new PluginKey('listPlugin');
 export const pluginKey = listPluginKey;
 const initialState = {
@@ -104,44 +102,6 @@ const createInitialState = state => {
 export const createPlugin = eventDispatch => new Plugin({
   state: createPluginState(eventDispatch, createInitialState),
   key: listPluginKey,
-
-  appendTransaction(transactions, _oldState, newState) {
-    const lastTransaction = transactions[transactions.length - 1];
-
-    if (!lastTransaction.docChanged || !lastTransaction.selectionSet) {
-      return;
-    }
-
-    const tr = newState.tr;
-    const rootList = findRootParentListNode(tr.selection.$from);
-
-    if (!rootList) {
-      return;
-    }
-
-    const listsJoined = joinSiblingLists({
-      tr,
-      direction: JoinDirection.RIGHT
-    });
-
-    if (tr.docChanged) {
-      const {
-        orderedList: orderedListsJoined,
-        bulletList: bulletListsJoined
-      } = listsJoined;
-      addAnalytics(newState, tr, {
-        action: ACTION.FIXED,
-        actionSubject: ACTION_SUBJECT.LIST,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          orderedListsJoined,
-          bulletListsJoined
-        }
-      });
-      return tr;
-    }
-  },
-
   props: {
     decorations(state) {
       const {

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

@@ -69,7 +69,7 @@ export const buildTypeAheadInviteItemViewedPayload = (sessionId, contextIdentifi
     userRole
   });
 };
-export const buildTypeAheadInviteExposurePayload = (shouldEnableInvite, sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole) => {
+export const buildTypeAheadInviteExposurePayload = (sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole) => {
   const {
     containerId,
     objectId,
@@ -77,8 +77,7 @@ export const buildTypeAheadInviteExposurePayload = (shouldEnableInvite, sessionI
   } = contextIdentifierProvider || {};
   return buildAnalyticsPayload('feature', 'exposed', OPERATIONAL_EVENT_TYPE, sessionId, {
     flagKey: 'confluence.frontend.invite.from.mention',
-    value: shouldEnableInvite,
-    cohort: inviteExperimentCohort,
+    value: inviteExperimentCohort || 'not-enrolled',
     containerId,
     objectId,
     childObjectId,

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

@@ -188,6 +188,7 @@ export const createTypeAheadConfig = ({
 }) => {
   let sessionId = uuid();
   let firstQueryWithoutResults = null;
+  const subscriptionKeys = new Set();
   const typeAhead = {
     id: TypeAheadAvailableNodes.MENTION,
     trigger: '@',
@@ -235,8 +236,13 @@ export const createTypeAheadConfig = ({
       return new Promise(resolve => {
         const key = `loadingMentionsForTypeAhead_${uuid()}`;
 
-        const mentionsSubscribeCallback = (mentions, query = '', stats) => {
+        const mentionsSubscribeCallback = (mentions, resultQuery = '', stats) => {
+          if (query !== resultQuery) {
+            return;
+          }
+
           mentionProvider.unsubscribe(key);
+          subscriptionKeys.delete(key);
           const mentionItems = mentions.map(mention => memoizedToItem.call(mention));
           buildAndSendElementsTypeAheadAnalytics(fireEvent)({
             query,
@@ -246,6 +252,15 @@ export const createTypeAheadConfig = ({
 
           if (mentions.length === 0 && firstQueryWithoutResults === null) {
             firstQueryWithoutResults = query;
+          } // Growth (El-dorado) experiment design hard requirement
+
+
+          if (mentionItems.length <= 2) {
+            const {
+              inviteExperimentCohort,
+              userRole
+            } = mentionProvider;
+            fireEvent(buildTypeAheadInviteExposurePayload(sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole));
           }
 
           if (!mentionProvider.shouldEnableInvite || mentionItems.length > 2) {
@@ -263,6 +278,7 @@ export const createTypeAheadConfig = ({
           }
         };
 
+        subscriptionKeys.add(key);
         mentionProvider.subscribe(key, mentionsSubscribeCallback);
         mentionProvider.filter(query || '', { ...contextIdentifierProvider,
           sessionId
@@ -270,23 +286,8 @@ export const createTypeAheadConfig = ({
       });
     },
 
-    onOpen: editorState => {
+    onOpen: () => {
       firstQueryWithoutResults = null;
-      const pluginState = getMentionPluginState(editorState);
-
-      if (!pluginState || !pluginState.mentionProvider) {
-        return null;
-      }
-
-      const {
-        contextIdentifierProvider,
-        mentionProvider: {
-          shouldEnableInvite,
-          inviteExperimentCohort,
-          userRole
-        }
-      } = pluginState;
-      fireEvent(buildTypeAheadInviteExposurePayload(!!shouldEnableInvite, sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole));
     },
 
     selectItem(state, item, insert, {
@@ -361,12 +362,24 @@ export const createTypeAheadConfig = ({
     },
 
     dismiss({
+      editorState,
       query,
       stats
     }) {
       firstQueryWithoutResults = null;
       const pickerElapsedTime = stats.startedAt ? Date.now() - stats.startedAt : 0;
       fireEvent(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      const pluginState = getMentionPluginState(editorState);
+
+      if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {
+        const mentionProvider = pluginState.mentionProvider;
+
+        for (let key of subscriptionKeys) {
+          mentionProvider.unsubscribe(key);
+        }
+      }
+
+      subscriptionKeys.clear();
       sessionId = uuid();
     }
 

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

@@ -11,7 +11,7 @@ import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common';
 import { Emoji } from '@atlaskit/editor-common';
 import { panelAttrsToDom } from '../utils';
-const fitToHeight = 20;
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 export const panelIcons = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -37,7 +37,7 @@ export const PanelIcon = props => {
       shortName: panelIcon,
       showTooltip: false,
       allowTextFallback: false,
-      fitToHeight: fitToHeight
+      fitToHeight: akEditorCustomIconSize
     });
   }
 
@@ -64,8 +64,10 @@ class PanelNodeView {
 
     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/es2019/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';
@@ -206,13 +206,15 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
       selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
       onChange: emojiShortName => changeEmoji(emojiShortName)
     };
-    items.push(emojiPicker, {
-      id: 'editor.panel.hideEmoji',
+    const 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/es2019/plugins/panel/toolbar.test.js

@@ -71,14 +71,14 @@ describe('getToolbarItems', () => {
         color: '#ABF5D1'
       }, true);
     });
-    it(`should call changePanelType when clicked on hide emoji`, () => {
-      const hideEmojiButton = itemsWithCustomPanelEnabled.find(item => item.type === 'button' && item.id === 'editor.panel.hideEmoji');
-      hideEmojiButton.onClick(editorView.state);
+    it(`should call changePanelType when clicked on remove emoji`, () => {
+      const removeEmojiButton = itemsWithCustomPanelEnabled.find(item => item.type === 'button' && item.id === 'editor.panel.removeEmoji');
+      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`, () => {
+    it(`should not call changePanelType when clicked on remove emoji when no emoji in panel`, () => {
       const {
         editorView
       } = createEditor({
@@ -89,11 +89,21 @@ describe('getToolbarItems', () => {
         providerFactory
       });
       const toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM);
-      const hideEmojiButton = toolbarItems.find(item => item.type === 'button' && item.id === 'editor.panel.hideEmoji');
+      const removeEmojiButton = toolbarItems.find(item => 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`, () => {
+      const toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM, '#ABF5D1', '');
+      const removeEmojiButton = toolbarItems.find(item => 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`, () => {
+      const toolbarItems = getToolbarItems(dummyFormatMessage, defaultSchema.nodes.panel, true, providerFactory, PanelType.CUSTOM, '#ABF5D1', ':smiley:');
+      const removeEmojiButton = toolbarItems.find(item => item.type === 'button' && item.id === 'editor.panel.removeEmoji');
+      expect(removeEmojiButton.disabled).toBe(false);
+    });
   });
   describe('analytics for custom panels', () => {
     const createEditor = createProsemirrorEditorFactory();
@@ -151,10 +161,10 @@ describe('getToolbarItems', () => {
       expect(createAnalyticsEvent).toHaveBeenCalledWith(payload);
     });
     it('Should trigger analytics when Icon is removed', () => {
-      const hideEmojiButton = itemsWithCustomPanelEnabled.find(item => item.type === 'button' && item.id === 'editor.panel.hideEmoji');
+      const removeEmojiButton = itemsWithCustomPanelEnabled.find(item => item.type === 'button' && item.id === 'editor.panel.removeEmoji');
       const emojiPickerConfig = itemsWithCustomPanelEnabled.find(item => 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);
       const payload = {
         action: ACTION.REMOVE_ICON,
         actionSubject: ACTION_SUBJECT.PANEL,