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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 8.4.0
+
+### Minor Changes
+
+- [`6644994a61d9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6644994a61d9c) -
+  Add editor-positioned dropdown support for custom floating toolbar items
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.3.15
+
+### Patch Changes
+
+- [`1c77cce42b15b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c77cce42b15b) -
+  Updated sync blocks to support ssr streaming
+- Updated dependencies
+
 ## 8.3.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -12,11 +12,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _BodiedSyncBlockWrapper = require("../ui/BodiedSyncBlockWrapper");
 var _SyncBlockLabel = require("../ui/SyncBlockLabel");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -86,6 +88,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(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix);
       return domRef;
@@ -112,6 +115,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 = _model.DOMSerializer.renderSpec(document, toDOMOld()),
         dom = _DOMSerializer$render.dom,
         contentDOM = _DOMSerializer$render.contentDOM;
@@ -179,6 +183,7 @@ var BodiedSyncBlock = exports.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 = _model.DOMSerializer.renderSpec(document, toDOM(this.node)),
       dom = _DOMSerializer$render2.dom,
       contentDOM = _DOMSerializer$render2.contentDOM;
@@ -186,6 +191,18 @@ var BodiedSyncBlock = exports.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 ((0, _coreUtils.isSSR)() && (0, _expValEquals.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;
@@ -198,7 +215,7 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
         isSource: true,
         localId: node.attrs.localId
       }));
-    }, this.dom, this.labelKey);
+    }, labelContainer, this.labelKey);
     this.updateContentEditable({});
     this.handleConnectivityModeChange();
     this.handleViewModeChange();

package/dist/cjs/nodeviews/syncedBlock.js

@@ -20,6 +20,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _editorCommands = require("../editor-commands");
 var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
+var _SyncBlockSSRReactContextsProvider = require("../ui/SyncBlockSSRReactContextsProvider");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
@@ -47,12 +48,14 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     _this.options = props.options;
     _this.api = props.api;
     _this.syncBlockStore = props.syncBlockStore;
+    _this.intl = props.intl;
     return _this;
   }
   (0, _inherits2.default)(SyncBlock, _ReactNodeView);
   return (0, _createClass2.default)(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(_syncBlock.SyncBlockSharedCssClassName.prefix);
       return domRef;
@@ -98,7 +101,9 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       var isPerfEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('editor_synced_block_perf', 'isEnabled', true);
 
       // get document node from data provider
-      return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+      return /*#__PURE__*/_react.default.createElement(_SyncBlockSSRReactContextsProvider.SyncBlockSSRReactContextsProvider, {
+        intl: this.intl
+      }, /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.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
@@ -123,7 +128,7 @@ var SyncBlock = exports.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/cjs/pm-plugins/main.js

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

package/dist/cjs/ui/BodiedSyncBlockWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BodiedSyncBlockWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncBlockLabel = require("./SyncBlockLabel");
 // Delete this file when cleaning up platform_synced_block_use_new_source_nodeview
@@ -14,7 +15,7 @@ var BodiedSyncBlockWrapper = exports.BodiedSyncBlockWrapper = /*#__PURE__*/_reac
     syncBlockStore = _ref.syncBlockStore;
   // TODO: EDITOR-2429 - this should be debounced (either here or in the data provider) to avoid excessive API writes
   (0, _editorSyncedBlockProvider.useHandleContentChanges)(syncBlockStore, node);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNodeView.NodeViewContentHole, {
     "data-testid": "bodied-sync-block-wrapper",
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, {

package/dist/cjs/ui/SyncBlockSSRReactContextsProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncBlockSSRReactContextsProvider = SyncBlockSSRReactContextsProvider;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _expValEquals = require("@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.
+ */
+function SyncBlockSSRReactContextsProvider(_ref) {
+  var children = _ref.children,
+    intl = _ref.intl;
+  if (!(0, _expValEquals.expValEquals)('platform_editor_editor_ssr_streaming', 'isEnabled', true) || !(0, _coreUtils.isSSR)()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactIntl.RawIntlProvider, {
+    value: intl
+  }, children);
+}

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -22,6 +22,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _icon = require("@atlaskit/icon");
 var _pageLiveDoc = _interopRequireDefault(require("@atlaskit/icon-lab/core/page-live-doc"));
@@ -36,6 +37,7 @@ var _subtasks = _interopRequireDefault(require("@atlaskit/icon/core/subtasks"));
 var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
 var _logo = require("@atlaskit/logo");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -50,6 +52,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",
@@ -305,27 +308,133 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
     intl = _ref4.intl,
     isSource = _ref4.isSource,
     localId = _ref4.localId,
-    api = _ref4.api;
+    api = _ref4.api,
+    floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
+  if ((0, _platformFeatureFlags.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.syncBlockMessages.syncedLocationDropdownTitle);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_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 = (0, _react.useCallback)(function () {
+    setIsOpen(function (currentIsOpen) {
+      return !currentIsOpen;
+    });
+  }, []);
+  var closeDropdown = (0, _react.useCallback)(function () {
+    setIsOpen(false);
+  }, []);
+  var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  (0, _react.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 = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, {
+      areAnyNewToolbarFlagsEnabled: true,
+      selected: isOpen,
+      iconAfter: /*#__PURE__*/React.createElement(_chevronDown.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      }),
+      onClick: toggleOpen,
+      ariaHasPopup: true
+    }, triggerTitle);
+  }, [isOpen, toggleOpen, triggerTitle]);
+  return /*#__PURE__*/React.createElement(_uiMenu.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: _uiMenu.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.syncBlockMessages.syncedLocationDropdownTitle);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_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.default, {
     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 = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+    trigger: function trigger(_ref8) {
+      var triggerRef = _ref8.triggerRef,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
       return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, (0, _extends2.default)({
         ref: triggerRef,
         areAnyNewToolbarFlagsEnabled: true,
@@ -339,35 +448,28 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
         // 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 = (0, _react.useState)('none'),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    fetchStatus = _useState4[0],
-    setFetchStatus = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)('none'),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    referenceData = _useState6[0],
-    setReferenceData = _useState6[1];
+    fetchStatus = _useState6[0],
+    setFetchStatus = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    referenceData = _useState8[0],
+    setReferenceData = _useState8[1];
   (0, _react.useEffect)(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _ref0 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var response;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -392,7 +494,7 @@ var DropdownContent = function DropdownContent(_ref7) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref8.apply(this, arguments);
+        return _ref0.apply(this, arguments);
       };
     }();
     getReferenceData();
@@ -470,8 +572,8 @@ var DropdownContent = function DropdownContent(_ref7) {
 var LoadingScreen = function LoadingScreen() {
   return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_spinner.default, null));
 };
-var ErrorScreen = function ErrorScreen(_ref9) {
-  var formatMessage = _ref9.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref1) {
+  var formatMessage = _ref1.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -487,8 +589,8 @@ var ErrorScreen = function ErrorScreen(_ref9) {
     size: "medium"
   }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref0) {
-  var formatMessage = _ref0.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref10) {
+  var formatMessage = _ref10.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Stack, {
     xcss: styles.noResultsContainer,
     space: "space.100",

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

@@ -69,14 +69,15 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       var syncedLocation = {
         type: 'custom',
         fallback: [],
-        render: function render() {
+        render: function render(_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) {
           return /*#__PURE__*/_react.default.createElement(_SyncedLocationDropdown.SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,
             localId: localId,
             intl: intl,
             isSource: isBodiedSyncBlock,
-            api: api
+            api: api,
+            floatingToolbarRenderContext: floatingToolbarRenderContext
           });
         }
       };

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -1,10 +1,12 @@
 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';
 const toDOMOld = () => ['div', {
@@ -59,6 +61,7 @@ class BodiedSyncBlockOld extends ReactNodeView {
     }
   }
   createDomRef() {
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
     const domRef = document.createElement('div');
     domRef.classList.add(BodiedSyncBlockSharedCssClassName.prefix);
     return domRef;
@@ -81,6 +84,7 @@ class BodiedSyncBlockOld extends ReactNodeView {
     }));
   }
   getContentDOM() {
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView serialization must target active runtime document
     const {
       dom,
       contentDOM
@@ -143,6 +147,7 @@ export class BodiedSyncBlock {
     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
     const {
       dom,
       contentDOM
@@ -151,6 +156,18 @@ export class BodiedSyncBlock {
     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.
+    let 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(() => {
       var _this$api7, _this$api7$analytics;
@@ -163,7 +180,7 @@ export class BodiedSyncBlock {
         isSource: true,
         localId: node.attrs.localId
       }));
-    }, this.dom, this.labelKey);
+    }, labelContainer, this.labelKey);
     this.updateContentEditable({});
     this.handleConnectivityModeChange();
     this.handleViewModeChange();

package/dist/es2019/nodeviews/syncedBlock.js

@@ -7,6 +7,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 class SyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
@@ -29,8 +30,10 @@ export class SyncBlock extends ReactNodeView {
     this.options = props.options;
     this.api = props.api;
     this.syncBlockStore = props.syncBlockStore;
+    this.intl = props.intl;
   }
   createDomRef() {
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
     const domRef = document.createElement('div');
     domRef.classList.add(SyncBlockSharedCssClassName.prefix);
     return domRef;
@@ -67,7 +70,9 @@ export class SyncBlock extends ReactNodeView {
     const 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 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : _this$api3$analytics.actions.fireAnalyticsEvent,
       fallbackComponent: null
@@ -90,7 +95,7 @@ export class SyncBlock extends ReactNodeView {
       syncBlockStore: syncBlockStore,
       syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
       api: this.api
-    })));
+    }))));
   }
   destroy() {
     var _this$unsubscribe;

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

@@ -516,7 +516,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           getPos,
           portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
           eventDispatcher: pmPluginFactoryParams.eventDispatcher,
-          syncBlockStore: syncBlockStore
+          syncBlockStore: syncBlockStore,
+          intl: pmPluginFactoryParams.getIntl()
         }).init(),
         bodiedSyncBlock: editorExperiment('platform_synced_block_use_new_source_nodeview', true, {
           exposure: true

package/dist/es2019/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
@@ -8,7 +9,7 @@ export const BodiedSyncBlockWrapper = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   // 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/es2019/ui/SyncBlockSSRReactContextsProvider.js

@@ -0,0 +1,29 @@
+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({
+  children,
+  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);
+}