@atlaskit/editor-common 105.3.0 → 105.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 105.4.0
+
+### Minor Changes
+
+- [#155913](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155913)
+  [`5ec1fdc17a7ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ec1fdc17a7ae) -
+  refactor: migrate to useSharedPluginStateSelector in editor-common
+
 ## 105.3.0
 
 ### Minor Changes

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -14,6 +14,7 @@ var _react2 = require("@emotion/react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _hooks = require("../../../hooks");
+var _useSharedPluginStateSelector = require("../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector");
 var _ui = require("../../../ui");
 var _utils = require("../../../utils");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
@@ -35,10 +36,7 @@ function ExtensionWithPluginState(props) {
   var node = props.node,
     handleContentDOMRef = props.handleContentDOMRef,
     children = props.children,
-    _props$widthState = props.widthState,
-    widthState = _props$widthState === void 0 ? {
-      width: 0
-    } : _props$widthState,
+    widthState = props.widthState,
     handleRef = props.handleRef,
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
@@ -210,10 +208,30 @@ function ExtensionWithPluginState(props) {
     ref: handleContentDOMRef
   }))))));
 }
-var Extension = function Extension(props) {
-  var pluginInjectionApi = props.pluginInjectionApi;
+var useExtensionSharedPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var _widthState$width;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
+  return {
+    widthState: {
+      width: (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : 0,
+      lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+    }
+  };
+}, function (pluginInjectionApi) {
+  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.width');
+  var lineLength = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.lineLength');
+  return {
+    widthState: {
+      width: width !== null && width !== void 0 ? width : 0,
+      lineLength: lineLength
+    }
+  };
+});
+var Extension = function Extension(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useExtensionSharedPl = useExtensionSharedPluginState(pluginInjectionApi),
+    widthState = _useExtensionSharedPl.widthState;
 
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/cjs/extensibility/Extension/InlineExtension/index.js

@@ -11,6 +11,7 @@ var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _hooks = require("../../../hooks");
+var _useSharedPluginStateSelector = require("../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector");
 var _ui = require("../../../ui");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
 var _styles = require("../styles");
@@ -24,6 +25,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var useInlineExtensionSharedPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return {
+    widthState: {
+      width: widthState === null || widthState === void 0 ? void 0 : widthState.width
+    }
+  };
+}, function (pluginInjectionApi) {
+  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.width');
+  return {
+    widthState: {
+      width: width
+    }
+  };
+});
 var InlineExtension = function InlineExtension(props) {
   var node = props.node,
     pluginInjectionApi = props.pluginInjectionApi,
@@ -35,8 +52,8 @@ var InlineExtension = function InlineExtension(props) {
     isLivePageViewMode = props.isLivePageViewMode;
   var _ref = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
-    widthState = _useSharedPluginState.widthState;
+  var _useInlineExtensionSh = useInlineExtensionSharedPluginState(pluginInjectionApi),
+    widthState = _useInlineExtensionSh.widthState;
   var hasChildren = !!children;
   var classNames = (0, _classnames.default)('extension-container', 'inline', {
     'with-overlay': !showMacroInteractionDesignUpdates,
@@ -44,7 +61,7 @@ var InlineExtension = function InlineExtension(props) {
     'with-danger-overlay': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
-  var rendererContainerWidth = widthState ? widthState.width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : 0;
+  var rendererContainerWidth = widthState.width ? widthState.width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : 0;
   var handleMouseEvent = function handleMouseEvent(didHover) {
     if (setIsNodeHovered) {
       setIsNodeHovered(didHover);

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -16,6 +16,7 @@ var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _fileEditorFile = _interopRequireDefault(require("@atlaskit/icon/core/migration/file--editor-file"));
 var _hooks = require("../../hooks");
+var _useSharedPluginStateSelector = require("../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector");
 var _MultiBodiedExtension = require("../../ui/MultiBodiedExtension");
 var _utils = require("../../utils");
 var _Lozenge = _interopRequireDefault(require("../Extension/Lozenge"));
@@ -240,10 +241,26 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     "data-testid": "multiBodiedExtension-navigation"
   }, extensionHandlerResult), childrenContainer))));
 };
-var MultiBodiedExtension = function MultiBodiedExtension(props) {
-  var pluginInjectionApi = props.pluginInjectionApi;
+var useMultiBodyExtensionSharedPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
+  return {
+    widthState: widthState
+  };
+}, function (pluginInjectionApi) {
+  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.width');
+  var lineLength = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.lineLength');
+  return {
+    widthState: width === undefined ? undefined : {
+      width: width,
+      lineLength: lineLength
+    }
+  };
+});
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useMultiBodyExtensio = useMultiBodyExtensionSharedPluginState(pluginInjectionApi),
+    widthState = _useMultiBodyExtensio.widthState;
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({

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 = "105.3.0";
+var packageVersion = "105.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/styles/shared/lists.js

@@ -43,6 +43,12 @@ var stringifyStyle = function stringifyStyle(style) {
     return "".concat(str).concat(key, ":").concat(value, ";");
   }, "");
 };
+/**
+ *
+ * @param itemCounterDigitsSize
+ * @param styleFormat
+ * @example
+ */
 function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -55,4 +61,4 @@ function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat
 }
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
-var listsSharedStyles = exports.listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t/* =============== INDENTATION SPACING ========= */\n\n\tul,\n\tol {\n\t\tbox-sizing: border-box;\n\t\tpadding-left: var(", ", ", "px);\n\n\t\t/*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n\t\tli p:empty,\n\t\tli p > span:empty {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", ", ", " {\n\t\t/*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n\t\t/* For older browsers the do not support flow-root. */\n\t\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\t\tdisplay: table;\n\t\tdisplay: flow-root;\n\t\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\t}\n\n\t/* =============== INDENTATION AESTHETICS ========= */\n\n\t/**\n        We support nested lists up to six levels deep.\n    **/\n\n\t/* LEGACY LISTS */\n\n\tul,\n\tul ul ul ul {\n\t\tlist-style-type: disc;\n\t}\n\n\tul ul,\n\tul ul ul ul ul {\n\t\tlist-style-type: circle;\n\t}\n\n\tul ul ul,\n\tul ul ul ul ul ul {\n\t\tlist-style-type: square;\n\t}\n\n\tol,\n\tol ol ol ol {\n\t\tlist-style-type: decimal;\n\t}\n\tol ol,\n\tol ol ol ol ol {\n\t\tlist-style-type: lower-alpha;\n\t}\n\tol ol ol,\n\tol ol ol ol ol ol {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\t/* PREDICTABLE LISTS */\n\n\tol[data-indent-level='1'],\n\tol[data-indent-level='4'] {\n\t\tlist-style-type: decimal;\n\t}\n\n\tol[data-indent-level='2'],\n\tol[data-indent-level='5'] {\n\t\tlist-style-type: lower-alpha;\n\t}\n\n\tol[data-indent-level='3'],\n\tol[data-indent-level='6'] {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\tul[data-indent-level='1'],\n\tul[data-indent-level='4'] {\n\t\tlist-style-type: disc;\n\t}\n\n\tul[data-indent-level='2'],\n\tul[data-indent-level='5'] {\n\t\tlist-style-type: circle;\n\t}\n\n\tul[data-indent-level='3'],\n\tul[data-indent-level='6'] {\n\t\tlist-style-type: square;\n\t}\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, _browser.browser.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
+var listsSharedStyles = exports.listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t/* =============== INDENTATION SPACING ========= */\n\n\tul,\n\tol {\n\t\tbox-sizing: border-box;\n\t\tpadding-left: var(", ", ", "px);\n\t\t/*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n\t\tli p:empty,\n\t\tli p > span:empty {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", ", ", " {\n\t\t/*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n\t\t/* For older browsers the do not support flow-root. */\n\t\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\t\tdisplay: table;\n\t\tdisplay: flow-root;\n\t\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\t}\n\n\t/* =============== INDENTATION AESTHETICS ========= */\n\n\t/**\n        We support nested lists up to six levels deep.\n    **/\n\n\t/* LEGACY LISTS */\n\n\tul,\n\tul ul ul ul {\n\t\tlist-style-type: disc;\n\t}\n\n\tul ul,\n\tul ul ul ul ul {\n\t\tlist-style-type: circle;\n\t}\n\n\tul ul ul,\n\tul ul ul ul ul ul {\n\t\tlist-style-type: square;\n\t}\n\n\tol,\n\tol ol ol ol {\n\t\tlist-style-type: decimal;\n\t}\n\tol ol,\n\tol ol ol ol ol {\n\t\tlist-style-type: lower-alpha;\n\t}\n\tol ol ol,\n\tol ol ol ol ol ol {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\t/* PREDICTABLE LISTS */\n\n\tol[data-indent-level='1'],\n\tol[data-indent-level='4'] {\n\t\tlist-style-type: decimal;\n\t}\n\n\tol[data-indent-level='2'],\n\tol[data-indent-level='5'] {\n\t\tlist-style-type: lower-alpha;\n\t}\n\n\tol[data-indent-level='3'],\n\tol[data-indent-level='6'] {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\tul[data-indent-level='1'],\n\tul[data-indent-level='4'] {\n\t\tlist-style-type: disc;\n\t}\n\n\tul[data-indent-level='2'],\n\tul[data-indent-level='5'] {\n\t\tlist-style-type: circle;\n\t}\n\n\tul[data-indent-level='3'],\n\tul[data-indent-level='6'] {\n\t\tlist-style-type: square;\n\t}\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, _browser.browser.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);

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 = "105.3.0";
+var packageVersion = "105.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -10,7 +10,8 @@ import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useSharedPluginState } from '../../../hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../../hooks';
+import { useSharedPluginStateSelector } from '../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
 import ExtensionLozenge from '../Lozenge';
@@ -23,9 +24,7 @@ function ExtensionWithPluginState(props) {
     node,
     handleContentDOMRef,
     children,
-    widthState = {
-      width: 0
-    },
+    widthState,
     handleRef,
     shadowClassNames,
     hideFrame,
@@ -204,13 +203,34 @@ function ExtensionWithPluginState(props) {
     ref: handleContentDOMRef
   }))))));
 }
+const useExtensionSharedPluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  var _widthState$width;
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return {
+    widthState: {
+      width: (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : 0,
+      lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+    }
+  };
+}, pluginInjectionApi => {
+  const width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  const lineLength = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength');
+  return {
+    widthState: {
+      width: width !== null && width !== void 0 ? width : 0,
+      lineLength
+    }
+  };
+});
 const Extension = props => {
   const {
     pluginInjectionApi
   } = props;
   const {
     widthState
-  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  } = useExtensionSharedPluginState(pluginInjectionApi);
 
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/es2019/extensibility/Extension/InlineExtension/index.js

@@ -8,11 +8,29 @@ import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
-import { useSharedPluginState } from '../../../hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../../hooks';
+import { useSharedPluginStateSelector } from '../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { createWidthContext, WidthContext } from '../../../ui';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { inlineWrapperStyles, wrapperStyle } from './styles';
+const useInlineExtensionSharedPluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return {
+    widthState: {
+      width: widthState === null || widthState === void 0 ? void 0 : widthState.width
+    }
+  };
+}, pluginInjectionApi => {
+  const width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  return {
+    widthState: {
+      width
+    }
+  };
+});
 const InlineExtension = props => {
   const {
     node,
@@ -29,7 +47,7 @@ const InlineExtension = props => {
   } = macroInteractionDesignFeatureFlags || {};
   const {
     widthState
-  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  } = useInlineExtensionSharedPluginState(pluginInjectionApi);
   const hasChildren = !!children;
   const classNames = classnames('extension-container', 'inline', {
     'with-overlay': !showMacroInteractionDesignUpdates,
@@ -37,7 +55,7 @@ const InlineExtension = props => {
     'with-danger-overlay': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
-  const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
+  const rendererContainerWidth = widthState.width ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
   const handleMouseEvent = didHover => {
     if (setIsNodeHovered) {
       setIsNodeHovered(didHover);

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -11,7 +11,8 @@ import React, { Fragment, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/core/migration/file--editor-file';
-import { useSharedPluginState } from '../../hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../hooks';
+import { useSharedPluginStateSelector } from '../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -226,13 +227,30 @@ const MultiBodiedExtensionWithWidth = ({
     "data-testid": "multiBodiedExtension-navigation"
   }, extensionHandlerResult), childrenContainer))));
 };
+const useMultiBodyExtensionSharedPluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return {
+    widthState
+  };
+}, pluginInjectionApi => {
+  const width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  const lineLength = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength');
+  return {
+    widthState: width === undefined ? undefined : {
+      width,
+      lineLength
+    }
+  };
+});
 const MultiBodiedExtension = props => {
   const {
     pluginInjectionApi
   } = props;
   const {
     widthState
-  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  } = useMultiBodyExtensionSharedPluginState(pluginInjectionApi);
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   return jsx(MultiBodiedExtensionWithWidth, _extends({

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 = "105.3.0";
+const packageVersion = "105.4.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/styles/shared/lists.js

@@ -25,6 +25,12 @@ const getItemCounterLeftPadding = itemCounterDigitsSize => {
   return paddingLeft;
 };
 const stringifyStyle = style => Object.entries(style).reduce((str, [key, value]) => `${str}${key}:${value};`, ``);
+/**
+ *
+ * @param itemCounterDigitsSize
+ * @param styleFormat
+ * @example
+ */
 export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,7 +52,6 @@ export const listsSharedStyles = css`
 	ol {
 		box-sizing: border-box;
 		padding-left: var(${CSS_VAR_NAMES.ITEM_COUNTER_PADDING}, ${listItemCounterPadding}px);
-
 		/*
     Firefox does not handle empty block element inside li tag.
     If there is not block element inside li tag,

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 = "105.3.0";
+const packageVersion = "105.4.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -15,7 +15,8 @@ import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useSharedPluginState } from '../../../hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../../hooks';
+import { useSharedPluginStateSelector } from '../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
 import ExtensionLozenge from '../Lozenge';
@@ -27,10 +28,7 @@ function ExtensionWithPluginState(props) {
   var node = props.node,
     handleContentDOMRef = props.handleContentDOMRef,
     children = props.children,
-    _props$widthState = props.widthState,
-    widthState = _props$widthState === void 0 ? {
-      width: 0
-    } : _props$widthState,
+    widthState = props.widthState,
     handleRef = props.handleRef,
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
@@ -202,10 +200,30 @@ function ExtensionWithPluginState(props) {
     ref: handleContentDOMRef
   }))))));
 }
-var Extension = function Extension(props) {
-  var pluginInjectionApi = props.pluginInjectionApi;
+var useExtensionSharedPluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var _widthState$width;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
+  return {
+    widthState: {
+      width: (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : 0,
+      lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+    }
+  };
+}, function (pluginInjectionApi) {
+  var width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  var lineLength = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength');
+  return {
+    widthState: {
+      width: width !== null && width !== void 0 ? width : 0,
+      lineLength: lineLength
+    }
+  };
+});
+var Extension = function Extension(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useExtensionSharedPl = useExtensionSharedPluginState(pluginInjectionApi),
+    widthState = _useExtensionSharedPl.widthState;
 
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/esm/extensibility/Extension/InlineExtension/index.js

@@ -8,11 +8,28 @@ import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
-import { useSharedPluginState } from '../../../hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../../hooks';
+import { useSharedPluginStateSelector } from '../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { createWidthContext, WidthContext } from '../../../ui';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { inlineWrapperStyles, wrapperStyle } from './styles';
+var useInlineExtensionSharedPluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return {
+    widthState: {
+      width: widthState === null || widthState === void 0 ? void 0 : widthState.width
+    }
+  };
+}, function (pluginInjectionApi) {
+  var width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  return {
+    widthState: {
+      width: width
+    }
+  };
+});
 var InlineExtension = function InlineExtension(props) {
   var node = props.node,
     pluginInjectionApi = props.pluginInjectionApi,
@@ -24,8 +41,8 @@ var InlineExtension = function InlineExtension(props) {
     isLivePageViewMode = props.isLivePageViewMode;
   var _ref = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
-    widthState = _useSharedPluginState.widthState;
+  var _useInlineExtensionSh = useInlineExtensionSharedPluginState(pluginInjectionApi),
+    widthState = _useInlineExtensionSh.widthState;
   var hasChildren = !!children;
   var classNames = classnames('extension-container', 'inline', {
     'with-overlay': !showMacroInteractionDesignUpdates,
@@ -33,7 +50,7 @@ var InlineExtension = function InlineExtension(props) {
     'with-danger-overlay': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
-  var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
+  var rendererContainerWidth = widthState.width ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
   var handleMouseEvent = function handleMouseEvent(didHover) {
     if (setIsNodeHovered) {
       setIsNodeHovered(didHover);

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -16,7 +16,8 @@ import React, { Fragment, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/core/migration/file--editor-file';
-import { useSharedPluginState } from '../../hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../hooks';
+import { useSharedPluginStateSelector } from '../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -232,10 +233,26 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     "data-testid": "multiBodiedExtension-navigation"
   }, extensionHandlerResult), childrenContainer))));
 };
-var MultiBodiedExtension = function MultiBodiedExtension(props) {
-  var pluginInjectionApi = props.pluginInjectionApi;
+var useMultiBodyExtensionSharedPluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
+  return {
+    widthState: widthState
+  };
+}, function (pluginInjectionApi) {
+  var width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  var lineLength = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength');
+  return {
+    widthState: width === undefined ? undefined : {
+      width: width,
+      lineLength: lineLength
+    }
+  };
+});
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useMultiBodyExtensio = useMultiBodyExtensionSharedPluginState(pluginInjectionApi),
+    widthState = _useMultiBodyExtensio.widthState;
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   return jsx(MultiBodiedExtensionWithWidth, _extends({

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 = "105.3.0";
+var packageVersion = "105.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/styles/shared/lists.js

@@ -36,6 +36,12 @@ var stringifyStyle = function stringifyStyle(style) {
     return "".concat(str).concat(key, ":").concat(value, ";");
   }, "");
 };
+/**
+ *
+ * @param itemCounterDigitsSize
+ * @param styleFormat
+ * @example
+ */
 export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -48,4 +54,4 @@ export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat
 }
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
-export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* =============== INDENTATION SPACING ========= */\n\n\tul,\n\tol {\n\t\tbox-sizing: border-box;\n\t\tpadding-left: var(", ", ", "px);\n\n\t\t/*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n\t\tli p:empty,\n\t\tli p > span:empty {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", ", ", " {\n\t\t/*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n\t\t/* For older browsers the do not support flow-root. */\n\t\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\t\tdisplay: table;\n\t\tdisplay: flow-root;\n\t\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\t}\n\n\t/* =============== INDENTATION AESTHETICS ========= */\n\n\t/**\n        We support nested lists up to six levels deep.\n    **/\n\n\t/* LEGACY LISTS */\n\n\tul,\n\tul ul ul ul {\n\t\tlist-style-type: disc;\n\t}\n\n\tul ul,\n\tul ul ul ul ul {\n\t\tlist-style-type: circle;\n\t}\n\n\tul ul ul,\n\tul ul ul ul ul ul {\n\t\tlist-style-type: square;\n\t}\n\n\tol,\n\tol ol ol ol {\n\t\tlist-style-type: decimal;\n\t}\n\tol ol,\n\tol ol ol ol ol {\n\t\tlist-style-type: lower-alpha;\n\t}\n\tol ol ol,\n\tol ol ol ol ol ol {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\t/* PREDICTABLE LISTS */\n\n\tol[data-indent-level='1'],\n\tol[data-indent-level='4'] {\n\t\tlist-style-type: decimal;\n\t}\n\n\tol[data-indent-level='2'],\n\tol[data-indent-level='5'] {\n\t\tlist-style-type: lower-alpha;\n\t}\n\n\tol[data-indent-level='3'],\n\tol[data-indent-level='6'] {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\tul[data-indent-level='1'],\n\tul[data-indent-level='4'] {\n\t\tlist-style-type: disc;\n\t}\n\n\tul[data-indent-level='2'],\n\tul[data-indent-level='5'] {\n\t\tlist-style-type: circle;\n\t}\n\n\tul[data-indent-level='3'],\n\tul[data-indent-level='6'] {\n\t\tlist-style-type: square;\n\t}\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);
+export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* =============== INDENTATION SPACING ========= */\n\n\tul,\n\tol {\n\t\tbox-sizing: border-box;\n\t\tpadding-left: var(", ", ", "px);\n\t\t/*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n\t\tli p:empty,\n\t\tli p > span:empty {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", ", ", " {\n\t\t/*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n\t\t/* For older browsers the do not support flow-root. */\n\t\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\t\tdisplay: table;\n\t\tdisplay: flow-root;\n\t\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\t}\n\n\t/* =============== INDENTATION AESTHETICS ========= */\n\n\t/**\n        We support nested lists up to six levels deep.\n    **/\n\n\t/* LEGACY LISTS */\n\n\tul,\n\tul ul ul ul {\n\t\tlist-style-type: disc;\n\t}\n\n\tul ul,\n\tul ul ul ul ul {\n\t\tlist-style-type: circle;\n\t}\n\n\tul ul ul,\n\tul ul ul ul ul ul {\n\t\tlist-style-type: square;\n\t}\n\n\tol,\n\tol ol ol ol {\n\t\tlist-style-type: decimal;\n\t}\n\tol ol,\n\tol ol ol ol ol {\n\t\tlist-style-type: lower-alpha;\n\t}\n\tol ol ol,\n\tol ol ol ol ol ol {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\t/* PREDICTABLE LISTS */\n\n\tol[data-indent-level='1'],\n\tol[data-indent-level='4'] {\n\t\tlist-style-type: decimal;\n\t}\n\n\tol[data-indent-level='2'],\n\tol[data-indent-level='5'] {\n\t\tlist-style-type: lower-alpha;\n\t}\n\n\tol[data-indent-level='3'],\n\tol[data-indent-level='6'] {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\tul[data-indent-level='1'],\n\tul[data-indent-level='4'] {\n\t\tlist-style-type: disc;\n\t}\n\n\tul[data-indent-level='2'],\n\tul[data-indent-level='5'] {\n\t\tlist-style-type: circle;\n\t}\n\n\tul[data-indent-level='3'],\n\tul[data-indent-level='6'] {\n\t\tlist-style-type: square;\n\t}\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);

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 = "105.3.0";
+var packageVersion = "105.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/types/analytics/types/selection-toolbar-events.d.ts

@@ -1,5 +1,5 @@
 import { type ACTION, type ACTION_SUBJECT, type ACTION_SUBJECT_ID } from './enums';
-import { TrackAEP, type OperationalAEP } from './utils';
+import { type TrackAEP, type OperationalAEP } from './utils';
 export type UserPreferencesInitialisedAEP = OperationalAEP<ACTION.INITIALISED, ACTION_SUBJECT.USER_PREFERENCES, ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES, {
     toolbarDocking: string | null;
 }>;

package/dist/types-ts4.5/analytics/types/selection-toolbar-events.d.ts

@@ -1,5 +1,5 @@
 import { type ACTION, type ACTION_SUBJECT, type ACTION_SUBJECT_ID } from './enums';
-import { TrackAEP, type OperationalAEP } from './utils';
+import { type TrackAEP, type OperationalAEP } from './utils';
 export type UserPreferencesInitialisedAEP = OperationalAEP<ACTION.INITIALISED, ACTION_SUBJECT.USER_PREFERENCES, ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES, {
     toolbarDocking: string | null;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "105.3.0",
+	"version": "105.4.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -144,8 +144,8 @@
 		"@atlaskit/link-datasource": "^4.10.0",
 		"@atlaskit/link-picker": "^3.2.0",
 		"@atlaskit/media-card": "^79.2.0",
-		"@atlaskit/media-client": "^33.2.0",
-		"@atlaskit/media-client-react": "^4.0.0",
+		"@atlaskit/media-client": "^33.3.0",
+		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.0.0",
 		"@atlaskit/media-file-preview": "^0.11.0",
 		"@atlaskit/media-picker": "^69.0.0",
@@ -158,7 +158,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/primitives": "^14.7.0",
-		"@atlaskit/profilecard": "^23.14.0",
+		"@atlaskit/profilecard": "^23.15.0",
 		"@atlaskit/react-ufo": "^3.12.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/smart-card": "^38.1.0",