@atlaskit/editor-plugin-text-formatting 26.0.3 → 26.0.5

package/dist/cjs/pm-plugins/smart-input-rule.js

@@ -8,11 +8,13 @@ exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _analytics = require("@atlaskit/editor-common/analytics");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+var _substituteEvents = require("@atlaskit/editor-common/analytics/types/substitute-events");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
+var _inputRules = require("@atlaskit/editor-common/utils/input-rules");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
+var _utils2 = require("@atlaskit/prosemirror-input-rules/utils");
 // We don't agressively upgrade single quotes to smart quotes because
 // they may clash with an emoji. Only do that when we have a matching
 // single quote, or a contraction.
@@ -143,12 +145,12 @@ function createSingleQuotesRules() {
  */
 function getProductRules(editorAnalyticsAPI) {
   var productRuleWithAnalytics = function productRuleWithAnalytics(product) {
-    return (0, _utils.inputRuleWithAnalytics)(function (_, match) {
+    return (0, _inputRules.inputRuleWithAnalytics)(function (_, match) {
       return {
-        action: _analytics.ACTION.SUBSTITUTED,
-        actionSubject: _analytics.ACTION_SUBJECT.TEXT,
-        actionSubjectId: _analytics.ACTION_SUBJECT_ID.PRODUCT_NAME,
-        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: _enums.ACTION.SUBSTITUTED,
+        actionSubject: _enums.ACTION_SUBJECT.TEXT,
+        actionSubjectId: _enums.ACTION_SUBJECT_ID.PRODUCT_NAME,
+        eventType: _enums.EVENT_TYPE.TRACK,
         attributes: {
           product: product,
           originalSpelling: match[2]
@@ -170,16 +172,16 @@ function getProductRules(editorAnalyticsAPI) {
  */
 function getSymbolRules(editorAnalyticsAPI) {
   var symbolToString = {
-    '→': _analytics.SYMBOL.ARROW_RIGHT,
-    '←': _analytics.SYMBOL.ARROW_LEFT,
-    '↔︎': _analytics.SYMBOL.ARROW_DOUBLE
+    '→': _substituteEvents.SYMBOL.ARROW_RIGHT,
+    '←': _substituteEvents.SYMBOL.ARROW_LEFT,
+    '↔︎': _substituteEvents.SYMBOL.ARROW_DOUBLE
   };
   var symbolRuleWithAnalytics = function symbolRuleWithAnalytics(symbol) {
-    return (0, _utils.inputRuleWithAnalytics)({
-      action: _analytics.ACTION.SUBSTITUTED,
-      actionSubject: _analytics.ACTION_SUBJECT.TEXT,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYMBOL,
-      eventType: _analytics.EVENT_TYPE.TRACK,
+    return (0, _inputRules.inputRuleWithAnalytics)({
+      action: _enums.ACTION.SUBSTITUTED,
+      actionSubject: _enums.ACTION_SUBJECT.TEXT,
+      actionSubjectId: _enums.ACTION_SUBJECT_ID.SYMBOL,
+      eventType: _enums.EVENT_TYPE.TRACK,
       attributes: {
         symbol: symbolToString[symbol]
       }
@@ -197,16 +199,16 @@ function getSymbolRules(editorAnalyticsAPI) {
  */
 function getPunctuationRules(editorAnalyticsAPI) {
   var punctuationToString = (0, _defineProperty2.default)({
-    '–': _analytics.PUNC.DASH,
-    '…': _analytics.PUNC.ELLIPSIS,
-    '”': _analytics.PUNC.QUOTE_DOUBLE
-  }, _analytics.PUNC.QUOTE_SINGLE, _analytics.PUNC.QUOTE_SINGLE);
+    '–': _substituteEvents.PUNC.DASH,
+    '…': _substituteEvents.PUNC.ELLIPSIS,
+    '”': _substituteEvents.PUNC.QUOTE_DOUBLE
+  }, _substituteEvents.PUNC.QUOTE_SINGLE, _substituteEvents.PUNC.QUOTE_SINGLE);
   var punctuationRuleWithAnalytics = function punctuationRuleWithAnalytics(punctuation) {
-    return (0, _utils.inputRuleWithAnalytics)({
-      action: _analytics.ACTION.SUBSTITUTED,
-      actionSubject: _analytics.ACTION_SUBJECT.TEXT,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.PUNC,
-      eventType: _analytics.EVENT_TYPE.TRACK,
+    return (0, _inputRules.inputRuleWithAnalytics)({
+      action: _enums.ACTION.SUBSTITUTED,
+      actionSubject: _enums.ACTION_SUBJECT.TEXT,
+      actionSubjectId: _enums.ACTION_SUBJECT_ID.PUNC,
+      eventType: _enums.EVENT_TYPE.TRACK,
       attributes: {
         punctuation: punctuationToString[punctuation]
       }
@@ -222,9 +224,9 @@ function getPunctuationRules(editorAnalyticsAPI) {
   }, punctuationRuleWithAnalytics);
   var singleQuoteRules = createSingleQuotesRules();
   return [].concat((0, _toConsumableArray2.default)(dashEllipsisRules), (0, _toConsumableArray2.default)(doubleQuoteRules), (0, _toConsumableArray2.default)(singleQuoteRules.map(function (rule) {
-    return punctuationRuleWithAnalytics(_analytics.PUNC.QUOTE_SINGLE)(rule);
+    return punctuationRuleWithAnalytics(_substituteEvents.PUNC.QUOTE_SINGLE)(rule);
   })));
 }
 var _default = exports.default = function _default(editorAnalyticsAPI) {
-  return new _safePlugin.SafePlugin((0, _prosemirrorInputRules.createPlugin)('text-formatting:smart-input', [].concat((0, _toConsumableArray2.default)(getProductRules(editorAnalyticsAPI)), (0, _toConsumableArray2.default)(getSymbolRules(editorAnalyticsAPI)), (0, _toConsumableArray2.default)(getPunctuationRules(editorAnalyticsAPI)))));
+  return new _safePlugin.SafePlugin((0, _utils2.createPlugin)('text-formatting:smart-input', [].concat((0, _toConsumableArray2.default)(getProductRules(editorAnalyticsAPI)), (0, _toConsumableArray2.default)(getSymbolRules(editorAnalyticsAPI)), (0, _toConsumableArray2.default)(getPunctuationRules(editorAnalyticsAPI)))));
 };

package/dist/cjs/ui/FloatingToolbarComponent.js

@@ -10,8 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntl = require("react-intl");
-var _hooks = require("@atlaskit/editor-common/hooks");
 var _types = require("@atlaskit/editor-common/types");
+var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _constants = require("./Toolbar/constants");
 var _dropdownMenu = require("./Toolbar/dropdown-menu");
@@ -69,7 +69,7 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     editorView = _ref.editorView,
     intl = _ref.intl;
-  var textFormattingState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textFormatting'], selector);
+  var textFormattingState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['textFormatting'], selector);
   var formattingIsPresent = textFormattingState.formattingIsPresent,
     formattingIconState = (0, _objectWithoutProperties2.default)(textFormattingState, _excluded);
   var defaultIcons = (0, _formattingIcons.useFormattingIcons)({

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PrimaryToolbarComponent = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _types = require("./Toolbar/types");
 var selector = function selector(states) {
@@ -47,7 +47,7 @@ var PrimaryToolbarComponent = exports.PrimaryToolbarComponent = /*#__PURE__*/_re
     disabled = _ref.disabled,
     isReducedSpacing = _ref.isReducedSpacing,
     shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar;
-  var textFormattingState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textFormatting'], selector);
+  var textFormattingState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['textFormatting'], selector);
   return /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
     textFormattingState: textFormattingState,
     popupsMountPoint: popupsMountPoint,

package/dist/cjs/ui/Toolbar/components/BoldButtonGroup.js

@@ -6,40 +6,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.boldButtonGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _toolbar = require("@atlaskit/editor-common/toolbar");
-var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _context = require("@atlaskit/editor-common/toolbar/context");
+var _keys = require("@atlaskit/editor-common/toolbar/keys");
+var _rank = require("@atlaskit/editor-common/toolbar/rank");
+var _show = require("@atlaskit/editor-toolbar/show");
+var _toolbarButtonGroup = require("@atlaskit/editor-toolbar/toolbar-button-group");
 var _types = require("../types");
 var _Component = require("./Component");
 var _utils = require("./utils");
 var BoldButtonGroup = function BoldButtonGroup(_ref) {
   var children = _ref.children;
-  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+  var _useEditorToolbar = (0, _context.useEditorToolbar)(),
     editorAppearance = _useEditorToolbar.editorAppearance;
   if (editorAppearance === 'full-page') {
-    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+    return /*#__PURE__*/_react.default.createElement(_show.Show, {
       above: "xl"
-    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+    }, /*#__PURE__*/_react.default.createElement(_toolbarButtonGroup.ToolbarButtonGroup, null, children));
   }
 };
 var boldButtonGroup = exports.boldButtonGroup = function boldButtonGroup(api) {
   return [{
-    type: _toolbar.BOLD_BUTTON_GROUP.type,
-    key: _toolbar.BOLD_BUTTON_GROUP.key,
+    type: _keys.BOLD_BUTTON_GROUP.type,
+    key: _keys.BOLD_BUTTON_GROUP.key,
     parents: [{
-      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
-      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
-      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.BOLD_BUTTON_GROUP.key]
+      type: _keys.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _keys.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _rank.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_keys.BOLD_BUTTON_GROUP.key]
     }],
     component: function component(_ref2) {
       var children = _ref2.children;
       return /*#__PURE__*/_react.default.createElement(BoldButtonGroup, null, children);
     }
   }, {
-    type: _toolbar.BOLD_BUTTON.type,
-    key: _toolbar.BOLD_BUTTON.key,
+    type: _keys.BOLD_BUTTON.type,
+    key: _keys.BOLD_BUTTON.key,
     parents: [{
-      type: _toolbar.BOLD_BUTTON_GROUP.type,
-      key: _toolbar.BOLD_BUTTON_GROUP.key,
+      type: _keys.BOLD_BUTTON_GROUP.type,
+      key: _keys.BOLD_BUTTON_GROUP.key,
       rank: 100
     }],
     component: function component(_ref3) {

package/dist/cjs/ui/Toolbar/components/Component.js

@@ -7,11 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoreFormattingMenu = exports.MenuSection = exports.FormatMenuItem = exports.FormatButton = exports.ClearFormatMenuItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
-var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
-var _messages = require("@atlaskit/editor-common/messages");
-var _toolbar = require("@atlaskit/editor-common/toolbar");
-var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _toolbar = require("@atlaskit/editor-common/messages/toolbar");
+var _toolbar2 = require("@atlaskit/editor-common/toolbar");
+var _keys = require("@atlaskit/editor-common/toolbar/keys");
+var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
+var _clearFormattingIcon = require("@atlaskit/editor-toolbar/clear-formatting-icon");
+var _moreItemsIcon = require("@atlaskit/editor-toolbar/more-items-icon");
+var _toolbarButton = require("@atlaskit/editor-toolbar/toolbar-button");
+var _toolbarDropdownItem = require("@atlaskit/editor-toolbar/toolbar-dropdown-item");
+var _toolbarDropdownItemSection = require("@atlaskit/editor-toolbar/toolbar-dropdown-item-section");
+var _toolbarDropdownMenu = require("@atlaskit/editor-toolbar/toolbar-dropdown-menu");
+var _toolbarKeyboardShortcutHint = require("@atlaskit/editor-toolbar/toolbar-keyboard-shortcut-hint");
+var _toolbarTooltip = require("@atlaskit/editor-toolbar/toolbar-tooltip");
 var _clearFormatting = require("../../../editor-commands/clear-formatting");
 var _utils = require("./utils");
 var FormatMenuItem = exports.FormatMenuItem = function FormatMenuItem(_ref) {
@@ -41,12 +49,12 @@ var FormatMenuItem = exports.FormatMenuItem = function FormatMenuItem(_ref) {
   if (isHidden) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+  return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItem.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
       size: "small",
       label: ""
     }),
-    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_toolbarKeyboardShortcutHint.ToolbarKeyboardShortcutHint, {
       shortcut: shortcutContent
     }),
     isDisabled: isDisabled,
@@ -78,12 +86,12 @@ var FormatButton = exports.FormatButton = function FormatButton(_ref2) {
     ariaLabel = _useComponentInfo2.ariaLabel,
     formatTitle = _useComponentInfo2.formatTitle;
   var Icon = icon;
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+  return /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
     content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
       description: formatTitle,
       keymap: shortcut
     })
-  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+  }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, {
     iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
       label: ariaLabel,
       size: "small"
@@ -98,7 +106,7 @@ var FormatButton = exports.FormatButton = function FormatButton(_ref2) {
 var ClearFormatMenuItem = exports.ClearFormatMenuItem = function ClearFormatMenuItem(_ref3) {
   var api = _ref3.api,
     parents = _ref3.parents;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textFormatting'], function (states) {
+  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['textFormatting'], function (states) {
       var _states$textFormattin, _states$textFormattin2;
       return {
         isInitialised: (_states$textFormattin = states.textFormattingState) === null || _states$textFormattin === void 0 ? void 0 : _states$textFormattin.isInitialised,
@@ -112,18 +120,18 @@ var ClearFormatMenuItem = exports.ClearFormatMenuItem = function ClearFormatMenu
   if (!isInitialised) {
     return null;
   }
-  var formatTitle = formatMessage(_messages.toolbarMessages.clearFormatting);
+  var formatTitle = formatMessage(_toolbar.toolbarMessages.clearFormatting);
   var shortcutContent = (0, _keymaps.tooltip)(_keymaps.clearFormatting);
   var onClick = function onClick() {
     var _api$analytics;
-    api === null || api === void 0 || api.core.actions.execute((0, _clearFormatting.clearFormattingWithAnalyticsNext)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)((0, _toolbar.getInputMethodFromParentKeys)(parents)));
+    api === null || api === void 0 || api.core.actions.execute((0, _clearFormatting.clearFormattingWithAnalyticsNext)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)((0, _toolbar2.getInputMethodFromParentKeys)(parents)));
   };
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ClearFormattingIcon, {
+  return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItem.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_clearFormattingIcon.ClearFormattingIcon, {
       label: "",
       size: "small"
     }),
-    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_toolbarKeyboardShortcutHint.ToolbarKeyboardShortcutHint, {
       shortcut: shortcutContent
     }),
     isDisabled: !isFormattingPresent,
@@ -135,15 +143,15 @@ var MoreFormattingMenu = exports.MoreFormattingMenu = function MoreFormattingMen
   var children = _ref4.children;
   var _useIntl2 = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl2.formatMessage;
-  var content = formatMessage(_messages.toolbarMessages.moreFormatting);
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
-    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.MoreItemsIcon, {
+  var content = formatMessage(_toolbar.toolbarMessages.moreFormatting);
+  return /*#__PURE__*/_react.default.createElement(_toolbarDropdownMenu.ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_moreItemsIcon.MoreItemsIcon, {
       label: "",
       testId: "more-formatting"
     }),
     label: content,
-    tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
-      content: formatMessage(_messages.toolbarMessages.textFormat)
+    tooltipComponent: /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
+      content: formatMessage(_toolbar.toolbarMessages.textFormat)
     })
   }, children);
 };
@@ -152,9 +160,9 @@ var MenuSection = exports.MenuSection = function MenuSection(_ref5) {
     title = _ref5.title,
     parents = _ref5.parents;
   var hasSeparator = parents.some(function (parent) {
-    return parent.key === _toolbar.TEXT_COLLAPSED_MENU.key;
+    return parent.key === _keys.TEXT_COLLAPSED_MENU.key;
   });
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+  return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItemSection.ToolbarDropdownItemSection, {
     hasSeparator: hasSeparator,
     title: title
   }, children);

package/dist/cjs/ui/Toolbar/components/TextFormattingGroupForInlineToolbar.js

@@ -6,31 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.textFormattingGroupForInlineToolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _toolbar = require("@atlaskit/editor-common/toolbar");
-var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _keys = require("@atlaskit/editor-common/toolbar/keys");
+var _rank = require("@atlaskit/editor-common/toolbar/rank");
+var _toolbarButtonGroup = require("@atlaskit/editor-toolbar/toolbar-button-group");
 var _types = require("../types");
 var _Component = require("./Component");
 var _utils = require("./utils");
 var textFormattingGroupForInlineToolbar = exports.textFormattingGroupForInlineToolbar = function textFormattingGroupForInlineToolbar(api) {
   return [{
-    type: _toolbar.TEXT_FORMATTING_GROUP_INLINE.type,
-    key: _toolbar.TEXT_FORMATTING_GROUP_INLINE.key,
+    type: _keys.TEXT_FORMATTING_GROUP_INLINE.type,
+    key: _keys.TEXT_FORMATTING_GROUP_INLINE.key,
     parents: [{
-      type: _toolbar.TEXT_SECTION.type,
-      key: _toolbar.TEXT_SECTION.key,
-      rank: _toolbar.TEXT_SECTION_RANK[_toolbar.TEXT_FORMATTING_GROUP.key]
+      type: _keys.TEXT_SECTION.type,
+      key: _keys.TEXT_SECTION.key,
+      rank: _rank.TEXT_SECTION_RANK[_keys.TEXT_FORMATTING_GROUP.key]
     }],
     component: function component(_ref) {
       var children = _ref.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children);
+      return /*#__PURE__*/_react.default.createElement(_toolbarButtonGroup.ToolbarButtonGroup, null, children);
     }
   }, {
-    type: _toolbar.TEXT_FORMATTING_HERO_BUTTON.type,
-    key: _toolbar.TEXT_FORMATTING_HERO_BUTTON.key,
+    type: _keys.TEXT_FORMATTING_HERO_BUTTON.type,
+    key: _keys.TEXT_FORMATTING_HERO_BUTTON.key,
     parents: [{
-      type: _toolbar.TEXT_FORMATTING_GROUP_INLINE.type,
-      key: _toolbar.TEXT_FORMATTING_GROUP_INLINE.key,
-      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
+      type: _keys.TEXT_FORMATTING_GROUP_INLINE.type,
+      key: _keys.TEXT_FORMATTING_GROUP_INLINE.key,
+      rank: _rank.TEXT_FORMAT_GROUP_RANK[_keys.TEXT_FORMATTING_HERO_BUTTON.key]
     }],
     component: function component(_ref2) {
       var parents = _ref2.parents;

package/dist/cjs/ui/Toolbar/components/TextFormattingGroups.js

@@ -6,64 +6,67 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.textFormattingGroupForPrimaryToolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _toolbar = require("@atlaskit/editor-common/toolbar");
-var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _context = require("@atlaskit/editor-common/toolbar/context");
+var _keys = require("@atlaskit/editor-common/toolbar/keys");
+var _rank = require("@atlaskit/editor-common/toolbar/rank");
+var _show = require("@atlaskit/editor-toolbar/show");
+var _toolbarButtonGroup = require("@atlaskit/editor-toolbar/toolbar-button-group");
 var _types = require("../types");
 var _Component = require("./Component");
 var _utils = require("./utils");
 var TextFormattingGroup = function TextFormattingGroup(_ref) {
   var children = _ref.children;
-  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+  var _useEditorToolbar = (0, _context.useEditorToolbar)(),
     editorAppearance = _useEditorToolbar.editorAppearance;
   if (editorAppearance === 'full-page') {
-    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+    return /*#__PURE__*/_react.default.createElement(_show.Show, {
       above: "xl"
-    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+    }, /*#__PURE__*/_react.default.createElement(_toolbarButtonGroup.ToolbarButtonGroup, null, children));
   }
 };
 var TextFormattingGroupCollapsed = function TextFormattingGroupCollapsed(_ref2) {
   var children = _ref2.children;
-  var _useEditorToolbar2 = (0, _toolbar.useEditorToolbar)(),
+  var _useEditorToolbar2 = (0, _context.useEditorToolbar)(),
     editorAppearance = _useEditorToolbar2.editorAppearance;
   if (editorAppearance === 'full-page') {
-    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+    return /*#__PURE__*/_react.default.createElement(_show.Show, {
       below: "xl"
-    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+    }, /*#__PURE__*/_react.default.createElement(_toolbarButtonGroup.ToolbarButtonGroup, null, children));
   }
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children);
+  return /*#__PURE__*/_react.default.createElement(_toolbarButtonGroup.ToolbarButtonGroup, null, children);
 };
 var textFormattingGroupForPrimaryToolbar = exports.textFormattingGroupForPrimaryToolbar = function textFormattingGroupForPrimaryToolbar(api) {
   return [{
-    type: _toolbar.TEXT_FORMATTING_GROUP.type,
-    key: _toolbar.TEXT_FORMATTING_GROUP.key,
+    type: _keys.TEXT_FORMATTING_GROUP.type,
+    key: _keys.TEXT_FORMATTING_GROUP.key,
     parents: [{
-      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
-      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
-      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.TEXT_FORMATTING_GROUP.key]
+      type: _keys.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _keys.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _rank.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_keys.TEXT_FORMATTING_GROUP.key]
     }],
     component: function component(_ref3) {
       var children = _ref3.children;
       return /*#__PURE__*/_react.default.createElement(TextFormattingGroup, null, children);
     }
   }, {
-    type: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.type,
-    key: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.key,
+    type: _keys.TEXT_FORMATTING_GROUP_COLLAPSED.type,
+    key: _keys.TEXT_FORMATTING_GROUP_COLLAPSED.key,
     parents: [{
-      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
-      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
-      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.TEXT_FORMATTING_GROUP.key]
+      type: _keys.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _keys.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _rank.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_keys.TEXT_FORMATTING_GROUP.key]
     }],
     component: function component(_ref4) {
       var children = _ref4.children;
       return /*#__PURE__*/_react.default.createElement(TextFormattingGroupCollapsed, null, children);
     }
   }, {
-    type: _toolbar.TEXT_FORMATTING_HERO_BUTTON.type,
-    key: _toolbar.TEXT_FORMATTING_HERO_BUTTON.key,
+    type: _keys.TEXT_FORMATTING_HERO_BUTTON.type,
+    key: _keys.TEXT_FORMATTING_HERO_BUTTON.key,
     parents: [{
-      type: _toolbar.TEXT_FORMATTING_GROUP.type,
-      key: _toolbar.TEXT_FORMATTING_GROUP.key,
-      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
+      type: _keys.TEXT_FORMATTING_GROUP.type,
+      key: _keys.TEXT_FORMATTING_GROUP.key,
+      rank: _rank.TEXT_FORMAT_GROUP_RANK[_keys.TEXT_FORMATTING_HERO_BUTTON.key]
     }],
     component: function component(_ref5) {
       var parents = _ref5.parents;
@@ -83,12 +86,12 @@ var textFormattingGroupForPrimaryToolbar = exports.textFormattingGroupForPrimary
       });
     }
   }, {
-    type: _toolbar.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.type,
-    key: _toolbar.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key,
+    type: _keys.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.type,
+    key: _keys.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key,
     parents: [{
-      type: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.type,
-      key: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.key,
-      rank: _toolbar.TEXT_FORMAT_GROUP_COLLAPSED_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key]
+      type: _keys.TEXT_FORMATTING_GROUP_COLLAPSED.type,
+      key: _keys.TEXT_FORMATTING_GROUP_COLLAPSED.key,
+      rank: _rank.TEXT_FORMAT_GROUP_COLLAPSED_RANK[_keys.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key]
     }],
     component: function component(_ref6) {
       var parents = _ref6.parents;

package/dist/cjs/ui/Toolbar/components/TextFormattingMenuGroup.js

@@ -8,8 +8,9 @@ exports.textFormattingMenuGroup = exports.getFormatMenuItems = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _toolbar = require("@atlaskit/editor-common/toolbar");
-var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _keys = require("@atlaskit/editor-common/toolbar/keys");
+var _rank = require("@atlaskit/editor-common/toolbar/rank");
+var _toolbarDropdownItemSection = require("@atlaskit/editor-toolbar/toolbar-dropdown-item-section");
 var _Component = require("./Component");
 var _utils = require("./utils");
 var getFormatMenuItems = exports.getFormatMenuItems = function getFormatMenuItems(api) {
@@ -27,8 +28,8 @@ var getFormatMenuItems = exports.getFormatMenuItems = function getFormatMenuItem
       type: 'menu-item',
       key: key,
       parents: [{
-        type: _toolbar.TEXT_FORMATTING_MENU_SECTION.type,
-        key: _toolbar.TEXT_FORMATTING_MENU_SECTION.key,
+        type: _keys.TEXT_FORMATTING_MENU_SECTION.type,
+        key: _keys.TEXT_FORMATTING_MENU_SECTION.key,
         rank: rank
       }],
       component: function component(_ref3) {
@@ -48,63 +49,63 @@ var getFormatMenuItems = exports.getFormatMenuItems = function getFormatMenuItem
 };
 var textFormattingMenuGroup = exports.textFormattingMenuGroup = function textFormattingMenuGroup(api) {
   return [{
-    type: _toolbar.TEXT_FORMATTING_MENU.type,
-    key: _toolbar.TEXT_FORMATTING_MENU.key,
+    type: _keys.TEXT_FORMATTING_MENU.type,
+    key: _keys.TEXT_FORMATTING_MENU.key,
     parents: [{
-      type: _toolbar.TEXT_FORMATTING_GROUP.type,
-      key: _toolbar.TEXT_FORMATTING_GROUP.key,
-      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_MENU.key]
+      type: _keys.TEXT_FORMATTING_GROUP.type,
+      key: _keys.TEXT_FORMATTING_GROUP.key,
+      rank: _rank.TEXT_FORMAT_GROUP_RANK[_keys.TEXT_FORMATTING_MENU.key]
     }, {
-      type: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.type,
-      key: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.key,
-      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_MENU.key]
+      type: _keys.TEXT_FORMATTING_GROUP_COLLAPSED.type,
+      key: _keys.TEXT_FORMATTING_GROUP_COLLAPSED.key,
+      rank: _rank.TEXT_FORMAT_GROUP_RANK[_keys.TEXT_FORMATTING_MENU.key]
     }, {
-      type: _toolbar.TEXT_FORMATTING_GROUP_INLINE.type,
-      key: _toolbar.TEXT_FORMATTING_GROUP_INLINE.key,
-      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
+      type: _keys.TEXT_FORMATTING_GROUP_INLINE.type,
+      key: _keys.TEXT_FORMATTING_GROUP_INLINE.key,
+      rank: _rank.TEXT_FORMAT_GROUP_RANK[_keys.TEXT_FORMATTING_HERO_BUTTON.key]
     }],
     component: function component(_ref4) {
       var children = _ref4.children;
       return /*#__PURE__*/_react.default.createElement(_Component.MoreFormattingMenu, null, children);
     }
   }, {
-    type: _toolbar.TEXT_FORMATTING_MENU_SECTION.type,
-    key: _toolbar.TEXT_FORMATTING_MENU_SECTION.key,
+    type: _keys.TEXT_FORMATTING_MENU_SECTION.type,
+    key: _keys.TEXT_FORMATTING_MENU_SECTION.key,
     parents: [{
-      type: _toolbar.TEXT_FORMATTING_MENU.type,
-      key: _toolbar.TEXT_FORMATTING_MENU.key,
-      rank: _toolbar.TEXT_FORMAT_MENU_RANK[_toolbar.TEXT_FORMATTING_MENU_SECTION.key]
+      type: _keys.TEXT_FORMATTING_MENU.type,
+      key: _keys.TEXT_FORMATTING_MENU.key,
+      rank: _rank.TEXT_FORMAT_MENU_RANK[_keys.TEXT_FORMATTING_MENU_SECTION.key]
     }, {
-      type: _toolbar.TEXT_COLLAPSED_MENU.type,
-      key: _toolbar.TEXT_COLLAPSED_MENU.key,
-      rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.TEXT_FORMATTING_MENU_SECTION.key]
+      type: _keys.TEXT_COLLAPSED_MENU.type,
+      key: _keys.TEXT_COLLAPSED_MENU.key,
+      rank: _rank.TEXT_COLLAPSED_MENU_RANK[_keys.TEXT_FORMATTING_MENU_SECTION.key]
     }],
     component: _Component.MenuSection
   }].concat((0, _toConsumableArray2.default)(getFormatMenuItems(api)), [{
-    type: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.type,
-    key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
+    type: _keys.CLEAR_FORMARTTING_MENU_SECTION.type,
+    key: _keys.CLEAR_FORMARTTING_MENU_SECTION.key,
     parents: [{
-      type: _toolbar.TEXT_FORMATTING_MENU.type,
-      key: _toolbar.TEXT_FORMATTING_MENU.key,
-      rank: _toolbar.TEXT_FORMAT_MENU_RANK[_toolbar.CLEAR_FORMARTTING_MENU_SECTION.key]
+      type: _keys.TEXT_FORMATTING_MENU.type,
+      key: _keys.TEXT_FORMATTING_MENU.key,
+      rank: _rank.TEXT_FORMAT_MENU_RANK[_keys.CLEAR_FORMARTTING_MENU_SECTION.key]
     }, {
-      type: _toolbar.TEXT_COLLAPSED_MENU.type,
-      key: _toolbar.TEXT_COLLAPSED_MENU.key,
-      rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.CLEAR_FORMARTTING_MENU_SECTION.key]
+      type: _keys.TEXT_COLLAPSED_MENU.type,
+      key: _keys.TEXT_COLLAPSED_MENU.key,
+      rank: _rank.TEXT_COLLAPSED_MENU_RANK[_keys.CLEAR_FORMARTTING_MENU_SECTION.key]
     }],
     component: function component(_ref5) {
       var children = _ref5.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+      return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItemSection.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
     }
   }, {
-    type: _toolbar.CLEAR_FORMATTING_MENU_ITEM.type,
-    key: _toolbar.CLEAR_FORMATTING_MENU_ITEM.key,
+    type: _keys.CLEAR_FORMATTING_MENU_ITEM.type,
+    key: _keys.CLEAR_FORMATTING_MENU_ITEM.key,
     parents: [{
-      type: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.type,
-      key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
-      rank: _toolbar.CLEAR_FORMARTTING_MENU_SECTION_RANK[_toolbar.CLEAR_FORMATTING_MENU_ITEM.key]
+      type: _keys.CLEAR_FORMARTTING_MENU_SECTION.type,
+      key: _keys.CLEAR_FORMARTTING_MENU_SECTION.key,
+      rank: _rank.CLEAR_FORMARTTING_MENU_SECTION_RANK[_keys.CLEAR_FORMATTING_MENU_ITEM.key]
     }],
     component: function component(_ref6) {
       var parents = _ref6.parents;