@atlaskit/editor-plugin-toolbar 3.2.1 → 3.3.1

package/dist/es2019/toolbarPlugin.js

@@ -2,12 +2,14 @@ import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findSelectedNodeOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, findSelectedNodeOfType } 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 contextualToolbarOpenExperience from './pm-plugins/experiences/ContextualToolbarOpenExperience';
 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) {
@@ -168,7 +170,10 @@ export const toolbarPlugin = ({
             }
           });
         }
-      }];
+      }, ...(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+        name: 'contextualToolbarOpenExperience',
+        plugin: () => contextualToolbarOpenExperience()
+      }] : [])];
     },
     contentComponent: !disableSelectionToolbar ? ({
       editorView,
@@ -177,6 +182,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,21 +124,13 @@ 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;
   }
-  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || currentUserIntent && currentUserIntent !== 'default' || isSSR()) {
+  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || (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') || isSSR()) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Popup, {
@@ -135,78 +163,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/pm-plugins/experiences/ContextualToolbarOpenExperience.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
+var pluginKey = new PluginKey('contextualToolbarOpenExperience');
+export default (function () {
+  var contextualToolbarOpenExperience = new Experience('platform-editor-contextual-toolbar-open-experience', {
+    checks: [new ExperienceCheckTimeout(500), new 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({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          shouldShowContextualToolbar: false
+        };
+      },
+      apply: function apply(_tr, pluginState, _, newState) {
+        var isTextSelection = newState.selection instanceof 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/esm/toolbarPlugin.js

@@ -1,16 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findSelectedNodeOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, findSelectedNodeOfType } 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 contextualToolbarOpenExperience from './pm-plugins/experiences/ContextualToolbarOpenExperience';
 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) {
@@ -169,7 +172,12 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
             }
           });
         }
-      }];
+      }].concat(_toConsumableArray(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+        name: 'contextualToolbarOpenExperience',
+        plugin: function plugin() {
+          return contextualToolbarOpenExperience();
+        }
+      }] : []));
     },
     contentComponent: !disableSelectionToolbar ? function (_ref2) {
       var editorView = _ref2.editorView,
@@ -177,6 +185,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,21 +125,13 @@ 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;
   }
-  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || currentUserIntent && currentUserIntent !== 'default' || isSSR()) {
+  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || (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') || isSSR()) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Popup, {
@@ -134,78 +164,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
+  }));
 };