@atlaskit/editor-plugin-layout 11.0.2 → 11.0.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- [`795424ce08dae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/795424ce08dae) -
+  Add analytics for layout column resizing
+- Updated dependencies
+
 ## 11.0.2
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -57,7 +57,7 @@ var selectIntoLayoutSection = exports.selectIntoLayoutSection = function selectI
   return tr;
 };
 var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
-  var _api$analytics, _api$analytics4;
+  var _api$analytics2, _api$analytics5;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -105,7 +105,8 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       var plugins = [{
         name: 'layout',
         plugin: function plugin() {
-          return (0, _main.default)(options);
+          var _api$analytics;
+          return (0, _main.default)(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
       if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true)) && api && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
@@ -113,15 +114,16 @@ 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());
           }
         });
       }
       return plugins;
     },
     actions: {
-      insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+      insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
@@ -143,8 +145,8 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       quickInsert: function quickInsert(_ref3) {
         var formatMessage = _ref3.formatMessage;
         var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
-          var _api$analytics2;
-          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
+          var _api$analytics3;
+          api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.attachAnalyticsEvent({
             action: _analytics.ACTION.INSERTED,
             actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
@@ -340,9 +342,9 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconLayout, null);
             },
             action: function action(insert, state) {
-              var _api$analytics3;
+              var _api$analytics4;
               var tr = insert((0, _actions.createDefaultLayoutSection)(state));
-              api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.attachAnalyticsEvent({
+              api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || (_api$analytics4 = _api$analytics4.actions) === null || _api$analytics4 === void 0 || _api$analytics4.attachAnalyticsEvent({
                 action: _analytics.ACTION.INSERTED,
                 actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
                 actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
@@ -377,18 +379,18 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       return _pluginKey.pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api),
+      deleteLayoutColumn: (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
       distributeLayoutColumns: function distributeLayoutColumns(options) {
-        var _api$analytics5;
-        return (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api)(options);
+        var _api$analytics6;
+        return (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
       },
       insertLayoutColumn: function insertLayoutColumn(side) {
-        var _api$analytics6;
-        return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api);
+        var _api$analytics7;
+        return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
       },
       setLayoutColumnValign: function setLayoutColumnValign(valign) {
-        var _api$analytics7;
-        return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
+        var _api$analytics8;
+        return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
       },
       toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
     }

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/column-resize-divider.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getColumnDividerDecorations = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bindEventListener = require("bind-event-listener");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("./consts");
 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) { (0, _defineProperty2.default)(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; }
@@ -24,7 +26,7 @@ var dragState = null;
  * Dispatches a single undoable ProseMirror transaction to commit the final
  * column widths after a drag completes.
  */
-var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftColIndex, leftWidth, rightWidth) {
+var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftColIndex, leftWidth, rightWidth, editorAnalyticsAPI) {
   var state = view.state;
   var sectionNode = state.doc.nodeAt(sectionPos);
   if (!sectionNode) {
@@ -51,6 +53,21 @@ var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftC
   tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, _model.Fragment.from(newColumns));
   tr.setMeta('layoutColumnResize', true);
   tr.setMeta('scrollIntoView', false);
+  if ((0, _platformFeatureFlags.fg)('platform_editor_layout_resize_analytics')) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: _analytics.ACTION.DRAGGED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        columnCount: sectionNode.childCount,
+        leftColumnIndex: leftColIndex,
+        leftColumnWidth: Number(leftWidth.toFixed(2)),
+        rightColumnWidth: Number(rightWidth.toFixed(2)),
+        inputMethod: _analytics.INPUT_METHOD.DRAG
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+  }
   view.dispatch(tr);
 };
 
@@ -152,7 +169,8 @@ var onDragEnd = function onDragEnd(clientX) {
     rafId = _dragState2.rafId,
     startLeftWidth = _dragState2.startLeftWidth,
     startRightWidth = _dragState2.startRightWidth,
-    unbindListeners = _dragState2.unbindListeners;
+    unbindListeners = _dragState2.unbindListeners,
+    editorAnalyticsAPI = _dragState2.editorAnalyticsAPI;
   unbindListeners();
 
   // Cancel any pending rAF so a stale frame doesn't write styles after teardown.
@@ -175,7 +193,7 @@ var onDragEnd = function onDragEnd(clientX) {
   leftColEl.style.flexBasis = '';
   rightColEl.style.flexBasis = '';
   if (widths && (widths.leftWidth !== startLeftWidth || widths.rightWidth !== startRightWidth)) {
-    dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth);
+    dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth, editorAnalyticsAPI);
   }
 };
 var onDragMouseUp = function onDragMouseUp(e) {
@@ -202,8 +220,7 @@ var onDragCancel = function onDragCancel() {
  * column DOM elements for zero-overhead visual feedback (no PM transactions).
  * A single undoable PM transaction is dispatched on mouseup to commit the final widths.
  */
-var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex // index of the column to the RIGHT of this divider
-) {
+var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex, editorAnalyticsAPI) {
   var ownerDoc = view.dom.ownerDocument;
 
   // Outer container: wide transparent hit area for easy grabbing, zero flex footprint
@@ -298,6 +315,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
       var totalGap = childCount > 1 ? computedGap * (childCount - 1) : 0;
       var columnsWidth = sectionRect.width - dividersWidth - totalGap;
       dragState = {
+        editorAnalyticsAPI: editorAnalyticsAPI,
         hasDragged: false,
         lastClientX: e.clientX,
         rafId: null,
@@ -329,7 +347,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
  * Returns ProseMirror Decoration widgets for column dividers between layout columns.
  * Each divider supports drag-to-resize interaction for the adjacent columns.
  */
-var getColumnDividerDecorations = exports.getColumnDividerDecorations = function getColumnDividerDecorations(state, view) {
+var getColumnDividerDecorations = exports.getColumnDividerDecorations = function getColumnDividerDecorations(state, view, editorAnalyticsAPI) {
   var decorations = [];
   if (!view) {
     return decorations;
@@ -345,7 +363,7 @@ var getColumnDividerDecorations = exports.getColumnDividerDecorations = function
           var colIndex = index;
           var widgetPos = pos + offset + 1; // position at the start of this column
           decorations.push(_view.Decoration.widget(widgetPos, function () {
-            return createColumnDividerWidget(view, sectionPos, colIndex);
+            return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI);
           }, {
             side: -1,
             // place before the position

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

@@ -102,7 +102,7 @@ var handleDeleteLayoutColumn = function handleDeleteLayoutColumn(state, dispatch
   }
   return false;
 };
-var _default = exports.default = function _default(options) {
+var _default = exports.default = function _default(options, editorAnalyticsAPI) {
   // Store a reference to the EditorView so widget decorations can dispatch transactions
   var editorViewRef;
   return new _safePlugin.SafePlugin({
@@ -152,7 +152,7 @@ var _default = exports.default = function _default(options) {
         var layoutState = _pluginKey.pluginKey.getState(state);
         var isLayoutResizingPluginAvailable = _resizing.pluginKey.get(state) !== undefined;
         if ((0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
-          var dividerDecorations = (0, _columnResizeDivider.getColumnDividerDecorations)(state, editorViewRef);
+          var dividerDecorations = (0, _columnResizeDivider.getColumnDividerDecorations)(state, editorViewRef, editorAnalyticsAPI);
           var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
           var allDecorations = [].concat((0, _toConsumableArray2.default)(selectedDecorations), (0, _toConsumableArray2.default)(dividerDecorations));
           if (allDecorations.length > 0) {

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

@@ -52,7 +52,7 @@ export const layoutPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$analytics, _api$analytics4;
+  var _api$analytics2, _api$analytics5;
   const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
@@ -96,21 +96,25 @@ export const layoutPlugin = ({
     pmPlugins() {
       const plugins = [{
         name: 'layout',
-        plugin: () => createLayoutPlugin(options)
+        plugin: () => {
+          var _api$analytics;
+          return createLayoutPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        }
       }];
       if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && editorExperiment('platform_editor_layout_column_resize_handle', true)) && api && editorExperiment('advanced_layouts', true)) {
         plugins.push({
           name: 'layoutResizing',
           plugin: ({
             portalProviderAPI,
-            eventDispatcher
-          }) => createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher)
+            eventDispatcher,
+            getIntl
+          }) => createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher, getIntl())
         });
       }
       return plugins;
     },
     actions: {
-      insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+      insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     pluginsOptions: {
       floatingToolbar(state, intl) {
@@ -135,8 +139,8 @@ export const layoutPlugin = ({
         formatMessage
       }) => {
         const withInsertLayoutAnalytics = (tr, columnCount) => {
-          var _api$analytics2, _api$analytics2$actio;
-          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent({
+          var _api$analytics3, _api$analytics3$actio;
+          api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
@@ -311,9 +315,9 @@ export const layoutPlugin = ({
             priority: 1100,
             icon: () => /*#__PURE__*/React.createElement(IconLayout, null),
             action(insert, state) {
-              var _api$analytics3, _api$analytics3$actio;
+              var _api$analytics4, _api$analytics4$actio;
               const tr = insert(createDefaultLayoutSection(state));
-              api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.attachAnalyticsEvent({
+              api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : (_api$analytics4$actio = _api$analytics4.actions) === null || _api$analytics4$actio === void 0 ? void 0 : _api$analytics4$actio.attachAnalyticsEvent({
                 action: ACTION.INSERTED,
                 actionSubject: ACTION_SUBJECT.DOCUMENT,
                 actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
@@ -349,18 +353,18 @@ export const layoutPlugin = ({
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api),
+      deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
       distributeLayoutColumns: options => {
-        var _api$analytics5;
-        return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api)(options);
+        var _api$analytics6;
+        return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
       },
       insertLayoutColumn: side => {
-        var _api$analytics6;
-        return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api);
+        var _api$analytics7;
+        return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
       },
       setLayoutColumnValign: valign => {
-        var _api$analytics7;
-        return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
+        var _api$analytics8;
+        return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
       },
       toggleLayoutColumnMenu
     }

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