@atlaskit/editor-plugin-toolbar 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 0.4.0
+
+### Minor Changes
+
+- [`e73faa5a52300`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e73faa5a52300) -
+  [ux] ED-28735 Fix selection toolbar opening and closing state
+
+### Patch Changes
+
+- [`b27824f2875be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b27824f2875be) -
+  [ux] [ED-28821] Add pin button to full page primary toolbar
+- Updated dependencies
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editorToolbarPluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var editorToolbarPluginKey = exports.editorToolbarPluginKey = new _state.PluginKey('editorToolbarPluginKey');

package/dist/cjs/toolbarPlugin.js

@@ -5,10 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toolbarPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _pluginKey = require("./pm-plugins/plugin-key");
+var _consts = require("./ui/consts");
 var _SelectionToolbar = require("./ui/SelectionToolbar");
 var _toolbarComponents = require("./ui/toolbar-components");
+var _toolbar = require("./ui/utils/toolbar");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
   var api = _ref.api,
     _ref$config = _ref.config,
@@ -28,6 +36,81 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
         return registry.components;
       }
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return _pluginKey.editorToolbarPluginKey.getState(editorState);
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'editor-toolbar-selection',
+        plugin: function plugin() {
+          return new _safePlugin.SafePlugin({
+            key: _pluginKey.editorToolbarPluginKey,
+            state: {
+              init: function init() {
+                return {
+                  shouldShowToolbar: false
+                };
+              },
+              apply: function apply(tr, pluginState) {
+                var meta = tr.getMeta(_pluginKey.editorToolbarPluginKey);
+                var newPluginState = pluginState;
+                if (meta) {
+                  return _objectSpread(_objectSpread({}, newPluginState), meta);
+                }
+                return newPluginState;
+              }
+            },
+            view: function view(_view) {
+              var unbind = (0, _bindEventListener.bind)(_view.root, {
+                type: 'mouseup',
+                listener: function listener(ev) {
+                  var _api$editorViewMode;
+                  var event = ev;
+                  var isInToolbar = (0, _toolbar.isEventInContainer)(event, _consts.DEFAULT_POPUP_SELECTORS.toolbarContainer);
+                  var isInPortal = (0, _toolbar.isEventInContainer)(event, _consts.DEFAULT_POPUP_SELECTORS.portal);
+
+                  // We only want to set selectionStable to true if the editor has focus
+                  // to prevent the toolbar from showing when the editor is blurred
+                  // due to a click outside the editor.
+                  var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                  var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
+                  _view.dispatch(_view.state.tr.setMeta(_pluginKey.editorToolbarPluginKey, {
+                    shouldShowToolbar: !isViewModeEnabled ? _view.hasFocus() || isInToolbar || isInPortal : true
+                  }));
+                }
+              });
+              var unbindEditorViewFocus = (0, _bindEventListener.bind)(_view.dom, {
+                type: 'focus',
+                listener: function listener() {
+                  _view.dispatch(_view.state.tr.setMeta(_pluginKey.editorToolbarPluginKey, {
+                    shouldShowToolbar: true
+                  }));
+                }
+              });
+              return {
+                destroy: function destroy() {
+                  unbind();
+                  unbindEditorViewFocus();
+                }
+              };
+            },
+            props: {
+              handleDOMEvents: {
+                mousedown: function mousedown(view) {
+                  view.dispatch(view.state.tr.setMeta(_pluginKey.editorToolbarPluginKey, {
+                    shouldShowToolbar: false
+                  }));
+                  return false;
+                }
+              }
+            }
+          });
+        }
+      }];
+    },
     contentComponent: !disableSelectionToolbar ? function (_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint;

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

@@ -1,12 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectionToolbar = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _hooks = require("@atlaskit/editor-common/hooks");
 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");
@@ -15,16 +16,26 @@ 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 _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");
+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';
 };
 var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
+  var _api$toolbar, _api$toolbar$getCompo;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint;
-  var components = api === null || api === void 0 ? void 0 : api.toolbar.actions.getComponents();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['toolbar'], function (state) {
+      var _state$toolbarState;
+      return {
+        shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar
+      };
+    }),
+    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+  var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || (_api$toolbar = _api$toolbar.actions) === null || _api$toolbar === void 0 || (_api$toolbar$getCompo = _api$toolbar.getComponents) === null || _api$toolbar$getCompo === void 0 ? void 0 : _api$toolbar$getCompo.call(_api$toolbar);
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
@@ -36,18 +47,28 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.TextSelection;
   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);
+    }
+    var calc = _utils.calculateToolbarPositionTrackHead;
+    return calc(toolbarTitle)(editorView, position);
+  }, [editorView]);
   if (!components || !toolbar) {
     return null;
   }
-  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || (0, _coreUtils.isSSR)()) {
+  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || (0, _coreUtils.isSSR)()) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     offset: [0, 10],
     target: getDomRefFromSelection(editorView),
-    onPositionCalculated: function onPositionCalculated(position) {
-      return (0, _utils.calculateToolbarPositionTrackHead)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
-    },
+    onPositionCalculated: onPositionCalculated,
     mountTo: mountPoint
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
     editorView: editorView

package/dist/cjs/ui/consts.js

@@ -3,5 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SELECTION_TOOLBAR_LABEL = void 0;
-var SELECTION_TOOLBAR_LABEL = exports.SELECTION_TOOLBAR_LABEL = 'Selection toolbar';
+exports.SELECTION_TOOLBAR_LABEL = exports.DEFAULT_POPUP_SELECTORS = void 0;
+var SELECTION_TOOLBAR_LABEL = exports.SELECTION_TOOLBAR_LABEL = 'Selection toolbar';
+var DEFAULT_POPUP_SELECTORS = exports.DEFAULT_POPUP_SELECTORS = {
+  toolbarContainer: '[role="toolbar"]',
+  portal: '.atlaskit-portal'
+};

package/dist/cjs/ui/toolbar-components.js

@@ -120,5 +120,13 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       var children = _ref6.children;
       return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
     }
+  }, {
+    type: _toolbar.PIN_SECTION.type,
+    key: _toolbar.PIN_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.PIN_SECTION.key]
+    }]
   }];
 };

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEventInContainer = void 0;
+var isEventInContainer = exports.isEventInContainer = function isEventInContainer(event, containerSelector) {
+  var target = event.target instanceof Element ? event.target : null;
+  if (!target) {
+    return false;
+  }
+  return !!target.closest(containerSelector);
+};

package/dist/es2019/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const editorToolbarPluginKey = new PluginKey('editorToolbarPluginKey');

package/dist/es2019/toolbarPlugin.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import { bind } from 'bind-event-listener';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
+import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
 import { SelectionToolbar } from './ui/SelectionToolbar';
 import { getToolbarComponents } from './ui/toolbar-components';
+import { isEventInContainer } from './ui/utils/toolbar';
 export const toolbarPlugin = ({
   api,
   config = {
@@ -23,6 +28,84 @@ export const toolbarPlugin = ({
         return registry.components;
       }
     },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return editorToolbarPluginKey.getState(editorState);
+    },
+    pmPlugins() {
+      return [{
+        name: 'editor-toolbar-selection',
+        plugin: () => {
+          return new SafePlugin({
+            key: editorToolbarPluginKey,
+            state: {
+              init() {
+                return {
+                  shouldShowToolbar: false
+                };
+              },
+              apply(tr, pluginState) {
+                const meta = tr.getMeta(editorToolbarPluginKey);
+                const newPluginState = pluginState;
+                if (meta) {
+                  return {
+                    ...newPluginState,
+                    ...meta
+                  };
+                }
+                return newPluginState;
+              }
+            },
+            view(view) {
+              const unbind = bind(view.root, {
+                type: 'mouseup',
+                listener: function (ev) {
+                  var _api$editorViewMode;
+                  const event = ev;
+                  const isInToolbar = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.toolbarContainer);
+                  const isInPortal = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.portal);
+
+                  // We only want to set selectionStable to true if the editor has focus
+                  // to prevent the toolbar from showing when the editor is blurred
+                  // due to a click outside the editor.
+                  const editorViewModePlugin = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                  const isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
+                  view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
+                    shouldShowToolbar: !isViewModeEnabled ? view.hasFocus() || isInToolbar || isInPortal : true
+                  }));
+                }
+              });
+              const unbindEditorViewFocus = bind(view.dom, {
+                type: 'focus',
+                listener: () => {
+                  view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
+                    shouldShowToolbar: true
+                  }));
+                }
+              });
+              return {
+                destroy() {
+                  unbind();
+                  unbindEditorViewFocus();
+                }
+              };
+            },
+            props: {
+              handleDOMEvents: {
+                mousedown: view => {
+                  view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
+                    shouldShowToolbar: false
+                  }));
+                  return false;
+                }
+              }
+            }
+          });
+        }
+      }];
+    },
     contentComponent: !disableSelectionToolbar ? ({
       editorView,
       popupsMountPoint

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

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
+import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+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';
 const isToolbarComponent = component => {
@@ -18,7 +20,16 @@ export const SelectionToolbar = ({
   editorView,
   mountPoint
 }) => {
-  const components = api === null || api === void 0 ? void 0 : api.toolbar.actions.getComponents();
+  var _api$toolbar, _api$toolbar$actions, _api$toolbar$actions$;
+  const {
+    shouldShowToolbar
+  } = useSharedPluginStateWithSelector(api, ['toolbar'], state => {
+    var _state$toolbarState;
+    return {
+      shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar
+    };
+  });
+  const components = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : (_api$toolbar$actions = _api$toolbar.actions) === null || _api$toolbar$actions === void 0 ? void 0 : (_api$toolbar$actions$ = _api$toolbar$actions.getComponents) === null || _api$toolbar$actions$ === void 0 ? void 0 : _api$toolbar$actions$.call(_api$toolbar$actions);
   const toolbar = components === null || components === void 0 ? void 0 : components.find(component => isToolbarComponent(component));
   const currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
   const connectivityStateMode = useSharedPluginStateSelector(api, 'connectivity.mode');
@@ -28,16 +39,28 @@ export const SelectionToolbar = ({
   const selection = useSharedPluginStateSelector(api, 'selection.selection');
   const isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   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);
+    }
+    const calc = calculateToolbarPositionTrackHead;
+    return calc(toolbarTitle)(editorView, position);
+  }, [editorView]);
   if (!components || !toolbar) {
     return null;
   }
-  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
+  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Popup, {
     offset: [0, 10],
     target: getDomRefFromSelection(editorView),
-    onPositionCalculated: position => calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL)(editorView, position),
+    onPositionCalculated: onPositionCalculated,
     mountTo: mountPoint
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView

package/dist/es2019/ui/consts.js

@@ -1 +1,5 @@
-export const SELECTION_TOOLBAR_LABEL = 'Selection toolbar';
+export const SELECTION_TOOLBAR_LABEL = 'Selection toolbar';
+export const DEFAULT_POPUP_SELECTORS = {
+  toolbarContainer: '[role="toolbar"]',
+  portal: '.atlaskit-portal'
+};

package/dist/es2019/ui/toolbar-components.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
 import { SELECTION_TOOLBAR_LABEL } from './consts';
 import { OverflowMenu } from './OverflowMenu';
@@ -113,5 +113,13 @@ export const getToolbarComponents = api => {
     }) => {
       return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
     }
+  }, {
+    type: PIN_SECTION.type,
+    key: PIN_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[PIN_SECTION.key]
+    }]
   }];
 };

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

@@ -0,0 +1,7 @@
+export const isEventInContainer = (event, containerSelector) => {
+  const target = event.target instanceof Element ? event.target : null;
+  if (!target) {
+    return false;
+  }
+  return !!target.closest(containerSelector);
+};

package/dist/esm/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var editorToolbarPluginKey = new PluginKey('editorToolbarPluginKey');

package/dist/esm/toolbarPlugin.js

@@ -1,7 +1,15 @@
+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 React from 'react';
+import { bind } from 'bind-event-listener';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+import { editorToolbarPluginKey } from './pm-plugins/plugin-key';
+import { DEFAULT_POPUP_SELECTORS } from './ui/consts';
 import { SelectionToolbar } from './ui/SelectionToolbar';
 import { getToolbarComponents } from './ui/toolbar-components';
+import { isEventInContainer } from './ui/utils/toolbar';
 export var toolbarPlugin = function toolbarPlugin(_ref) {
   var api = _ref.api,
     _ref$config = _ref.config,
@@ -21,6 +29,81 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
         return registry.components;
       }
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return editorToolbarPluginKey.getState(editorState);
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'editor-toolbar-selection',
+        plugin: function plugin() {
+          return new SafePlugin({
+            key: editorToolbarPluginKey,
+            state: {
+              init: function init() {
+                return {
+                  shouldShowToolbar: false
+                };
+              },
+              apply: function apply(tr, pluginState) {
+                var meta = tr.getMeta(editorToolbarPluginKey);
+                var newPluginState = pluginState;
+                if (meta) {
+                  return _objectSpread(_objectSpread({}, newPluginState), meta);
+                }
+                return newPluginState;
+              }
+            },
+            view: function view(_view) {
+              var unbind = bind(_view.root, {
+                type: 'mouseup',
+                listener: function listener(ev) {
+                  var _api$editorViewMode;
+                  var event = ev;
+                  var isInToolbar = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.toolbarContainer);
+                  var isInPortal = isEventInContainer(event, DEFAULT_POPUP_SELECTORS.portal);
+
+                  // We only want to set selectionStable to true if the editor has focus
+                  // to prevent the toolbar from showing when the editor is blurred
+                  // due to a click outside the editor.
+                  var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
+                  var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
+                  _view.dispatch(_view.state.tr.setMeta(editorToolbarPluginKey, {
+                    shouldShowToolbar: !isViewModeEnabled ? _view.hasFocus() || isInToolbar || isInPortal : true
+                  }));
+                }
+              });
+              var unbindEditorViewFocus = bind(_view.dom, {
+                type: 'focus',
+                listener: function listener() {
+                  _view.dispatch(_view.state.tr.setMeta(editorToolbarPluginKey, {
+                    shouldShowToolbar: true
+                  }));
+                }
+              });
+              return {
+                destroy: function destroy() {
+                  unbind();
+                  unbindEditorViewFocus();
+                }
+              };
+            },
+            props: {
+              handleDOMEvents: {
+                mousedown: function mousedown(view) {
+                  view.dispatch(view.state.tr.setMeta(editorToolbarPluginKey, {
+                    shouldShowToolbar: false
+                  }));
+                  return false;
+                }
+              }
+            }
+          });
+        }
+      }];
+    },
     contentComponent: !disableSelectionToolbar ? function (_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint;

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

@@ -1,23 +1,33 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
+import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+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';
 var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
 export var SelectionToolbar = function SelectionToolbar(_ref) {
+  var _api$toolbar, _api$toolbar$getCompo;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint;
-  var components = api === null || api === void 0 ? void 0 : api.toolbar.actions.getComponents();
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['toolbar'], function (state) {
+      var _state$toolbarState;
+      return {
+        shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar
+      };
+    }),
+    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+  var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || (_api$toolbar = _api$toolbar.actions) === null || _api$toolbar === void 0 || (_api$toolbar$getCompo = _api$toolbar.getComponents) === null || _api$toolbar$getCompo === void 0 ? void 0 : _api$toolbar$getCompo.call(_api$toolbar);
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
@@ -29,18 +39,28 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   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);
+    }
+    var calc = calculateToolbarPositionTrackHead;
+    return calc(toolbarTitle)(editorView, position);
+  }, [editorView]);
   if (!components || !toolbar) {
     return null;
   }
-  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
+  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Popup, {
     offset: [0, 10],
     target: getDomRefFromSelection(editorView),
-    onPositionCalculated: function onPositionCalculated(position) {
-      return calculateToolbarPositionTrackHead(SELECTION_TOOLBAR_LABEL)(editorView, position);
-    },
+    onPositionCalculated: onPositionCalculated,
     mountTo: mountPoint
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView

package/dist/esm/ui/consts.js

@@ -1 +1,5 @@
-export var SELECTION_TOOLBAR_LABEL = 'Selection toolbar';
+export var SELECTION_TOOLBAR_LABEL = 'Selection toolbar';
+export var DEFAULT_POPUP_SELECTORS = {
+  toolbarContainer: '[role="toolbar"]',
+  portal: '.atlaskit-portal'
+};

package/dist/esm/ui/toolbar-components.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
 import { SELECTION_TOOLBAR_LABEL } from './consts';
 import { OverflowMenu } from './OverflowMenu';
@@ -113,5 +113,13 @@ export var getToolbarComponents = function getToolbarComponents(api) {
       var children = _ref6.children;
       return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
     }
+  }, {
+    type: PIN_SECTION.type,
+    key: PIN_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[PIN_SECTION.key]
+    }]
   }];
 };

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

@@ -0,0 +1,7 @@
+export var isEventInContainer = function isEventInContainer(event, containerSelector) {
+  var target = event.target instanceof Element ? event.target : null;
+  if (!target) {
+    return false;
+  }
+  return !!target.closest(containerSelector);
+};

package/dist/types/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const editorToolbarPluginKey: PluginKey<any>;

package/dist/types/toolbarPlugin.d.ts

@@ -1,2 +1,5 @@
 import type { ToolbarPlugin } from './toolbarPluginType';
+export type EditorToolbarPluginState = {
+    shouldShowToolbar: boolean;
+};
 export declare const toolbarPlugin: ToolbarPlugin;

package/dist/types/toolbarPluginType.d.ts

@@ -8,6 +8,9 @@ import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarPluginOptions } from './types';
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     pluginConfiguration?: ToolbarPluginOptions;
+    sharedState: {
+        shouldShowToolbar: boolean;
+    };
     dependencies: [
         OptionalPlugin<UserIntentPlugin>,
         OptionalPlugin<SelectionPlugin>,

package/dist/types/ui/consts.d.ts

@@ -1 +1,5 @@
 export declare const SELECTION_TOOLBAR_LABEL = "Selection toolbar";
+export declare const DEFAULT_POPUP_SELECTORS: {
+    readonly toolbarContainer: "[role=\"toolbar\"]";
+    readonly portal: ".atlaskit-portal";
+};

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

@@ -0,0 +1 @@
+export declare const isEventInContainer: (event: Event, containerSelector: string) => boolean;

package/dist/types-ts4.5/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const editorToolbarPluginKey: PluginKey<any>;

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

@@ -1,2 +1,5 @@
 import type { ToolbarPlugin } from './toolbarPluginType';
+export type EditorToolbarPluginState = {
+    shouldShowToolbar: boolean;
+};
 export declare const toolbarPlugin: ToolbarPlugin;

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

@@ -8,6 +8,9 @@ import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarPluginOptions } from './types';
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     pluginConfiguration?: ToolbarPluginOptions;
+    sharedState: {
+        shouldShowToolbar: boolean;
+    };
     dependencies: [
         OptionalPlugin<UserIntentPlugin>,
         OptionalPlugin<SelectionPlugin>,

package/dist/types-ts4.5/ui/consts.d.ts

@@ -1 +1,5 @@
 export declare const SELECTION_TOOLBAR_LABEL = "Selection toolbar";
+export declare const DEFAULT_POPUP_SELECTORS: {
+    readonly toolbarContainer: "[role=\"toolbar\"]";
+    readonly portal: ".atlaskit-portal";
+};

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

@@ -0,0 +1 @@
+export declare const isEventInContainer: (event: Event, containerSelector: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "0.3.1",
+	"version": "0.4.0",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,14 +33,15 @@
 	"dependencies": {
 		"@atlaskit/editor-plugin-connectivity": "^3.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
-		"@atlaskit/editor-plugin-selection": "^3.1.0",
+		"@atlaskit/editor-plugin-selection": "^3.2.0",
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-plugin-user-preferences": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-toolbar": "^0.3.0",
 		"@atlaskit/editor-toolbar-model": "^0.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.4.0",
+		"@atlaskit/tmp-editor-statsig": "^11.5.0",
 		"@babel/runtime": "^7.0.0",
+		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {