@atlaskit/editor-common 96.4.1 → 96.5.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 96.5.1
+
+### Patch Changes
+
+- [#178536](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/178536)
+  [`2809409329363`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2809409329363) -
+  Adds keyboard events to select/de-select the bodied macros EditToggle for accessibility
+
+## 96.5.0
+
+### Minor Changes
+
+- [#175556](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175556)
+  [`e883046c970ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e883046c970ff) -
+  Introduces new usePluginStateSelector hook which can be used to efficiently listen to a slice of
+  an editor plugins state.
+
 ## 96.4.1
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/Lozenge/EditToggle.js

@@ -41,7 +41,11 @@ var buttonStyles = (0, _react2.css)({
   font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
-  }
+  },
+  outlineColor: "var(--ds-border-focused, #388BFF)",
+  border: 'none',
+  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+  color: "var(--ds-text-subtle, #44546F)"
 });
 var showButtonContainerStyle = (0, _react2.css)({
   opacity: 1
@@ -80,6 +84,11 @@ var EditToggle = exports.EditToggle = function EditToggle(_ref) {
   var handleClick = (0, _react.useCallback)(function () {
     setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 || setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
   }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, _react2.jsx)("div", {
@@ -100,8 +109,10 @@ var EditToggle = exports.EditToggle = function EditToggle(_ref) {
       },
       onMouseLeave: function onMouseLeave() {
         return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
-      }
-    }, (0, _react2.jsx)("span", {
+      },
+      tabIndex: -1
+    }, (0, _react2.jsx)("button", {
+      type: "button",
       "data-testid": "edit-toggle"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -109,7 +120,14 @@ var EditToggle = exports.EditToggle = function EditToggle(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: "extension-edit-toggle",
-      onClick: handleClick
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onFocus: function onFocus() {
+        return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
+      },
+      onBlur: function onBlur() {
+        return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
+      }
     }, (0, _react2.jsx)(_primitives.Flex, {
       as: "span",
       xcss: iconStyles

package/dist/cjs/hooks/useSharedPluginState.js

@@ -40,6 +40,9 @@ function useStaticPlugins(plugins) {
 }
 
 /**
+ *
+ * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,

package/dist/cjs/hooks/useSharedPluginStateSelector/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useSharedPluginStateSelector", {
+  enumerable: true,
+  get: function get() {
+    return _useSharedPluginStateSelector.useSharedPluginStateSelector;
+  }
+});
+var _useSharedPluginStateSelector = require("./useSharedPluginStateSelector");

package/dist/cjs/hooks/useSharedPluginStateSelector/useSharedPluginStateSelector.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSharedPluginStateSelector = useSharedPluginStateSelector;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _react = require("react");
+var _get = _interopRequireDefault(require("lodash/get"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _usePluginStateEffect = require("../usePluginStateEffect");
+/**
+ * This is designed to iterate through an object to get the path of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } };
+ * // Type should be `"deepObject" | "deepObject.value"`
+ * type Result = NestedKeys<Test>;
+ * ```
+ */
+
+/**
+ * This is designed to iterate through a path of an object to get the type of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } }
+ * // Type should be `number`
+ * type Result = Path<Test, 'deepObject.value'>
+ * ```
+ */
+
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ * 
+ * Used to return the current plugin state of input dependencies.
+ * It will recursively retrieve a slice of the state using a "." to separate
+ * parts of the state.
+ * 
+ * Example:
+ * 
+ * ```typescript
+ * 	const pluginA: NextEditorPlugin<
+		'pluginA',
+		{
+			sharedState: { deepObj: { value: number | undefined } };
+		}
+	>
+ * ```
+ * You can use `const value = useSharedPluginStateSelector(api, 'pluginA.deepObj.value')` to retrieve the value
+ * 
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const title = useSharedPluginStateSelector(api, 'dog.title')
+ *   return <p>{ title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () => <ExampleContent api={api} />
+ *   }
+ * }
+ * ```
+ * 
+ * NOTE: If you pass an invalid path, `undefined` will be returned
+ * 
+ * @param api 
+ * @param plugin 
+ * @returns 
+ */
+function useSharedPluginStateSelector(api, plugin) {
+  var transformer = (0, _react.useCallback)(function (pluginState) {
+    var _plugin$split = plugin.split('.'),
+      _plugin$split2 = (0, _toArray2.default)(_plugin$split),
+      pluginName = _plugin$split2[0],
+      properties = _plugin$split2.slice(1);
+    if (!pluginState || (properties === null || properties === void 0 ? void 0 : properties.length) === 0) {
+      return undefined;
+    }
+    return (0, _get.default)(pluginState === null || pluginState === void 0 ? void 0 : pluginState["".concat(pluginName, "State")], properties);
+  }, [plugin]);
+  var pluginNameArray = (0, _react.useMemo)(function () {
+    var _plugin$split3 = plugin.split('.'),
+      _plugin$split4 = (0, _slicedToArray2.default)(_plugin$split3, 1),
+      pluginName = _plugin$split4[0];
+    return [pluginName];
+  }, [plugin]);
+  return useSharedPluginStateSelectorInternal(api, pluginNameArray, transformer);
+}
+function useSharedPluginStateSelectorInternal(api, plugins, transformer) {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedPluginState = _useState2[0],
+    setSelectedPluginState = _useState2[1];
+  (0, _usePluginStateEffect.usePluginStateEffect)(api, plugins, function (pluginStates) {
+    // `pluginStates`: This is the same type through inference - but typescript doesn't recognise them as they are computed slightly differently
+    var transformedValue = transformer(pluginStates);
+    if (!(0, _isEqual.default)(transformedValue, selectedPluginState)) {
+      setSelectedPluginState(transformedValue);
+    }
+  });
+  return selectedPluginState;
+}

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.4.1";
+var packageVersion = "96.5.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.4.1";
+var packageVersion = "96.5.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/utils/profiler/render-count.js

@@ -77,6 +77,7 @@ var RenderCountProfiler = exports.RenderCountProfiler = /*#__PURE__*/function ()
       var componentId = _ref3.componentId;
       var component = (_this$store$PROFILER_ = (_this$store3 = this.store) === null || _this$store3 === void 0 || (_this$store3 = _this$store3[PROFILER_KEY]) === null || _this$store3 === void 0 || (_this$store3 = _this$store3.components) === null || _this$store3 === void 0 ? void 0 : _this$store3[componentId]) !== null && _this$store$PROFILER_ !== void 0 ? _this$store$PROFILER_ : {};
       var counters = [];
+      // eslint-disable-next-line guard-for-in
       for (var instanceId in component) {
         var counter = {
           instanceId: instanceId,
@@ -93,6 +94,7 @@ var RenderCountProfiler = exports.RenderCountProfiler = /*#__PURE__*/function ()
       var componentId = _ref4.componentId;
       var component = (_this$store$PROFILER_2 = (_this$store4 = this.store) === null || _this$store4 === void 0 || (_this$store4 = _this$store4[PROFILER_KEY]) === null || _this$store4 === void 0 || (_this$store4 = _this$store4.components) === null || _this$store4 === void 0 ? void 0 : _this$store4[componentId]) !== null && _this$store$PROFILER_2 !== void 0 ? _this$store$PROFILER_2 : {};
       var total = 0;
+      // eslint-disable-next-line guard-for-in
       for (var instanceId in component) {
         total += component[instanceId].count;
       }

package/dist/es2019/extensibility/Extension/Lozenge/EditToggle.js

@@ -34,7 +34,11 @@ const buttonStyles = css({
   font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
-  }
+  },
+  outlineColor: "var(--ds-border-focused, #388BFF)",
+  border: 'none',
+  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+  color: "var(--ds-text-subtle, #44546F)"
 });
 const showButtonContainerStyle = css({
   opacity: 1
@@ -74,6 +78,11 @@ export const EditToggle = ({
   const handleClick = useCallback(() => {
     setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 ? void 0 : setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
   }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     jsx("div", {
@@ -90,8 +99,10 @@ export const EditToggle = ({
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       ,
       onMouseOver: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true),
-      onMouseLeave: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false)
-    }, jsx("span", {
+      onMouseLeave: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false),
+      tabIndex: -1
+    }, jsx("button", {
+      type: "button",
       "data-testid": "edit-toggle"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -99,7 +110,10 @@ export const EditToggle = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: "extension-edit-toggle",
-      onClick: handleClick
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onFocus: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true),
+      onBlur: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false)
     }, jsx(Flex, {
       as: "span",
       xcss: iconStyles

package/dist/es2019/hooks/useSharedPluginState.js

@@ -25,6 +25,9 @@ function useStaticPlugins(plugins) {
 }
 
 /**
+ *
+ * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,

package/dist/es2019/hooks/useSharedPluginStateSelector/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { useSharedPluginStateSelector } from './useSharedPluginStateSelector';

package/dist/es2019/hooks/useSharedPluginStateSelector/useSharedPluginStateSelector.js

@@ -0,0 +1,98 @@
+import { useState, useCallback, useMemo } from 'react';
+import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
+import { usePluginStateEffect } from '../usePluginStateEffect';
+
+/**
+ * This is designed to iterate through an object to get the path of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } };
+ * // Type should be `"deepObject" | "deepObject.value"`
+ * type Result = NestedKeys<Test>;
+ * ```
+ */
+
+/**
+ * This is designed to iterate through a path of an object to get the type of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } }
+ * // Type should be `number`
+ * type Result = Path<Test, 'deepObject.value'>
+ * ```
+ */
+
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ * 
+ * Used to return the current plugin state of input dependencies.
+ * It will recursively retrieve a slice of the state using a "." to separate
+ * parts of the state.
+ * 
+ * Example:
+ * 
+ * ```typescript
+ * 	const pluginA: NextEditorPlugin<
+		'pluginA',
+		{
+			sharedState: { deepObj: { value: number | undefined } };
+		}
+	>
+ * ```
+ * You can use `const value = useSharedPluginStateSelector(api, 'pluginA.deepObj.value')` to retrieve the value
+ * 
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const title = useSharedPluginStateSelector(api, 'dog.title')
+ *   return <p>{ title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () => <ExampleContent api={api} />
+ *   }
+ * }
+ * ```
+ * 
+ * NOTE: If you pass an invalid path, `undefined` will be returned
+ * 
+ * @param api 
+ * @param plugin 
+ * @returns 
+ */
+export function useSharedPluginStateSelector(api, plugin) {
+  const transformer = useCallback(pluginState => {
+    const [pluginName, ...properties] = plugin.split('.');
+    if (!pluginState || (properties === null || properties === void 0 ? void 0 : properties.length) === 0) {
+      return undefined;
+    }
+    return get(pluginState === null || pluginState === void 0 ? void 0 : pluginState[`${pluginName}State`], properties);
+  }, [plugin]);
+  const pluginNameArray = useMemo(() => {
+    const [pluginName] = plugin.split('.');
+    return [pluginName];
+  }, [plugin]);
+  return useSharedPluginStateSelectorInternal(api, pluginNameArray, transformer);
+}
+function useSharedPluginStateSelectorInternal(api, plugins, transformer) {
+  const [selectedPluginState, setSelectedPluginState] = useState();
+  usePluginStateEffect(api, plugins, pluginStates => {
+    // `pluginStates`: This is the same type through inference - but typescript doesn't recognise them as they are computed slightly differently
+    const transformedValue = transformer(pluginStates);
+    if (!isEqual(transformedValue, selectedPluginState)) {
+      setSelectedPluginState(transformedValue);
+    }
+  });
+  return selectedPluginState;
+}

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "96.4.1";
+const packageVersion = "96.5.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "96.4.1";
+const packageVersion = "96.5.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/profiler/render-count.js

@@ -71,6 +71,7 @@ export class RenderCountProfiler {
     var _this$store$PROFILER_, _this$store3, _this$store3$PROFILER, _this$store3$PROFILER2;
     const component = (_this$store$PROFILER_ = (_this$store3 = this.store) === null || _this$store3 === void 0 ? void 0 : (_this$store3$PROFILER = _this$store3[PROFILER_KEY]) === null || _this$store3$PROFILER === void 0 ? void 0 : (_this$store3$PROFILER2 = _this$store3$PROFILER.components) === null || _this$store3$PROFILER2 === void 0 ? void 0 : _this$store3$PROFILER2[componentId]) !== null && _this$store$PROFILER_ !== void 0 ? _this$store$PROFILER_ : {};
     const counters = [];
+    // eslint-disable-next-line guard-for-in
     for (let instanceId in component) {
       const counter = {
         instanceId,
@@ -86,6 +87,7 @@ export class RenderCountProfiler {
     var _this$store$PROFILER_2, _this$store4, _this$store4$PROFILER, _this$store4$PROFILER2;
     const component = (_this$store$PROFILER_2 = (_this$store4 = this.store) === null || _this$store4 === void 0 ? void 0 : (_this$store4$PROFILER = _this$store4[PROFILER_KEY]) === null || _this$store4$PROFILER === void 0 ? void 0 : (_this$store4$PROFILER2 = _this$store4$PROFILER.components) === null || _this$store4$PROFILER2 === void 0 ? void 0 : _this$store4$PROFILER2[componentId]) !== null && _this$store$PROFILER_2 !== void 0 ? _this$store$PROFILER_2 : {};
     let total = 0;
+    // eslint-disable-next-line guard-for-in
     for (let instanceId in component) {
       total += component[instanceId].count;
     }

package/dist/esm/extensibility/Extension/Lozenge/EditToggle.js

@@ -34,7 +34,11 @@ var buttonStyles = css({
   font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
-  }
+  },
+  outlineColor: "var(--ds-border-focused, #388BFF)",
+  border: 'none',
+  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+  color: "var(--ds-text-subtle, #44546F)"
 });
 var showButtonContainerStyle = css({
   opacity: 1
@@ -73,6 +77,11 @@ export var EditToggle = function EditToggle(_ref) {
   var handleClick = useCallback(function () {
     setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 || setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
   }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
+  var handleKeyDown = useCallback(function (event) {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     jsx("div", {
@@ -93,8 +102,10 @@ export var EditToggle = function EditToggle(_ref) {
       },
       onMouseLeave: function onMouseLeave() {
         return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
-      }
-    }, jsx("span", {
+      },
+      tabIndex: -1
+    }, jsx("button", {
+      type: "button",
       "data-testid": "edit-toggle"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -102,7 +113,14 @@ export var EditToggle = function EditToggle(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: "extension-edit-toggle",
-      onClick: handleClick
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onFocus: function onFocus() {
+        return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
+      },
+      onBlur: function onBlur() {
+        return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
+      }
     }, jsx(Flex, {
       as: "span",
       xcss: iconStyles

package/dist/esm/hooks/useSharedPluginState.js

@@ -33,6 +33,9 @@ function useStaticPlugins(plugins) {
 }
 
 /**
+ *
+ * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,

package/dist/esm/hooks/useSharedPluginStateSelector/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { useSharedPluginStateSelector } from './useSharedPluginStateSelector';

package/dist/esm/hooks/useSharedPluginStateSelector/useSharedPluginStateSelector.js

@@ -0,0 +1,108 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toArray from "@babel/runtime/helpers/toArray";
+import { useState, useCallback, useMemo } from 'react';
+import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
+import { usePluginStateEffect } from '../usePluginStateEffect';
+
+/**
+ * This is designed to iterate through an object to get the path of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } };
+ * // Type should be `"deepObject" | "deepObject.value"`
+ * type Result = NestedKeys<Test>;
+ * ```
+ */
+
+/**
+ * This is designed to iterate through a path of an object to get the type of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } }
+ * // Type should be `number`
+ * type Result = Path<Test, 'deepObject.value'>
+ * ```
+ */
+
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ * 
+ * Used to return the current plugin state of input dependencies.
+ * It will recursively retrieve a slice of the state using a "." to separate
+ * parts of the state.
+ * 
+ * Example:
+ * 
+ * ```typescript
+ * 	const pluginA: NextEditorPlugin<
+		'pluginA',
+		{
+			sharedState: { deepObj: { value: number | undefined } };
+		}
+	>
+ * ```
+ * You can use `const value = useSharedPluginStateSelector(api, 'pluginA.deepObj.value')` to retrieve the value
+ * 
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const title = useSharedPluginStateSelector(api, 'dog.title')
+ *   return <p>{ title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () => <ExampleContent api={api} />
+ *   }
+ * }
+ * ```
+ * 
+ * NOTE: If you pass an invalid path, `undefined` will be returned
+ * 
+ * @param api 
+ * @param plugin 
+ * @returns 
+ */
+export function useSharedPluginStateSelector(api, plugin) {
+  var transformer = useCallback(function (pluginState) {
+    var _plugin$split = plugin.split('.'),
+      _plugin$split2 = _toArray(_plugin$split),
+      pluginName = _plugin$split2[0],
+      properties = _plugin$split2.slice(1);
+    if (!pluginState || (properties === null || properties === void 0 ? void 0 : properties.length) === 0) {
+      return undefined;
+    }
+    return get(pluginState === null || pluginState === void 0 ? void 0 : pluginState["".concat(pluginName, "State")], properties);
+  }, [plugin]);
+  var pluginNameArray = useMemo(function () {
+    var _plugin$split3 = plugin.split('.'),
+      _plugin$split4 = _slicedToArray(_plugin$split3, 1),
+      pluginName = _plugin$split4[0];
+    return [pluginName];
+  }, [plugin]);
+  return useSharedPluginStateSelectorInternal(api, pluginNameArray, transformer);
+}
+function useSharedPluginStateSelectorInternal(api, plugins, transformer) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedPluginState = _useState2[0],
+    setSelectedPluginState = _useState2[1];
+  usePluginStateEffect(api, plugins, function (pluginStates) {
+    // `pluginStates`: This is the same type through inference - but typescript doesn't recognise them as they are computed slightly differently
+    var transformedValue = transformer(pluginStates);
+    if (!isEqual(transformedValue, selectedPluginState)) {
+      setSelectedPluginState(transformedValue);
+    }
+  });
+  return selectedPluginState;
+}

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.4.1";
+var packageVersion = "96.5.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.4.1";
+var packageVersion = "96.5.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/utils/profiler/render-count.js

@@ -70,6 +70,7 @@ export var RenderCountProfiler = /*#__PURE__*/function () {
       var componentId = _ref3.componentId;
       var component = (_this$store$PROFILER_ = (_this$store3 = this.store) === null || _this$store3 === void 0 || (_this$store3 = _this$store3[PROFILER_KEY]) === null || _this$store3 === void 0 || (_this$store3 = _this$store3.components) === null || _this$store3 === void 0 ? void 0 : _this$store3[componentId]) !== null && _this$store$PROFILER_ !== void 0 ? _this$store$PROFILER_ : {};
       var counters = [];
+      // eslint-disable-next-line guard-for-in
       for (var instanceId in component) {
         var counter = {
           instanceId: instanceId,
@@ -86,6 +87,7 @@ export var RenderCountProfiler = /*#__PURE__*/function () {
       var componentId = _ref4.componentId;
       var component = (_this$store$PROFILER_2 = (_this$store4 = this.store) === null || _this$store4 === void 0 || (_this$store4 = _this$store4[PROFILER_KEY]) === null || _this$store4 === void 0 || (_this$store4 = _this$store4.components) === null || _this$store4 === void 0 ? void 0 : _this$store4[componentId]) !== null && _this$store$PROFILER_2 !== void 0 ? _this$store$PROFILER_2 : {};
       var total = 0;
+      // eslint-disable-next-line guard-for-in
       for (var instanceId in component) {
         total += component[instanceId].count;
       }

package/dist/types/hooks/useSharedPluginState.d.ts

@@ -1,9 +1,12 @@
 import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, ExtractPluginSharedState, NextEditorPlugin, NextEditorPluginMetadata } from '../types/next-editor-plugin';
-type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
+export type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
     [K in PluginNames as `${K extends string ? K : never}State`]: API[K] extends BasePluginDependenciesAPI<any> | undefined ? Exclude<API[K], undefined> extends BasePluginDependenciesAPI<infer Metadata> ? Metadata extends NextEditorPluginMetadata ? ExtractPluginSharedState<Metadata> | undefined : never : never : never;
 }>;
-type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+export type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
 /**
+ *
+ * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,
@@ -65,4 +68,3 @@ type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
  * the values are the shared state exposed by that plugin.
  */
 export declare function useSharedPluginState<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>>(injectionApi: API | null | undefined, plugins: PluginNames[]): NamedPluginStatesFromInjectionAPI<API, PluginNames>;
-export {};

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

@@ -0,0 +1 @@
+export { useSharedPluginStateSelector } from './useSharedPluginStateSelector';

package/dist/types/hooks/useSharedPluginStateSelector/useSharedPluginStateSelector.d.ts

@@ -0,0 +1,74 @@
+import type { EditorInjectionAPI } from '../../types/next-editor-plugin';
+type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API extends string ? keyof API : never;
+/**
+ * This is designed to iterate through an object to get the path of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } };
+ * // Type should be `"deepObject" | "deepObject.value"`
+ * type Result = NestedKeys<Test>;
+ * ```
+ */
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends object ? T[K] extends any[] ? K extends string ? K : never : T[K] extends object ? K extends string ? K | `${K}.${NestedKeys<T[K]>}` : never : never : K extends string ? K : never;
+}[keyof T];
+/**
+ * This is designed to iterate through a path of an object to get the type of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } }
+ * // Type should be `number`
+ * type Result = Path<Test, 'deepObject.value'>
+ * ```
+ */
+type Path<T, K extends string> = K extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? Path<T[Key], Rest> : never : K extends keyof T ? T[K] : never;
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to return the current plugin state of input dependencies.
+ * It will recursively retrieve a slice of the state using a "." to separate
+ * parts of the state.
+ *
+ * Example:
+ *
+ * ```typescript
+ * 	const pluginA: NextEditorPlugin<
+        'pluginA',
+        {
+            sharedState: { deepObj: { value: number | undefined } };
+        }
+    >
+ * ```
+ * You can use `const value = useSharedPluginStateSelector(api, 'pluginA.deepObj.value')` to retrieve the value
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const title = useSharedPluginStateSelector(api, 'dog.title')
+ *   return <p>{ title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () => <ExampleContent api={api} />
+ *   }
+ * }
+ * ```
+ *
+ * NOTE: If you pass an invalid path, `undefined` will be returned
+ *
+ * @param api
+ * @param plugin
+ * @returns
+ */
+export declare function useSharedPluginStateSelector<API extends EditorInjectionAPI<any, any>, PluginName extends ExtractPluginNames<API>, SharedState extends ReturnType<Exclude<API[PluginName], null | undefined>['sharedState']['currentState']>, Key extends NestedKeys<Exclude<SharedState, null | undefined>>, Result extends Path<Exclude<SharedState, null | undefined>, Key>>(api: API | undefined | null, plugin: `${PluginName}.${Key}`): Result | undefined;
+export {};

package/dist/types-ts4.5/hooks/useSharedPluginState.d.ts

@@ -1,9 +1,12 @@
 import type { BasePluginDependenciesAPI, EditorInjectionAPI, ExtractInjectionAPI, ExtractPluginSharedState, NextEditorPlugin, NextEditorPluginMetadata } from '../types/next-editor-plugin';
-type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
+export type NamedPluginStatesFromInjectionAPI<API extends ExtractInjectionAPI<NextEditorPlugin<any, any>>, PluginNames extends string | number | symbol> = Readonly<{
     [K in PluginNames as `${K extends string ? K : never}State`]: API[K] extends BasePluginDependenciesAPI<any> | undefined ? Exclude<API[K], undefined> extends BasePluginDependenciesAPI<infer Metadata> ? Metadata extends NextEditorPluginMetadata ? ExtractPluginSharedState<Metadata> | undefined : never : never : never;
 }>;
-type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
+export type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
 /**
+ *
+ * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,
@@ -65,4 +68,3 @@ type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API;
  * the values are the shared state exposed by that plugin.
  */
 export declare function useSharedPluginState<API extends EditorInjectionAPI<any, any>, PluginNames extends ExtractPluginNames<API>>(injectionApi: API | null | undefined, plugins: PluginNames[]): NamedPluginStatesFromInjectionAPI<API, PluginNames>;
-export {};

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

@@ -0,0 +1 @@
+export { useSharedPluginStateSelector } from './useSharedPluginStateSelector';

package/dist/types-ts4.5/hooks/useSharedPluginStateSelector/useSharedPluginStateSelector.d.ts

@@ -0,0 +1,74 @@
+import type { EditorInjectionAPI } from '../../types/next-editor-plugin';
+type ExtractPluginNames<API extends EditorInjectionAPI<any, any>> = keyof API extends string ? keyof API : never;
+/**
+ * This is designed to iterate through an object to get the path of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } };
+ * // Type should be `"deepObject" | "deepObject.value"`
+ * type Result = NestedKeys<Test>;
+ * ```
+ */
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends object ? T[K] extends any[] ? K extends string ? K : never : T[K] extends object ? K extends string ? K | `${K}.${NestedKeys<T[K]>}` : never : never : K extends string ? K : never;
+}[keyof T];
+/**
+ * This is designed to iterate through a path of an object to get the type of its result
+ * based on separation via "."
+ *
+ * Example:
+ * ```typescript
+ * type Test = { deepObject: { value: number } }
+ * // Type should be `number`
+ * type Result = Path<Test, 'deepObject.value'>
+ * ```
+ */
+type Path<T, K extends string> = K extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? Path<T[Key], Rest> : never : K extends keyof T ? T[K] : never;
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to return the current plugin state of input dependencies.
+ * It will recursively retrieve a slice of the state using a "." to separate
+ * parts of the state.
+ *
+ * Example:
+ *
+ * ```typescript
+ * 	const pluginA: NextEditorPlugin<
+        'pluginA',
+        {
+            sharedState: { deepObj: { value: number | undefined } };
+        }
+    >
+ * ```
+ * You can use `const value = useSharedPluginStateSelector(api, 'pluginA.deepObj.value')` to retrieve the value
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const title = useSharedPluginStateSelector(api, 'dog.title')
+ *   return <p>{ title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = ({ api }) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () => <ExampleContent api={api} />
+ *   }
+ * }
+ * ```
+ *
+ * NOTE: If you pass an invalid path, `undefined` will be returned
+ *
+ * @param api
+ * @param plugin
+ * @returns
+ */
+export declare function useSharedPluginStateSelector<API extends EditorInjectionAPI<any, any>, PluginName extends ExtractPluginNames<API>, SharedState extends ReturnType<Exclude<API[PluginName], null | undefined>['sharedState']['currentState']>, Key extends NestedKeys<Exclude<SharedState, null | undefined>>, Result extends Path<Exclude<SharedState, null | undefined>, Key>>(api: API | undefined | null, plugin: `${PluginName}.${Key}`): Result | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "96.4.1",
+	"version": "96.5.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -105,6 +105,7 @@
 		"./code-block": "./src/code-block/index.ts",
 		"./table": "./src/table/index.ts",
 		"./use-plugin-state-effect": "./src/hooks/usePluginStateEffect.ts",
+		"./use-shared-plugin-state-selector": "./src/hooks/useSharedPluginStateSelector/index.ts",
 		"./lazy-node-view": "./src/lazy-node-view/index.ts",
 		"./nesting": "./src/nesting/utilities.ts",
 		"./UNSAFE_do_not_use_editor_context": "./src/ui/EditorContext/index.ts"

package/use-shared-plugin-state-selector/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-common/use-shared-plugin-state-selector",
+  "main": "../dist/cjs/hooks/useSharedPluginStateSelector/index.js",
+  "module": "../dist/esm/hooks/useSharedPluginStateSelector/index.js",
+  "module:es2019": "../dist/es2019/hooks/useSharedPluginStateSelector/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/hooks/useSharedPluginStateSelector/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/hooks/useSharedPluginStateSelector/index.d.ts"
+      ]
+    }
+  }
+}