@atlaskit/editor-plugin-text-formatting 1.15.7 → 1.16.0

package/dist/es2019/ui/FloatingToolbarComponent.js

@@ -0,0 +1,64 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { FormattingTextDropdownMenu } from './Toolbar/dropdown-menu';
+import { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
+import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
+import { ToolbarType } from './Toolbar/types';
+const FloatingToolbarSettings = {
+  disabled: false,
+  isReducedSpacing: true,
+  shouldUseResponsiveToolbar: false,
+  toolbarSize: ToolbarSize.XXXS,
+  hasMoreButton: false,
+  moreButtonLabel: '',
+  toolbarType: ToolbarType.FLOATING
+};
+const FloatingToolbarTextFormat = ({
+  api,
+  editorAnalyticsAPI,
+  editorView,
+  intl
+}) => {
+  const {
+    textFormattingState
+  } = useSharedPluginState(api, ['textFormatting']);
+  const defaultIcons = useFormattingIcons({
+    schema: editorView.state.schema,
+    intl,
+    isToolbarDisabled: FloatingToolbarSettings.disabled,
+    editorAnalyticsAPI,
+    textFormattingState,
+    toolbarType: FloatingToolbarSettings.toolbarType
+  });
+  const clearIcon = useClearIcon({
+    textFormattingState,
+    intl,
+    editorAnalyticsAPI,
+    toolbarType: FloatingToolbarSettings.toolbarType
+  });
+  const items = useMemo(() => {
+    if (!clearIcon) {
+      return defaultIcons;
+    }
+    return [...defaultIcons, clearIcon];
+  }, [clearIcon, defaultIcons]);
+  return jsx(FormattingTextDropdownMenu, {
+    editorView: editorView,
+    items: items,
+    isReducedSpacing: FloatingToolbarSettings.isReducedSpacing,
+    moreButtonLabel: FloatingToolbarSettings.moreButtonLabel,
+    hasFormattingActive: FloatingToolbarSettings.hasMoreButton,
+    hasMoreButton: FloatingToolbarSettings.hasMoreButton,
+    intl: intl
+  });
+};
+export const FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import Toolbar from './Toolbar';
+import { ToolbarType } from './Toolbar/types';
 export function PrimaryToolbarComponent({
   api,
   popupsMountPoint,
@@ -25,6 +26,7 @@ export function PrimaryToolbarComponent({
     isToolbarDisabled: disabled,
     shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
     editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
-    api: api
+    api: api,
+    toolbarType: ToolbarType.PRIMARY
   });
 }

package/dist/es2019/ui/Toolbar/bold-button.js

@@ -0,0 +1,54 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { expandIconContainerStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
+export const BoldToolbarButton = ({
+  label,
+  isReducedSpacing,
+  isDisabled,
+  isSelected,
+  'aria-expanded': ariaExpanded,
+  onClick,
+  onKeyDown
+}) => {
+  return jsx(ToolbarButton, {
+    testId: 'ak-editor-selection-toolbar-format-text-button',
+    spacing: isReducedSpacing ? 'none' : 'default',
+    disabled: isDisabled,
+    selected: isSelected,
+    "aria-label": label,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": true,
+    title: label,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    iconBefore: jsx("div", {
+      css:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
+      fg('platform-visual-refresh-icons') ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      triggerWrapperStylesWithPadding :
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      triggerWrapperStyles
+    }, jsx(BoldIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    }), jsx("span", {
+      css: expandIconContainerStyle
+    }, jsx(ChevronDownIcon, {
+      label: "",
+      color: "currentColor",
+      LEGACY_margin: "0 0 0 -8px"
+    })))
+  });
+};

package/dist/es2019/ui/Toolbar/dropdown-menu.js

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { BoldToolbarButton } from './bold-button';
 import { useMenuState } from './hooks/menu-state';
 import { MoreButton } from './more-button';
 export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
@@ -11,7 +13,9 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   hasFormattingActive,
   popupsBoundariesElement,
   popupsMountPoint,
-  popupsScrollableElement
+  popupsScrollableElement,
+  hasMoreButton,
+  intl
 }) => {
   const [isMenuOpen, toggleMenu, closeMenu] = useMenuState();
   const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
@@ -47,7 +51,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
       }
       return isOpenedByKeyboard;
     }
-  }, /*#__PURE__*/React.createElement(MoreButton, {
+  }, hasMoreButton ? /*#__PURE__*/React.createElement(MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
@@ -64,5 +68,23 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
       }
     },
     "aria-expanded": isMenuOpen
+  }) : /*#__PURE__*/React.createElement(BoldToolbarButton, {
+    isReducedSpacing: isReducedSpacing,
+    isDisabled: false,
+    isSelected: isMenuOpen,
+    label: intl.formatMessage(toolbarMessages.textFormat),
+    "aria-expanded": isMenuOpen,
+    "aria-haspopup": true,
+    onClick: () => {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    }
   }));
 });

package/dist/es2019/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -6,20 +6,21 @@ import { useCallback, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
+import { getInputMethod } from '../../../input-method-utils';
 export const useClearIcon = ({
   intl,
   textFormattingState,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  toolbarType
 }) => {
   const isPluginAvailable = Boolean(textFormattingState);
   const formattingIsPresent = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent);
   const clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
-  const clearFormattingToolbar = useCallback((state, dispatch) => clearFormattingWithAnalytics(INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch), [editorAnalyticsAPI]);
+  const clearFormattingToolbar = useCallback((state, dispatch) => clearFormattingWithAnalytics(getInputMethod(toolbarType), editorAnalyticsAPI)(state, dispatch), [editorAnalyticsAPI, toolbarType]);
   return useMemo(() => {
     if (!isPluginAvailable) {
       return null;

package/dist/es2019/ui/Toolbar/hooks/formatting-icons.js

@@ -6,7 +6,7 @@ import React, { useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { INPUT_METHOD, TOOLBAR_ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { TOOLBAR_ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { getAriaKeyshortcuts, toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
@@ -14,12 +14,13 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
 import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic';
 import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../commands';
+import { getInputMethod } from '../../../input-method-utils';
 import { IconTypes } from '../types';
-const withToolbarInputMethod = func => editorCommandToPMCommand(func(INPUT_METHOD.TOOLBAR));
-const IconButtons = editorAnalyticsAPI => ({
+const withInputMethod = (toolbarType, func) => editorCommandToPMCommand(func(getInputMethod(toolbarType)));
+const IconButtons = (editorAnalyticsAPI, toolbarType) => ({
   strong: {
     buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
-    command: withToolbarInputMethod(toggleStrongWithAnalytics(editorAnalyticsAPI)),
+    command: withInputMethod(toolbarType, toggleStrongWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
     component: () => jsx(BoldIcon, {
@@ -30,7 +31,7 @@ const IconButtons = editorAnalyticsAPI => ({
   },
   em: {
     buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
-    command: withToolbarInputMethod(toggleEmWithAnalytics(editorAnalyticsAPI)),
+    command: withInputMethod(toolbarType, toggleEmWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
     component: () => jsx(ItalicIcon, {
@@ -40,27 +41,27 @@ const IconButtons = editorAnalyticsAPI => ({
     })
   },
   underline: {
-    command: withToolbarInputMethod(toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
+    command: withInputMethod(toolbarType, toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.underline,
     tooltipKeymap: toggleUnderline
   },
   strike: {
-    command: withToolbarInputMethod(toggleStrikeWithAnalytics(editorAnalyticsAPI)),
+    command: withInputMethod(toolbarType, toggleStrikeWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.strike,
     tooltipKeymap: toggleStrikethrough
   },
   code: {
-    command: withToolbarInputMethod(toggleCodeWithAnalytics(editorAnalyticsAPI)),
+    command: withInputMethod(toolbarType, toggleCodeWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.code,
     tooltipKeymap: toggleCode
   },
   subscript: {
-    command: withToolbarInputMethod(toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
+    command: withInputMethod(toolbarType, toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.subscript,
     tooltipKeymap: toggleSubscript
   },
   superscript: {
-    command: withToolbarInputMethod(toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
+    command: withInputMethod(toolbarType, toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.superscript,
     tooltipKeymap: toggleSuperscript
   }
@@ -70,9 +71,10 @@ const getIcon = ({
   isDisabled,
   isActive,
   intl,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  toolbarType
 }) => {
-  const icon = IconButtons(editorAnalyticsAPI)[iconType];
+  const icon = IconButtons(editorAnalyticsAPI, toolbarType)[iconType];
   const content = intl.formatMessage(icon.message);
   const {
     tooltipKeymap
@@ -136,7 +138,7 @@ const buildMenuIconState = iconMark => ({
     hasSchemaMark
   };
 };
-const buildIcon = (iconMark, editorAnalyticsAPI) => {
+const buildIcon = (iconMark, editorAnalyticsAPI, toolbarType) => {
   const getState = buildMenuIconState(iconMark);
   return ({
     schema,
@@ -159,7 +161,8 @@ const buildIcon = (iconMark, editorAnalyticsAPI) => {
       isDisabled: isToolbarDisabled || isDisabled,
       isActive,
       intl,
-      editorAnalyticsAPI
+      editorAnalyticsAPI,
+      toolbarType
     }), [isToolbarDisabled, isDisabled, isActive, intl]);
     const shouldRenderIcon = hasSchemaMark && !isHidden;
     return useMemo(() => shouldRenderIcon ? iconComponent : null, [shouldRenderIcon, iconComponent]);
@@ -170,21 +173,23 @@ export const useFormattingIcons = ({
   textFormattingState,
   schema,
   intl,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  toolbarType
 }) => {
   const props = {
     schema,
     textFormattingState,
     intl,
-    isToolbarDisabled: Boolean(isToolbarDisabled)
+    isToolbarDisabled: Boolean(isToolbarDisabled),
+    toolbarType
   };
-  const buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI);
-  const buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI);
-  const buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI);
-  const buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI);
-  const buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI);
-  const buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI);
-  const buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI);
+  const buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI, toolbarType);
+  const buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI, toolbarType);
+  const buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI, toolbarType);
+  const buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI, toolbarType);
+  const buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI, toolbarType);
+  const buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI, toolbarType);
+  const buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI, toolbarType);
   const strongIcon = buildStrongIcon(props);
   const emIcon = buildEmIcon(props);
   const underlineIcon = buildUnderlineIcon(props);

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

@@ -30,7 +30,8 @@ const ToolbarFormatting = ({
   intl,
   editorAnalyticsAPI,
   textFormattingState,
-  api
+  api,
+  toolbarType
 }) => {
   var _usePreviousState;
   const [message, setMessage] = useState('');
@@ -39,12 +40,14 @@ const ToolbarFormatting = ({
     intl,
     isToolbarDisabled,
     editorAnalyticsAPI,
-    textFormattingState
+    textFormattingState,
+    toolbarType
   });
   const clearIcon = useClearIcon({
     textFormattingState,
     intl,
-    editorAnalyticsAPI
+    editorAnalyticsAPI,
+    toolbarType
   });
   const menuIconTypeList = useResponsiveIconTypeMenu({
     toolbarSize,
@@ -150,7 +153,9 @@ const ToolbarFormatting = ({
       isReducedSpacing: isReducedSpacing,
       moreButtonLabel: moreFormattingButtonLabel,
       hasFormattingActive: hasFormattingActive,
-      items: items
+      hasMoreButton: true,
+      items: items,
+      intl: intl
     }))), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("span", {
@@ -169,7 +174,8 @@ const Toolbar = ({
   intl,
   editorAnalyticsAPI,
   textFormattingState,
-  api
+  api,
+  toolbarType
 }) => {
   return jsx(ToolbarFormatting, {
     textFormattingState: textFormattingState,
@@ -182,7 +188,8 @@ const Toolbar = ({
     shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
     intl: intl,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    api: api
+    api: api,
+    toolbarType: toolbarType
   });
 };
 export default injectIntl(Toolbar);

package/dist/es2019/ui/Toolbar/types.js

@@ -7,4 +7,9 @@ export let IconTypes = /*#__PURE__*/function (IconTypes) {
   IconTypes["subscript"] = "subscript";
   IconTypes["superscript"] = "superscript";
   return IconTypes;
+}({});
+export let ToolbarType = /*#__PURE__*/function (ToolbarType) {
+  ToolbarType["PRIMARY"] = "primaryToolbar";
+  ToolbarType["FLOATING"] = "floatingToolbar";
+  return ToolbarType;
 }({});

package/dist/esm/input-method-utils.js

@@ -0,0 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _toolbarTypeToInputMe;
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ToolbarType } from './ui/Toolbar/types';
+export var toolbarTypeToInputMethod = (_toolbarTypeToInputMe = {}, _defineProperty(_toolbarTypeToInputMe, ToolbarType.PRIMARY, INPUT_METHOD.TOOLBAR), _defineProperty(_toolbarTypeToInputMe, ToolbarType.FLOATING, INPUT_METHOD.FLOATING_TB), _toolbarTypeToInputMe);
+export var getInputMethod = function getInputMethod(toolbarType) {
+  return toolbarTypeToInputMethod[toolbarType];
+};

package/dist/esm/plugin.js

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './commands';
 import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
@@ -11,13 +12,14 @@ import textFormattingInputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { plugin as pmPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
 import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
+import { FloatingToolbarTextFormalWithIntl as FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
 /**
  * Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
  */
 export var textFormattingPlugin = function textFormattingPlugin(_ref) {
-  var _api$primaryToolbar, _api$analytics6, _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12;
+  var _api$primaryToolbar, _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12, _api$analytics13;
   var options = _ref.config,
     api = _ref.api;
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
@@ -121,15 +123,44 @@ export var textFormattingPlugin = function textFormattingPlugin(_ref) {
         formattingIsPresent: (_clearFormattingPlugi = clearFormattingPluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent
       });
     },
+    pluginsOptions: {
+      selectionToolbar: function selectionToolbar() {
+        if (editorExperiment('contextual_formatting_toolbar', true, {
+          exposure: true
+        })) {
+          var toolbarCustom = {
+            type: 'custom',
+            render: function render(view) {
+              var _api$analytics6;
+              if (!view) {
+                return;
+              }
+              return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
+                api: api,
+                editorView: view,
+                editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions
+              });
+            },
+            fallback: []
+          };
+          return {
+            isToolbarAbove: true,
+            items: [toolbarCustom]
+          };
+        } else {
+          return undefined;
+        }
+      }
+    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
     commands: {
-      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions),
-      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
-      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
-      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
-      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
-      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
-      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions)
+      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
+      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
+      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
+      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
+      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
+      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions),
+      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 || (_api$analytics13 = api.analytics) === null || _api$analytics13 === void 0 ? void 0 : _api$analytics13.actions)
     }
   };
 };

package/dist/esm/ui/FloatingToolbarComponent.js

@@ -0,0 +1,63 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { FormattingTextDropdownMenu } from './Toolbar/dropdown-menu';
+import { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
+import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
+import { ToolbarType } from './Toolbar/types';
+var FloatingToolbarSettings = {
+  disabled: false,
+  isReducedSpacing: true,
+  shouldUseResponsiveToolbar: false,
+  toolbarSize: ToolbarSize.XXXS,
+  hasMoreButton: false,
+  moreButtonLabel: '',
+  toolbarType: ToolbarType.FLOATING
+};
+var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
+  var api = _ref.api,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    editorView = _ref.editorView,
+    intl = _ref.intl;
+  var _useSharedPluginState = useSharedPluginState(api, ['textFormatting']),
+    textFormattingState = _useSharedPluginState.textFormattingState;
+  var defaultIcons = useFormattingIcons({
+    schema: editorView.state.schema,
+    intl: intl,
+    isToolbarDisabled: FloatingToolbarSettings.disabled,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    textFormattingState: textFormattingState,
+    toolbarType: FloatingToolbarSettings.toolbarType
+  });
+  var clearIcon = useClearIcon({
+    textFormattingState: textFormattingState,
+    intl: intl,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    toolbarType: FloatingToolbarSettings.toolbarType
+  });
+  var items = useMemo(function () {
+    if (!clearIcon) {
+      return defaultIcons;
+    }
+    return [].concat(_toConsumableArray(defaultIcons), [clearIcon]);
+  }, [clearIcon, defaultIcons]);
+  return jsx(FormattingTextDropdownMenu, {
+    editorView: editorView,
+    items: items,
+    isReducedSpacing: FloatingToolbarSettings.isReducedSpacing,
+    moreButtonLabel: FloatingToolbarSettings.moreButtonLabel,
+    hasFormattingActive: FloatingToolbarSettings.hasMoreButton,
+    hasMoreButton: FloatingToolbarSettings.hasMoreButton,
+    intl: intl
+  });
+};
+export var FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import Toolbar from './Toolbar';
+import { ToolbarType } from './Toolbar/types';
 export function PrimaryToolbarComponent(_ref) {
   var _api$analytics;
   var api = _ref.api,
@@ -23,6 +24,7 @@ export function PrimaryToolbarComponent(_ref) {
     isToolbarDisabled: disabled,
     shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
     editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
-    api: api
+    api: api,
+    toolbarType: ToolbarType.PRIMARY
   });
 }

package/dist/esm/ui/Toolbar/bold-button.js

@@ -0,0 +1,53 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { expandIconContainerStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
+export var BoldToolbarButton = function BoldToolbarButton(_ref) {
+  var label = _ref.label,
+    isReducedSpacing = _ref.isReducedSpacing,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    ariaExpanded = _ref['aria-expanded'],
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown;
+  return jsx(ToolbarButton, {
+    testId: 'ak-editor-selection-toolbar-format-text-button',
+    spacing: isReducedSpacing ? 'none' : 'default',
+    disabled: isDisabled,
+    selected: isSelected,
+    "aria-label": label,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": true,
+    title: label,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    iconBefore: jsx("div", {
+      css:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
+      fg('platform-visual-refresh-icons') ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      triggerWrapperStylesWithPadding :
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      triggerWrapperStyles
+    }, jsx(BoldIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    }), jsx("span", {
+      css: expandIconContainerStyle
+    }, jsx(ChevronDownIcon, {
+      label: "",
+      color: "currentColor",
+      LEGACY_margin: "0 0 0 -8px"
+    })))
+  });
+};