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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 1.16.0
+
+### Minor Changes
+
+- [#170931](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170931)
+  [`5a4a927fac223`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5a4a927fac223) -
+  [ux] Adds text formatting option to the Selection toolbar.
+
 ## 1.15.7
 
 ### Patch Changes

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolbarTypeToInputMethod = exports.getInputMethod = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _types = require("./ui/Toolbar/types");
+var _toolbarTypeToInputMe;
+var toolbarTypeToInputMethod = exports.toolbarTypeToInputMethod = (_toolbarTypeToInputMe = {}, (0, _defineProperty2.default)(_toolbarTypeToInputMe, _types.ToolbarType.PRIMARY, _analytics.INPUT_METHOD.TOOLBAR), (0, _defineProperty2.default)(_toolbarTypeToInputMe, _types.ToolbarType.FLOATING, _analytics.INPUT_METHOD.FLOATING_TB), _toolbarTypeToInputMe);
+var getInputMethod = exports.getInputMethod = function getInputMethod(toolbarType) {
+  return toolbarTypeToInputMethod[toolbarType];
+};

package/dist/cjs/plugin.js

@@ -8,6 +8,7 @@ exports.textFormattingPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./commands");
 var _clearFormatting = require("./pm-plugins/clear-formatting");
 var _clearFormattingKeymap = _interopRequireDefault(require("./pm-plugins/clear-formatting-keymap"));
@@ -16,6 +17,7 @@ var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = require("./pm-plugins/main");
 var _smartInputRule = _interopRequireDefault(require("./pm-plugins/smart-input-rule"));
+var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
 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; }
@@ -24,7 +26,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * from `@atlaskit/editor-core`.
  */
 var textFormattingPlugin = exports.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) {
@@ -128,15 +130,44 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
         formattingIsPresent: (_clearFormattingPlugi = _clearFormatting.pluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent
       });
     },
+    pluginsOptions: {
+      selectionToolbar: function selectionToolbar() {
+        if ((0, _experiments.editorExperiment)('contextual_formatting_toolbar', true, {
+          exposure: true
+        })) {
+          var toolbarCustom = {
+            type: 'custom',
+            render: function render(view) {
+              var _api$analytics6;
+              if (!view) {
+                return;
+              }
+              return /*#__PURE__*/_react.default.createElement(_FloatingToolbarComponent.FloatingToolbarTextFormalWithIntl, {
+                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: (0, _commands.toggleSuperscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions),
-      toggleSubscript: (0, _commands.toggleSubscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
-      toggleStrike: (0, _commands.toggleStrikeWithAnalytics)(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
-      toggleCode: (0, _commands.toggleCodeWithAnalytics)(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
-      toggleUnderline: (0, _commands.toggleUnderlineWithAnalytics)(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
-      toggleEm: (0, _commands.toggleEmWithAnalytics)(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
-      toggleStrong: (0, _commands.toggleStrongWithAnalytics)(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions)
+      toggleSuperscript: (0, _commands.toggleSuperscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
+      toggleSubscript: (0, _commands.toggleSubscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
+      toggleStrike: (0, _commands.toggleStrikeWithAnalytics)(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
+      toggleCode: (0, _commands.toggleCodeWithAnalytics)(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
+      toggleUnderline: (0, _commands.toggleUnderlineWithAnalytics)(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
+      toggleEm: (0, _commands.toggleEmWithAnalytics)(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions),
+      toggleStrong: (0, _commands.toggleStrongWithAnalytics)(api === null || api === void 0 || (_api$analytics13 = api.analytics) === null || _api$analytics13 === void 0 ? void 0 : _api$analytics13.actions)
     }
   };
 };

package/dist/cjs/ui/FloatingToolbarComponent.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingToolbarTextFormalWithIntl = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _types = require("@atlaskit/editor-common/types");
+var _dropdownMenu = require("./Toolbar/dropdown-menu");
+var _clearFormattingIcon = require("./Toolbar/hooks/clear-formatting-icon");
+var _formattingIcons = require("./Toolbar/hooks/formatting-icons");
+var _types2 = require("./Toolbar/types");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var FloatingToolbarSettings = {
+  disabled: false,
+  isReducedSpacing: true,
+  shouldUseResponsiveToolbar: false,
+  toolbarSize: _types.ToolbarSize.XXXS,
+  hasMoreButton: false,
+  moreButtonLabel: '',
+  toolbarType: _types2.ToolbarType.FLOATING
+};
+var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
+  var api = _ref.api,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    editorView = _ref.editorView,
+    intl = _ref.intl;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['textFormatting']),
+    textFormattingState = _useSharedPluginState.textFormattingState;
+  var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
+    schema: editorView.state.schema,
+    intl: intl,
+    isToolbarDisabled: FloatingToolbarSettings.disabled,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    textFormattingState: textFormattingState,
+    toolbarType: FloatingToolbarSettings.toolbarType
+  });
+  var clearIcon = (0, _clearFormattingIcon.useClearIcon)({
+    textFormattingState: textFormattingState,
+    intl: intl,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    toolbarType: FloatingToolbarSettings.toolbarType
+  });
+  var items = (0, _react.useMemo)(function () {
+    if (!clearIcon) {
+      return defaultIcons;
+    }
+    return [].concat((0, _toConsumableArray2.default)(defaultIcons), [clearIcon]);
+  }, [clearIcon, defaultIcons]);
+  return (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
+    editorView: editorView,
+    items: items,
+    isReducedSpacing: FloatingToolbarSettings.isReducedSpacing,
+    moreButtonLabel: FloatingToolbarSettings.moreButtonLabel,
+    hasFormattingActive: FloatingToolbarSettings.hasMoreButton,
+    hasMoreButton: FloatingToolbarSettings.hasMoreButton,
+    intl: intl
+  });
+};
+var FloatingToolbarTextFormalWithIntl = exports.FloatingToolbarTextFormalWithIntl = (0, _reactIntlNext.injectIntl)(FloatingToolbarTextFormat);

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -8,6 +8,7 @@ exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
+var _types = require("./Toolbar/types");
 function PrimaryToolbarComponent(_ref) {
   var _api$analytics;
   var api = _ref.api,
@@ -30,6 +31,7 @@ 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: _types.ToolbarType.PRIMARY
   });
 }

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoldToolbarButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _textBoldEditorBold = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-bold--editor-bold"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var BoldToolbarButton = exports.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 (0, _react2.jsx)(_uiMenu.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: (0, _react2.jsx)("div", {
+      css:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
+      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      _styles.triggerWrapperStylesWithPadding :
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      _styles.triggerWrapperStyles
+    }, (0, _react2.jsx)(_textBoldEditorBold.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    }), (0, _react2.jsx)("span", {
+      css: _styles.expandIconContainerStyle
+    }, (0, _react2.jsx)(_chevronDown.default, {
+      label: "",
+      color: "currentColor",
+      LEGACY_margin: "0 0 0 -8px"
+    })))
+  });
+};

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

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormattingTextDropdownMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _boldButton = require("./bold-button");
 var _menuState = require("./hooks/menu-state");
 var _moreButton = require("./more-button");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -22,7 +24,9 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
     hasFormattingActive = _ref.hasFormattingActive,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsMountPoint = _ref.popupsMountPoint,
-    popupsScrollableElement = _ref.popupsScrollableElement;
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    hasMoreButton = _ref.hasMoreButton,
+    intl = _ref.intl;
   var _useMenuState = (0, _menuState.useMenuState)(),
     _useMenuState2 = (0, _slicedToArray2.default)(_useMenuState, 3),
     isMenuOpen = _useMenuState2[0],
@@ -66,7 +70,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
       }
       return isOpenedByKeyboard;
     }
-  }, /*#__PURE__*/_react.default.createElement(_moreButton.MoreButton, {
+  }, hasMoreButton ? /*#__PURE__*/_react.default.createElement(_moreButton.MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
@@ -83,5 +87,23 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
       }
     },
     "aria-expanded": isMenuOpen
+  }) : /*#__PURE__*/_react.default.createElement(_boldButton.BoldToolbarButton, {
+    isReducedSpacing: isReducedSpacing,
+    isDisabled: false,
+    isSelected: isMenuOpen,
+    label: intl.formatMessage(_messages.toolbarMessages.textFormat),
+    "aria-expanded": isMenuOpen,
+    "aria-haspopup": true,
+    onClick: function onClick() {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    }
   }));
 });

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useClearIcon = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _clearFormatting = require("../../../commands/clear-formatting");
+var _inputMethodUtils = require("../../../input-method-utils");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -21,13 +21,14 @@ var _clearFormatting = require("../../../commands/clear-formatting");
 var useClearIcon = exports.useClearIcon = function useClearIcon(_ref) {
   var intl = _ref.intl,
     textFormattingState = _ref.textFormattingState,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    toolbarType = _ref.toolbarType;
   var isPluginAvailable = Boolean(textFormattingState);
   var formattingIsPresent = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent);
   var clearFormattingLabel = intl.formatMessage(_messages.toolbarMessages.clearFormatting);
   var clearFormattingToolbar = (0, _react.useCallback)(function (state, dispatch) {
-    return (0, _clearFormatting.clearFormattingWithAnalytics)(_analytics.INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch);
-  }, [editorAnalyticsAPI]);
+    return (0, _clearFormatting.clearFormattingWithAnalytics)((0, _inputMethodUtils.getInputMethod)(toolbarType), editorAnalyticsAPI)(state, dispatch);
+  }, [editorAnalyticsAPI, toolbarType]);
   return (0, _react.useMemo)(function () {
     if (!isPluginAvailable) {
       return null;

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

@@ -17,6 +17,7 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _textBoldEditorBold = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-bold--editor-bold"));
 var _textItalicEditorItalic = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-italic--editor-italic"));
 var _commands = require("../../../commands");
+var _inputMethodUtils = require("../../../input-method-utils");
 var _types = require("../types");
 var _IconsMarkSchema;
 /**
@@ -26,14 +27,14 @@ var _IconsMarkSchema;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var withToolbarInputMethod = function withToolbarInputMethod(func) {
-  return (0, _preset.editorCommandToPMCommand)(func(_analytics.INPUT_METHOD.TOOLBAR));
+var withInputMethod = function withInputMethod(toolbarType, func) {
+  return (0, _preset.editorCommandToPMCommand)(func((0, _inputMethodUtils.getInputMethod)(toolbarType)));
 };
-var IconButtons = function IconButtons(editorAnalyticsAPI) {
+var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
   return {
     strong: {
       buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
-      command: withToolbarInputMethod((0, _commands.toggleStrongWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _commands.toggleStrongWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.bold,
       tooltipKeymap: _keymaps.toggleBold,
       component: function component() {
@@ -46,7 +47,7 @@ var IconButtons = function IconButtons(editorAnalyticsAPI) {
     },
     em: {
       buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
-      command: withToolbarInputMethod((0, _commands.toggleEmWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _commands.toggleEmWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.italic,
       tooltipKeymap: _keymaps.toggleItalic,
       component: function component() {
@@ -58,27 +59,27 @@ var IconButtons = function IconButtons(editorAnalyticsAPI) {
       }
     },
     underline: {
-      command: withToolbarInputMethod((0, _commands.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _commands.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.underline,
       tooltipKeymap: _keymaps.toggleUnderline
     },
     strike: {
-      command: withToolbarInputMethod((0, _commands.toggleStrikeWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _commands.toggleStrikeWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.strike,
       tooltipKeymap: _keymaps.toggleStrikethrough
     },
     code: {
-      command: withToolbarInputMethod((0, _commands.toggleCodeWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _commands.toggleCodeWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.code,
       tooltipKeymap: _keymaps.toggleCode
     },
     subscript: {
-      command: withToolbarInputMethod((0, _commands.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _commands.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.subscript,
       tooltipKeymap: _keymaps.toggleSubscript
     },
     superscript: {
-      command: withToolbarInputMethod((0, _commands.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _commands.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.superscript,
       tooltipKeymap: _keymaps.toggleSuperscript
     }
@@ -89,8 +90,9 @@ var getIcon = function getIcon(_ref) {
     isDisabled = _ref.isDisabled,
     isActive = _ref.isActive,
     intl = _ref.intl,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
-  var icon = IconButtons(editorAnalyticsAPI)[iconType];
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    toolbarType = _ref.toolbarType;
+  var icon = IconButtons(editorAnalyticsAPI, toolbarType)[iconType];
   var content = intl.formatMessage(icon.message);
   var tooltipKeymap = icon.tooltipKeymap;
   return {
@@ -145,7 +147,7 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
     };
   };
 };
-var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
+var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI, toolbarType) {
   var getState = buildMenuIconState(iconMark);
   return function (_ref3) {
     var schema = _ref3.schema,
@@ -166,7 +168,8 @@ var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
         isDisabled: isToolbarDisabled || isDisabled,
         isActive: isActive,
         intl: intl,
-        editorAnalyticsAPI: editorAnalyticsAPI
+        editorAnalyticsAPI: editorAnalyticsAPI,
+        toolbarType: toolbarType
       });
     }, [isToolbarDisabled, isDisabled, isActive, intl]);
     var shouldRenderIcon = hasSchemaMark && !isHidden;
@@ -180,20 +183,22 @@ var useFormattingIcons = exports.useFormattingIcons = function useFormattingIcon
     textFormattingState = _ref4.textFormattingState,
     schema = _ref4.schema,
     intl = _ref4.intl,
-    editorAnalyticsAPI = _ref4.editorAnalyticsAPI;
+    editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
+    toolbarType = _ref4.toolbarType;
   var props = {
     schema: schema,
     textFormattingState: textFormattingState,
     intl: intl,
-    isToolbarDisabled: Boolean(isToolbarDisabled)
+    isToolbarDisabled: Boolean(isToolbarDisabled),
+    toolbarType: toolbarType
   };
-  var buildStrongIcon = buildIcon(_types.IconTypes.strong, editorAnalyticsAPI);
-  var buildEmIcon = buildIcon(_types.IconTypes.em, editorAnalyticsAPI);
-  var buildUnderlineIcon = buildIcon(_types.IconTypes.underline, editorAnalyticsAPI);
-  var buildStrikeIcon = buildIcon(_types.IconTypes.strike, editorAnalyticsAPI);
-  var buildCodeIcon = buildIcon(_types.IconTypes.code, editorAnalyticsAPI);
-  var buildSubscriptIcon = buildIcon(_types.IconTypes.subscript, editorAnalyticsAPI);
-  var buildSuperscriptIcon = buildIcon(_types.IconTypes.superscript, editorAnalyticsAPI);
+  var buildStrongIcon = buildIcon(_types.IconTypes.strong, editorAnalyticsAPI, toolbarType);
+  var buildEmIcon = buildIcon(_types.IconTypes.em, editorAnalyticsAPI, toolbarType);
+  var buildUnderlineIcon = buildIcon(_types.IconTypes.underline, editorAnalyticsAPI, toolbarType);
+  var buildStrikeIcon = buildIcon(_types.IconTypes.strike, editorAnalyticsAPI, toolbarType);
+  var buildCodeIcon = buildIcon(_types.IconTypes.code, editorAnalyticsAPI, toolbarType);
+  var buildSubscriptIcon = buildIcon(_types.IconTypes.subscript, editorAnalyticsAPI, toolbarType);
+  var buildSuperscriptIcon = buildIcon(_types.IconTypes.superscript, editorAnalyticsAPI, toolbarType);
   var strongIcon = buildStrongIcon(props);
   var emIcon = buildEmIcon(props);
   var underlineIcon = buildUnderlineIcon(props);

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

@@ -41,7 +41,8 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     intl = _ref.intl,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     textFormattingState = _ref.textFormattingState,
-    api = _ref.api;
+    api = _ref.api,
+    toolbarType = _ref.toolbarType;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     message = _useState2[0],
@@ -51,12 +52,14 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     intl: intl,
     isToolbarDisabled: isToolbarDisabled,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    textFormattingState: textFormattingState
+    textFormattingState: textFormattingState,
+    toolbarType: toolbarType
   });
   var clearIcon = (0, _clearFormattingIcon.useClearIcon)({
     textFormattingState: textFormattingState,
     intl: intl,
-    editorAnalyticsAPI: editorAnalyticsAPI
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    toolbarType: toolbarType
   });
   var menuIconTypeList = (0, _responsiveToolbarButtons.useResponsiveIconTypeMenu)({
     toolbarSize: toolbarSize,
@@ -163,7 +166,9 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       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
     (0, _react2.jsx)("span", {
@@ -182,7 +187,8 @@ var Toolbar = function Toolbar(_ref2) {
     intl = _ref2.intl,
     editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
     textFormattingState = _ref2.textFormattingState,
-    api = _ref2.api;
+    api = _ref2.api,
+    toolbarType = _ref2.toolbarType;
   return (0, _react2.jsx)(ToolbarFormatting, {
     textFormattingState: textFormattingState,
     popupsMountPoint: popupsMountPoint,
@@ -194,7 +200,8 @@ var Toolbar = function Toolbar(_ref2) {
     shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
     intl: intl,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    api: api
+    api: api,
+    toolbarType: toolbarType
   });
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Toolbar);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconTypes = void 0;
+exports.ToolbarType = exports.IconTypes = void 0;
 var IconTypes = exports.IconTypes = /*#__PURE__*/function (IconTypes) {
   IconTypes["strong"] = "strong";
   IconTypes["em"] = "em";
@@ -13,4 +13,9 @@ var IconTypes = exports.IconTypes = /*#__PURE__*/function (IconTypes) {
   IconTypes["subscript"] = "subscript";
   IconTypes["superscript"] = "superscript";
   return IconTypes;
+}({});
+var ToolbarType = exports.ToolbarType = /*#__PURE__*/function (ToolbarType) {
+  ToolbarType["PRIMARY"] = "primaryToolbar";
+  ToolbarType["FLOATING"] = "floatingToolbar";
+  return ToolbarType;
 }({});

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

@@ -0,0 +1,7 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ToolbarType } from './ui/Toolbar/types';
+export const toolbarTypeToInputMethod = {
+  [ToolbarType.PRIMARY]: INPUT_METHOD.TOOLBAR,
+  [ToolbarType.FLOATING]: INPUT_METHOD.FLOATING_TB
+};
+export const getInputMethod = toolbarType => toolbarTypeToInputMethod[toolbarType];

package/dist/es2019/plugin.js

@@ -1,5 +1,6 @@
 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';
@@ -8,6 +9,7 @@ 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`
@@ -17,7 +19,7 @@ export const textFormattingPlugin = ({
   config: options,
   api
 }) => {
-  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;
   const primaryToolbarComponent = ({
     editorView,
     popupsMountPoint,
@@ -121,15 +123,44 @@ export const textFormattingPlugin = ({
         formattingIsPresent: (_clearFormattingPlugi = clearFormattingPluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent
       };
     },
+    pluginsOptions: {
+      selectionToolbar: () => {
+        if (editorExperiment('contextual_formatting_toolbar', true, {
+          exposure: true
+        })) {
+          const toolbarCustom = {
+            type: 'custom',
+            render: view => {
+              var _api$analytics6;
+              if (!view) {
+                return;
+              }
+              return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
+                api: api,
+                editorView: view,
+                editorAnalyticsAPI: api === null || api === void 0 ? 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 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions),
-      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
-      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
-      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
-      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
-      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
-      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions)
+      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
+      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
+      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
+      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
+      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
+      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions),
+      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics13 = api.analytics) === null || _api$analytics13 === void 0 ? void 0 : _api$analytics13.actions)
     }
   };
 };