@atlaskit/editor-plugin-layout 11.0.3 → 11.0.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-layout
 
+## 11.0.4
+
+### Patch Changes
+
+- [`1f5c61250d103`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1f5c61250d103) -
+  Updating layout plugin to support ssr streaming
+
 ## 11.0.3
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -114,8 +114,9 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           name: 'layoutResizing',
           plugin: function plugin(_ref2) {
             var portalProviderAPI = _ref2.portalProviderAPI,
-              eventDispatcher = _ref2.eventDispatcher;
-            return (0, _resizing.default)(options, api, portalProviderAPI, eventDispatcher);
+              eventDispatcher = _ref2.eventDispatcher,
+              getIntl = _ref2.getIntl;
+            return (0, _resizing.default)(options, api, portalProviderAPI, eventDispatcher, getIntl());
           }
         });
       }

package/dist/cjs/nodeviews/index.js

@@ -13,8 +13,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _reactNodeView = _interopRequireWildcard(require("@atlaskit/editor-common/react-node-view"));
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -22,6 +23,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../pm-plugins/utils");
+var _LayoutSSRReactContextsProvider = require("../ui/LayoutSSRReactContextsProvider");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; })(); }
@@ -140,6 +142,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
    * @param props.eventDispatcher
    * @param props.pluginInjectionApi
    * @param props.options
+   * @param props.intl
    * @example
    */
   function LayoutSectionView(props) {
@@ -148,6 +151,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
     _this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.isEmpty = isEmptyLayout(_this.node);
     _this.options = props.options;
+    _this.intl = props.intl;
     return _this;
   }
 
@@ -160,6 +164,13 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
   return (0, _createClass2.default)(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
+      // Build the layout DOM via the schema's toDOM spec. This is the same
+      // path used in both CSR and SSR — the only SSR-specific concern is
+      // re-attaching `contentDOM` (= the `[data-layout-section]` element)
+      // after the portal's renderToStaticMarkup + innerHTML write detaches
+      // it. We handle that by stamping `data-ssr-content-dom-ref` on the
+      // outer container so `ReactNodeView.init()` can find a re-attach
+      // target inside `domRef` after the portal write.
       var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM(this.node)),
         container = _ref2.dom,
         contentDOM = _ref2.contentDOM;
@@ -172,6 +183,20 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
       if ((0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
         this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
       }
+
+      // SSR streaming re-attach note:
+      // In SSR, `init()` appends `container` into `domRef`; the portal's
+      // renderToStaticMarkup + innerHTML write then wipes `domRef`,
+      // detaching the entire subtree (with PM-serialized children inside
+      // `[data-layout-section]`). React's `render()` emits a
+      // `<NodeViewContentHole/>` placeholder inside `domRef`; the SSR
+      // re-attach logic in `init()` finds it via `[data-ssr-content-dom-ref]`
+      // and calls `_handleRef`, which appends `contentDOMWrapper` (the
+      // detached `container`) back inside the placeholder. The end result
+      // is `domRef > NodeViewContentHole > layout-section-container >
+      // [data-layout-section] > [data-layout-column] children` — the
+      // layout DOM contract is preserved.
+
       return {
         dom: container,
         contentDOM: contentDOM
@@ -206,6 +231,29 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
       if (this.layoutDOM) {
         this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
       }
+
+      // SSR streaming path: render only a `<NodeViewContentHole/>` placeholder
+      // so ReactNodeView.init()'s SSR re-attach logic can find the marker
+      // (`data-ssr-content-dom-ref`) and re-append the detached
+      // contentDOMWrapper — which is the FULL layout structure
+      // (`layout-section-container > [data-layout-section] > children`) built
+      // in `getContentDOM` via DOMSerializer.renderSpec. This avoids
+      // duplicating layout structure between getContentDOM and render(), which
+      // previously caused an extra wrapping div between `[data-layout-section]`
+      // and the `[data-layout-column]` children and broke the flex layout.
+      //
+      // The BreakoutResizer is intentionally omitted in SSR — it relies on
+      // browser-only APIs and contributes no useful static markup. The
+      // LayoutSSRReactContextsProvider wraps the placeholder to inject the
+      // editor's IntlShape, defending against any descendants that call
+      // `useIntl()` during renderToStaticMarkup.
+      if ((0, _coreUtils.isSSR)() && (0, _coreUtils.isSSRStreaming)()) {
+        return /*#__PURE__*/_react.default.createElement(_LayoutSSRReactContextsProvider.LayoutSSRReactContextsProvider, {
+          intl: this.intl
+        }, /*#__PURE__*/_react.default.createElement(_reactNodeView.NodeViewContentHole, {
+          ref: forwardRef
+        }));
+      }
       if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true)) {
         return null;
       }

package/dist/cjs/pm-plugins/resizing.js

@@ -8,6 +8,8 @@ exports.pluginKey = exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -26,6 +28,28 @@ var pluginKey = exports.pluginKey = new _state.PluginKey('layoutResizingPlugin')
  * (e.g. setting flex-basis to give real-time visual feedback without dispatching
  * PM transactions) are not "corrected" back by ProseMirror's DOM reconciliation.
  */
+var isLayoutElementLike = function isLayoutElementLike(element) {
+  if ((0, _coreUtils.isSSR)() && (0, _coreUtils.isSSRStreaming)()) {
+    // In SSR environments, `HTMLElement` is undefined globally so a plain
+    // `instanceof HTMLElement` check is always `false`. That makes the
+    // `DOMSerializer.renderSpec(...)` result get rejected by the guard below and
+    // the NodeView falls back to a bare `<div>`, losing every schema-defined
+    // attribute (`data-layout-column`, `style="flex-basis:..."`,
+    // `data-column-width`, plus the inner `<div data-layout-content="true">`
+    // wrapper) and breaking the layout's flex sizing in SSR output.
+    //
+    // To unblock SSR streaming without changing CSR semantics, we gate the check:
+    // - In SSR (and only when `platform_editor_editor_ssr_streaming` is enabled),
+    //   use a duck-typed check that mirrors `safe-plugin`'s `isHTMLElement`.
+    // - Everywhere else, keep the original `instanceof HTMLElement` check exactly
+    //   as it was so we don't accidentally widen acceptance in CSR.
+    if (element === null || element === undefined) {
+      return false;
+    }
+    return (0, _typeof2.default)(element) === 'object' && 'innerHTML' in element && 'style' in element && 'classList' in element;
+  }
+  return element instanceof HTMLElement;
+};
 var LayoutColumnView = /*#__PURE__*/function () {
   function LayoutColumnView(node, view, getPos) {
     (0, _classCallCheck2.default)(this, LayoutColumnView);
@@ -43,7 +67,7 @@ var LayoutColumnView = /*#__PURE__*/function () {
     var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, nodeType.spec.toDOM(node)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
-    if (!(dom instanceof HTMLElement) || !(contentDOM instanceof HTMLElement)) {
+    if (!isLayoutElementLike(dom) || !isLayoutElementLike(contentDOM)) {
       var _fallbackDiv = document.createElement('div');
       this.dom = _fallbackDiv;
       this.contentDOM = _fallbackDiv;
@@ -71,7 +95,7 @@ var LayoutColumnView = /*#__PURE__*/function () {
     }
   }]);
 }();
-var _default = exports.default = function _default(options, pluginInjectionApi, portalProviderAPI, eventDispatcher) {
+var _default = exports.default = function _default(options, pluginInjectionApi, portalProviderAPI, eventDispatcher, intl) {
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     props: {
@@ -84,10 +108,11 @@ var _default = exports.default = function _default(options, pluginInjectionApi,
             portalProviderAPI: portalProviderAPI,
             eventDispatcher: eventDispatcher,
             pluginInjectionApi: pluginInjectionApi,
-            options: options
+            options: options,
+            intl: intl
           }).init();
         }
-      }, (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) ? {
+      }, (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) || (0, _coreUtils.isSSR)() && (0, _coreUtils.isSSRStreaming)() ? {
         layoutColumn: function layoutColumn(node, view, getPos) {
           return new LayoutColumnView(node, view, getPos);
         }

package/dist/cjs/ui/LayoutSSRReactContextsProvider.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutSSRReactContextsProvider = LayoutSSRReactContextsProvider;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+/**
+ * Wraps the layout section nodeview children with the editor's actual
+ * IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
+ * descendants that call `useIntl()` (e.g. `BreakoutResizer`'s ARIA labels)
+ * 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` and
+ * `SyncBlockSSRReactContextsProvider`.
+ */
+function LayoutSSRReactContextsProvider(_ref) {
+  var children = _ref.children,
+    intl = _ref.intl;
+  if (!(0, _coreUtils.isSSRStreaming)() || !(0, _coreUtils.isSSR)()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactIntl.RawIntlProvider, {
+    value: intl
+  }, children);
+}

package/dist/es2019/layoutPlugin.js

@@ -106,8 +106,9 @@ export const layoutPlugin = ({
           name: 'layoutResizing',
           plugin: ({
             portalProviderAPI,
-            eventDispatcher
-          }) => createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher)
+            eventDispatcher,
+            getIntl
+          }) => createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher, getIntl())
         });
       }
       return plugins;

package/dist/es2019/nodeviews/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -8,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
+import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
 const layoutDynamicFullWidthGuidelineOffset = 16;
 const isEmptyParagraph = node => {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
@@ -122,12 +124,14 @@ export class LayoutSectionView extends ReactNodeView {
    * @param props.eventDispatcher
    * @param props.pluginInjectionApi
    * @param props.options
+   * @param props.intl
    * @example
    */
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
     this.isEmpty = isEmptyLayout(this.node);
     this.options = props.options;
+    this.intl = props.intl;
   }
 
   /**
@@ -136,6 +140,13 @@ export class LayoutSectionView extends ReactNodeView {
    * @returns
    */
   getContentDOM() {
+    // Build the layout DOM via the schema's toDOM spec. This is the same
+    // path used in both CSR and SSR — the only SSR-specific concern is
+    // re-attaching `contentDOM` (= the `[data-layout-section]` element)
+    // after the portal's renderToStaticMarkup + innerHTML write detaches
+    // it. We handle that by stamping `data-ssr-content-dom-ref` on the
+    // outer container so `ReactNodeView.init()` can find a re-attach
+    // target inside `domRef` after the portal write.
     const {
       dom: container,
       contentDOM
@@ -149,6 +160,20 @@ export class LayoutSectionView extends ReactNodeView {
     if (fg('platform_editor_adf_with_localid')) {
       this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
     }
+
+    // SSR streaming re-attach note:
+    // In SSR, `init()` appends `container` into `domRef`; the portal's
+    // renderToStaticMarkup + innerHTML write then wipes `domRef`,
+    // detaching the entire subtree (with PM-serialized children inside
+    // `[data-layout-section]`). React's `render()` emits a
+    // `<NodeViewContentHole/>` placeholder inside `domRef`; the SSR
+    // re-attach logic in `init()` finds it via `[data-ssr-content-dom-ref]`
+    // and calls `_handleRef`, which appends `contentDOMWrapper` (the
+    // detached `container`) back inside the placeholder. The end result
+    // is `domRef > NodeViewContentHole > layout-section-container >
+    // [data-layout-section] > [data-layout-column] children` — the
+    // layout DOM contract is preserved.
+
     return {
       dom: container,
       contentDOM
@@ -179,6 +204,29 @@ export class LayoutSectionView extends ReactNodeView {
     if (this.layoutDOM) {
       this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
     }
+
+    // SSR streaming path: render only a `<NodeViewContentHole/>` placeholder
+    // so ReactNodeView.init()'s SSR re-attach logic can find the marker
+    // (`data-ssr-content-dom-ref`) and re-append the detached
+    // contentDOMWrapper — which is the FULL layout structure
+    // (`layout-section-container > [data-layout-section] > children`) built
+    // in `getContentDOM` via DOMSerializer.renderSpec. This avoids
+    // duplicating layout structure between getContentDOM and render(), which
+    // previously caused an extra wrapping div between `[data-layout-section]`
+    // and the `[data-layout-column]` children and broke the flex layout.
+    //
+    // The BreakoutResizer is intentionally omitted in SSR — it relies on
+    // browser-only APIs and contributes no useful static markup. The
+    // LayoutSSRReactContextsProvider wraps the placeholder to inject the
+    // editor's IntlShape, defending against any descendants that call
+    // `useIntl()` during renderToStaticMarkup.
+    if (isSSR() && isSSRStreaming()) {
+      return /*#__PURE__*/React.createElement(LayoutSSRReactContextsProvider, {
+        intl: this.intl
+      }, /*#__PURE__*/React.createElement(NodeViewContentHole, {
+        ref: forwardRef
+      }));
+    }
     if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
       return null;
     }

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

@@ -1,3 +1,4 @@
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -14,6 +15,28 @@ export const pluginKey = new PluginKey('layoutResizingPlugin');
  * (e.g. setting flex-basis to give real-time visual feedback without dispatching
  * PM transactions) are not "corrected" back by ProseMirror's DOM reconciliation.
  */
+const isLayoutElementLike = element => {
+  if (isSSR() && isSSRStreaming()) {
+    // In SSR environments, `HTMLElement` is undefined globally so a plain
+    // `instanceof HTMLElement` check is always `false`. That makes the
+    // `DOMSerializer.renderSpec(...)` result get rejected by the guard below and
+    // the NodeView falls back to a bare `<div>`, losing every schema-defined
+    // attribute (`data-layout-column`, `style="flex-basis:..."`,
+    // `data-column-width`, plus the inner `<div data-layout-content="true">`
+    // wrapper) and breaking the layout's flex sizing in SSR output.
+    //
+    // To unblock SSR streaming without changing CSR semantics, we gate the check:
+    // - In SSR (and only when `platform_editor_editor_ssr_streaming` is enabled),
+    //   use a duck-typed check that mirrors `safe-plugin`'s `isHTMLElement`.
+    // - Everywhere else, keep the original `instanceof HTMLElement` check exactly
+    //   as it was so we don't accidentally widen acceptance in CSR.
+    if (element === null || element === undefined) {
+      return false;
+    }
+    return typeof element === 'object' && 'innerHTML' in element && 'style' in element && 'classList' in element;
+  }
+  return element instanceof HTMLElement;
+};
 class LayoutColumnView {
   constructor(node, view, getPos) {
     // Use the NodeSpec's own toDOM to produce the correct DOM structure and attributes.
@@ -31,7 +54,7 @@ class LayoutColumnView {
       dom,
       contentDOM
     } = DOMSerializer.renderSpec(document, nodeType.spec.toDOM(node));
-    if (!(dom instanceof HTMLElement) || !(contentDOM instanceof HTMLElement)) {
+    if (!isLayoutElementLike(dom) || !isLayoutElementLike(contentDOM)) {
       const fallbackDiv = document.createElement('div');
       this.dom = fallbackDiv;
       this.contentDOM = fallbackDiv;
@@ -56,7 +79,7 @@ class LayoutColumnView {
     return mutation.type === 'attributes' && mutation.attributeName === 'style';
   }
 }
-export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher) => new SafePlugin({
+export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher, intl) => new SafePlugin({
   key: pluginKey,
   props: {
     nodeViews: {
@@ -68,13 +91,20 @@ export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher
           portalProviderAPI,
           eventDispatcher,
           pluginInjectionApi,
-          options
+          options,
+          intl
         }).init();
       },
-      // Only register the column node view when the resize handle experiment is on.
-      // It exists solely to suppress style-attribute MutationObserver callbacks
-      // during drag, allowing direct flex-basis writes without PM interference.
-      ...(editorExperiment('platform_editor_layout_column_resize_handle', true) ? {
+      // Register the column node view when EITHER:
+      // 1. The resize handle experiment is on (its original purpose:
+      //    suppress style-attribute MutationObserver callbacks during
+      //    drag, allowing direct flex-basis writes without PM
+      //    interference).
+      // 2. SSR streaming is enabled — the column node view stamps
+      //    `container-type: inline-size` inline on each column dom so
+      //    that the SSR-rendered table inside the column constrains
+      //    its width to the column (see comment in the constructor).
+      ...(editorExperiment('platform_editor_layout_column_resize_handle', true) || isSSR() && isSSRStreaming() ? {
         layoutColumn: (node, view, getPos) => new LayoutColumnView(node, view, getPos)
       } : {})
     }

package/dist/es2019/ui/LayoutSSRReactContextsProvider.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RawIntlProvider } from 'react-intl';
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+/**
+ * Wraps the layout section nodeview children with the editor's actual
+ * IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
+ * descendants that call `useIntl()` (e.g. `BreakoutResizer`'s ARIA labels)
+ * 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` and
+ * `SyncBlockSSRReactContextsProvider`.
+ */
+export function LayoutSSRReactContextsProvider({
+  children,
+  intl
+}) {
+  if (!isSSRStreaming() || !isSSR()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(RawIntlProvider, {
+    value: intl
+  }, children);
+}

package/dist/esm/layoutPlugin.js

@@ -107,8 +107,9 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           name: 'layoutResizing',
           plugin: function plugin(_ref2) {
             var portalProviderAPI = _ref2.portalProviderAPI,
-              eventDispatcher = _ref2.eventDispatcher;
-            return createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher);
+              eventDispatcher = _ref2.eventDispatcher,
+              getIntl = _ref2.getIntl;
+            return createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher, getIntl());
           }
         });
       }

package/dist/esm/nodeviews/index.js

@@ -9,8 +9,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback } from 'react';
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -18,6 +19,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
+import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
 var layoutDynamicFullWidthGuidelineOffset = 16;
 var isEmptyParagraph = function isEmptyParagraph(node) {
   return !!node && node.type.name === 'paragraph' && !node.childCount;
@@ -131,6 +133,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
    * @param props.eventDispatcher
    * @param props.pluginInjectionApi
    * @param props.options
+   * @param props.intl
    * @example
    */
   function LayoutSectionView(props) {
@@ -139,6 +142,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
     _this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.isEmpty = isEmptyLayout(_this.node);
     _this.options = props.options;
+    _this.intl = props.intl;
     return _this;
   }
 
@@ -151,6 +155,13 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
   return _createClass(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
+      // Build the layout DOM via the schema's toDOM spec. This is the same
+      // path used in both CSR and SSR — the only SSR-specific concern is
+      // re-attaching `contentDOM` (= the `[data-layout-section]` element)
+      // after the portal's renderToStaticMarkup + innerHTML write detaches
+      // it. We handle that by stamping `data-ssr-content-dom-ref` on the
+      // outer container so `ReactNodeView.init()` can find a re-attach
+      // target inside `domRef` after the portal write.
       var _ref2 = DOMSerializer.renderSpec(document, toDOM(this.node)),
         container = _ref2.dom,
         contentDOM = _ref2.contentDOM;
@@ -163,6 +174,20 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
       if (fg('platform_editor_adf_with_localid')) {
         this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
       }
+
+      // SSR streaming re-attach note:
+      // In SSR, `init()` appends `container` into `domRef`; the portal's
+      // renderToStaticMarkup + innerHTML write then wipes `domRef`,
+      // detaching the entire subtree (with PM-serialized children inside
+      // `[data-layout-section]`). React's `render()` emits a
+      // `<NodeViewContentHole/>` placeholder inside `domRef`; the SSR
+      // re-attach logic in `init()` finds it via `[data-ssr-content-dom-ref]`
+      // and calls `_handleRef`, which appends `contentDOMWrapper` (the
+      // detached `container`) back inside the placeholder. The end result
+      // is `domRef > NodeViewContentHole > layout-section-container >
+      // [data-layout-section] > [data-layout-column] children` — the
+      // layout DOM contract is preserved.
+
       return {
         dom: container,
         contentDOM: contentDOM
@@ -197,6 +222,29 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
       if (this.layoutDOM) {
         this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
       }
+
+      // SSR streaming path: render only a `<NodeViewContentHole/>` placeholder
+      // so ReactNodeView.init()'s SSR re-attach logic can find the marker
+      // (`data-ssr-content-dom-ref`) and re-append the detached
+      // contentDOMWrapper — which is the FULL layout structure
+      // (`layout-section-container > [data-layout-section] > children`) built
+      // in `getContentDOM` via DOMSerializer.renderSpec. This avoids
+      // duplicating layout structure between getContentDOM and render(), which
+      // previously caused an extra wrapping div between `[data-layout-section]`
+      // and the `[data-layout-column]` children and broke the flex layout.
+      //
+      // The BreakoutResizer is intentionally omitted in SSR — it relies on
+      // browser-only APIs and contributes no useful static markup. The
+      // LayoutSSRReactContextsProvider wraps the placeholder to inject the
+      // editor's IntlShape, defending against any descendants that call
+      // `useIntl()` during renderToStaticMarkup.
+      if (isSSR() && isSSRStreaming()) {
+        return /*#__PURE__*/React.createElement(LayoutSSRReactContextsProvider, {
+          intl: this.intl
+        }, /*#__PURE__*/React.createElement(NodeViewContentHole, {
+          ref: forwardRef
+        }));
+      }
       if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
         return null;
       }

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

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _typeof from "@babel/runtime/helpers/typeof";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -19,6 +21,28 @@ export var pluginKey = new PluginKey('layoutResizingPlugin');
  * (e.g. setting flex-basis to give real-time visual feedback without dispatching
  * PM transactions) are not "corrected" back by ProseMirror's DOM reconciliation.
  */
+var isLayoutElementLike = function isLayoutElementLike(element) {
+  if (isSSR() && isSSRStreaming()) {
+    // In SSR environments, `HTMLElement` is undefined globally so a plain
+    // `instanceof HTMLElement` check is always `false`. That makes the
+    // `DOMSerializer.renderSpec(...)` result get rejected by the guard below and
+    // the NodeView falls back to a bare `<div>`, losing every schema-defined
+    // attribute (`data-layout-column`, `style="flex-basis:..."`,
+    // `data-column-width`, plus the inner `<div data-layout-content="true">`
+    // wrapper) and breaking the layout's flex sizing in SSR output.
+    //
+    // To unblock SSR streaming without changing CSR semantics, we gate the check:
+    // - In SSR (and only when `platform_editor_editor_ssr_streaming` is enabled),
+    //   use a duck-typed check that mirrors `safe-plugin`'s `isHTMLElement`.
+    // - Everywhere else, keep the original `instanceof HTMLElement` check exactly
+    //   as it was so we don't accidentally widen acceptance in CSR.
+    if (element === null || element === undefined) {
+      return false;
+    }
+    return _typeof(element) === 'object' && 'innerHTML' in element && 'style' in element && 'classList' in element;
+  }
+  return element instanceof HTMLElement;
+};
 var LayoutColumnView = /*#__PURE__*/function () {
   function LayoutColumnView(node, view, getPos) {
     _classCallCheck(this, LayoutColumnView);
@@ -36,7 +60,7 @@ var LayoutColumnView = /*#__PURE__*/function () {
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, nodeType.spec.toDOM(node)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
-    if (!(dom instanceof HTMLElement) || !(contentDOM instanceof HTMLElement)) {
+    if (!isLayoutElementLike(dom) || !isLayoutElementLike(contentDOM)) {
       var _fallbackDiv = document.createElement('div');
       this.dom = _fallbackDiv;
       this.contentDOM = _fallbackDiv;
@@ -64,7 +88,7 @@ var LayoutColumnView = /*#__PURE__*/function () {
     }
   }]);
 }();
-export default (function (options, pluginInjectionApi, portalProviderAPI, eventDispatcher) {
+export default (function (options, pluginInjectionApi, portalProviderAPI, eventDispatcher, intl) {
   return new SafePlugin({
     key: pluginKey,
     props: {
@@ -77,10 +101,11 @@ export default (function (options, pluginInjectionApi, portalProviderAPI, eventD
             portalProviderAPI: portalProviderAPI,
             eventDispatcher: eventDispatcher,
             pluginInjectionApi: pluginInjectionApi,
-            options: options
+            options: options,
+            intl: intl
           }).init();
         }
-      }, editorExperiment('platform_editor_layout_column_resize_handle', true) ? {
+      }, editorExperiment('platform_editor_layout_column_resize_handle', true) || isSSR() && isSSRStreaming() ? {
         layoutColumn: function layoutColumn(node, view, getPos) {
           return new LayoutColumnView(node, view, getPos);
         }

package/dist/esm/ui/LayoutSSRReactContextsProvider.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { RawIntlProvider } from 'react-intl';
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+/**
+ * Wraps the layout section nodeview children with the editor's actual
+ * IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
+ * descendants that call `useIntl()` (e.g. `BreakoutResizer`'s ARIA labels)
+ * 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` and
+ * `SyncBlockSSRReactContextsProvider`.
+ */
+export function LayoutSSRReactContextsProvider(_ref) {
+  var children = _ref.children,
+    intl = _ref.intl;
+  if (!isSSRStreaming() || !isSSR()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(RawIntlProvider, {
+    value: intl
+  }, children);
+}

package/dist/types/nodeviews/index.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';
@@ -10,6 +11,7 @@ import type { LayoutPluginOptions } from '../types';
 type LayoutSectionViewProps = {
     eventDispatcher: EventDispatcher;
     getPos: getPosHandlerNode;
+    intl?: IntlShape;
     node: PMNode;
     options: LayoutPluginOptions;
     pluginInjectionApi?: ExtractInjectionAPI<LayoutPlugin>;
@@ -24,6 +26,7 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
     options: LayoutPluginOptions;
     layoutDOM?: HTMLElement;
     isEmpty?: boolean;
+    private intl?;
     /**
      * constructor
      * @param props
@@ -34,11 +37,13 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
      * @param props.eventDispatcher
      * @param props.pluginInjectionApi
      * @param props.options
+     * @param props.intl
      * @example
      */
     constructor(props: {
         eventDispatcher: EventDispatcher;
         getPos: getPosHandlerNode;
+        intl?: IntlShape;
         node: PMNode;
         options: LayoutPluginOptions;
         pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>;

package/dist/types/pm-plugins/resizing.d.ts

@@ -1,3 +1,4 @@
+import type { IntlShape } from 'react-intl';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -6,5 +7,5 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from '../layoutPluginType';
 import type { LayoutPluginOptions } from '../types';
 export declare const pluginKey: PluginKey;
-declare const _default: (options: LayoutPluginOptions, pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher) => SafePlugin<undefined>;
+declare const _default: (options: LayoutPluginOptions, pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, intl?: IntlShape) => SafePlugin<undefined>;
 export default _default;

package/dist/types/ui/LayoutSSRReactContextsProvider.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 the layout section nodeview children with the editor's actual
+ * IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
+ * descendants that call `useIntl()` (e.g. `BreakoutResizer`'s ARIA labels)
+ * 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` and
+ * `SyncBlockSSRReactContextsProvider`.
+ */
+export declare function LayoutSSRReactContextsProvider({ children, intl }: Props): ReactNode;
+export {};

package/dist/types-ts4.5/nodeviews/index.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';
@@ -10,6 +11,7 @@ import type { LayoutPluginOptions } from '../types';
 type LayoutSectionViewProps = {
     eventDispatcher: EventDispatcher;
     getPos: getPosHandlerNode;
+    intl?: IntlShape;
     node: PMNode;
     options: LayoutPluginOptions;
     pluginInjectionApi?: ExtractInjectionAPI<LayoutPlugin>;
@@ -24,6 +26,7 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
     options: LayoutPluginOptions;
     layoutDOM?: HTMLElement;
     isEmpty?: boolean;
+    private intl?;
     /**
      * constructor
      * @param props
@@ -34,11 +37,13 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
      * @param props.eventDispatcher
      * @param props.pluginInjectionApi
      * @param props.options
+     * @param props.intl
      * @example
      */
     constructor(props: {
         eventDispatcher: EventDispatcher;
         getPos: getPosHandlerNode;
+        intl?: IntlShape;
         node: PMNode;
         options: LayoutPluginOptions;
         pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>;

package/dist/types-ts4.5/pm-plugins/resizing.d.ts

@@ -1,3 +1,4 @@
+import type { IntlShape } from 'react-intl';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -6,5 +7,5 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from '../layoutPluginType';
 import type { LayoutPluginOptions } from '../types';
 export declare const pluginKey: PluginKey;
-declare const _default: (options: LayoutPluginOptions, pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher) => SafePlugin<undefined>;
+declare const _default: (options: LayoutPluginOptions, pluginInjectionApi: ExtractInjectionAPI<LayoutPlugin>, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, intl?: IntlShape) => SafePlugin<undefined>;
 export default _default;

package/dist/types-ts4.5/ui/LayoutSSRReactContextsProvider.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 the layout section nodeview children with the editor's actual
+ * IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
+ * descendants that call `useIntl()` (e.g. `BreakoutResizer`'s ARIA labels)
+ * 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` and
+ * `SyncBlockSSRReactContextsProvider`.
+ */
+export declare function LayoutSSRReactContextsProvider({ children, intl }: Props): ReactNode;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "11.0.3",
+	"version": "11.0.4",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,14 +50,14 @@
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/icon-lab": "^6.13.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^89.0.0",
-		"@atlaskit/tokens": "^13.1.0",
+		"@atlaskit/tmp-editor-statsig": "^89.4.0",
+		"@atlaskit/tokens": "^13.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.3.0",
+		"@atlaskit/editor-common": "^115.6.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},