@atlaskit/editor-plugin-synced-block 25.0.5 → 25.0.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 25.0.7
+
+### Patch Changes
+
+- [`3268110f0c1c7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3268110f0c1c7) -
+  Measure the synced locations dropdown once per opening so it can flip above the toolbar, behind
+  platform_editor_blocks_patch_12.
+- Updated dependencies
+
+## 25.0.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 25.0.5
 
 ### Patch Changes

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -63,6 +63,8 @@ var logoTileStyles = null;
 // Jira rows aligned with the tiled Confluence rows.
 var issueTypeAvatarStyles = null;
 var SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
+// Match the existing vertical gap in editor-common's DropList.
+var SYNCED_LOCATIONS_DROPDOWN_VERTICAL_GAP = 8;
 var styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -461,25 +463,26 @@ var toSyncedLocations = function toSyncedLocations(references, intl) {
     references: processReferenceData(references, intl)
   };
 };
-var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLocationDropdown(_ref6) {
-  var syncBlockStore = _ref6.syncBlockStore,
-    resourceId = _ref6.resourceId,
-    intl = _ref6.intl,
-    isSource = _ref6.isSource,
-    localId = _ref6.localId,
-    api = _ref6.api,
-    floatingToolbarRenderContext = _ref6.floatingToolbarRenderContext;
-  return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
-    syncBlockStore: syncBlockStore,
-    resourceId: resourceId,
-    intl: intl,
-    isSource: isSource,
-    localId: localId,
-    api: api,
-    floatingToolbarRenderContext: floatingToolbarRenderContext
-  });
+var MeasuredDropdownContent = function MeasuredDropdownContent(_ref6) {
+  var children = _ref6.children,
+    onHeightChange = _ref6.onHeightChange;
+  var contentRef = (0, _react.useRef)(null);
+  var measured = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(function () {
+    var _contentRef$current;
+    // This wrapper is rendered directly inside the DropList menu.
+    var menu = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
+    if (menu && !measured.current) {
+      measured.current = true;
+      // Include the DropList padding and its existing gap from the toolbar.
+      onHeightChange(menu.getBoundingClientRect().height + SYNCED_LOCATIONS_DROPDOWN_VERTICAL_GAP);
+    }
+  }, [onHeightChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, children);
 };
-var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref7) {
+var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLocationDropdown(_ref7) {
   var syncBlockStore = _ref7.syncBlockStore,
     resourceId = _ref7.resourceId,
     intl = _ref7.intl,
@@ -492,6 +495,10 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    fitHeight = _useState4[0],
+    setFitHeight = _useState4[1];
   var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
@@ -501,11 +508,13 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     api: api
   }) : null;
   var toggleOpen = (0, _react.useCallback)(function () {
+    setFitHeight(undefined);
     setIsOpen(function (currentIsOpen) {
       return !currentIsOpen;
     });
   }, []);
   var closeDropdown = (0, _react.useCallback)(function () {
+    setFitHeight(undefined);
     setIsOpen(false);
   }, []);
   var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
@@ -536,6 +545,7 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
   return /*#__PURE__*/React.createElement(_DropdownContainer.DropdownContainer, {
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
     isOpen: isOpen,
+    fitHeight: fitHeight,
     trigger: trigger,
     handleClickOutside: closeDropdown,
     handleEscapeKeydown: closeDropdown,
@@ -547,7 +557,9 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     arrowKeyNavigationProviderOptions: {
       type: _types.ArrowKeyNavigationType.MENU
     }
-  }, content);
+  }, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_12') ? /*#__PURE__*/React.createElement(MeasuredDropdownContent, {
+    onHeightChange: setFitHeight
+  }, content) : content);
 };
 var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref8) {
   var syncBlockStore = _ref8.syncBlockStore,
@@ -558,10 +570,14 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     localId = _ref8.localId,
     api = _ref8.api,
     floatingToolbarRenderContext = _ref8.floatingToolbarRenderContext;
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    fitHeight = _useState8[0],
+    setFitHeight = _useState8[1];
   var _useReferenceData = useReferenceData({
       intl: intl,
       isSource: isSource,
@@ -595,11 +611,13 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     locations: locations
   }) : null;
   var toggleOpen = (0, _react.useCallback)(function () {
+    setFitHeight(undefined);
     setIsOpen(function (currentIsOpen) {
       return !currentIsOpen;
     });
   }, []);
   var closeDropdown = (0, _react.useCallback)(function () {
+    setFitHeight(undefined);
     setIsOpen(false);
   }, []);
   var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
@@ -637,6 +655,7 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     alignX: "left",
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
     isOpen: isOpen,
+    fitHeight: fitHeight,
     trigger: trigger,
     handleClickOutside: closeDropdown,
     handleEscapeKeydown: closeDropdown,
@@ -648,7 +667,9 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     arrowKeyNavigationProviderOptions: {
       type: _types.ArrowKeyNavigationType.MENU
     }
-  }, content);
+  }, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_12') ? /*#__PURE__*/React.createElement(MeasuredDropdownContent, {
+    onHeightChange: setFitHeight
+  }, content) : content);
 };
 var DropdownContent = function DropdownContent(_ref1) {
   var syncBlockStore = _ref1.syncBlockStore,
@@ -657,14 +678,16 @@ var DropdownContent = function DropdownContent(_ref1) {
     isSource = _ref1.isSource,
     localId = _ref1.localId,
     api = _ref1.api;
-  var _useState5 = (0, _react.useState)('none'),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    fetchStatus = _useState6[0],
-    setFetchStatus = _useState6[1];
-  var _useState7 = (0, _react.useState)(EMPTY_LOCATIONS),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    locations = _useState8[0],
-    setLocations = _useState8[1];
+  var _useState9 = (0, _react.useState)(function () {
+      return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_12') ? 'loading' : 'none';
+    }),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    fetchStatus = _useState0[0],
+    setFetchStatus = _useState0[1];
+  var _useState1 = (0, _react.useState)(EMPTY_LOCATIONS),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    locations = _useState10[0],
+    setLocations = _useState10[1];
   (0, _react.useEffect)(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
@@ -714,23 +737,23 @@ var useReferenceData = function useReferenceData(_ref11) {
     isSource = _ref11.isSource,
     localId = _ref11.localId;
   // Refresh locations when the toolbar opens, rather than on every document edit.
-  var _useState9 = (0, _react.useState)(doc),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 1),
-    docAtMount = _useState0[0];
-  var _useState1 = (0, _react.useState)(function () {
+  var _useState11 = (0, _react.useState)(doc),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 1),
+    docAtMount = _useState12[0];
+  var _useState13 = (0, _react.useState)(function () {
       return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
     }),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 1),
-    isNewSourceBlock = _useState10[0];
-  var _useState11 = (0, _react.useState)(function () {
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 1),
+    isNewSourceBlock = _useState14[0];
+  var _useState15 = (0, _react.useState)(function () {
       return {
         fetchStatus: isNewSourceBlock ? 'success' : 'loading',
         locations: EMPTY_LOCATIONS
       };
     }),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    state = _useState12[0],
-    setState = _useState12[1];
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    state = _useState16[0],
+    setState = _useState16[1];
   (0, _react.useEffect)(function () {
     var isCurrentRequest = true;
     setState({

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -2,7 +2,7 @@
 import "./SyncedLocationDropdown.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState, useLayoutEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
 import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
@@ -46,6 +46,8 @@ const logoTileStyles = null;
 // Jira rows aligned with the tiled Confluence rows.
 const issueTypeAvatarStyles = null;
 const SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
+// Match the existing vertical gap in editor-common's DropList.
+const SYNCED_LOCATIONS_DROPDOWN_VERTICAL_GAP = 8;
 const styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -425,26 +427,27 @@ const toSyncedLocations = (references, intl) => isFieldAwareLocationList(referen
   kind: 'control',
   references: processReferenceData(references, intl)
 };
-export const SyncedLocationDropdown = ({
-  syncBlockStore,
-  resourceId,
-  intl,
-  isSource,
-  localId,
-  api,
-  floatingToolbarRenderContext
+const MeasuredDropdownContent = ({
+  children,
+  onHeightChange
 }) => {
-  return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
-    syncBlockStore: syncBlockStore,
-    resourceId: resourceId,
-    intl: intl,
-    isSource: isSource,
-    localId: localId,
-    api: api,
-    floatingToolbarRenderContext: floatingToolbarRenderContext
-  });
+  const contentRef = useRef(null);
+  const measured = useRef(false);
+  useLayoutEffect(() => {
+    var _contentRef$current;
+    // This wrapper is rendered directly inside the DropList menu.
+    const menu = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
+    if (menu && !measured.current) {
+      measured.current = true;
+      // Include the DropList padding and its existing gap from the toolbar.
+      onHeightChange(menu.getBoundingClientRect().height + SYNCED_LOCATIONS_DROPDOWN_VERTICAL_GAP);
+    }
+  }, [onHeightChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, children);
 };
-const EditorPositionedSyncedLocationDropdown = ({
+export const SyncedLocationDropdown = ({
   syncBlockStore,
   resourceId,
   intl,
@@ -455,6 +458,7 @@ const EditorPositionedSyncedLocationDropdown = ({
 }) => {
   const triggerTitle = intl.formatMessage(messages.syncedLocationDropdownTitle);
   const [isOpen, setIsOpen] = useState(false);
+  const [fitHeight, setFitHeight] = useState();
   const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
@@ -464,9 +468,11 @@ const EditorPositionedSyncedLocationDropdown = ({
     api: api
   }) : null;
   const toggleOpen = useCallback(() => {
+    setFitHeight(undefined);
     setIsOpen(currentIsOpen => !currentIsOpen);
   }, []);
   const closeDropdown = useCallback(() => {
+    setFitHeight(undefined);
     setIsOpen(false);
   }, []);
   const setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
@@ -495,6 +501,7 @@ const EditorPositionedSyncedLocationDropdown = ({
   return /*#__PURE__*/React.createElement(DropdownContainer, {
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
     isOpen: isOpen,
+    fitHeight: fitHeight,
     trigger: trigger,
     handleClickOutside: closeDropdown,
     handleEscapeKeydown: closeDropdown,
@@ -506,7 +513,9 @@ const EditorPositionedSyncedLocationDropdown = ({
     arrowKeyNavigationProviderOptions: {
       type: ArrowKeyNavigationType.MENU
     }
-  }, content);
+  }, isExperimentEnabled('platform_editor_blocks_patch_12') ? /*#__PURE__*/React.createElement(MeasuredDropdownContent, {
+    onHeightChange: setFitHeight
+  }, content) : content);
 };
 export const SyncedLocationDropdownWithCount = ({
   syncBlockStore,
@@ -519,6 +528,7 @@ export const SyncedLocationDropdownWithCount = ({
   floatingToolbarRenderContext
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [fitHeight, setFitHeight] = useState();
   const {
     fetchStatus,
     locations
@@ -551,9 +561,11 @@ export const SyncedLocationDropdownWithCount = ({
     locations: locations
   }) : null;
   const toggleOpen = useCallback(() => {
+    setFitHeight(undefined);
     setIsOpen(currentIsOpen => !currentIsOpen);
   }, []);
   const closeDropdown = useCallback(() => {
+    setFitHeight(undefined);
     setIsOpen(false);
   }, []);
   const setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
@@ -589,6 +601,7 @@ export const SyncedLocationDropdownWithCount = ({
     alignX: "left",
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
     isOpen: isOpen,
+    fitHeight: fitHeight,
     trigger: trigger,
     handleClickOutside: closeDropdown,
     handleEscapeKeydown: closeDropdown,
@@ -600,7 +613,9 @@ export const SyncedLocationDropdownWithCount = ({
     arrowKeyNavigationProviderOptions: {
       type: ArrowKeyNavigationType.MENU
     }
-  }, content);
+  }, isExperimentEnabled('platform_editor_blocks_patch_12') ? /*#__PURE__*/React.createElement(MeasuredDropdownContent, {
+    onHeightChange: setFitHeight
+  }, content) : content);
 };
 const DropdownContent = ({
   syncBlockStore,
@@ -610,7 +625,7 @@ const DropdownContent = ({
   localId,
   api
 }) => {
-  const [fetchStatus, setFetchStatus] = useState('none');
+  const [fetchStatus, setFetchStatus] = useState(() => isExperimentEnabled('platform_editor_blocks_patch_12') ? 'loading' : 'none');
   const [locations, setLocations] = useState(EMPTY_LOCATIONS);
   useEffect(() => {
     setFetchStatus('loading');

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -11,7 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState, useLayoutEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
 import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
@@ -55,6 +55,8 @@ var logoTileStyles = null;
 // Jira rows aligned with the tiled Confluence rows.
 var issueTypeAvatarStyles = null;
 var SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
+// Match the existing vertical gap in editor-common's DropList.
+var SYNCED_LOCATIONS_DROPDOWN_VERTICAL_GAP = 8;
 var styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -453,25 +455,26 @@ var toSyncedLocations = function toSyncedLocations(references, intl) {
     references: processReferenceData(references, intl)
   };
 };
-export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref6) {
-  var syncBlockStore = _ref6.syncBlockStore,
-    resourceId = _ref6.resourceId,
-    intl = _ref6.intl,
-    isSource = _ref6.isSource,
-    localId = _ref6.localId,
-    api = _ref6.api,
-    floatingToolbarRenderContext = _ref6.floatingToolbarRenderContext;
-  return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
-    syncBlockStore: syncBlockStore,
-    resourceId: resourceId,
-    intl: intl,
-    isSource: isSource,
-    localId: localId,
-    api: api,
-    floatingToolbarRenderContext: floatingToolbarRenderContext
-  });
+var MeasuredDropdownContent = function MeasuredDropdownContent(_ref6) {
+  var children = _ref6.children,
+    onHeightChange = _ref6.onHeightChange;
+  var contentRef = useRef(null);
+  var measured = useRef(false);
+  useLayoutEffect(function () {
+    var _contentRef$current;
+    // This wrapper is rendered directly inside the DropList menu.
+    var menu = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
+    if (menu && !measured.current) {
+      measured.current = true;
+      // Include the DropList padding and its existing gap from the toolbar.
+      onHeightChange(menu.getBoundingClientRect().height + SYNCED_LOCATIONS_DROPDOWN_VERTICAL_GAP);
+    }
+  }, [onHeightChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, children);
 };
-var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref7) {
+export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref7) {
   var syncBlockStore = _ref7.syncBlockStore,
     resourceId = _ref7.resourceId,
     intl = _ref7.intl,
@@ -484,6 +487,10 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fitHeight = _useState4[0],
+    setFitHeight = _useState4[1];
   var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
@@ -493,11 +500,13 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     api: api
   }) : null;
   var toggleOpen = useCallback(function () {
+    setFitHeight(undefined);
     setIsOpen(function (currentIsOpen) {
       return !currentIsOpen;
     });
   }, []);
   var closeDropdown = useCallback(function () {
+    setFitHeight(undefined);
     setIsOpen(false);
   }, []);
   var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
@@ -528,6 +537,7 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
   return /*#__PURE__*/React.createElement(DropdownContainer, {
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
     isOpen: isOpen,
+    fitHeight: fitHeight,
     trigger: trigger,
     handleClickOutside: closeDropdown,
     handleEscapeKeydown: closeDropdown,
@@ -539,7 +549,9 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     arrowKeyNavigationProviderOptions: {
       type: ArrowKeyNavigationType.MENU
     }
-  }, content);
+  }, isExperimentEnabled('platform_editor_blocks_patch_12') ? /*#__PURE__*/React.createElement(MeasuredDropdownContent, {
+    onHeightChange: setFitHeight
+  }, content) : content);
 };
 export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref8) {
   var syncBlockStore = _ref8.syncBlockStore,
@@ -550,10 +562,14 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
     localId = _ref8.localId,
     api = _ref8.api,
     floatingToolbarRenderContext = _ref8.floatingToolbarRenderContext;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fitHeight = _useState8[0],
+    setFitHeight = _useState8[1];
   var _useReferenceData = useReferenceData({
       intl: intl,
       isSource: isSource,
@@ -587,11 +603,13 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
     locations: locations
   }) : null;
   var toggleOpen = useCallback(function () {
+    setFitHeight(undefined);
     setIsOpen(function (currentIsOpen) {
       return !currentIsOpen;
     });
   }, []);
   var closeDropdown = useCallback(function () {
+    setFitHeight(undefined);
     setIsOpen(false);
   }, []);
   var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
@@ -629,6 +647,7 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
     alignX: "left",
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
     isOpen: isOpen,
+    fitHeight: fitHeight,
     trigger: trigger,
     handleClickOutside: closeDropdown,
     handleEscapeKeydown: closeDropdown,
@@ -640,7 +659,9 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
     arrowKeyNavigationProviderOptions: {
       type: ArrowKeyNavigationType.MENU
     }
-  }, content);
+  }, isExperimentEnabled('platform_editor_blocks_patch_12') ? /*#__PURE__*/React.createElement(MeasuredDropdownContent, {
+    onHeightChange: setFitHeight
+  }, content) : content);
 };
 var DropdownContent = function DropdownContent(_ref1) {
   var syncBlockStore = _ref1.syncBlockStore,
@@ -649,14 +670,16 @@ var DropdownContent = function DropdownContent(_ref1) {
     isSource = _ref1.isSource,
     localId = _ref1.localId,
     api = _ref1.api;
-  var _useState5 = useState('none'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    fetchStatus = _useState6[0],
-    setFetchStatus = _useState6[1];
-  var _useState7 = useState(EMPTY_LOCATIONS),
-    _useState8 = _slicedToArray(_useState7, 2),
-    locations = _useState8[0],
-    setLocations = _useState8[1];
+  var _useState9 = useState(function () {
+      return isExperimentEnabled('platform_editor_blocks_patch_12') ? 'loading' : 'none';
+    }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    fetchStatus = _useState0[0],
+    setFetchStatus = _useState0[1];
+  var _useState1 = useState(EMPTY_LOCATIONS),
+    _useState10 = _slicedToArray(_useState1, 2),
+    locations = _useState10[0],
+    setLocations = _useState10[1];
   useEffect(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
@@ -706,23 +729,23 @@ var useReferenceData = function useReferenceData(_ref11) {
     isSource = _ref11.isSource,
     localId = _ref11.localId;
   // Refresh locations when the toolbar opens, rather than on every document edit.
-  var _useState9 = useState(doc),
-    _useState0 = _slicedToArray(_useState9, 1),
-    docAtMount = _useState0[0];
-  var _useState1 = useState(function () {
+  var _useState11 = useState(doc),
+    _useState12 = _slicedToArray(_useState11, 1),
+    docAtMount = _useState12[0];
+  var _useState13 = useState(function () {
       return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
     }),
-    _useState10 = _slicedToArray(_useState1, 1),
-    isNewSourceBlock = _useState10[0];
-  var _useState11 = useState(function () {
+    _useState14 = _slicedToArray(_useState13, 1),
+    isNewSourceBlock = _useState14[0];
+  var _useState15 = useState(function () {
       return {
         fetchStatus: isNewSourceBlock ? 'success' : 'loading',
         locations: EMPTY_LOCATIONS
       };
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    state = _useState12[0],
-    setState = _useState12[1];
+    _useState16 = _slicedToArray(_useState15, 2),
+    state = _useState16[0],
+    setState = _useState16[1];
   useEffect(function () {
     var isCurrentRequest = true;
     setState({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "25.0.5",
+	"version": "25.0.7",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,7 +21,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.7.0",
-		"@atlaskit/button": "25.4.7",
+		"@atlaskit/button": "25.4.8",
 		"@atlaskit/dropdown-menu": "21.0.0",
 		"@atlaskit/editor-json-transformer": "^10.0.0",
 		"@atlaskit/editor-plugin-analytics": "^27.0.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-plugin-user-intent": "^25.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.4.0",
-		"@atlaskit/editor-synced-block-provider": "^23.0.0",
+		"@atlaskit/editor-synced-block-provider": "^23.1.0",
 		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/flag": "^19.0.0",
 		"@atlaskit/icon": "38.0.2",
@@ -65,7 +65,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^131.2.0",
+		"@atlaskit/editor-common": "^131.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},