@atlaskit/editor-plugin-synced-block 8.3.14 → 8.4.0

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -3,13 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./SyncedLocationDropdown.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownContainer } from '@atlaskit/editor-common/ui-menu';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
 import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
@@ -24,6 +25,7 @@ import SubtaskIcon from '@atlaskit/icon/core/subtasks';
 import TaskIcon from '@atlaskit/icon/core/task';
 import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
@@ -33,6 +35,7 @@ const dropdownItemStyles = null;
 
 // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
 const logoTileStyles = null;
+const SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 const styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -278,6 +281,101 @@ export const processReferenceData = (referenceData, intl) => {
   return sortedReferences;
 };
 export const SyncedLocationDropdown = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId,
+  api,
+  floatingToolbarRenderContext
+}) => {
+  if (fg('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+      syncBlockStore: syncBlockStore,
+      resourceId: resourceId,
+      intl: intl,
+      isSource: isSource,
+      localId: localId,
+      api: api,
+      floatingToolbarRenderContext: floatingToolbarRenderContext
+    });
+  }
+  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  });
+};
+const EditorPositionedSyncedLocationDropdown = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId,
+  api,
+  floatingToolbarRenderContext
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  const [isOpen, setIsOpen] = useState(false);
+  const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
+  const toggleOpen = useCallback(() => {
+    setIsOpen(currentIsOpen => !currentIsOpen);
+  }, []);
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 ? void 0 : setDisableParentScroll(true);
+    return () => {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 ? void 0 : setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  const trigger = useMemo(() => /*#__PURE__*/React.createElement(Button, {
+    areAnyNewToolbarFlagsEnabled: true,
+    selected: isOpen,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      size: "small"
+    }),
+    onClick: toggleOpen,
+    ariaHasPopup: true
+  }, triggerTitle), [isOpen, toggleOpen, triggerTitle]);
+  return /*#__PURE__*/React.createElement(DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
+const LegacySyncedLocationDropdown = ({
   syncBlockStore,
   resourceId,
   intl,
@@ -290,6 +388,14 @@ export const SyncedLocationDropdown = ({
   } = intl;
   const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
   const [isOpen, setIsOpen] = useState(false);
+  const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     isOpen: isOpen
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -297,7 +403,7 @@ export const SyncedLocationDropdown = ({
     onOpenChange: ({
       isOpen
     }) => setIsOpen(isOpen),
-    testId: "synced-block-synced-locations-dropdown"
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     trigger: ({
@@ -315,14 +421,7 @@ export const SyncedLocationDropdown = ({
       })
       // eslint-disable-next-line react/jsx-props-no-spreading
     }, triggerProps), triggerTitle)
-  }, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
-    syncBlockStore: syncBlockStore,
-    resourceId: resourceId,
-    intl: intl,
-    isSource: isSource,
-    localId: localId,
-    api: api
-  }));
+  }, content);
 };
 const DropdownContent = ({
   syncBlockStore,

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

@@ -65,14 +65,15 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
       const syncedLocation = {
         type: 'custom',
         fallback: [],
-        render: () => {
+        render: (_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) => {
           return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,
             localId: localId,
             intl: intl,
             isSource: isBodiedSyncBlock,
-            api: api
+            api: api,
+            floatingToolbarRenderContext: floatingToolbarRenderContext
           });
         }
       };

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -7,11 +7,13 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 import { SyncBlockLabel } from '../ui/SyncBlockLabel';
 var toDOMOld = function toDOMOld() {
@@ -79,6 +81,7 @@ var BodiedSyncBlockOld = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "createDomRef",
     value: function createDomRef() {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
       var domRef = document.createElement('div');
       domRef.classList.add(BodiedSyncBlockSharedCssClassName.prefix);
       return domRef;
@@ -105,6 +108,7 @@ var BodiedSyncBlockOld = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "getContentDOM",
     value: function getContentDOM() {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView serialization must target active runtime document
       var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOMOld()),
         dom = _DOMSerializer$render.dom,
         contentDOM = _DOMSerializer$render.contentDOM;
@@ -172,6 +176,7 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
     this.getPos = getPos;
     this.api = api;
     this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView serialization must target active runtime document
     var _DOMSerializer$render2 = DOMSerializer.renderSpec(document, toDOM(this.node)),
       dom = _DOMSerializer$render2.dom,
       contentDOM = _DOMSerializer$render2.contentDOM;
@@ -179,6 +184,18 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
     this.dom = dom;
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     this.contentDOM = contentDOM;
+
+    // During SSR, the portal's renderToStaticMarkup + innerHTML clobbers
+    // contentDOM. Render the label into a separate container to prevent this.
+    // On client, render directly into this.dom as before.
+    var labelContainer;
+    if (isSSR() && expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
+      labelContainer = document.createElement('div');
+      this.dom.appendChild(labelContainer);
+    } else {
+      labelContainer = this.dom;
+    }
     this.labelKey = crypto.randomUUID();
     this.nodeViewPortalProviderAPI.render(function () {
       var _this4$api;
@@ -191,7 +208,7 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
         isSource: true,
         localId: node.attrs.localId
       }));
-    }, this.dom, this.labelKey);
+    }, labelContainer, this.labelKey);
     this.updateContentEditable({});
     this.handleConnectivityModeChange();
     this.handleViewModeChange();

package/dist/esm/nodeviews/syncedBlock.js

@@ -16,6 +16,7 @@ import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
+import { SyncBlockSSRReactContextsProvider } from '../ui/SyncBlockSSRReactContextsProvider';
 export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   function SyncBlock(props) {
     var _this;
@@ -40,12 +41,14 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     _this.options = props.options;
     _this.api = props.api;
     _this.syncBlockStore = props.syncBlockStore;
+    _this.intl = props.intl;
     return _this;
   }
   _inherits(SyncBlock, _ReactNodeView);
   return _createClass(SyncBlock, [{
     key: "createDomRef",
     value: function createDomRef() {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
       var domRef = document.createElement('div');
       domRef.classList.add(SyncBlockSharedCssClassName.prefix);
       return domRef;
@@ -91,7 +94,9 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       var isPerfEnabled = expValEqualsNoExposure('editor_synced_block_perf', 'isEnabled', true);
 
       // get document node from data provider
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      return /*#__PURE__*/React.createElement(SyncBlockSSRReactContextsProvider, {
+        intl: this.intl
+      }, /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.SYNCED_BLOCK,
         dispatchAnalyticsEvent: (_this$api3 = this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions.fireAnalyticsEvent,
         fallbackComponent: null
@@ -116,7 +121,7 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         syncBlockStore: syncBlockStore,
         syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
         api: this.api
-      })));
+      }))));
     }
   }, {
     key: "destroy",

package/dist/esm/pm-plugins/main.js

@@ -541,7 +541,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
               getPos: getPos,
               portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
               eventDispatcher: pmPluginFactoryParams.eventDispatcher,
-              syncBlockStore: syncBlockStore
+              syncBlockStore: syncBlockStore,
+              intl: pmPluginFactoryParams.getIntl()
             }).init()
           );
         },

package/dist/esm/ui/BodiedSyncBlockWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
 import { useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockLabel } from './SyncBlockLabel';
 // Delete this file when cleaning up platform_synced_block_use_new_source_nodeview
@@ -7,7 +8,7 @@ export var BodiedSyncBlockWrapper = /*#__PURE__*/React.forwardRef(function (_ref
     syncBlockStore = _ref.syncBlockStore;
   // TODO: EDITOR-2429 - this should be debounced (either here or in the data provider) to avoid excessive API writes
   useHandleContentChanges(syncBlockStore, node);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NodeViewContentHole, {
     "data-testid": "bodied-sync-block-wrapper",
     ref: ref
   }), /*#__PURE__*/React.createElement(SyncBlockLabel, {

package/dist/esm/ui/SyncBlockSSRReactContextsProvider.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RawIntlProvider } from 'react-intl';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+/**
+ * Wraps syncBlock nodeview children with the editor's actual IntlProvider during
+ * SSR streaming (renderToStaticMarkup). This ensures that components using
+ * useIntl() — such as SyncBlockLabel, SyncedBlockLoadingState, and
+ * ReactRenderer's table/code-block node renderers — have a valid intl context
+ * and do not throw during the static render pass.
+ *
+ * Outside of SSR streaming this is a no-op passthrough.
+ *
+ * Follows the same pattern as MediaSSRReactContextsProvider.
+ */
+export function SyncBlockSSRReactContextsProvider(_ref) {
+  var children = _ref.children,
+    intl = _ref.intl;
+  if (!expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true) || !isSSR()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(RawIntlProvider, {
+    value: intl
+  }, children);
+}

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -11,13 +11,14 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownContainer } from '@atlaskit/editor-common/ui-menu';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
 import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
@@ -32,6 +33,7 @@ import SubtaskIcon from '@atlaskit/icon/core/subtasks';
 import TaskIcon from '@atlaskit/icon/core/task';
 import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
@@ -41,6 +43,7 @@ var dropdownItemStyles = null;
 
 // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
 var logoTileStyles = null;
+var SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 var styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -296,27 +299,133 @@ export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
     intl = _ref4.intl,
     isSource = _ref4.isSource,
     localId = _ref4.localId,
-    api = _ref4.api;
+    api = _ref4.api,
+    floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
+  if (fg('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+      syncBlockStore: syncBlockStore,
+      resourceId: resourceId,
+      intl: intl,
+      isSource: isSource,
+      localId: localId,
+      api: api,
+      floatingToolbarRenderContext: floatingToolbarRenderContext
+    });
+  }
+  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  });
+};
+var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref5) {
+  var syncBlockStore = _ref5.syncBlockStore,
+    resourceId = _ref5.resourceId,
+    intl = _ref5.intl,
+    isSource = _ref5.isSource,
+    localId = _ref5.localId,
+    api = _ref5.api,
+    floatingToolbarRenderContext = _ref5.floatingToolbarRenderContext;
   var formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
+  var toggleOpen = useCallback(function () {
+    setIsOpen(function (currentIsOpen) {
+      return !currentIsOpen;
+    });
+  }, []);
+  var closeDropdown = useCallback(function () {
+    setIsOpen(false);
+  }, []);
+  var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(true);
+    return function () {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  var trigger = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      areAnyNewToolbarFlagsEnabled: true,
+      selected: isOpen,
+      iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      }),
+      onClick: toggleOpen,
+      ariaHasPopup: true
+    }, triggerTitle);
+  }, [isOpen, toggleOpen, triggerTitle]);
+  return /*#__PURE__*/React.createElement(DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
+var LegacySyncedLocationDropdown = function LegacySyncedLocationDropdown(_ref6) {
+  var syncBlockStore = _ref6.syncBlockStore,
+    resourceId = _ref6.resourceId,
+    intl = _ref6.intl,
+    isSource = _ref6.isSource,
+    localId = _ref6.localId,
+    api = _ref6.api;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     isOpen: isOpen
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
-    onOpenChange: function onOpenChange(_ref5) {
-      var isOpen = _ref5.isOpen;
+    onOpenChange: function onOpenChange(_ref7) {
+      var isOpen = _ref7.isOpen;
       return setIsOpen(isOpen);
     },
-    testId: "synced-block-synced-locations-dropdown"
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
-    trigger: function trigger(_ref6) {
-      var triggerRef = _ref6.triggerRef,
-        triggerProps = _objectWithoutProperties(_ref6, _excluded);
+    trigger: function trigger(_ref8) {
+      var triggerRef = _ref8.triggerRef,
+        triggerProps = _objectWithoutProperties(_ref8, _excluded);
       return /*#__PURE__*/React.createElement(Button, _extends({
         ref: triggerRef,
         areAnyNewToolbarFlagsEnabled: true,
@@ -330,35 +439,28 @@ export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, triggerProps), triggerTitle);
     }
-  }, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
-    syncBlockStore: syncBlockStore,
-    resourceId: resourceId,
-    intl: intl,
-    isSource: isSource,
-    localId: localId,
-    api: api
-  }));
+  }, content);
 };
-var DropdownContent = function DropdownContent(_ref7) {
-  var syncBlockStore = _ref7.syncBlockStore,
-    resourceId = _ref7.resourceId,
-    intl = _ref7.intl,
-    isSource = _ref7.isSource,
-    localId = _ref7.localId,
-    api = _ref7.api;
+var DropdownContent = function DropdownContent(_ref9) {
+  var syncBlockStore = _ref9.syncBlockStore,
+    resourceId = _ref9.resourceId,
+    intl = _ref9.intl,
+    isSource = _ref9.isSource,
+    localId = _ref9.localId,
+    api = _ref9.api;
   var formatMessage = intl.formatMessage;
-  var _useState3 = useState('none'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    fetchStatus = _useState4[0],
-    setFetchStatus = _useState4[1];
-  var _useState5 = useState([]),
+  var _useState5 = useState('none'),
     _useState6 = _slicedToArray(_useState5, 2),
-    referenceData = _useState6[0],
-    setReferenceData = _useState6[1];
+    fetchStatus = _useState6[0],
+    setFetchStatus = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    referenceData = _useState8[0],
+    setReferenceData = _useState8[1];
   useEffect(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref0 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var response;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -383,7 +485,7 @@ var DropdownContent = function DropdownContent(_ref7) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref8.apply(this, arguments);
+        return _ref0.apply(this, arguments);
       };
     }();
     getReferenceData();
@@ -461,8 +563,8 @@ var DropdownContent = function DropdownContent(_ref7) {
 var LoadingScreen = function LoadingScreen() {
   return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
 };
-var ErrorScreen = function ErrorScreen(_ref9) {
-  var formatMessage = _ref9.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref1) {
+  var formatMessage = _ref1.formatMessage;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -478,8 +580,8 @@ var ErrorScreen = function ErrorScreen(_ref9) {
     size: "medium"
   }, formatMessage(messages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref0) {
-  var formatMessage = _ref0.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref10) {
+  var formatMessage = _ref10.formatMessage;
   return /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.noResultsContainer,
     space: "space.100",

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

@@ -60,14 +60,15 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
       var syncedLocation = {
         type: 'custom',
         fallback: [],
-        render: function render() {
+        render: function render(_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) {
           return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,
             localId: localId,
             intl: intl,
             isSource: isBodiedSyncBlock,
-            api: api
+            api: api,
+            floatingToolbarRenderContext: floatingToolbarRenderContext
           });
         }
       };

package/dist/types/nodeviews/syncedBlock.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { IntlShape } from 'react-intl';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -13,6 +14,7 @@ export interface SyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     eventDispatcher: EventDispatcher;
     getPos: getPosHandlerNode;
+    intl?: IntlShape;
     isNodeNested?: boolean;
     node: PMNode;
     options: SyncedBlockPluginOptions | undefined;
@@ -24,6 +26,7 @@ export declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
     private options;
     private api?;
     private syncBlockStore?;
+    private intl?;
     constructor(props: SyncBlockNodeViewProps);
     private removeSyncBlockStable;
     private fetchSyncBlockSourceInfoStable;

package/dist/types/ui/SyncBlockSSRReactContextsProvider.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { type IntlShape } from 'react-intl';
+interface Props {
+    children: ReactNode;
+    intl: IntlShape | undefined;
+}
+/**
+ * Wraps syncBlock nodeview children with the editor's actual IntlProvider during
+ * SSR streaming (renderToStaticMarkup). This ensures that components using
+ * useIntl() — such as SyncBlockLabel, SyncedBlockLoadingState, and
+ * ReactRenderer's table/code-block node renderers — have a valid intl context
+ * and do not throw during the static render pass.
+ *
+ * Outside of SSR streaming this is a no-op passthrough.
+ *
+ * Follows the same pattern as MediaSSRReactContextsProvider.
+ */
+export declare function SyncBlockSSRReactContextsProvider({ children, intl }: Props): ReactNode;
+export {};