@atlaskit/editor-plugin-toolbar 2.1.1 → 2.1.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 2.1.4
+
+### Patch Changes
+
+- [`e24c73c66f022`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e24c73c66f022) -
+  [ux] ED-29268 [SoftServ] Toolbar doesn’t move with text when text alignment change
+- Updated dependencies
+
+## 2.1.3
+
+### Patch Changes
+
+- [`553afc302139b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/553afc302139b) -
+  Add analytic emitter component which fires an event when dropdowns are viewed
+- Updated dependencies
+
+## 2.1.2
+
+### Patch Changes
+
+- [`30aad83e7ded7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/30aad83e7ded7) -
+  When editorViewMode is undefined, default to 'edit' as the plugin may not be present.
+- Updated dependencies
+
 ## 2.1.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-connectivity/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-analytics/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-connectivity/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-analytics/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-connectivity/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-analytics/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-connectivity/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-analytics/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-connectivity/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-analytics/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-connectivity/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-analytics/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-connectivity/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/toolbarPlugin.js

@@ -9,7 +9,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _consts = require("./ui/consts");
 var _SelectionToolbar = require("./ui/SelectionToolbar");
@@ -17,6 +20,51 @@ 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; }
+function getSelectedNode(editorState) {
+  var selection = editorState.selection;
+  if (selection instanceof _state.NodeSelection) {
+    return {
+      node: selection.node,
+      pos: selection.from,
+      nodeType: selection.node.type.name,
+      marks: selection.node.marks.map(function (mark) {
+        return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+      })
+    };
+  }
+  var nodes = editorState.schema.nodes;
+  var selectedNode = (0, _utils.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock])(selection);
+  if (selectedNode) {
+    return {
+      node: selectedNode.node,
+      pos: selectedNode.pos,
+      nodeType: selectedNode.node.type.name,
+      marks: selectedNode.node.marks.map(function (mark) {
+        return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+      })
+    };
+  }
+  var parentNode = (0, _utils.findParentNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.listItem, nodes.taskItem])(selection);
+  if (parentNode) {
+    return {
+      node: parentNode.node,
+      pos: parentNode.pos,
+      nodeType: parentNode.node.type.name,
+      marks: parentNode.node.marks.map(function (mark) {
+        return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+      })
+    };
+  }
+  var $pos = selection.$from;
+  return {
+    node: $pos.parent,
+    pos: $pos.pos,
+    nodeType: $pos.parent.type.name,
+    marks: $pos.marks().map(function (mark) {
+      return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+    })
+  };
+}
 var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
   var api = _ref.api,
     _ref$config = _ref.config,
@@ -57,16 +105,28 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
           return new _safePlugin.SafePlugin({
             key: _pluginKey.editorToolbarPluginKey,
             state: {
-              init: function init() {
+              init: function init(_, editorState) {
                 return {
-                  shouldShowToolbar: false
+                  shouldShowToolbar: false,
+                  selectedNode: getSelectedNode(editorState)
                 };
               },
-              apply: function apply(tr, pluginState) {
+              apply: function apply(tr, pluginState, _, newState) {
                 var meta = tr.getMeta(_pluginKey.editorToolbarPluginKey);
-                var newPluginState = pluginState;
+                var newPluginState = _objectSpread({}, pluginState);
+                if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
+                  var shouldUpdateNode = tr.docChanged || tr.selectionSet;
+                  if (shouldUpdateNode) {
+                    var newSelectedNode = getSelectedNode(newState);
+                    var oldNode = pluginState.selectedNode;
+                    var hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
+                    if (hasNodeChanged) {
+                      newPluginState.selectedNode = newSelectedNode;
+                    }
+                  }
+                }
                 if (meta) {
-                  return _objectSpread(_objectSpread({}, newPluginState), meta);
+                  newPluginState = _objectSpread(_objectSpread({}, newPluginState), meta);
                 }
                 return newPluginState;
               }
@@ -122,6 +182,9 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
     contentComponent: !disableSelectionToolbar ? function (_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint;
+      if (!editorView) {
+        return null;
+      }
       return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbar, {
         api: api,
         editorView: editorView,

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

@@ -28,11 +28,12 @@ var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(fun
   return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true);
 }, function (api) {
   return (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'userPreferences', 'toolbar', 'selection', 'userIntent', 'editorViewMode'], function (state) {
-    var _state$connectivitySt, _state$userPreference, _state$toolbarState, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
+    var _state$connectivitySt, _state$userPreference, _state$toolbarState, _state$toolbarState2, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
     return {
       connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
       editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 || (_state$userPreference = _state$userPreference.preferences) === null || _state$userPreference === void 0 ? void 0 : _state$userPreference.toolbarDockingPosition,
       shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar,
+      selectedNode: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.selectedNode,
       selection: (_state$selectionState = state.selectionState) === null || _state$selectionState === void 0 ? void 0 : _state$selectionState.selection,
       currentUserIntent: (_state$userIntentStat = state.userIntentState) === null || _state$userIntentStat === void 0 ? void 0 : _state$userIntentStat.currentUserIntent,
       editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode
@@ -44,19 +45,22 @@ var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(fun
   var currentUserIntent = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userIntent.currentUserIntent');
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['toolbar'], function (state) {
-      var _state$toolbarState2;
+      var _state$toolbarState3, _state$toolbarState4;
       return {
-        shouldShowToolbar: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.shouldShowToolbar
+        shouldShowToolbar: (_state$toolbarState3 = state.toolbarState) === null || _state$toolbarState3 === void 0 ? void 0 : _state$toolbarState3.shouldShowToolbar,
+        selectedNode: (_state$toolbarState4 = state.toolbarState) === null || _state$toolbarState4 === void 0 ? void 0 : _state$toolbarState4.selectedNode
       };
     }),
-    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar,
+    selectedNode = _useSharedPluginState.selectedNode;
   return {
     connectivityStateMode: connectivityStateMode,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
     currentUserIntent: currentUserIntent,
     shouldShowToolbar: shouldShowToolbar,
     selection: selection,
-    editorViewMode: undefined
+    editorViewMode: undefined,
+    selectedNode: selectedNode
   };
 });
 var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
@@ -89,8 +93,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     if (isCellSelection && isEditorControlsEnabled) {
       return (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle)(editorView, position);
     }
-    var calc = _utils.calculateToolbarPositionTrackHead;
-    return calc(toolbarTitle)(editorView, position);
+    return (0, _utils.calculateToolbarPositionTrackHead)(toolbarTitle)(editorView, position);
   }, [editorView]);
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
@@ -106,10 +109,16 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
-    editorViewMode: editorViewMode
+    editorViewMode: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
     api: api,
     isDisabled: isOffline
+    // supress type checks for now
+    ,
+    fireAnalyticsEvent: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? function (payload) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
+    } : undefined
   }, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getToolbarComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -23,7 +24,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
     component: function component(_ref) {
       var children = _ref.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.Toolbar, {
-        label: _consts.SELECTION_TOOLBAR_LABEL
+        label: _consts.SELECTION_TOOLBAR_LABEL,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR
       }, children);
     }
   }, {

package/dist/es2019/toolbarPlugin.js

@@ -1,12 +1,56 @@
 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 { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+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 { getToolbarComponents } from './ui/toolbar-components';
 import { isEventInContainer } from './ui/utils/toolbar';
+function getSelectedNode(editorState) {
+  const {
+    selection
+  } = editorState;
+  if (selection instanceof NodeSelection) {
+    return {
+      node: selection.node,
+      pos: selection.from,
+      nodeType: selection.node.type.name,
+      marks: selection.node.marks.map(mark => `${mark.type.name}:${JSON.stringify(mark.attrs)}`)
+    };
+  }
+  const {
+    nodes
+  } = editorState.schema;
+  const selectedNode = findSelectedNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock])(selection);
+  if (selectedNode) {
+    return {
+      node: selectedNode.node,
+      pos: selectedNode.pos,
+      nodeType: selectedNode.node.type.name,
+      marks: selectedNode.node.marks.map(mark => `${mark.type.name}:${JSON.stringify(mark.attrs)}`)
+    };
+  }
+  const parentNode = findParentNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.listItem, nodes.taskItem])(selection);
+  if (parentNode) {
+    return {
+      node: parentNode.node,
+      pos: parentNode.pos,
+      nodeType: parentNode.node.type.name,
+      marks: parentNode.node.marks.map(mark => `${mark.type.name}:${JSON.stringify(mark.attrs)}`)
+    };
+  }
+  const $pos = selection.$from;
+  return {
+    node: $pos.parent,
+    pos: $pos.pos,
+    nodeType: $pos.parent.type.name,
+    marks: $pos.marks().map(mark => `${mark.type.name}:${JSON.stringify(mark.attrs)}`)
+  };
+}
 export const toolbarPlugin = ({
   api,
   config = {
@@ -48,16 +92,30 @@ export const toolbarPlugin = ({
           return new SafePlugin({
             key: editorToolbarPluginKey,
             state: {
-              init() {
+              init(_, editorState) {
                 return {
-                  shouldShowToolbar: false
+                  shouldShowToolbar: false,
+                  selectedNode: getSelectedNode(editorState)
                 };
               },
-              apply(tr, pluginState) {
+              apply(tr, pluginState, _, newState) {
                 const meta = tr.getMeta(editorToolbarPluginKey);
-                const newPluginState = pluginState;
+                let newPluginState = {
+                  ...pluginState
+                };
+                if (expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
+                  const shouldUpdateNode = tr.docChanged || tr.selectionSet;
+                  if (shouldUpdateNode) {
+                    const newSelectedNode = getSelectedNode(newState);
+                    const oldNode = pluginState.selectedNode;
+                    const hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
+                    if (hasNodeChanged) {
+                      newPluginState.selectedNode = newSelectedNode;
+                    }
+                  }
+                }
                 if (meta) {
-                  return {
+                  newPluginState = {
                     ...newPluginState,
                     ...meta
                   };
@@ -117,6 +175,9 @@ export const toolbarPlugin = ({
       editorView,
       popupsMountPoint
     }) => {
+      if (!editorView) {
+        return null;
+      }
       return /*#__PURE__*/React.createElement(SelectionToolbar, {
         api: api,
         editorView: editorView,

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

@@ -18,11 +18,12 @@ const isToolbarComponent = component => {
 };
 const usePluginState = conditionalHooksFactory(() => expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true), api => {
   return useSharedPluginStateWithSelector(api, ['connectivity', 'userPreferences', 'toolbar', 'selection', 'userIntent', 'editorViewMode'], state => {
-    var _state$connectivitySt, _state$userPreference, _state$userPreference2, _state$toolbarState, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
+    var _state$connectivitySt, _state$userPreference, _state$userPreference2, _state$toolbarState, _state$toolbarState2, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
     return {
       connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
       editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 ? void 0 : (_state$userPreference2 = _state$userPreference.preferences) === null || _state$userPreference2 === void 0 ? void 0 : _state$userPreference2.toolbarDockingPosition,
       shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar,
+      selectedNode: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.selectedNode,
       selection: (_state$selectionState = state.selectionState) === null || _state$selectionState === void 0 ? void 0 : _state$selectionState.selection,
       currentUserIntent: (_state$userIntentStat = state.userIntentState) === null || _state$userIntentStat === void 0 ? void 0 : _state$userIntentStat.currentUserIntent,
       editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode
@@ -34,11 +35,13 @@ const usePluginState = conditionalHooksFactory(() => expValEquals('platform_edit
   const currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
   const selection = useSharedPluginStateSelector(api, 'selection.selection');
   const {
-    shouldShowToolbar
+    shouldShowToolbar,
+    selectedNode
   } = useSharedPluginStateWithSelector(api, ['toolbar'], state => {
-    var _state$toolbarState2;
+    var _state$toolbarState3, _state$toolbarState4;
     return {
-      shouldShowToolbar: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.shouldShowToolbar
+      shouldShowToolbar: (_state$toolbarState3 = state.toolbarState) === null || _state$toolbarState3 === void 0 ? void 0 : _state$toolbarState3.shouldShowToolbar,
+      selectedNode: (_state$toolbarState4 = state.toolbarState) === null || _state$toolbarState4 === void 0 ? void 0 : _state$toolbarState4.selectedNode
     };
   });
   return {
@@ -47,7 +50,8 @@ const usePluginState = conditionalHooksFactory(() => expValEquals('platform_edit
     currentUserIntent,
     shouldShowToolbar,
     selection,
-    editorViewMode: undefined
+    editorViewMode: undefined,
+    selectedNode
   };
 });
 export const SelectionToolbar = ({
@@ -81,8 +85,7 @@ export const SelectionToolbar = ({
     if (isCellSelection && isEditorControlsEnabled) {
       return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
     }
-    const calc = calculateToolbarPositionTrackHead;
-    return calc(toolbarTitle)(editorView, position);
+    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
   }, [editorView]);
   if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
@@ -98,10 +101,16 @@ export const SelectionToolbar = ({
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
-    editorViewMode: editorViewMode
+    editorViewMode: expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: api,
     isDisabled: isOffline
+    // supress type checks for now
+    ,
+    fireAnalyticsEvent: expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? payload => {
+      var _api$analytics;
+      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent(payload);
+    } : undefined
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -16,7 +17,8 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
       children
     }) => {
       return /*#__PURE__*/React.createElement(Toolbar, {
-        label: SELECTION_TOOLBAR_LABEL
+        label: SELECTION_TOOLBAR_LABEL,
+        actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR
       }, children);
     }
   }, {

package/dist/esm/toolbarPlugin.js

@@ -4,12 +4,60 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+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 { getToolbarComponents } from './ui/toolbar-components';
 import { isEventInContainer } from './ui/utils/toolbar';
+function getSelectedNode(editorState) {
+  var selection = editorState.selection;
+  if (selection instanceof NodeSelection) {
+    return {
+      node: selection.node,
+      pos: selection.from,
+      nodeType: selection.node.type.name,
+      marks: selection.node.marks.map(function (mark) {
+        return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+      })
+    };
+  }
+  var nodes = editorState.schema.nodes;
+  var selectedNode = findSelectedNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock])(selection);
+  if (selectedNode) {
+    return {
+      node: selectedNode.node,
+      pos: selectedNode.pos,
+      nodeType: selectedNode.node.type.name,
+      marks: selectedNode.node.marks.map(function (mark) {
+        return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+      })
+    };
+  }
+  var parentNode = findParentNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.listItem, nodes.taskItem])(selection);
+  if (parentNode) {
+    return {
+      node: parentNode.node,
+      pos: parentNode.pos,
+      nodeType: parentNode.node.type.name,
+      marks: parentNode.node.marks.map(function (mark) {
+        return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+      })
+    };
+  }
+  var $pos = selection.$from;
+  return {
+    node: $pos.parent,
+    pos: $pos.pos,
+    nodeType: $pos.parent.type.name,
+    marks: $pos.marks().map(function (mark) {
+      return "".concat(mark.type.name, ":").concat(JSON.stringify(mark.attrs));
+    })
+  };
+}
 export var toolbarPlugin = function toolbarPlugin(_ref) {
   var api = _ref.api,
     _ref$config = _ref.config,
@@ -50,16 +98,28 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
           return new SafePlugin({
             key: editorToolbarPluginKey,
             state: {
-              init: function init() {
+              init: function init(_, editorState) {
                 return {
-                  shouldShowToolbar: false
+                  shouldShowToolbar: false,
+                  selectedNode: getSelectedNode(editorState)
                 };
               },
-              apply: function apply(tr, pluginState) {
+              apply: function apply(tr, pluginState, _, newState) {
                 var meta = tr.getMeta(editorToolbarPluginKey);
-                var newPluginState = pluginState;
+                var newPluginState = _objectSpread({}, pluginState);
+                if (expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
+                  var shouldUpdateNode = tr.docChanged || tr.selectionSet;
+                  if (shouldUpdateNode) {
+                    var newSelectedNode = getSelectedNode(newState);
+                    var oldNode = pluginState.selectedNode;
+                    var hasNodeChanged = !oldNode || !newSelectedNode || oldNode.nodeType !== newSelectedNode.nodeType || oldNode.pos !== newSelectedNode.pos || JSON.stringify(oldNode.marks) !== JSON.stringify(newSelectedNode.marks);
+                    if (hasNodeChanged) {
+                      newPluginState.selectedNode = newSelectedNode;
+                    }
+                  }
+                }
                 if (meta) {
-                  return _objectSpread(_objectSpread({}, newPluginState), meta);
+                  newPluginState = _objectSpread(_objectSpread({}, newPluginState), meta);
                 }
                 return newPluginState;
               }
@@ -115,6 +175,9 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
     contentComponent: !disableSelectionToolbar ? function (_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint;
+      if (!editorView) {
+        return null;
+      }
       return /*#__PURE__*/React.createElement(SelectionToolbar, {
         api: api,
         editorView: editorView,

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

@@ -20,11 +20,12 @@ var usePluginState = conditionalHooksFactory(function () {
   return expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true);
 }, function (api) {
   return useSharedPluginStateWithSelector(api, ['connectivity', 'userPreferences', 'toolbar', 'selection', 'userIntent', 'editorViewMode'], function (state) {
-    var _state$connectivitySt, _state$userPreference, _state$toolbarState, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
+    var _state$connectivitySt, _state$userPreference, _state$toolbarState, _state$toolbarState2, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
     return {
       connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
       editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 || (_state$userPreference = _state$userPreference.preferences) === null || _state$userPreference === void 0 ? void 0 : _state$userPreference.toolbarDockingPosition,
       shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar,
+      selectedNode: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.selectedNode,
       selection: (_state$selectionState = state.selectionState) === null || _state$selectionState === void 0 ? void 0 : _state$selectionState.selection,
       currentUserIntent: (_state$userIntentStat = state.userIntentState) === null || _state$userIntentStat === void 0 ? void 0 : _state$userIntentStat.currentUserIntent,
       editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode
@@ -36,19 +37,22 @@ var usePluginState = conditionalHooksFactory(function () {
   var currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['toolbar'], function (state) {
-      var _state$toolbarState2;
+      var _state$toolbarState3, _state$toolbarState4;
       return {
-        shouldShowToolbar: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.shouldShowToolbar
+        shouldShowToolbar: (_state$toolbarState3 = state.toolbarState) === null || _state$toolbarState3 === void 0 ? void 0 : _state$toolbarState3.shouldShowToolbar,
+        selectedNode: (_state$toolbarState4 = state.toolbarState) === null || _state$toolbarState4 === void 0 ? void 0 : _state$toolbarState4.selectedNode
       };
     }),
-    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar,
+    selectedNode = _useSharedPluginState.selectedNode;
   return {
     connectivityStateMode: connectivityStateMode,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
     currentUserIntent: currentUserIntent,
     shouldShowToolbar: shouldShowToolbar,
     selection: selection,
-    editorViewMode: undefined
+    editorViewMode: undefined,
+    selectedNode: selectedNode
   };
 });
 export var SelectionToolbar = function SelectionToolbar(_ref) {
@@ -81,8 +85,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     if (isCellSelection && isEditorControlsEnabled) {
       return calculateToolbarPositionOnCellSelection(toolbarTitle)(editorView, position);
     }
-    var calc = calculateToolbarPositionTrackHead;
-    return calc(toolbarTitle)(editorView, position);
+    return calculateToolbarPositionTrackHead(toolbarTitle)(editorView, position);
   }, [editorView]);
   if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
@@ -98,10 +101,16 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,
-    editorViewMode: editorViewMode
+    editorViewMode: expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit' : editorViewMode
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: api,
     isDisabled: isOffline
+    // supress type checks for now
+    ,
+    fireAnalyticsEvent: expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? function (payload) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
+    } : undefined
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,

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

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
+import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -16,7 +17,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
     component: function component(_ref) {
       var children = _ref.children;
       return /*#__PURE__*/React.createElement(Toolbar, {
-        label: SELECTION_TOOLBAR_LABEL
+        label: SELECTION_TOOLBAR_LABEL,
+        actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR
       }, children);
     }
   }, {

package/dist/types/toolbarPlugin.d.ts

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

package/dist/types/toolbarPluginType.d.ts

@@ -1,11 +1,22 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { RegisterComponentsAction, ToolbarPluginOptions } from './types';
+export type EditorToolbarPluginState = {
+    selectedNode?: {
+        marks: string[];
+        node: PMNode;
+        nodeType: string;
+        pos: number;
+    };
+    shouldShowToolbar: boolean;
+};
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     actions: {
         getComponents: () => Array<RegisterComponent>;
@@ -16,10 +27,9 @@ export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
         OptionalPlugin<SelectionPlugin>,
         OptionalPlugin<UserPreferencesPlugin>,
         OptionalPlugin<EditorViewModePlugin>,
-        OptionalPlugin<ConnectivityPlugin>
+        OptionalPlugin<ConnectivityPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
     ];
     pluginConfiguration?: ToolbarPluginOptions;
-    sharedState: {
-        shouldShowToolbar: boolean;
-    };
+    sharedState: EditorToolbarPluginState;
 }>;

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

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

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

@@ -1,11 +1,22 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { RegisterComponentsAction, ToolbarPluginOptions } from './types';
+export type EditorToolbarPluginState = {
+    selectedNode?: {
+        marks: string[];
+        node: PMNode;
+        nodeType: string;
+        pos: number;
+    };
+    shouldShowToolbar: boolean;
+};
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     actions: {
         getComponents: () => Array<RegisterComponent>;
@@ -16,10 +27,9 @@ export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
         OptionalPlugin<SelectionPlugin>,
         OptionalPlugin<UserPreferencesPlugin>,
         OptionalPlugin<EditorViewModePlugin>,
-        OptionalPlugin<ConnectivityPlugin>
+        OptionalPlugin<ConnectivityPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
     ];
     pluginConfiguration?: ToolbarPluginOptions;
-    sharedState: {
-        shouldShowToolbar: boolean;
-    };
+    sharedState: EditorToolbarPluginState;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "2.1.1",
+	"version": "2.1.4",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,22 +28,23 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
+		"@atlaskit/editor-plugin-analytics": "^5.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^5.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^7.0.0",
 		"@atlaskit/editor-plugin-selection": "^5.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^3.0.0",
 		"@atlaskit/editor-plugin-user-preferences": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-toolbar": "^0.8.0",
+		"@atlaskit/editor-toolbar": "^0.9.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^12.14.0",
+		"@atlaskit/tmp-editor-statsig": "^12.24.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": "^109.2.0",
+		"@atlaskit/editor-common": "^109.8.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {