@atlaskit/editor-plugin-toolbar 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 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
+
+- [`14b9e966da4dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14b9e966da4dd) -
+  [ux] ED-29517 Toolbar and offline banner is overlapping
+- [`ef001bf65d48f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef001bf65d48f) -
+  Remove usage of `platform_editor_toolbar_aifc` inside editor packages - instead rely on checking
+  for new toolbar plugin option, make `enableNewToolbarExperience` mandatory for consumers to opt in
+  to new toolbar experience
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes

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/toolbarPlugin.js

@@ -12,6 +12,7 @@ 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 _pluginKey = require("./pm-plugins/plugin-key");
 var _consts = require("./ui/consts");
@@ -70,8 +71,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
     _ref$config = _ref.config,
     config = _ref$config === void 0 ? {
       disableSelectionToolbar: false,
-      disableSelectionToolbarWhenPinned: false,
-      enableNewToolbarExperience: true
+      disableSelectionToolbarWhenPinned: false
     } : _ref$config;
   var disableSelectionToolbar = config.disableSelectionToolbar,
     disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned;
@@ -185,6 +185,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,17 +133,7 @@ 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;
   }
@@ -114,13 +142,14 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
   }
   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, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
-    editorViewMode: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode
+    editorViewMode: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode,
+    isOffline: isOffline
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
     api: api,
     isDisabled: patch6Enabled ? isDisabled : isOffline
@@ -141,78 +170,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/toolbarPlugin.js

@@ -4,10 +4,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
 import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
-import { SelectionToolbar } from './ui/SelectionToolbar';
+import { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
 import { getToolbarComponents } from './ui/toolbar-components';
 import { isEventInContainer } from './ui/utils/toolbar';
 function getSelectedNode(editorState) {
@@ -55,8 +56,7 @@ export const toolbarPlugin = ({
   api,
   config = {
     disableSelectionToolbar: false,
-    disableSelectionToolbarWhenPinned: false,
-    enableNewToolbarExperience: true
+    disableSelectionToolbarWhenPinned: false
   }
 }) => {
   const {
@@ -178,6 +178,14 @@ export const toolbarPlugin = ({
       if (!editorView) {
         return null;
       }
+      if (fg('platform_editor_toolbar_aifc_patch_7')) {
+        return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
+          api: api,
+          editorView: editorView,
+          mountPoint: popupsMountPoint,
+          disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        });
+      }
       return /*#__PURE__*/React.createElement(SelectionToolbar, {
         api: api,
         editorView: editorView,

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

@@ -1,22 +1,24 @@
 import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
-import { getDocument } from '@atlaskit/browser-apis';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { fullPageMessages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
 import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
-import { Popup, EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
+import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
-import { getFocusableElements, isShortcutToFocusToolbar } from '../utils/toolbar';
+import { getKeyboardNavigationConfig } from './keyboard-config';
+import { getDomRefFromSelection } from './utils';
 const isToolbarComponent = component => {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
@@ -58,6 +60,40 @@ const usePluginState = conditionalHooksFactory(() => expValEquals('platform_edit
     selectedNode
   };
 });
+const useOnPositionCalculated = conditionalHooksFactory(() => fg('platform_editor_toolbar_aifc_patch_7'), editorView => {
+  const onPositionCalculated = useCallback(position => {
+    try {
+      const toolbarTitle = SELECTION_TOOLBAR_LABEL;
+
+      // Show special position on cell selection only when editor controls experiment is enabled
+      const isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
+      const isCellSelection = ('$anchorCell' in editorView.state.selection);
+      if (isCellSelection && isEditorControlsEnabled) {
+        return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
+      }
+      return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
+    } catch (error) {
+      logException(error, {
+        location: 'editor-plugin-toolbar/selectionToolbar'
+      });
+      return position;
+    }
+  }, [editorView]);
+  return onPositionCalculated;
+}, editorView => {
+  const onPositionCalculated = useCallback(position => {
+    const toolbarTitle = SELECTION_TOOLBAR_LABEL;
+
+    // Show special position on cell selection only when editor controls experiment is enabled
+    const isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
+    const isCellSelection = ('$anchorCell' in editorView.state.selection);
+    if (isCellSelection && isEditorControlsEnabled) {
+      return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
+    }
+    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
+  }, [editorView]);
+  return onPositionCalculated;
+});
 export const SelectionToolbar = ({
   api,
   editorView,
@@ -88,17 +124,7 @@ export const SelectionToolbar = ({
   const isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   const isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection;
   const isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
-  const onPositionCalculated = useCallback(position => {
-    const toolbarTitle = SELECTION_TOOLBAR_LABEL;
-
-    // Show special position on cell selection only when editor controls experiment is enabled
-    const isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
-    const isCellSelection = ('$anchorCell' in editorView.state.selection);
-    if (isCellSelection && isEditorControlsEnabled) {
-      return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
-    }
-    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
-  }, [editorView]);
+  const onPositionCalculated = useOnPositionCalculated(editorView);
   if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
@@ -113,7 +139,8 @@ export const SelectionToolbar = ({
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
-    editorViewMode: expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode
+    editorViewMode: expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode,
+    isOffline: isOffline
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: api,
     isDisabled: patch6Enabled ? isDisabled : isOffline
@@ -134,78 +161,22 @@ export const SelectionToolbar = ({
     }
   }))));
 };
-const getDomRefFromSelection = (view
-// dispatchAnalyticsEvent?: DispatchAnalyticsEvent,
-) => {
-  try {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    return 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);
-    // }
-  }
-};
-const getKeyboardNavigationConfig = (editorView, intl, api) => {
-  if (!(editorView.dom instanceof HTMLElement)) {
-    return;
-  }
-  const toolbarSelector = "[data-testid='editor-floating-toolbar']";
-  return {
-    childComponentSelector: toolbarSelector,
-    dom: editorView.dom,
-    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
-    handleFocus: event => {
-      var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
-      const toolbar = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
-      if (!(toolbar instanceof HTMLElement)) {
-        return;
-      }
-      const filteredFocusableElements = getFocusableElements(toolbar);
-      (_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 ? 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 ? void 0 : _filteredFocusableEle3.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'nearest'
-      });
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    handleEscape: event => {
-      const isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
-      if (isDropdownOpen) {
-        return;
-      }
-      api === null || api === void 0 ? void 0 : api.core.actions.focus();
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    ariaControls: EDIT_AREA_ID,
-    ariaLabel: intl.formatMessage(fullPageMessages.toolbarLabel)
-  };
+export const SelectionToolbarWithErrorBoundary = ({
+  api,
+  editorView,
+  mountPoint,
+  disableSelectionToolbarWhenPinned
+}) => {
+  var _api$analytics2;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.TOOLBAR,
+    componentId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
+    dispatchAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(SelectionToolbar, {
+    api: api,
+    editorView: editorView,
+    mountPoint: mountPoint,
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+  }));
 };

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

@@ -0,0 +1,64 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { fullPageMessages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
+import { getFocusableElements, isShortcutToFocusToolbar } from '../utils/toolbar';
+export const getKeyboardNavigationConfig = (editorView, intl, api) => {
+  if (!(editorView.dom instanceof HTMLElement)) {
+    return;
+  }
+  const toolbarSelector = "[data-testid='editor-floating-toolbar']";
+  return {
+    childComponentSelector: toolbarSelector,
+    dom: editorView.dom,
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleFocus: event => {
+      try {
+        var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
+        const toolbar = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
+        if (!(toolbar instanceof HTMLElement)) {
+          return;
+        }
+        const filteredFocusableElements = getFocusableElements(toolbar);
+        (_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 ? 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 ? void 0 : _filteredFocusableEle3.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+        event.preventDefault();
+        event.stopPropagation();
+      } catch (error) {
+        if (error instanceof Error) {
+          logException(error, {
+            location: 'editor-plugin-toolbar/selectionToolbar'
+          });
+        }
+      }
+    },
+    handleEscape: event => {
+      try {
+        const isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
+        if (isDropdownOpen) {
+          return;
+        }
+        api === null || api === void 0 ? void 0 : api.core.actions.focus();
+        event.preventDefault();
+        event.stopPropagation();
+      } catch (error) {
+        if (error instanceof Error) {
+          logException(error, {
+            location: 'editor-plugin-toolbar/selectionToolbar'
+          });
+        }
+      }
+    },
+    ariaControls: EDIT_AREA_ID,
+    ariaLabel: intl.formatMessage(fullPageMessages.toolbarLabel)
+  };
+};

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

@@ -0,0 +1,36 @@
+import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+export const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
+  try {
+    const domRef = 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) {
+      const payload = {
+        action: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          component: 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) {
+      logException(error, {
+        location: 'editor-plugin-toolbar/selectionToolbar'
+      });
+    }
+  }
+};

package/dist/esm/toolbarPlugin.js

@@ -7,10 +7,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
 import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
-import { SelectionToolbar } from './ui/SelectionToolbar';
+import { SelectionToolbar, SelectionToolbarWithErrorBoundary } from './ui/SelectionToolbar';
 import { getToolbarComponents } from './ui/toolbar-components';
 import { isEventInContainer } from './ui/utils/toolbar';
 function getSelectedNode(editorState) {
@@ -63,8 +64,7 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
     _ref$config = _ref.config,
     config = _ref$config === void 0 ? {
       disableSelectionToolbar: false,
-      disableSelectionToolbarWhenPinned: false,
-      enableNewToolbarExperience: true
+      disableSelectionToolbarWhenPinned: false
     } : _ref$config;
   var disableSelectionToolbar = config.disableSelectionToolbar,
     disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned;
@@ -178,6 +178,14 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
       if (!editorView) {
         return null;
       }
+      if (fg('platform_editor_toolbar_aifc_patch_7')) {
+        return /*#__PURE__*/React.createElement(SelectionToolbarWithErrorBoundary, {
+          api: api,
+          editorView: editorView,
+          mountPoint: popupsMountPoint,
+          disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned !== null && disableSelectionToolbarWhenPinned !== void 0 ? disableSelectionToolbarWhenPinned : false
+        });
+      }
       return /*#__PURE__*/React.createElement(SelectionToolbar, {
         api: api,
         editorView: editorView,

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

@@ -1,22 +1,24 @@
 import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
-import { getDocument } from '@atlaskit/browser-apis';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { fullPageMessages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
 import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
-import { Popup, EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
+import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
-import { getFocusableElements, isShortcutToFocusToolbar } from '../utils/toolbar';
+import { getKeyboardNavigationConfig } from './keyboard-config';
+import { getDomRefFromSelection } from './utils';
 var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
@@ -59,6 +61,42 @@ var usePluginState = conditionalHooksFactory(function () {
     selectedNode: selectedNode
   };
 });
+var useOnPositionCalculated = conditionalHooksFactory(function () {
+  return fg('platform_editor_toolbar_aifc_patch_7');
+}, function (editorView) {
+  var onPositionCalculated = useCallback(function (position) {
+    try {
+      var toolbarTitle = SELECTION_TOOLBAR_LABEL;
+
+      // Show special position on cell selection only when editor controls experiment is enabled
+      var isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
+      var isCellSelection = ('$anchorCell' in editorView.state.selection);
+      if (isCellSelection && isEditorControlsEnabled) {
+        return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
+      }
+      return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
+    } catch (error) {
+      logException(error, {
+        location: 'editor-plugin-toolbar/selectionToolbar'
+      });
+      return position;
+    }
+  }, [editorView]);
+  return onPositionCalculated;
+}, function (editorView) {
+  var onPositionCalculated = useCallback(function (position) {
+    var toolbarTitle = SELECTION_TOOLBAR_LABEL;
+
+    // Show special position on cell selection only when editor controls experiment is enabled
+    var isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
+    var isCellSelection = ('$anchorCell' in editorView.state.selection);
+    if (isCellSelection && isEditorControlsEnabled) {
+      return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
+    }
+    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
+  }, [editorView]);
+  return onPositionCalculated;
+});
 export var SelectionToolbar = function SelectionToolbar(_ref) {
   var _api$toolbar;
   var api = _ref.api,
@@ -87,17 +125,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection;
   var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
-  var onPositionCalculated = useCallback(function (position) {
-    var toolbarTitle = SELECTION_TOOLBAR_LABEL;
-
-    // Show special position on cell selection only when editor controls experiment is enabled
-    var isEditorControlsEnabled = expValEquals('platform_editor_controls', 'cohort', 'variant1');
-    var isCellSelection = ('$anchorCell' in editorView.state.selection);
-    if (isCellSelection && isEditorControlsEnabled) {
-      return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
-    }
-    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
-  }, [editorView]);
+  var onPositionCalculated = useOnPositionCalculated(editorView);
   if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
@@ -112,7 +140,8 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
-    editorViewMode: expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode
+    editorViewMode: expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode,
+    isOffline: isOffline
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: api,
     isDisabled: patch6Enabled ? isDisabled : isOffline
@@ -133,78 +162,21 @@ export var 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 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: isShortcutToFocusToolbar,
-    handleFocus: function handleFocus(event) {
-      var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
-      var toolbar = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
-      if (!(toolbar instanceof HTMLElement)) {
-        return;
-      }
-      var filteredFocusableElements = 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: EDIT_AREA_ID,
-    ariaLabel: intl.formatMessage(fullPageMessages.toolbarLabel)
-  };
+export var SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErrorBoundary(_ref2) {
+  var _api$analytics2;
+  var api = _ref2.api,
+    editorView = _ref2.editorView,
+    mountPoint = _ref2.mountPoint,
+    disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.TOOLBAR,
+    componentId: 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.createElement(SelectionToolbar, {
+    api: api,
+    editorView: editorView,
+    mountPoint: mountPoint,
+    disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
+  }));
 };

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

@@ -0,0 +1,64 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { fullPageMessages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
+import { getFocusableElements, isShortcutToFocusToolbar } from '../utils/toolbar';
+export 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: isShortcutToFocusToolbar,
+    handleFocus: function handleFocus(event) {
+      try {
+        var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
+        var toolbar = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
+        if (!(toolbar instanceof HTMLElement)) {
+          return;
+        }
+        var filteredFocusableElements = 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) {
+          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) {
+          logException(error, {
+            location: 'editor-plugin-toolbar/selectionToolbar'
+          });
+        }
+      }
+    },
+    ariaControls: EDIT_AREA_ID,
+    ariaLabel: intl.formatMessage(fullPageMessages.toolbarLabel)
+  };
+};

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

@@ -0,0 +1,36 @@
+import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+export var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnalyticsEvent) {
+  try {
+    var domRef = 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: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          component: 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) {
+      logException(error, {
+        location: 'editor-plugin-toolbar/selectionToolbar'
+      });
+    }
+  }
+};

package/dist/types/types/index.d.ts

@@ -3,9 +3,7 @@ export type ToolbarPluginOptions = {
     disableSelectionToolbar?: boolean;
     disableSelectionToolbarWhenPinned?: boolean;
     /**
-     * Option to enable new toolbar designs - use this to disable the entire toolbar experience where it can't be disabled via the experiment
-     *
-     * Default: `true`
+     * Option to enable new toolbar designs
      */
     enableNewToolbarExperience?: boolean;
 };

package/dist/types/ui/SelectionToolbar/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarPlugin } from '../../toolbarPluginType';
 type SelectionToolbarProps = {
     api?: ExtractInjectionAPI<ToolbarPlugin>;
@@ -9,4 +9,5 @@ type SelectionToolbarProps = {
     mountPoint: HTMLElement | undefined;
 };
 export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element | null;
+export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element;
 export {};

package/dist/types/ui/SelectionToolbar/keyboard-config.d.ts

@@ -0,0 +1,6 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type ToolbarKeyboardNavigationProviderConfig } from '@atlaskit/editor-toolbar';
+import type { ToolbarPlugin } from '../../toolbarPluginType';
+export declare const getKeyboardNavigationConfig: (editorView: EditorView, intl: IntlShape, api?: ExtractInjectionAPI<ToolbarPlugin>) => ToolbarKeyboardNavigationProviderConfig | undefined;

package/dist/types/ui/SelectionToolbar/utils.d.ts

@@ -0,0 +1,3 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const getDomRefFromSelection: (view: EditorView, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => HTMLElement | undefined;

package/dist/types-ts4.5/types/index.d.ts

@@ -3,9 +3,7 @@ export type ToolbarPluginOptions = {
     disableSelectionToolbar?: boolean;
     disableSelectionToolbarWhenPinned?: boolean;
     /**
-     * Option to enable new toolbar designs - use this to disable the entire toolbar experience where it can't be disabled via the experiment
-     *
-     * Default: `true`
+     * Option to enable new toolbar designs
      */
     enableNewToolbarExperience?: boolean;
 };

package/dist/types-ts4.5/ui/SelectionToolbar/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarPlugin } from '../../toolbarPluginType';
 type SelectionToolbarProps = {
     api?: ExtractInjectionAPI<ToolbarPlugin>;
@@ -9,4 +9,5 @@ type SelectionToolbarProps = {
     mountPoint: HTMLElement | undefined;
 };
 export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element | null;
+export declare const SelectionToolbarWithErrorBoundary: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/SelectionToolbar/keyboard-config.d.ts

@@ -0,0 +1,6 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type ToolbarKeyboardNavigationProviderConfig } from '@atlaskit/editor-toolbar';
+import type { ToolbarPlugin } from '../../toolbarPluginType';
+export declare const getKeyboardNavigationConfig: (editorView: EditorView, intl: IntlShape, api?: ExtractInjectionAPI<ToolbarPlugin>) => ToolbarKeyboardNavigationProviderConfig | undefined;

package/dist/types-ts4.5/ui/SelectionToolbar/utils.d.ts

@@ -0,0 +1,3 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const getDomRefFromSelection: (view: EditorView, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => HTMLElement | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "3.2.0",
+	"version": "3.3.0",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,16 +38,22 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-toolbar": "^0.15.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^13.8.0",
+		"@atlaskit/tmp-editor-statsig": "^13.10.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.10.0",
+		"@atlaskit/editor-common": "^110.12.0",
 		"react": "^18.2.0"
 	},
+	"platform-feature-flags": {
+		"platform_editor_toolbar_aifc_patch_7": {
+			"type": "boolean"
+		}
+	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"code-structure": [