@atlaskit/editor-plugin-synced-block 8.3.13 → 8.3.15

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 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
+
+- Updated dependencies
+
 ## 8.3.13
 
 ### 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/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);
+}

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/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 {};

package/dist/types-ts4.5/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-ts4.5/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 {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "8.3.13",
+	"version": "8.3.15",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,9 +28,9 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.12.0",
-		"@atlaskit/button": "23.11.6",
-		"@atlaskit/dropdown-menu": "16.9.1",
+		"@atlaskit/adf-schema": "^52.13.0",
+		"@atlaskit/button": "23.11.7",
+		"@atlaskit/dropdown-menu": "16.9.2",
 		"@atlaskit/editor-json-transformer": "^8.32.0",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^9.2.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/editor-synced-block-provider": "^6.6.0",
-		"@atlaskit/editor-toolbar": "^1.6.0",
+		"@atlaskit/editor-toolbar": "^1.7.0",
 		"@atlaskit/flag": "^17.12.0",
 		"@atlaskit/icon": "35.0.0",
 		"@atlaskit/icon-lab": "^6.9.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "19.1.2",
-		"@atlaskit/tmp-editor-statsig": "^81.3.0",
+		"@atlaskit/tmp-editor-statsig": "^82.3.0",
 		"@atlaskit/tokens": "13.0.4",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
@@ -64,11 +64,12 @@
 		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.36.0",
+		"@atlaskit/editor-common": "^114.41.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"devDependencies": {
+		"react": "^18.2.0",
 		"react-intl": "^6.6.2",
 		"typescript": "5.9.2"
 	},