@atlaskit/editor-plugin-block-controls 3.11.1 → 3.11.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.11.2
+
+### Patch Changes
+
+- [#144898](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144898)
+  [`b9a10d6716ef4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b9a10d6716ef4) -
+  Enable useSharedPluginStateSelector in block-controls, block-type and breakout plugins
+- Updated dependencies
+
 ## 3.11.1
 
 ### Patch Changes

package/dist/cjs/ui/block-menu.js

@@ -10,7 +10,9 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockMenuItems = require("./block-menu-items");
 var _consts = require("./consts");
 var BlockMenu = function BlockMenu(_ref) {
@@ -20,12 +22,26 @@ var BlockMenu = function BlockMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     api = _ref.api,
     formatMessage = _ref.intl.formatMessage;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockControlsState = _useSharedPluginState.blockControlsState;
-  if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
+
+  // isMenuOpen
+  var isMenuOpenSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMenuOpen', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isMenuOpen = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isMenuOpenSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen;
+
+  // menuTriggerBy
+  var menuTriggerBySelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.menuTriggerBy', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var menuTriggerBy = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? menuTriggerBySelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy;
+  if (isMenuOpen) {
     return null;
   }
-  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy, "]");
+  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
   var targetHandleRef = document.querySelector(activeNodeSelector);
   var items = (0, _blockMenuItems.getBlockMenuItems)(formatMessage);
   var handleOpenChange = function handleOpenChange(payload) {

package/dist/cjs/ui/drag-handle-menu.js

@@ -7,9 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.DragHandleMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var DragHandleMenu = exports.DragHandleMenu = function DragHandleMenu(_ref) {
   var api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockControlsState = _useSharedPluginState.blockControlsState;
-  return blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen ? /*#__PURE__*/_react.default.createElement("div", null, "menu") : null;
+  var isMenuOpenSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMenuOpen', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isMenuOpen = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isMenuOpenSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen;
+  return isMenuOpen ? /*#__PURE__*/_react.default.createElement("div", null, "menu") : null;
 };

package/dist/cjs/ui/drag-handle.js

@@ -274,8 +274,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     dragHandleDisabled = _useState6[0],
     setDragHandleDisabled = _useState6[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
+  var macroInteractionUpdatesSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var macroInteractionUpdates = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? macroInteractionUpdatesSelector : featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var isShiftDown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isShiftDown');
   var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.hasHadInteraction') !== false;
@@ -568,7 +574,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = (0, _react.useCallback)(function () {
     var pos = getPos();
     var $pos = pos && view.state.doc.resolve(pos);

package/dist/cjs/ui/drop-target.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _constants = require("@atlaskit/theme/constants");
@@ -195,8 +196,16 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     widthState = _useSharedPluginState.widthState;
+
+  // lineLength
+  var lineLengthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.lineLength', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var lineLength = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
   var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
     activeNode = _ref2.activeNode;
@@ -213,7 +222,7 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
   };
   var dynamicStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     width: isNestedDropTarget ? 'unset' : '100%'
-  }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, _constants.layers.navigation());
+  }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat(lineLength || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, _constants.layers.navigation());
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
@@ -223,7 +232,7 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     },
     onDrop: onDrop,
     node: prevNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget,
@@ -250,7 +259,7 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     onDrop: onDrop,
     node: nextNode,
     parent: parentNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget

package/dist/es2019/ui/block-menu.js

@@ -3,7 +3,9 @@ import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
 import { BLOCK_MENU_WIDTH } from './consts';
 const BlockMenu = ({
@@ -18,11 +20,25 @@ const BlockMenu = ({
 }) => {
   const {
     blockControlsState
-  } = useSharedPluginState(api, ['blockControls']);
-  if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
+  } = useSharedPluginState(api, ['blockControls'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // isMenuOpen
+  const isMenuOpenSelector = useSharedPluginStateSelector(api, 'blockControls.isMenuOpen', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isMenuOpen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isMenuOpenSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen;
+
+  // menuTriggerBy
+  const menuTriggerBySelector = useSharedPluginStateSelector(api, 'blockControls.menuTriggerBy', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const menuTriggerBy = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? menuTriggerBySelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy;
+  if (isMenuOpen) {
     return null;
   }
-  const activeNodeSelector = `[data-drag-handler-anchor-name=${blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy}]`;
+  const activeNodeSelector = `[data-drag-handler-anchor-name=${menuTriggerBy}]`;
   const targetHandleRef = document.querySelector(activeNodeSelector);
   const items = getBlockMenuItems(formatMessage);
   const handleOpenChange = payload => {

package/dist/es2019/ui/drag-handle-menu.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const DragHandleMenu = ({
   api
 }) => {
   const {
     blockControlsState
-  } = useSharedPluginState(api, ['blockControls']);
-  return blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen ? /*#__PURE__*/React.createElement("div", null, "menu") : null;
+  } = useSharedPluginState(api, ['blockControls'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const isMenuOpenSelector = useSharedPluginStateSelector(api, 'blockControls.isMenuOpen', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isMenuOpen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isMenuOpenSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen;
+  return isMenuOpen ? /*#__PURE__*/React.createElement("div", null, "menu") : null;
 };

package/dist/es2019/ui/drag-handle.js

@@ -259,7 +259,13 @@ export const DragHandle = ({
   const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
   const {
     featureFlagsState
-  } = useSharedPluginState(api, ['featureFlags']);
+  } = useSharedPluginState(api, ['featureFlags'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const macroInteractionUpdatesSelector = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const macroInteractionUpdates = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? macroInteractionUpdatesSelector : featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const selection = useSharedPluginStateSelector(api, 'selection.selection');
   const isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
   const hasHadInteraction = useSharedPluginStateSelector(api, 'interaction.hasHadInteraction') !== false;
@@ -557,7 +563,6 @@ export const DragHandle = ({
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const calculatePosition = useCallback(() => {
     const pos = getPos();
     const $pos = pos && view.state.doc.resolve(pos);

package/dist/es2019/ui/drop-target.js

@@ -8,6 +8,7 @@ import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
@@ -183,7 +184,15 @@ export const DropTarget = props => {
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const {
     widthState
-  } = useSharedPluginState(api, ['width']);
+  } = useSharedPluginState(api, ['width'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // lineLength
+  const lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
   const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   const {
     activeNode
@@ -203,7 +212,7 @@ export const DropTarget = props => {
   };
   const dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%',
-    [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`,
+    [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${lineLength || DEFAULT_DROP_INDICATOR_WIDTH}px`,
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0',
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: layers.navigation()
   };
@@ -212,7 +221,7 @@ export const DropTarget = props => {
     onDragLeave: () => setIsDraggedOver(false),
     onDrop: onDrop,
     node: prevNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget,
@@ -235,7 +244,7 @@ export const DropTarget = props => {
     onDrop: onDrop,
     node: nextNode,
     parent: parentNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget

package/dist/esm/ui/block-menu.js

@@ -3,7 +3,9 @@ import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
 import { BLOCK_MENU_WIDTH } from './consts';
 var BlockMenu = function BlockMenu(_ref) {
@@ -13,12 +15,26 @@ var BlockMenu = function BlockMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     api = _ref.api,
     formatMessage = _ref.intl.formatMessage;
-  var _useSharedPluginState = useSharedPluginState(api, ['blockControls']),
+  var _useSharedPluginState = useSharedPluginState(api, ['blockControls'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockControlsState = _useSharedPluginState.blockControlsState;
-  if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen)) {
+
+  // isMenuOpen
+  var isMenuOpenSelector = useSharedPluginStateSelector(api, 'blockControls.isMenuOpen', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isMenuOpen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isMenuOpenSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen;
+
+  // menuTriggerBy
+  var menuTriggerBySelector = useSharedPluginStateSelector(api, 'blockControls.menuTriggerBy', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var menuTriggerBy = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? menuTriggerBySelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy;
+  if (isMenuOpen) {
     return null;
   }
-  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.menuTriggerBy, "]");
+  var activeNodeSelector = "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
   var targetHandleRef = document.querySelector(activeNodeSelector);
   var items = getBlockMenuItems(formatMessage);
   var handleOpenChange = function handleOpenChange(payload) {

package/dist/esm/ui/drag-handle-menu.js

@@ -1,8 +1,16 @@
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var DragHandleMenu = function DragHandleMenu(_ref) {
   var api = _ref.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['blockControls']),
+  var _useSharedPluginState = useSharedPluginState(api, ['blockControls'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockControlsState = _useSharedPluginState.blockControlsState;
-  return blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen ? /*#__PURE__*/React.createElement("div", null, "menu") : null;
+  var isMenuOpenSelector = useSharedPluginStateSelector(api, 'blockControls.isMenuOpen', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isMenuOpen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isMenuOpenSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen;
+  return isMenuOpen ? /*#__PURE__*/React.createElement("div", null, "menu") : null;
 };

package/dist/esm/ui/drag-handle.js

@@ -271,8 +271,14 @@ export var DragHandle = function DragHandle(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     dragHandleDisabled = _useState6[0],
     setDragHandleDisabled = _useState6[1];
-  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
+  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
+  var macroInteractionUpdatesSelector = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var macroInteractionUpdates = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? macroInteractionUpdatesSelector : featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
   var hasHadInteraction = useSharedPluginStateSelector(api, 'interaction.hasHadInteraction') !== false;
@@ -565,7 +571,6 @@ export var DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = useCallback(function () {
     var pos = getPos();
     var $pos = pos && view.state.doc.resolve(pos);

package/dist/esm/ui/drop-target.js

@@ -10,6 +10,7 @@ import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
@@ -187,8 +188,16 @@ export var DropTarget = function DropTarget(props) {
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
-  var _useSharedPluginState = useSharedPluginState(api, ['width']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     widthState = _useSharedPluginState.widthState;
+
+  // lineLength
+  var lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
   var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
     activeNode = _ref2.activeNode;
@@ -205,7 +214,7 @@ export var DropTarget = function DropTarget(props) {
   };
   var dynamicStyle = _defineProperty(_defineProperty(_defineProperty({
     width: isNestedDropTarget ? 'unset' : '100%'
-  }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, layers.navigation());
+  }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat(lineLength || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, layers.navigation());
   return jsx(Fragment, null, jsx(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
@@ -215,7 +224,7 @@ export var DropTarget = function DropTarget(props) {
     },
     onDrop: onDrop,
     node: prevNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget,
@@ -242,7 +251,7 @@ export var DropTarget = function DropTarget(props) {
     onDrop: onDrop,
     node: nextNode,
     parent: parentNode,
-    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorWidth: lineLength,
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.11.1",
+	"version": "3.11.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.11.0",
+		"@atlaskit/editor-common": "^103.16.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tmp-editor-statsig": "^4.14.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",