@atlaskit/editor-plugin-toolbar 3.2.1 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 3.3.1
+
+### Patch Changes
+
+- [`916133ef0c6dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/916133ef0c6dd) -
+  [ux] Editor experience tracking foundation
+- [`4f5569bde5e64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4f5569bde5e64) -
+  Add new 'dragHandleSelected' user intent, use this to control table toolbar when drag handle is
+  selected
+- Updated dependencies
+
+## 3.3.0
+
+### Minor Changes
+
+- [`d3e3f3fdb9cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d3e3f3fdb9cee) -
+  Add new selection toolbar type to event, add errorboundary for selection toolbar and try/catch
+  blocks with log exceptions to sentry
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.1
 
 ### Patch Changes
@@ -273,7 +296,6 @@
 
 - [`286abb4d35eba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/286abb4d35eba) -
   [ux] [ED-28960] Finish full page primary toolbar migration
-
   - Align with design update (separator, gap, height, icon size)
   - Add keyboard shortcut to focus toolbar and arrow key navigation
   - Address accessibility
@@ -311,7 +333,6 @@
 
 - [`3145f278b1f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3145f278b1f7a) -
   [ux] [ED-28473] minor UI updates for editor-toolbar
-
   - Use ADS ButtonGroup for ToolbarButtonGroup
   - Remove groupLocation prop and use CSS instead
   - Use DropdownItemGroup for ToolbarDropdownItemSection and expand props for section separator and
@@ -343,7 +364,6 @@
   [`22cab8325fc62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22cab8325fc62) -
   [ux] [ED-28760] Fix editor lose focus and hence editing flow is interrupted. This is done for 2
   components
-
   - Dropdown
     - Create context ToolbarUIContext for toolbar consumers to access consumer specific state and
       callbacks

package/afm-cc/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags-react/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags-react/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags-react/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/pm-plugins/experiences/ContextualToolbarOpenExperience.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _experiences = require("@atlaskit/editor-common/experiences");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var pluginKey = new _state.PluginKey('contextualToolbarOpenExperience');
+var _default = exports.default = function _default() {
+  var contextualToolbarOpenExperience = new _experiences.Experience('platform-editor-contextual-toolbar-open-experience', {
+    checks: [new _experiences.ExperienceCheckTimeout(500), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref) {
+        var mutations = _ref.mutations;
+        if (mutations.some(isMutationAddingContextualToolbar)) {
+          return {
+            status: 'success'
+          };
+        }
+      },
+      observeConfig: function observeConfig() {
+        return {
+          target: document.body,
+          options: {
+            childList: true,
+            subtree: true
+          }
+        };
+      }
+    })]
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          shouldShowContextualToolbar: false
+        };
+      },
+      apply: function apply(_tr, pluginState, _, newState) {
+        var isTextSelection = newState.selection instanceof _state.TextSelection;
+        var isNotEmptySelection = !newState.selection.empty;
+        var shouldShowContextualToolbar = isTextSelection && isNotEmptySelection;
+        if (shouldShowContextualToolbar && !pluginState.shouldShowContextualToolbar) {
+          contextualToolbarOpenExperience.start();
+        } else if (!shouldShowContextualToolbar && pluginState.shouldShowContextualToolbar) {
+          contextualToolbarOpenExperience.abort();
+        }
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          shouldShowContextualToolbar: shouldShowContextualToolbar
+        });
+      }
+    },
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          contextualToolbarOpenExperience.abort();
+        }
+      };
+    }
+  });
+};
+var isMutationAddingContextualToolbar = function isMutationAddingContextualToolbar(mutation) {
+  return mutation.type === 'childList' && Array.from(mutation.addedNodes).some(nodeIncludesContextualToolbar);
+};
+var nodeIncludesContextualToolbar = function nodeIncludesContextualToolbar(node) {
+  return node instanceof HTMLElement && node.getAttribute('data-testid') === 'popup-wrapper' && node.querySelector('[data-testid="text-section"]');
+};

package/dist/cjs/toolbarPlugin.js

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toolbarPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _ContextualToolbarOpenExperience = _interopRequireDefault(require("./pm-plugins/experiences/ContextualToolbarOpenExperience"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _consts = require("./ui/consts");
 var _SelectionToolbar = require("./ui/SelectionToolbar");
@@ -176,7 +179,12 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
             }
           });
         }
-      }];
+      }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+        name: 'contextualToolbarOpenExperience',
+        plugin: function plugin() {
+          return (0, _ContextualToolbarOpenExperience.default)();
+        }
+      }] : []));
     },
     contentComponent: !disableSelectionToolbar ? function (_ref2) {
       var editorView = _ref2.editorView,
@@ -184,6 +192,14 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
       if (!editorView) {
         return null;
       }
+      if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_patch_7')) {
+        return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbarWithErrorBoundary, {
+          api: api,
+          editorView: editorView,
+          mountPoint: popupsMountPoint,
+          disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        });
+      }
       return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbar, {
         api: api,
         editorView: editorView,

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

@@ -4,26 +4,28 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectionToolbar = void 0;
+exports.SelectionToolbarWithErrorBoundary = exports.SelectionToolbar = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _browserApis = require("@atlaskit/browser-apis");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _messages = require("@atlaskit/editor-common/messages");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _consts = require("../consts");
-var _toolbar2 = require("../utils/toolbar");
+var _keyboardConfig = require("./keyboard-config");
+var _utils2 = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
@@ -67,6 +69,42 @@ var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(fun
     selectedNode: selectedNode
   };
 });
+var useOnPositionCalculated = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_patch_7');
+}, function (editorView) {
+  var onPositionCalculated = (0, _react.useCallback)(function (position) {
+    try {
+      var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
+
+      // Show special position on cell selection only when editor controls experiment is enabled
+      var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
+      var isCellSelection = ('$anchorCell' in editorView.state.selection);
+      if (isCellSelection && isEditorControlsEnabled) {
+        return (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle)(editorView, position);
+      }
+      return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
+    } catch (error) {
+      (0, _monitoring.logException)(error, {
+        location: 'editor-plugin-toolbar/selectionToolbar'
+      });
+      return position;
+    }
+  }, [editorView]);
+  return onPositionCalculated;
+}, function (editorView) {
+  var onPositionCalculated = (0, _react.useCallback)(function (position) {
+    var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
+
+    // Show special position on cell selection only when editor controls experiment is enabled
+    var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
+    var isCellSelection = ('$anchorCell' in editorView.state.selection);
+    if (isCellSelection && isEditorControlsEnabled) {
+      return (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle)(editorView, position);
+    }
+    return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
+  }, [editorView]);
+  return onPositionCalculated;
+});
 var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
   var _api$toolbar;
   var api = _ref.api,
@@ -86,7 +124,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     return isToolbarComponent(component);
   });
   var keyboardNavigation = (0, _react.useMemo)(function () {
-    return getKeyboardNavigationConfig(editorView, intl, api);
+    return (0, _keyboardConfig.getKeyboardNavigationConfig)(editorView, intl, api);
   }, [editorView, intl, api]);
   var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
     isDisabled = _useToolbarUI.isDisabled;
@@ -95,26 +133,18 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.TextSelection;
   var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.AllSelection;
   var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
-  var onPositionCalculated = (0, _react.useCallback)(function (position) {
-    var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
-
-    // Show special position on cell selection only when editor controls experiment is enabled
-    var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
-    var isCellSelection = ('$anchorCell' in editorView.state.selection);
-    if (isCellSelection && isEditorControlsEnabled) {
-      return (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle)(editorView, position);
-    }
-    return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
-  }, [editorView]);
+  var onPositionCalculated = useOnPositionCalculated(editorView);
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
-  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || currentUserIntent && currentUserIntent !== 'default' || (0, _coreUtils.isSSR)()) {
+  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix') ?
+  // hide toolbar when user intent is not default, except when it's dragHandleSelected without cell selection
+  currentUserIntent && currentUserIntent !== 'default' && !(currentUserIntent === 'dragHandleSelected' && !isCellSelection) : currentUserIntent && currentUserIntent !== 'default') || (0, _coreUtils.isSSR)()) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     offset: [0, 10],
-    target: getDomRefFromSelection(editorView),
+    target: (0, _utils2.getDomRefFromSelection)(editorView),
     onPositionCalculated: onPositionCalculated,
     mountTo: mountPoint
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
@@ -142,78 +172,21 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     }
   }))));
 };
-var getDomRefFromSelection = function getDomRefFromSelection(view
-// dispatchAnalyticsEvent?: DispatchAnalyticsEvent,
-) {
-  try {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    return (0, _utils2.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } catch (error) {
-    // // eslint-disable-next-line no-console
-    // console.warn(error);
-    // if (dispatchAnalyticsEvent) {
-    // 	const payload: AnalyticsEventPayload = {
-    // 		action: ACTION.ERRORED,
-    // 		actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
-    // 		eventType: EVENT_TYPE.OPERATIONAL,
-    // 		attributes: {
-    // 			component: CONTENT_COMPONENT.FLOATING_TOOLBAR,
-    // 			selection: view.state.selection.toJSON(),
-    // 			position: view.state.selection.from,
-    // 			docSize: view.state.doc.nodeSize,
-    // 			error: error.toString(),
-    // 			// @ts-expect-error - Object literal may only specify known properties, 'errorStack' does not exist in type
-    // 			// This error was introduced after upgrading to TypeScript 5
-    // 			errorStack: error.stack || undefined,
-    // 		},
-    // 	};
-    // 	dispatchAnalyticsEvent(payload);
-    // }
-  }
-};
-var getKeyboardNavigationConfig = function getKeyboardNavigationConfig(editorView, intl, api) {
-  if (!(editorView.dom instanceof HTMLElement)) {
-    return;
-  }
-  var toolbarSelector = "[data-testid='editor-floating-toolbar']";
-  return {
-    childComponentSelector: toolbarSelector,
-    dom: editorView.dom,
-    isShortcutToFocusToolbar: _toolbar2.isShortcutToFocusToolbar,
-    handleFocus: function handleFocus(event) {
-      var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
-      var toolbar = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
-      if (!(toolbar instanceof HTMLElement)) {
-        return;
-      }
-      var filteredFocusableElements = (0, _toolbar2.getFocusableElements)(toolbar);
-      (_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 || _filteredFocusableEle.focus();
-
-      // the button element removes the focus ring so this class adds it back
-      if (((_filteredFocusableEle2 = filteredFocusableElements[0]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.tagName) === 'BUTTON') {
-        filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
-      }
-      (_filteredFocusableEle3 = filteredFocusableElements[0]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'nearest'
-      });
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    handleEscape: function handleEscape(event) {
-      var isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
-      if (isDropdownOpen) {
-        return;
-      }
-      api === null || api === void 0 || api.core.actions.focus();
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    ariaControls: _ui.EDIT_AREA_ID,
-    ariaLabel: intl.formatMessage(_messages.fullPageMessages.toolbarLabel)
-  };
+var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErrorBoundary(_ref2) {
+  var _api$analytics2;
+  var api = _ref2.api,
+    editorView = _ref2.editorView,
+    mountPoint = _ref2.mountPoint,
+    disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned;
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+    component: _analytics.ACTION_SUBJECT.TOOLBAR,
+    componentId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
+    dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/_react.default.createElement(SelectionToolbar, {
+    api: api,
+    editorView: editorView,
+    mountPoint: mountPoint,
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+  }));
 };

package/dist/cjs/ui/SelectionToolbar/keyboard-config.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getKeyboardNavigationConfig = void 0;
+var _browserApis = require("@atlaskit/browser-apis");
+var _messages = require("@atlaskit/editor-common/messages");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _ui = require("@atlaskit/editor-common/ui");
+var _toolbar = require("../utils/toolbar");
+var getKeyboardNavigationConfig = exports.getKeyboardNavigationConfig = function getKeyboardNavigationConfig(editorView, intl, api) {
+  if (!(editorView.dom instanceof HTMLElement)) {
+    return;
+  }
+  var toolbarSelector = "[data-testid='editor-floating-toolbar']";
+  return {
+    childComponentSelector: toolbarSelector,
+    dom: editorView.dom,
+    isShortcutToFocusToolbar: _toolbar.isShortcutToFocusToolbar,
+    handleFocus: function handleFocus(event) {
+      try {
+        var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
+        var toolbar = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
+        if (!(toolbar instanceof HTMLElement)) {
+          return;
+        }
+        var filteredFocusableElements = (0, _toolbar.getFocusableElements)(toolbar);
+        (_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 || _filteredFocusableEle.focus();
+
+        // the button element removes the focus ring so this class adds it back
+        if (((_filteredFocusableEle2 = filteredFocusableElements[0]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.tagName) === 'BUTTON') {
+          filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
+        }
+        (_filteredFocusableEle3 = filteredFocusableElements[0]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+        event.preventDefault();
+        event.stopPropagation();
+      } catch (error) {
+        if (error instanceof Error) {
+          (0, _monitoring.logException)(error, {
+            location: 'editor-plugin-toolbar/selectionToolbar'
+          });
+        }
+      }
+    },
+    handleEscape: function handleEscape(event) {
+      try {
+        var isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
+        if (isDropdownOpen) {
+          return;
+        }
+        api === null || api === void 0 || api.core.actions.focus();
+        event.preventDefault();
+        event.stopPropagation();
+      } catch (error) {
+        if (error instanceof Error) {
+          (0, _monitoring.logException)(error, {
+            location: 'editor-plugin-toolbar/selectionToolbar'
+          });
+        }
+      }
+    },
+    ariaControls: _ui.EDIT_AREA_ID,
+    ariaLabel: intl.formatMessage(_messages.fullPageMessages.toolbarLabel)
+  };
+};

package/dist/cjs/ui/SelectionToolbar/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDomRefFromSelection = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var getDomRefFromSelection = exports.getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnalyticsEvent) {
+  try {
+    var domRef = (0, _utils.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
+    if (domRef instanceof HTMLElement) {
+      return domRef;
+    }
+    throw new Error('Invalid DOM reference');
+  } catch (error) {
+    if (dispatchAnalyticsEvent) {
+      var payload = {
+        action: _analytics.ACTION.ERRORED,
+        actionSubject: _analytics.ACTION_SUBJECT.CONTENT_COMPONENT,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          component: _analytics.CONTENT_COMPONENT.SELECTION_TOOLBAR,
+          selection: view.state.selection.toJSON(),
+          position: view.state.selection.from,
+          docSize: view.state.doc.nodeSize,
+          error: error instanceof Error ? error.toString() : String(error),
+          // @ts-expect-error - Object literal may only specify known properties, 'errorStack' does not exist in type
+          // This error was introduced after upgrading to TypeScript 5
+          errorStack: error instanceof Error ? error.stack : undefined
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+    if (error instanceof Error) {
+      (0, _monitoring.logException)(error, {
+        location: 'editor-plugin-toolbar/selectionToolbar'
+      });
+    }
+  }
+};

package/dist/es2019/pm-plugins/experiences/ContextualToolbarOpenExperience.js

@@ -0,0 +1,61 @@
+import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
+const pluginKey = new PluginKey('contextualToolbarOpenExperience');
+export default (() => {
+  const contextualToolbarOpenExperience = new Experience('platform-editor-contextual-toolbar-open-experience', {
+    checks: [new ExperienceCheckTimeout(500), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        if (mutations.some(isMutationAddingContextualToolbar)) {
+          return {
+            status: 'success'
+          };
+        }
+      },
+      observeConfig: () => ({
+        target: document.body,
+        options: {
+          childList: true,
+          subtree: true
+        }
+      })
+    })]
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: () => ({
+        shouldShowContextualToolbar: false
+      }),
+      apply: (_tr, pluginState, _, newState) => {
+        const isTextSelection = newState.selection instanceof TextSelection;
+        const isNotEmptySelection = !newState.selection.empty;
+        const shouldShowContextualToolbar = isTextSelection && isNotEmptySelection;
+        if (shouldShowContextualToolbar && !pluginState.shouldShowContextualToolbar) {
+          contextualToolbarOpenExperience.start();
+        } else if (!shouldShowContextualToolbar && pluginState.shouldShowContextualToolbar) {
+          contextualToolbarOpenExperience.abort();
+        }
+        return {
+          ...pluginState,
+          shouldShowContextualToolbar
+        };
+      }
+    },
+    view: () => {
+      return {
+        destroy: () => {
+          contextualToolbarOpenExperience.abort();
+        }
+      };
+    }
+  });
+});
+const isMutationAddingContextualToolbar = mutation => {
+  return mutation.type === 'childList' && Array.from(mutation.addedNodes).some(nodeIncludesContextualToolbar);
+};
+const nodeIncludesContextualToolbar = node => {
+  return node instanceof HTMLElement && node.getAttribute('data-testid') === 'popup-wrapper' && node.querySelector('[data-testid="text-section"]');
+};