@atlaskit/editor-core 187.45.3 → 187.46.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-core
 
+## 187.46.0
+
+### Minor Changes
+
+- [`16a0e1fef2b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16a0e1fef2b) - ED-20017 Decouple editor core from floating toolbar plugin
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 187.45.3
 
 ### Patch Changes

package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -17,7 +17,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
-var _Dropdown = _interopRequireDefault(require("../../../../ui/Dropdown"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _Alignment = _interopRequireDefault(require("../../../../ui/Alignment"));
 var _styles = require("./styles");
 var _styles2 = require("@atlaskit/editor-common/styles");
@@ -99,7 +99,7 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
       var title = intl.formatMessage(_messages.messages.alignment);
       return (0, _react2.jsx)("span", {
         css: _styles.wrapper
-      }, (0, _react2.jsx)(_Dropdown.default, {
+      }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,

package/dist/cjs/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -18,22 +18,21 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _ToolbarButton = _interopRequireWildcard(require("../../../ui/ToolbarButton"));
-var _Dropdown = _interopRequireDefault(require("../../../ui/Dropdown"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
 var _FindReplace = _interopRequireDefault(require("./FindReplace"));
 var _types = require("../../analytics/types");
 var _keymaps = require("../../../keymaps");
 var _keymaps2 = require("@atlaskit/editor-common/keymaps");
-var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px;\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), _editorSharedStyles.akEditorMobileMaxWidth);
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 ", ";\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMobileMaxWidth);
 var toolbarButtonWrapperFullWith = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
 var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 var messages = (0, _reactIntlNext.defineMessages)({
@@ -85,7 +84,7 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
       var keymap = (0, _keymaps.findKeymapByDescription)('Find');
       return (0, _react2.jsx)("div", {
         css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
-      }, (0, _react2.jsx)(_Dropdown.default, {
+      }, (0, _react2.jsx)(_uiMenu.Dropdown, {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,

package/dist/cjs/plugins/floating-toolbar/index.js

@@ -22,7 +22,7 @@ var _commands = require("./pm-plugins/toolbar-data/commands");
 var _ConfirmationModal = require("./ui/ConfirmationModal");
 var _ToolbarLoader = require("./ui/ToolbarLoader");
 var _utils2 = require("./utils");
-var _ErrorBoundary = require("../../ui/ErrorBoundary");
+var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _forceFocus = _interopRequireWildcard(require("./pm-plugins/force-focus"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -245,7 +245,7 @@ function ContentComponent(_ref5) {
   var confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
   var scrollable = config.scrollable;
   var confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
-  return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
     componentId: (0, _camelCase.default)(title),
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,

package/dist/cjs/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
-var _pluginStateFactory = require("../../../../utils/plugin-state-factory");
+var _utils = require("@atlaskit/editor-common/utils");
 var _pluginKey = require("./plugin-key");
 var _reducer = require("./reducer");
-var _pluginFactory = (0, _pluginStateFactory.pluginFactory)(_pluginKey.pluginKey, _reducer.reducer),
+var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _reducer.reducer),
   createPluginState = _pluginFactory.createPluginState,
   createCommand = _pluginFactory.createCommand,
   getPluginState = _pluginFactory.getPluginState;

package/dist/cjs/plugins/floating-toolbar/ui/Dropdown.js

@@ -17,7 +17,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _Dropdown = _interopRequireDefault(require("../../../ui/Dropdown"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _ui = require("@atlaskit/editor-common/ui");
 var _DropdownMenu = _interopRequireWildcard(require("./DropdownMenu"));
 var _templateObject, _templateObject2;
@@ -163,7 +163,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var fitTolerance = 10;
       var fitWidth = Array.isArray(options) ? dropdownWidth || _DropdownMenu.menuItemDimensions.width : options.width;
       var fitHeight = Array.isArray(options) ? options.length * _DropdownMenu.menuItemDimensions.height + _DropdownMenu.itemSpacing * 2 : options.height;
-      return (0, _react2.jsx)(_Dropdown.default, {
+      return (0, _react2.jsx)(_uiMenu.DropdownContainer, {
         ref: this.triggerRef,
         mountTo: mountPoint,
         boundariesElement: boundariesElement,

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

@@ -15,12 +15,12 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _emoji = require("@atlaskit/emoji");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
-var _withOuterListeners = _interopRequireDefault(require("../../../ui/with-outer-listeners"));
+var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _templateObject;
 /** @jsx jsx */
 // helps adjusts position of popup
 var emojiPickerButtonWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-var EmojiPickerWithListener = (0, _withOuterListeners.default)(_emoji.EmojiPicker);
+var EmojiPickerWithListener = (0, _uiReact.withReactEditorViewOuterListeners)(_emoji.EmojiPicker);
 var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = _react2.default.useRef(null);
   var _React$useState = _react2.default.useState(false),

package/dist/cjs/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
-var _utils = require("../../../utils");
+var _utils = require("@atlaskit/editor-common/utils");
 var _ui = require("@atlaskit/editor-common/ui");
 var _Separator = _interopRequireDefault(require("./Separator"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js

@@ -30,14 +30,13 @@ var _Select = _interopRequireDefault(require("./Select"));
 var _Separator = _interopRequireDefault(require("./Separator"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _ExtensionsPlaceholder = require("./ExtensionsPlaceholder");
-var _ColorPickerButton = _interopRequireDefault(require("../../../ui/ColorPickerButton"));
-var _ColorPalette = require("../../../ui/ColorPalette");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _EmojiPickerButton = require("./EmojiPickerButton");
 var _reactIntlNext = require("react-intl-next");
 var _messages = _interopRequireDefault(require("./messages"));
 var _commands2 = require("@atlaskit/editor-plugin-table/commands");
 var _ScrollButtons = require("./ScrollButtons");
-var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _forceFocus = require("../pm-plugins/force-focus");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 /** @jsx jsx */
@@ -175,7 +174,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           });
         }
         if (item.selectType === 'color') {
-          return (0, _react2.jsx)(_ColorPickerButton.default, {
+          return (0, _react2.jsx)(_uiMenu.ColorPickerButton, {
             skipFocusButtonAfterPick: true,
             key: idx,
             title: item.title,
@@ -197,7 +196,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             //  and paletteColorTooltipMessages in item options.
             ,
             hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor,
-            paletteColorTooltipMessages: _ColorPalette.backgroundPaletteTooltipMessages
+            paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages
           });
         }
         if (item.selectType === 'emoji') {

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

@@ -19,7 +19,7 @@ var _panelBackgroundPalette = require("../../ui/ColorPalette/Palettes/panelBackg
 var _panel = require("@atlaskit/editor-common/panel");
 var _utils = require("./utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
-var _Palettes = require("../../ui/ColorPalette/Palettes");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("../analytics");
 var _message = require("./message");
@@ -190,7 +190,7 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
     }) || {
       label: 'Custom',
       value: panelColor,
-      border: _Palettes.DEFAULT_BORDER_COLOR
+      border: _uiColor.DEFAULT_BORDER_COLOR
     };
     if (isCustomPanelEditable) {
       var colorPicker = {

package/dist/cjs/plugins/text-color/pm-plugins/main.js

@@ -17,8 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _textColorPalette = require("../../../ui/ColorPalette/Palettes/textColorPalette");
-var _common = require("../../../ui/ColorPalette/Palettes/common");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _color = require("../utils/color");
 var _disabled = require("../utils/disabled");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -28,8 +27,8 @@ function createInitialPluginState(editorState, pluginConfig) {
   var palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
-    border: _common.DEFAULT_BORDER_COLOR
-  }].concat((0, _toConsumableArray2.default)(_textColorPalette.textColorPalette));
+    border: _uiColor.DEFAULT_BORDER_COLOR
+  }].concat((0, _toConsumableArray2.default)(_uiColor.textColorPalette));
   var state = {
     color: (0, _color.getActiveColor)(editorState),
     disabled: (0, _disabled.getDisabledState)(editorState),

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -10,13 +10,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _form = require("@atlaskit/form");
-var _common = require("../../../ui/ColorPalette/Palettes/common");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _utils = require("../utils");
 var _RequiredIndicator = require("./common/RequiredIndicator");
 var _typography = require("@atlaskit/theme/typography");
 var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
-var _ColorPickerButton = _interopRequireDefault(require("../../ColorPickerButton"));
-var _ColorPalette = require("../../../ui/ColorPalette");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
@@ -132,7 +131,7 @@ var colorPalette = [{
 } // 1000
 ].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
-    border: _common.DEFAULT_BORDER_COLOR
+    border: _uiColor.DEFAULT_BORDER_COLOR
   });
 });
 
@@ -325,7 +324,7 @@ var extendedColorPalette = [{
 } // 400
 ].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
-    border: _common.DEFAULT_BORDER_COLOR
+    border: _uiColor.DEFAULT_BORDER_COLOR
   });
 });
 exports.extendedColorPalette = extendedColorPalette;
@@ -346,12 +345,12 @@ var ColorPicker = function ColorPicker(props) {
     onChange(colorValue);
     onFieldChange(name, currentColor !== colorValue);
   };
-  return (0, _react.jsx)(_ColorPickerButton.default, {
+  return (0, _react.jsx)(_uiMenu.ColorPickerButton, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
     colorPalette: extendedColorPalette,
-    paletteColorTooltipMessages: _ColorPalette.chartsColorPaletteTooltipMessages,
+    paletteColorTooltipMessages: _uiColor.chartsColorPaletteTooltipMessages,
     cols: EXPANDED_COLOR_PICKER_COLUMNS,
     alignX: "right",
     placement: "ConfigPanel",

package/dist/cjs/ui/Dropdown/index.js

@@ -1,33 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Dropdown = /*#__PURE__*/_react.default.memo(function (_ref) {
-  var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
-  var keyDownHandlerContext = (0, _react.useContext)(_uiMenu.KeyDownHandlerContext);
-  return (
-    /*#__PURE__*/
-    //This context is to handle the tab, Arrow Right/Left key events for dropdown.
-    //Default context has the void callbacks for above key events
-    _react.default.createElement(_uiMenu.Dropdown, (0, _extends2.default)({
-      arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
-        keyDownHandlerContext: keyDownHandlerContext
-      })
-    }, props))
-  );
-});
-var _default = Dropdown;
+var _default = _uiMenu.DropdownContainer;
 exports.default = _default;

package/dist/cjs/utils/index.js

@@ -106,7 +106,12 @@ Object.defineProperty(exports, "measurements", {
     return _measureEnum.default;
   }
 });
-exports.nodeToJSON = nodeToJSON;
+Object.defineProperty(exports, "nodeToJSON", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.nodeToJSON;
+  }
+});
 Object.defineProperty(exports, "nodesBetweenChanged", {
   enumerable: true,
   get: function get() {
@@ -134,10 +139,14 @@ Object.defineProperty(exports, "setTextSelection", {
 });
 exports.stringRepeat = stringRepeat;
 exports.sum = sum;
-exports.toJSON = toJSON;
+Object.defineProperty(exports, "toJSON", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.toJSON;
+  }
+});
 exports.whichTransitionEvent = whichTransitionEvent;
 var _commands = require("@atlaskit/editor-prosemirror/commands");
-var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
 var _cursor = require("../plugins/fake-text-cursor/cursor");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("@atlaskit/editor-common/utils");
@@ -200,13 +209,6 @@ function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-var transformer = new _editorJsonTransformer.JSONTransformer();
-function toJSON(node) {
-  return transformer.encode(node);
-}
-function nodeToJSON(node) {
-  return transformer.encodeNode(node);
-}
 
 /**
  * Repeating string for multiple times

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.45.3";
+var version = "187.46.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ToolbarButton from '../../../../ui/ToolbarButton';
-import Dropdown from '../../../../ui/Dropdown';
+import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
 import Alignment from '../../../../ui/Alignment';
 import { expandIconWrapper, triggerWrapper, wrapper } from './styles';
 import { separatorStyles } from '@atlaskit/editor-common/styles';

package/dist/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -4,22 +4,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
-import Dropdown from '../../../ui/Dropdown';
+import { Dropdown, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import FindReplace from './FindReplace';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { ToolTipContent, findKeymapByDescription, tooltip } from '../../../keymaps';
 import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
-import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 const toolbarButtonWrapper = css`
   display: flex;
   flex: 1 1 auto;
   flex-grow: 0;
   justify-content: flex-end;
   align-items: center;
-  padding: 0 8px;
+  padding: 0 ${"var(--ds-space-100, 8px)"};
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     justify-content: center;
     padding: 0;

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -15,7 +15,7 @@ import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ToolbarLoader } from './ui/ToolbarLoader';
 import { findNode } from './utils';
-import { ErrorBoundary } from '../../ui/ErrorBoundary';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 export const getRelevantConfig = (selection, configs) => {
   // node selections always take precedence, see if

package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.js

@@ -1,4 +1,4 @@
-import { pluginFactory } from '../../../../utils/plugin-state-factory';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key';
 import { reducer } from './reducer';
 export const {

package/dist/es2019/plugins/floating-toolbar/ui/Dropdown.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import UiDropdown from '../../../ui/Dropdown';
+import { DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
 const dropdownExpandContainer = css`

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

@@ -7,13 +7,13 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon';
-import withOuterListeners from '../../../ui/with-outer-listeners';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 
 // helps adjusts position of popup
 const emojiPickerButtonWrapper = css`
   position: relative;
 `;
-const EmojiPickerWithListener = withOuterListeners(EmojiPicker);
+const EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPicker);
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);

package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
-import { nodeToJSON } from '../../../utils';
+import { nodeToJSON } from '@atlaskit/editor-common/utils';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from './Separator';
 const noop = () => null;

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -16,8 +16,8 @@ import Select from './Select';
 import Separator from './Separator';
 import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
-import ColorPickerButton from '../../../ui/ColorPickerButton';
-import { backgroundPaletteTooltipMessages } from '../../../ui/ColorPalette';
+import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';

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

@@ -11,7 +11,7 @@ import { panelBackgroundPalette } from '../../ui/ColorPalette/Palettes/panelBack
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { findPanel } from './utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 import { messages } from './message';

package/dist/es2019/plugins/text-color/pm-plugins/main.js

@@ -1,7 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { textColorPalette } from '../../../ui/ColorPalette/Palettes/textColorPalette';
-import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
+import { textColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
 export { DEFAULT_COLOR } from '../utils/color';

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -2,13 +2,13 @@
 import { jsx, css } from '@emotion/react';
 import { Fragment } from 'react';
 import { Field } from '@atlaskit/form';
-import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { validate } from '../utils';
 import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
-import ColorPickerButton from '../../ColorPickerButton';
-import { chartsColorPaletteTooltipMessages } from '../../../ui/ColorPalette';
+import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { chartsColorPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 /*
     NOTE: color used here are not yet in atlaskit code
     this is part of extended color pack from ADG, which is yet to be release

package/dist/es2019/ui/Dropdown/index.js

@@ -1,20 +1,2 @@
-import _extends from "@babel/runtime/helpers/extends";
-import { Dropdown as DropdownComponent, KeyDownHandlerContext } from '@atlaskit/editor-common/ui-menu';
-import React, { useContext } from 'react';
-const Dropdown = /*#__PURE__*/React.memo(({
-  ...props
-}) => {
-  const keyDownHandlerContext = useContext(KeyDownHandlerContext);
-  return (
-    /*#__PURE__*/
-    //This context is to handle the tab, Arrow Right/Left key events for dropdown.
-    //Default context has the void callbacks for above key events
-    React.createElement(DropdownComponent, _extends({
-      arrowKeyNavigationProviderOptions: {
-        ...props.arrowKeyNavigationProviderOptions,
-        keyDownHandlerContext
-      }
-    }, props))
-  );
-});
+import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
 export default Dropdown;

package/dist/es2019/utils/index.js

@@ -1,8 +1,7 @@
 import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
-import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { FakeTextCursorSelection } from '../plugins/fake-text-cursor/cursor';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem } from '@atlaskit/editor-common/utils';
+export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem, toJSON, nodeToJSON } from '@atlaskit/editor-common/utils';
 export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { findFarthestParentNode, nodesBetweenChanged, getNodesCount } from './document';
 export { isParagraph, isText, isLinkMark } from './nodes';
@@ -61,13 +60,6 @@ export function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-const transformer = new JSONTransformer();
-export function toJSON(node) {
-  return transformer.encode(node);
-}
-export function nodeToJSON(node) {
-  return transformer.encodeNode(node);
-}
 
 /**
  * Repeating string for multiple times

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.45.3";
+export const version = "187.46.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -15,7 +15,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ToolbarButton from '../../../../ui/ToolbarButton';
-import Dropdown from '../../../../ui/Dropdown';
+import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
 import Alignment from '../../../../ui/Alignment';
 import { expandIconWrapper, triggerWrapper, wrapper } from './styles';
 import { separatorStyles } from '@atlaskit/editor-common/styles';

package/dist/esm/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -14,16 +14,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
-import Dropdown from '../../../ui/Dropdown';
+import { Dropdown, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import FindReplace from './FindReplace';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { ToolTipContent, findKeymapByDescription, tooltip } from '../../../keymaps';
 import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
-import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
-var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px;\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), akEditorMobileMaxWidth);
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 ", ";\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), "var(--ds-space-100, 8px)", akEditorMobileMaxWidth);
 var toolbarButtonWrapperFullWith = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
 var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 var messages = defineMessages({