@atlaskit/editor-core 149.0.2 → 150.0.3

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,

package/dist/esm/plugins/table/commands/insert.js

@@ -6,8 +6,10 @@ import { safeInsert } from 'prosemirror-utils';
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
-import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step'; // #endregion
+import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
+import { rescaleColumns } from '../transforms/column-width';
 
+// #endregion
 function addColumnAtCustomStep(column) {
   return function (tr) {
     var table = findTable(tr.selection);
@@ -22,17 +24,30 @@ function addColumnAtCustomStep(column) {
 
 function addColumnAt(column) {
   var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var view = arguments.length > 2 ? arguments[2] : undefined;
+  return function (tr) {
+    var updatedTr = tr;
 
-  if (allowAddColumnCustomStep) {
-    return addColumnAtCustomStep(column);
-  }
+    if (allowAddColumnCustomStep) {
+      updatedTr = addColumnAtCustomStep(column)(updatedTr);
+    } else {
+      updatedTr = addColumnAtPMUtils(column)(updatedTr);
+    }
 
-  return addColumnAtPMUtils(column);
+    var table = findTable(updatedTr.selection);
+
+    if (table) {
+      // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
+      updatedTr = rescaleColumns(table, view)(updatedTr);
+    }
+
+    return updatedTr;
+  };
 } // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 
 
-export var addColumnBefore = function addColumnBefore(state, dispatch) {
+export var addColumnBefore = function addColumnBefore(state, dispatch, view) {
   var table = findTable(state.selection);
 
   if (!table) {
@@ -41,14 +56,14 @@ export var addColumnBefore = function addColumnBefore(state, dispatch) {
 
   if (dispatch) {
     var rect = selectedRect(state);
-    dispatch(addColumnAt(rect.left, getAllowAddColumnCustomStep(state))(state.tr));
+    dispatch(addColumnAt(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
 
   return true;
 }; // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
 
-export var addColumnAfter = function addColumnAfter(state, dispatch) {
+export var addColumnAfter = function addColumnAfter(state, dispatch, view) {
   var table = findTable(state.selection);
 
   if (!table) {
@@ -57,15 +72,15 @@ export var addColumnAfter = function addColumnAfter(state, dispatch) {
 
   if (dispatch) {
     var rect = selectedRect(state);
-    dispatch(addColumnAt(rect.right, getAllowAddColumnCustomStep(state))(state.tr));
+    dispatch(addColumnAt(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
 
   return true;
 }; // #region Commands
 
 export var insertColumn = function insertColumn(column) {
-  return function (state, dispatch) {
-    var tr = addColumnAt(column, getAllowAddColumnCustomStep(state))(state.tr);
+  return function (state, dispatch, view) {
+    var tr = addColumnAt(column, getAllowAddColumnCustomStep(state), view)(state.tr);
     var table = findTable(tr.selection);
 
     if (!table) {

package/dist/esm/plugins/table/commands/misc.js

@@ -98,7 +98,7 @@ export var setCellAttr = function setCellAttr(name, value) {
   };
 };
 export var triggerUnlessTableHeader = function triggerUnlessTableHeader(command) {
-  return function (state, dispatch) {
+  return function (state, dispatch, view) {
     var selection = state.selection,
         tableHeader = state.schema.nodes.tableHeader;
 
@@ -106,7 +106,7 @@ export var triggerUnlessTableHeader = function triggerUnlessTableHeader(command)
       var cell = findCellClosestToPos(selection.$from);
 
       if (cell && cell.node.type !== tableHeader) {
-        return command(state, dispatch);
+        return command(state, dispatch, view);
       }
     }
 
@@ -114,7 +114,7 @@ export var triggerUnlessTableHeader = function triggerUnlessTableHeader(command)
       var rect = getSelectionRect(selection);
 
       if (!checkIfHeaderRowEnabled(state) || rect && rect.top > 0) {
-        return command(state, dispatch);
+        return command(state, dispatch, view);
       }
     }
 

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -177,16 +177,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
 
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
+      var noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
 
       if ( // Breakout mode/layout changed
       layoutChanged || // We need to react if our parent changes
       // Scales the cols widths relative to the new parent width.
       parentWidthChanged || // Enabling / disabling this feature reduces or adds size to the table.
-      hasNumberedColumnChanged || // Adding or removing columns from the table, should snap the remaining / new columns to the layout width.
-      tablesHaveDifferentNoOfColumns(node, prevNode) || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
+      hasNumberedColumnChanged || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
       // Usually happens on window resize.
-      layoutSize !== _this.layoutSize) {
-        if (!hasNumberedColumnChanged) {
+      layoutSize !== _this.layoutSize || noOfColumnsChanged) {
+        // If column has been inserted/deleted avoid multi dispatch
+        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
           _this.scaleTable({
             parentWidth: parentWidth,
             layoutChanged: layoutChanged

package/dist/esm/plugins/table/nodeviews/tableCell.js

@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import uuid from 'uuid';
 import { DOMSerializer } from 'prosemirror-model';
-import { setCellAttrs } from '@atlaskit/adf-schema';
+import { getCellDomAttrs, getCellAttrs } from '@atlaskit/adf-schema';
 import { getFeatureFlags } from '../../feature-flags-context';
 
 var TableCellNodeView = /*#__PURE__*/function () {
@@ -33,16 +33,30 @@ var TableCellNodeView = /*#__PURE__*/function () {
   }
 
   _createClass(TableCellNodeView, [{
-    key: "shouldRecreateNodeView",
-    value: function shouldRecreateNodeView(node) {
+    key: "updateNodeView",
+    value: function updateNodeView(node) {
       var _this = this;
 
       if (this.node.type !== node.type) {
         return false;
       }
 
-      var attrs = setCellAttrs(this.node);
-      var nextAttrs = setCellAttrs(node); // added + changed attributes
+      var attrs = getCellDomAttrs(this.node);
+      var nextAttrs = getCellDomAttrs(node);
+
+      var _getCellAttrs = getCellAttrs(this.dom),
+          colspan = _getCellAttrs.colspan,
+          rowspan = _getCellAttrs.rowspan; // need to rerender when colspan/rowspan in dom are different from the node attrs
+      // this can happen when undoing merge cells
+
+
+      var defaultColspan = 1,
+          defaultRowspan = 1;
+
+      if (colspan !== (node.attrs.colspan || defaultColspan) || rowspan !== (node.attrs.rowspan || defaultRowspan)) {
+        return false;
+      } // added + changed attributes
+
 
       var addedAttrs = Object.entries(nextAttrs).filter(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
@@ -79,9 +93,9 @@ var TableCellNodeView = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(node) {
-      var shouldUpdate = this.shouldRecreateNodeView(node);
+      var didUpdate = this.updateNodeView(node);
       this.node = node;
-      return shouldUpdate;
+      return didUpdate;
     }
   }, {
     key: "destroy",

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -249,7 +249,7 @@ export var areColumnsEven = function areColumnsEven(resizeState) {
   });
 }; // Get the layout
 
-var normaliseTableLayout = function normaliseTableLayout(input) {
+export var normaliseTableLayout = function normaliseTableLayout(input) {
   switch (input) {
     case 'wide':
       return input;
@@ -261,7 +261,6 @@ var normaliseTableLayout = function normaliseTableLayout(input) {
       return 'default';
   }
 };
-
 export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, dynamicTextSizing) {
   var _getSelectedTableInfo = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo.totalRowCount,

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -82,7 +82,7 @@ export var scaleWithParent = function scaleWithParent(tableRef, parentWidth, tab
   return scaleTableTo(resizeState, Math.floor(parentWidth));
 }; // Scales the table to a given size and updates its colgroup DOM node
 
-function scaleTableTo(state, maxSize) {
+export function scaleTableTo(state, maxSize) {
   var scaleFactor = maxSize / getTotalWidth(state);
 
   var newState = _objectSpread(_objectSpread({}, state), {}, {

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

@@ -102,12 +102,12 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
   var options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(tableMessages.insertColumn),
-    onClick: function onClick(state, dispatch) {
+    onClick: function onClick(state, dispatch, view) {
       var selectionRect = getClosestSelectionRect(state);
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
 
       if (index) {
-        insertColumnWithAnalytics(INPUT_METHOD.FLOATING_TB, index)(state, dispatch);
+        insertColumnWithAnalytics(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
 
       return true;
@@ -137,11 +137,11 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     title: formatMessage(tableMessages.removeColumns, {
       0: numberOfColumns
     }),
-    onClick: function onClick(state, dispatch) {
+    onClick: function onClick(state, dispatch, view) {
       var selectionRect = getClosestSelectionRect(state);
 
       if (selectionRect) {
-        deleteColumnsWithAnalytics(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch);
+        deleteColumnsWithAnalytics(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
 
       return true;

package/dist/esm/plugins/table/transforms/column-width.js

@@ -5,7 +5,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { setMeta } from './metadata';
+import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
+import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
+import { tableCellMinWidth } from '@atlaskit/editor-common';
+import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 export var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
   return function (tr) {
     var map = TableMap.get(table);
@@ -93,19 +98,66 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
     }
 
     var tablePos = start - 1;
-    var _tr = tr,
-        selection = _tr.selection;
-    /* Create a mapping before the table node is replaced to allow the current
-     * selection to be mapped back to it's original position inside the table.
+    var selectionBookmark = tr.selection.getBookmark();
+    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
+    /**
+     * We want to restore to the original selection but w/o applying the mapping. Function
+     * tr.replaceWith puts the selection after the inserted content. We need to manually
+     * set the selection back to original state. Mapping in this case doesn't quite work
+     * e.g. if we change the content before a selection. This is because mapping
+     * means moving it if the content in front of it changed. Instead we can get
+     * bookmark of selection.
      *
-     * If the mapping from the new 'replaceWith' transaction is used, prosemirror
-     * will map the selection to after the table as it thinks the original table
-     * node has been deleted.
+     * @see https://github.com/ProseMirror/prosemirror/issues/645
      */
 
-    var originalMap = Object.assign(Object.create(Object.getPrototypeOf(tr.mapping)), tr.mapping);
-    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks)); // restore selection after replacing the table
+    return tr.setSelection(selectionBookmark.resolve(tr.doc));
+  };
+};
+/**
+ * This function is called when user inserts/deletes a column in a table to rescale all columns.
+ * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
+ * @param table
+ * @param view
+ * @returns Updated transaction with rescaled columns for a given table
+ */
+
+export var rescaleColumns = function rescaleColumns(table, view) {
+  return function (tr) {
+    if (!view || !hasTableBeenResized(table.node)) {
+      return tr;
+    }
+
+    var state = view.state;
+    var domAtPos = view.domAtPos.bind(view);
+    var maybeTable = domAtPos(table.start).node;
+    var tableRef = maybeTable.closest('table');
+
+    if (!tableRef) {
+      return tr;
+    }
+
+    var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+    var maxSize = getTableMaxWidth({
+      table: table.node,
+      tableStart: table.start,
+      state: state,
+      layout: layout,
+      dynamicTextSizing: true
+    });
+    var resizeState = getResizeState({
+      minWidth: tableCellMinWidth,
+      table: table.node,
+      start: table.start,
+      tableRef: tableRef,
+      domAtPos: domAtPos,
+      maxSize: maxSize
+    });
+
+    if (resizeState.overflow) {
+      resizeState = scaleTableTo(resizeState, maxSize);
+    }
 
-    return tr.setSelection(selection.map(tr.doc, originalMap));
+    return updateColumnWidths(resizeState, table.node, table.start)(tr);
   };
 };

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -316,7 +316,7 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
           break;
 
         case 'insert_column':
-          insertColumnWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch);
+          insertColumnWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
 
           _this.toggleOpen();
 

package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js

@@ -198,7 +198,7 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         event.preventDefault();
         var state = editorView.state,
             dispatch = editorView.dispatch;
-        insertColumnWithAnalytics(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch);
+        insertColumnWithAnalytics(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

package/dist/esm/plugins/table/utils/table.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 export var getMergedCellsPositions = function getMergedCellsPositions(tr) {
@@ -18,4 +19,12 @@ export var getMergedCellsPositions = function getMergedCellsPositions(tr) {
     }
   });
   return mergedCells;
+};
+export var colsToRect = function colsToRect(cols, noOfRows) {
+  return {
+    left: Math.min.apply(Math, _toConsumableArray(cols)),
+    right: Math.max.apply(Math, _toConsumableArray(cols)) + 1,
+    top: 0,
+    bottom: noOfRows
+  };
 };

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -144,12 +144,6 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           isOpen = _this$state.isOpen,
           isShowingMoreColors = _this$state.isShowingMoreColors;
 
-      if (e.defaultPrevented) {
-        // This should be handled by stopping propogation, but as an additional safety net
-        // we ignore handled events for the purpose of hiding the popup.
-        return;
-      }
-
       if (isOpen === true) {
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(ACTION.CLOSED, {
           isShowingMoreColors: isShowingMoreColors,
@@ -237,13 +231,15 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
             label: ""
           })))
         })
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": "text-color-palette"
       }, /*#__PURE__*/React.createElement(ColorPalette, {
         palette: palette,
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color
-      }), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      })), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
         appearance: "subtle",
         onClick: this.handleShowMoreToggle,
         iconBefore: /*#__PURE__*/React.createElement(EditorBackgroundColorIcon, {

package/dist/esm/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -8,10 +8,9 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Popup } from '@atlaskit/editor-common';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
-import { divide } from '@atlaskit/theme/math';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
 import { TypeAheadList } from './TypeAheadList';
-var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, divide(gridSize, 2));
+var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, gridSize() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,

package/dist/esm/ui/ColorPickerButton/index.js

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2;
 
 import React from 'react';
 import styled from 'styled-components';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
 import { N60A } from '@atlaskit/theme/colors';
@@ -34,6 +34,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
     setIsPopupOpen(!isPopupOpen);
   };
 
+  var ColorPaletteWithListeners = withOuterListeners(ColorPalette);
+
   var onColorSelected = function onColorSelected(color, label) {
     setIsPopupOpen(false);
 
@@ -72,11 +74,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
       fitWidth: 350,
       offset: [0, 10],
       alignX: props.alignX
-    }, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPalette, {
+    }, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,
       selectedColor: props.currentColor || null,
-      onClick: onColorSelected
+      onClick: onColorSelected,
+      handleClickOutside: togglePopup
     })));
   };
 

package/dist/esm/ui/ColorPickerButton/index.test.js

@@ -11,6 +11,7 @@ import { mockCreateAnalyticsEvent, mockFire } from '@atlaskit/editor-test-helper
 import ColorPickerButton from './index';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
+import { act } from 'react-dom/test-utils';
 describe('color-picker-button', function () {
   var onChangeMock = jest.fn();
 
@@ -49,6 +50,20 @@ describe('color-picker-button', function () {
     expect(wrapper.find('ColorPalette')).toHaveLength(1);
     expect(wrapper.find('Color')).toHaveLength(21);
   });
+  it('should close ColorPalette popup after clicking outside', function () {
+    var wrapper = getWrapper(); // show the popup
+
+    wrapper.find('button').simulate('click'); // make sure the popup and picker are shown
+
+    expect(wrapper.find('Popup')).toHaveLength(1);
+    var colorPalette = wrapper.find('InjectIntl(ColorPalette)').instance();
+    act(function () {
+      colorPalette.props.handleClickOutside();
+    });
+    wrapper.update(); // make sure popup is hidden
+
+    expect(wrapper.find('Popup')).toHaveLength(0);
+  });
   it('should hide popup and call onChange after selecting a color', function () {
     var wrapper = getWrapper();
     selectColor(wrapper, 'Mintie'); // ensure popup is hidden

package/dist/esm/ui/ConfigPanel/Fields/Expand.js

@@ -12,10 +12,9 @@ import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
-import { multiply } from '@atlaskit/theme/math';
 export var ExpandContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), N40);
-export var ExpandControl = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), multiply(gridSize, 6), gridSize());
-var ChevronContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), multiply(gridSize, 3), multiply(gridSize, 3));
+export var ExpandControl = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), gridSize() * 6, gridSize());
+var ChevronContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 3);
 var LabelContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
 var ExpandContentContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-top: -", "px;\n"])), function (_ref) {
   var isHidden = _ref.isHidden;

package/dist/esm/ui/ConfigPanel/Fields/Fieldset.js

@@ -31,9 +31,8 @@ import { messages } from '../messages'; // eslint-disable-next-line import/no-cy
 import FormContent from '../FormContent';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
 import { N40A } from '@atlaskit/theme/colors';
-var ActionsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), N40A, multiply(gridSize, 2), multiply(gridSize, 2));
+var ActionsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), N40A, gridSize() * 2, gridSize() * 2);
 
 var populateFromParameters = function populateFromParameters(parameters, fields) {
   if (Object.keys(parameters).length) {

package/dist/esm/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -6,13 +6,12 @@ import React from 'react';
 import { injectIntl } from 'react-intl';
 import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import Tooltip from '@atlaskit/tooltip';
 import * as colors from '@atlaskit/theme/colors';
 import { messages } from '../messages';
 var RemovableFieldWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-bottom: ", "px;\n"])), function (props) {
-  return props.hasMarginBottom ? multiply(gridSize, 2) : 0;
+  return props.hasMarginBottom ? gridSize() * 2 : 0;
 });
 var RemoveButtonWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), colors.N80, colors.R300);
 

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "149.0.2";
+export var version = "150.0.3";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };