@atlaskit/editor-plugin-text-formatting 5.2.2 → 5.3.1

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { TEXT_FORMATTING_GROUP, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMATTING_GROUP_COLLAPSED, TEXT_FORMATTING_HERO_BUTTON_COLLAPSED, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_GROUP_COLLAPSED_RANK, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
+import { FormatOptions } from '../types';
+import { FormatButton } from './Component';
+import { formatOptions } from './utils';
+const TextFormattingGroup = ({
+  children
+}) => {
+  const {
+    editorAppearance
+  } = useEditorToolbar();
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/React.createElement(Show, {
+      above: "xl"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
+  }
+};
+const TextFormattingGroupCollapsed = ({
+  children
+}) => {
+  const {
+    editorAppearance
+  } = useEditorToolbar();
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/React.createElement(Show, {
+      below: "xl"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
+  }
+  return /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children);
+};
+export const textFormattingGroupForPrimaryToolbar = api => [{
+  type: TEXT_FORMATTING_GROUP.type,
+  key: TEXT_FORMATTING_GROUP.key,
+  parents: [{
+    type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+    key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+    rank: TEXT_SECTION_PRIMARY_TOOLBAR_RANK[TEXT_FORMATTING_GROUP.key]
+  }],
+  component: ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(TextFormattingGroup, null, children);
+  }
+}, {
+  type: TEXT_FORMATTING_GROUP_COLLAPSED.type,
+  key: TEXT_FORMATTING_GROUP_COLLAPSED.key,
+  parents: [{
+    type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+    key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+    rank: TEXT_SECTION_PRIMARY_TOOLBAR_RANK[TEXT_FORMATTING_GROUP.key]
+  }],
+  component: ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(TextFormattingGroupCollapsed, null, children);
+  }
+}, {
+  type: TEXT_FORMATTING_HERO_BUTTON.type,
+  key: TEXT_FORMATTING_HERO_BUTTON.key,
+  parents: [{
+    type: TEXT_FORMATTING_GROUP.type,
+    key: TEXT_FORMATTING_GROUP.key,
+    rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
+  }],
+  component: ({
+    parents
+  }) => {
+    const {
+      icon,
+      command,
+      shortcut,
+      title
+    } = formatOptions().em;
+    return /*#__PURE__*/React.createElement(FormatButton, {
+      api: api,
+      parents: parents,
+      icon: icon,
+      title: title,
+      shortcut: shortcut,
+      optionType: FormatOptions.em,
+      toggleMarkWithAnalyticsCallback: command
+    });
+  }
+}, {
+  type: TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.type,
+  key: TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key,
+  parents: [{
+    type: TEXT_FORMATTING_GROUP_COLLAPSED.type,
+    key: TEXT_FORMATTING_GROUP_COLLAPSED.key,
+    rank: TEXT_FORMAT_GROUP_COLLAPSED_RANK[TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key]
+  }],
+  component: ({
+    parents
+  }) => {
+    const {
+      icon,
+      command,
+      shortcut,
+      title
+    } = formatOptions().strong;
+    return /*#__PURE__*/React.createElement(FormatButton, {
+      api: api,
+      parents: parents,
+      icon: icon,
+      title: title,
+      shortcut: shortcut,
+      optionType: FormatOptions.strong,
+      toggleMarkWithAnalyticsCallback: command
+    });
+  }
+}];

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import { CLEAR_FORMARTTING_MENU_SECTION, CLEAR_FORMATTING_MENU_ITEM, TEXT_FORMATTING_MENU, TEXT_FORMATTING_MENU_SECTION, TEXT_FORMATTING_GROUP, TEXT_FORMATTING_GROUP_COLLAPSED, TEXT_FORMATTING_GROUP_INLINE, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ClearFormatMenuItem, MoreFormattingMenu, MenuSection, FormatMenuItem } from './Component';
+import { formatOptions } from './utils';
+const getFormatMenuItems = api => {
+  return Object.entries(formatOptions()).map(([optionType, {
+    icon,
+    shortcut,
+    title,
+    command,
+    rank,
+    key
+  }]) => {
+    return {
+      type: 'menu-item',
+      key,
+      parents: [{
+        type: TEXT_FORMATTING_MENU_SECTION.type,
+        key: TEXT_FORMATTING_MENU_SECTION.key,
+        rank
+      }],
+      component: ({
+        parents
+      }) => {
+        return /*#__PURE__*/React.createElement(FormatMenuItem, {
+          api: api,
+          parents: parents,
+          icon: icon,
+          shortcut: shortcut,
+          title: title,
+          optionType: optionType,
+          toggleMarkWithAnalyticsCallback: command
+        });
+      }
+    };
+  });
+};
+export const textFormattingMenuGroup = api => [{
+  type: TEXT_FORMATTING_MENU.type,
+  key: TEXT_FORMATTING_MENU.key,
+  parents: [{
+    type: TEXT_FORMATTING_GROUP.type,
+    key: TEXT_FORMATTING_GROUP.key,
+    rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_MENU.key]
+  }, {
+    type: TEXT_FORMATTING_GROUP_COLLAPSED.type,
+    key: TEXT_FORMATTING_GROUP_COLLAPSED.key,
+    rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_MENU.key]
+  }, {
+    type: TEXT_FORMATTING_GROUP_INLINE.type,
+    key: TEXT_FORMATTING_GROUP_INLINE.key,
+    rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
+  }],
+  component: ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(MoreFormattingMenu, null, children);
+  }
+}, {
+  type: TEXT_FORMATTING_MENU_SECTION.type,
+  key: TEXT_FORMATTING_MENU_SECTION.key,
+  parents: [{
+    type: TEXT_FORMATTING_MENU.type,
+    key: TEXT_FORMATTING_MENU.key,
+    rank: TEXT_FORMAT_MENU_RANK[TEXT_FORMATTING_MENU_SECTION.key]
+  }, ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+    type: TEXT_COLLAPSED_MENU.type,
+    key: TEXT_COLLAPSED_MENU.key,
+    rank: TEXT_COLLAPSED_MENU_RANK[TEXT_FORMATTING_MENU_SECTION.key]
+  }] : [])],
+  component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? MenuSection : undefined
+}, ...getFormatMenuItems(api), {
+  type: CLEAR_FORMARTTING_MENU_SECTION.type,
+  key: CLEAR_FORMARTTING_MENU_SECTION.key,
+  parents: [{
+    type: TEXT_FORMATTING_MENU.type,
+    key: TEXT_FORMATTING_MENU.key,
+    rank: TEXT_FORMAT_MENU_RANK[CLEAR_FORMARTTING_MENU_SECTION.key]
+  }, ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+    type: TEXT_COLLAPSED_MENU.type,
+    key: TEXT_COLLAPSED_MENU.key,
+    rank: TEXT_COLLAPSED_MENU_RANK[CLEAR_FORMARTTING_MENU_SECTION.key]
+  }] : [])],
+  component: ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+      hasSeparator: true
+    }, children);
+  }
+}, {
+  type: CLEAR_FORMATTING_MENU_ITEM.type,
+  key: CLEAR_FORMATTING_MENU_ITEM.key,
+  parents: [{
+    type: CLEAR_FORMARTTING_MENU_SECTION.type,
+    key: CLEAR_FORMARTTING_MENU_SECTION.key,
+    rank: CLEAR_FORMARTTING_MENU_SECTION_RANK[CLEAR_FORMATTING_MENU_ITEM.key]
+  }],
+  component: ({
+    parents
+  }) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClearFormatMenuItem, {
+      parents: parents,
+      api: api
+    }));
+  }
+}];

package/dist/es2019/ui/Toolbar/components/UnderlineButtonGroup.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { UNDERLINE_BUTTON_GROUP, UNDERLINE_BUTTON, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_FORMAT_GROUP_RANK, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
+import { FormatOptions } from '../types';
+import { FormatButton } from './Component';
+import { formatOptions } from './utils';
+const UnderlineButtonGroup = ({
+  children
+}) => {
+  const {
+    editorAppearance
+  } = useEditorToolbar();
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/React.createElement(Show, {
+      above: "xl"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
+  }
+};
+export const underlineButtonGroup = api => [{
+  type: UNDERLINE_BUTTON_GROUP.type,
+  key: UNDERLINE_BUTTON_GROUP.key,
+  parents: [{
+    type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+    key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+    rank: TEXT_FORMAT_GROUP_RANK[UNDERLINE_BUTTON_GROUP.key]
+  }],
+  component: ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(UnderlineButtonGroup, null, children);
+  }
+}, {
+  type: UNDERLINE_BUTTON.type,
+  key: UNDERLINE_BUTTON.key,
+  parents: [{
+    type: UNDERLINE_BUTTON_GROUP.type,
+    key: UNDERLINE_BUTTON_GROUP.key,
+    rank: 100
+  }],
+  component: ({
+    parents
+  }) => {
+    const {
+      icon,
+      command,
+      shortcut,
+      title
+    } = formatOptions().underline;
+    return /*#__PURE__*/React.createElement(FormatButton, {
+      api: api,
+      parents: parents,
+      icon: icon,
+      title: title,
+      shortcut: shortcut,
+      optionType: FormatOptions.underline,
+      toggleMarkWithAnalyticsCallback: command
+    });
+  }
+}];

package/dist/es2019/ui/toolbar-components.js

@@ -2,43 +2,15 @@ import React from 'react';
 import { CLEAR_FORMARTTING_MENU_SECTION, CLEAR_FORMATTING_MENU_ITEM, TEXT_FORMATTING_GROUP, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMATTING_MENU, TEXT_FORMATTING_MENU_SECTION, TEXT_SECTION, TEXT_SECTION_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { FormatMenuItem, FormatButton, ClearFormatMenuItem, MoreFormattingMenu, MenuSection } from './Toolbar/components/Component';
+import { boldButtonGroup } from './Toolbar/components/BoldButtonGroup';
+import { FormatButton, ClearFormatMenuItem, MoreFormattingMenu, MenuSection } from './Toolbar/components/Component';
+import { textFormattingGroupForInlineToolbar } from './Toolbar/components/TextFormattingGroupForInlineToolbar';
+import { textFormattingGroupForPrimaryToolbar } from './Toolbar/components/TextFormattingGroups';
+import { textFormattingMenuGroup } from './Toolbar/components/TextFormattingMenuGroup';
+import { underlineButtonGroup } from './Toolbar/components/UnderlineButtonGroup';
 import { formatOptions } from './Toolbar/components/utils';
 import { FormatOptions } from './Toolbar/types';
-const getFormatMenuItems = api => {
-  return Object.entries(formatOptions()).map(([optionType, {
-    icon,
-    shortcut,
-    title,
-    command,
-    rank,
-    key
-  }]) => {
-    return {
-      type: 'menu-item',
-      key,
-      parents: [{
-        type: TEXT_FORMATTING_MENU_SECTION.type,
-        key: TEXT_FORMATTING_MENU_SECTION.key,
-        rank
-      }],
-      component: ({
-        parents
-      }) => {
-        return /*#__PURE__*/React.createElement(FormatMenuItem, {
-          api: api,
-          parents: parents,
-          icon: icon,
-          shortcut: shortcut,
-          title: title,
-          optionType: optionType,
-          toggleMarkWithAnalyticsCallback: command
-        });
-      }
-    };
-  });
-};
-export const getToolbarComponents = api => [{
+export const getToolbarComponents = api => expValEquals('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? getToolbarComponentsResponsivenessUpdate(api) : [{
   type: TEXT_FORMATTING_GROUP.type,
   key: TEXT_FORMATTING_GROUP.key,
   parents: [{
@@ -99,7 +71,7 @@ export const getToolbarComponents = api => [{
     rank: TEXT_COLLAPSED_MENU_RANK[TEXT_FORMATTING_MENU_SECTION.key]
   }] : [])],
   component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? MenuSection : undefined
-}, ...getFormatMenuItems(api), {
+}, {
   type: CLEAR_FORMARTTING_MENU_SECTION.type,
   key: CLEAR_FORMARTTING_MENU_SECTION.key,
   parents: [{
@@ -134,4 +106,7 @@ export const getToolbarComponents = api => [{
       api: api
     }));
   }
-}];
+}];
+export const getToolbarComponentsResponsivenessUpdate = api => {
+  return [...textFormattingGroupForPrimaryToolbar(api), ...textFormattingGroupForInlineToolbar(api), ...boldButtonGroup(api), ...underlineButtonGroup(api), ...textFormattingMenuGroup(api)];
+};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { BOLD_BUTTON_GROUP, BOLD_BUTTON, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_FORMAT_GROUP_RANK, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
+import { FormatOptions } from '../types';
+import { FormatButton } from './Component';
+import { formatOptions } from './utils';
+var BoldButtonGroup = function BoldButtonGroup(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/React.createElement(Show, {
+      above: "xl"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
+  }
+};
+export var boldButtonGroup = function boldButtonGroup(api) {
+  return [{
+    type: BOLD_BUTTON_GROUP.type,
+    key: BOLD_BUTTON_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: TEXT_FORMAT_GROUP_RANK[BOLD_BUTTON_GROUP.key]
+    }],
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/React.createElement(BoldButtonGroup, null, children);
+    }
+  }, {
+    type: BOLD_BUTTON.type,
+    key: BOLD_BUTTON.key,
+    parents: [{
+      type: BOLD_BUTTON_GROUP.type,
+      key: BOLD_BUTTON_GROUP.key,
+      rank: 100
+    }],
+    component: function component(_ref3) {
+      var parents = _ref3.parents;
+      var _formatOptions$strong = formatOptions().strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/React.createElement(FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }];
+};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TEXT_FORMATTING_GROUP_INLINE, TEXT_FORMATTING_HERO_BUTTON, TEXT_SECTION, TEXT_SECTION_RANK, TEXT_FORMATTING_GROUP, TEXT_FORMAT_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
+import { ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
+import { FormatOptions } from '../types';
+import { FormatButton } from './Component';
+import { formatOptions } from './utils';
+export var textFormattingGroupForInlineToolbar = function textFormattingGroupForInlineToolbar(api) {
+  return [{
+    type: TEXT_FORMATTING_GROUP_INLINE.type,
+    key: TEXT_FORMATTING_GROUP_INLINE.key,
+    parents: [{
+      type: TEXT_SECTION.type,
+      key: TEXT_SECTION.key,
+      rank: TEXT_SECTION_RANK[TEXT_FORMATTING_GROUP.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children);
+    }
+  }, {
+    type: TEXT_FORMATTING_HERO_BUTTON.type,
+    key: TEXT_FORMATTING_HERO_BUTTON.key,
+    parents: [{
+      type: TEXT_FORMATTING_GROUP_INLINE.type,
+      key: TEXT_FORMATTING_GROUP_INLINE.key,
+      rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
+    }],
+    component: function component(_ref2) {
+      var parents = _ref2.parents;
+      var _formatOptions$strong = formatOptions().strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/React.createElement(FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }];
+};

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { TEXT_FORMATTING_GROUP, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMATTING_GROUP_COLLAPSED, TEXT_FORMATTING_HERO_BUTTON_COLLAPSED, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_GROUP_COLLAPSED_RANK, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
+import { FormatOptions } from '../types';
+import { FormatButton } from './Component';
+import { formatOptions } from './utils';
+var TextFormattingGroup = function TextFormattingGroup(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/React.createElement(Show, {
+      above: "xl"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
+  }
+};
+var TextFormattingGroupCollapsed = function TextFormattingGroupCollapsed(_ref2) {
+  var children = _ref2.children;
+  var _useEditorToolbar2 = useEditorToolbar(),
+    editorAppearance = _useEditorToolbar2.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/React.createElement(Show, {
+      below: "xl"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
+  }
+  return /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children);
+};
+export var textFormattingGroupForPrimaryToolbar = function textFormattingGroupForPrimaryToolbar(api) {
+  return [{
+    type: TEXT_FORMATTING_GROUP.type,
+    key: TEXT_FORMATTING_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: TEXT_SECTION_PRIMARY_TOOLBAR_RANK[TEXT_FORMATTING_GROUP.key]
+    }],
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/React.createElement(TextFormattingGroup, null, children);
+    }
+  }, {
+    type: TEXT_FORMATTING_GROUP_COLLAPSED.type,
+    key: TEXT_FORMATTING_GROUP_COLLAPSED.key,
+    parents: [{
+      type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: TEXT_SECTION_PRIMARY_TOOLBAR_RANK[TEXT_FORMATTING_GROUP.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/React.createElement(TextFormattingGroupCollapsed, null, children);
+    }
+  }, {
+    type: TEXT_FORMATTING_HERO_BUTTON.type,
+    key: TEXT_FORMATTING_HERO_BUTTON.key,
+    parents: [{
+      type: TEXT_FORMATTING_GROUP.type,
+      key: TEXT_FORMATTING_GROUP.key,
+      rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
+    }],
+    component: function component(_ref5) {
+      var parents = _ref5.parents;
+      var _formatOptions$em = formatOptions().em,
+        icon = _formatOptions$em.icon,
+        command = _formatOptions$em.command,
+        shortcut = _formatOptions$em.shortcut,
+        title = _formatOptions$em.title;
+      return /*#__PURE__*/React.createElement(FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: FormatOptions.em,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }, {
+    type: TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.type,
+    key: TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key,
+    parents: [{
+      type: TEXT_FORMATTING_GROUP_COLLAPSED.type,
+      key: TEXT_FORMATTING_GROUP_COLLAPSED.key,
+      rank: TEXT_FORMAT_GROUP_COLLAPSED_RANK[TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key]
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      var _formatOptions$strong = formatOptions().strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/React.createElement(FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }];
+};

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

@@ -0,0 +1,111 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { CLEAR_FORMARTTING_MENU_SECTION, CLEAR_FORMATTING_MENU_ITEM, TEXT_FORMATTING_MENU, TEXT_FORMATTING_MENU_SECTION, TEXT_FORMATTING_GROUP, TEXT_FORMATTING_GROUP_COLLAPSED, TEXT_FORMATTING_GROUP_INLINE, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ClearFormatMenuItem, MoreFormattingMenu, MenuSection, FormatMenuItem } from './Component';
+import { formatOptions } from './utils';
+var getFormatMenuItems = function getFormatMenuItems(api) {
+  return Object.entries(formatOptions()).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      optionType = _ref2[0],
+      _ref2$ = _ref2[1],
+      icon = _ref2$.icon,
+      shortcut = _ref2$.shortcut,
+      title = _ref2$.title,
+      command = _ref2$.command,
+      rank = _ref2$.rank,
+      key = _ref2$.key;
+    return {
+      type: 'menu-item',
+      key: key,
+      parents: [{
+        type: TEXT_FORMATTING_MENU_SECTION.type,
+        key: TEXT_FORMATTING_MENU_SECTION.key,
+        rank: rank
+      }],
+      component: function component(_ref3) {
+        var parents = _ref3.parents;
+        return /*#__PURE__*/React.createElement(FormatMenuItem, {
+          api: api,
+          parents: parents,
+          icon: icon,
+          shortcut: shortcut,
+          title: title,
+          optionType: optionType,
+          toggleMarkWithAnalyticsCallback: command
+        });
+      }
+    };
+  });
+};
+export var textFormattingMenuGroup = function textFormattingMenuGroup(api) {
+  return [{
+    type: TEXT_FORMATTING_MENU.type,
+    key: TEXT_FORMATTING_MENU.key,
+    parents: [{
+      type: TEXT_FORMATTING_GROUP.type,
+      key: TEXT_FORMATTING_GROUP.key,
+      rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_MENU.key]
+    }, {
+      type: TEXT_FORMATTING_GROUP_COLLAPSED.type,
+      key: TEXT_FORMATTING_GROUP_COLLAPSED.key,
+      rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_MENU.key]
+    }, {
+      type: TEXT_FORMATTING_GROUP_INLINE.type,
+      key: TEXT_FORMATTING_GROUP_INLINE.key,
+      rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/React.createElement(MoreFormattingMenu, null, children);
+    }
+  }, {
+    type: TEXT_FORMATTING_MENU_SECTION.type,
+    key: TEXT_FORMATTING_MENU_SECTION.key,
+    parents: [{
+      type: TEXT_FORMATTING_MENU.type,
+      key: TEXT_FORMATTING_MENU.key,
+      rank: TEXT_FORMAT_MENU_RANK[TEXT_FORMATTING_MENU_SECTION.key]
+    }].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: TEXT_COLLAPSED_MENU.type,
+      key: TEXT_COLLAPSED_MENU.key,
+      rank: TEXT_COLLAPSED_MENU_RANK[TEXT_FORMATTING_MENU_SECTION.key]
+    }] : [])),
+    component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? MenuSection : undefined
+  }].concat(_toConsumableArray(getFormatMenuItems(api)), [{
+    type: CLEAR_FORMARTTING_MENU_SECTION.type,
+    key: CLEAR_FORMARTTING_MENU_SECTION.key,
+    parents: [{
+      type: TEXT_FORMATTING_MENU.type,
+      key: TEXT_FORMATTING_MENU.key,
+      rank: TEXT_FORMAT_MENU_RANK[CLEAR_FORMARTTING_MENU_SECTION.key]
+    }].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: TEXT_COLLAPSED_MENU.type,
+      key: TEXT_COLLAPSED_MENU.key,
+      rank: TEXT_COLLAPSED_MENU_RANK[CLEAR_FORMARTTING_MENU_SECTION.key]
+    }] : [])),
+    component: function component(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
+  }, {
+    type: CLEAR_FORMATTING_MENU_ITEM.type,
+    key: CLEAR_FORMATTING_MENU_ITEM.key,
+    parents: [{
+      type: CLEAR_FORMARTTING_MENU_SECTION.type,
+      key: CLEAR_FORMARTTING_MENU_SECTION.key,
+      rank: CLEAR_FORMARTTING_MENU_SECTION_RANK[CLEAR_FORMATTING_MENU_ITEM.key]
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClearFormatMenuItem, {
+        parents: parents,
+        api: api
+      }));
+    }
+  }]);
+};