@atlaskit/editor-plugin-layout 11.0.2 → 11.0.4

package/dist/es2019/pm-plugins/column-resize-divider.js

@@ -1,6 +1,8 @@
 import { bind } from 'bind-event-listener';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 
 // Class names for the column resize divider widget — must stay in sync with layout.ts in editor-core
@@ -15,7 +17,7 @@ let dragState = null;
  * Dispatches a single undoable ProseMirror transaction to commit the final
  * column widths after a drag completes.
  */
-const dispatchColumnWidths = (view, sectionPos, leftColIndex, leftWidth, rightWidth) => {
+const dispatchColumnWidths = (view, sectionPos, leftColIndex, leftWidth, rightWidth, editorAnalyticsAPI) => {
   const {
     state
   } = view;
@@ -47,6 +49,21 @@ const dispatchColumnWidths = (view, sectionPos, leftColIndex, leftWidth, rightWi
   tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, Fragment.from(newColumns));
   tr.setMeta('layoutColumnResize', true);
   tr.setMeta('scrollIntoView', false);
+  if (fg('platform_editor_layout_resize_analytics')) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.DRAGGED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        columnCount: sectionNode.childCount,
+        leftColumnIndex: leftColIndex,
+        leftColumnWidth: Number(leftWidth.toFixed(2)),
+        rightColumnWidth: Number(rightWidth.toFixed(2)),
+        inputMethod: INPUT_METHOD.DRAG
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+  }
   view.dispatch(tr);
 };
 
@@ -149,7 +166,8 @@ const onDragEnd = clientX => {
     rafId,
     startLeftWidth,
     startRightWidth,
-    unbindListeners
+    unbindListeners,
+    editorAnalyticsAPI
   } = dragState;
   unbindListeners();
 
@@ -173,7 +191,7 @@ const 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);
   }
 };
 const onDragMouseUp = e => {
@@ -200,8 +218,7 @@ const 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.
  */
-const createColumnDividerWidget = (view, sectionPos, columnIndex // index of the column to the RIGHT of this divider
-) => {
+const createColumnDividerWidget = (view, sectionPos, columnIndex, editorAnalyticsAPI) => {
   const ownerDoc = view.dom.ownerDocument;
 
   // Outer container: wide transparent hit area for easy grabbing, zero flex footprint
@@ -296,6 +313,7 @@ const createColumnDividerWidget = (view, sectionPos, columnIndex // index of the
       const totalGap = childCount > 1 ? computedGap * (childCount - 1) : 0;
       const columnsWidth = sectionRect.width - dividersWidth - totalGap;
       dragState = {
+        editorAnalyticsAPI,
         hasDragged: false,
         lastClientX: e.clientX,
         rafId: null,
@@ -327,7 +345,7 @@ const createColumnDividerWidget = (view, sectionPos, columnIndex // index of the
  * Returns ProseMirror Decoration widgets for column dividers between layout columns.
  * Each divider supports drag-to-resize interaction for the adjacent columns.
  */
-export const getColumnDividerDecorations = (state, view) => {
+export const getColumnDividerDecorations = (state, view, editorAnalyticsAPI) => {
   const decorations = [];
   if (!view) {
     return decorations;
@@ -344,7 +362,7 @@ export const getColumnDividerDecorations = (state, view) => {
           const sectionPos = pos;
           const colIndex = index;
           const widgetPos = pos + offset + 1; // position at the start of this column
-          decorations.push(Decoration.widget(widgetPos, () => createColumnDividerWidget(view, sectionPos, colIndex), {
+          decorations.push(Decoration.widget(widgetPos, () => createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI), {
             side: -1,
             // place before the position
             key: `layout-col-divider-${pos}-${index}`,

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

@@ -96,7 +96,7 @@ const handleDeleteLayoutColumn = (state, dispatch) => {
   }
   return false;
 };
-export default (options => {
+export default ((options, editorAnalyticsAPI) => {
   // Store a reference to the EditorView so widget decorations can dispatch transactions
   let editorViewRef;
   return new SafePlugin({
@@ -147,7 +147,7 @@ export default (options => {
         const layoutState = pluginKey.getState(state);
         const isLayoutResizingPluginAvailable = layoutResizingPluginKey.get(state) !== undefined;
         if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
-          const dividerDecorations = getColumnDividerDecorations(state, editorViewRef);
+          const dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
           const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
           const allDecorations = [...selectedDecorations, ...dividerDecorations];
           if (allDecorations.length > 0) {

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

@@ -50,7 +50,7 @@ export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
   return tr;
 };
 export var 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;
@@ -98,7 +98,8 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       var plugins = [{
         name: 'layout',
         plugin: function plugin() {
-          return createLayoutPlugin(options);
+          var _api$analytics;
+          return createLayoutPlugin(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' && editorExperiment('platform_editor_layout_column_resize_handle', true)) && api && editorExperiment('advanced_layouts', true)) {
@@ -106,15 +107,16 @@ 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());
           }
         });
       }
       return plugins;
     },
     actions: {
-      insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+      insertLayoutColumns: 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) {
@@ -136,8 +138,8 @@ export var 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: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
@@ -333,9 +335,9 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               return /*#__PURE__*/React.createElement(IconLayout, null);
             },
             action: function action(insert, state) {
-              var _api$analytics3;
+              var _api$analytics4;
               var tr = insert(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: ACTION.INSERTED,
                 actionSubject: ACTION_SUBJECT.DOCUMENT,
                 actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
@@ -370,18 +372,18 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api),
+      deleteLayoutColumn: 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 _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 _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 _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 _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 _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 _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
       },
       toggleLayoutColumnMenu: toggleLayoutColumnMenu
     }

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

@@ -2,8 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { bind } from 'bind-event-listener';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 
 // Class names for the column resize divider widget — must stay in sync with layout.ts in editor-core
@@ -18,7 +20,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) {
@@ -45,6 +47,21 @@ var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftC
   tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, Fragment.from(newColumns));
   tr.setMeta('layoutColumnResize', true);
   tr.setMeta('scrollIntoView', false);
+  if (fg('platform_editor_layout_resize_analytics')) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.DRAGGED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        columnCount: sectionNode.childCount,
+        leftColumnIndex: leftColIndex,
+        leftColumnWidth: Number(leftWidth.toFixed(2)),
+        rightColumnWidth: Number(rightWidth.toFixed(2)),
+        inputMethod: INPUT_METHOD.DRAG
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+  }
   view.dispatch(tr);
 };
 
@@ -146,7 +163,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.
@@ -169,7 +187,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) {
@@ -196,8 +214,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
@@ -292,6 +309,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,
@@ -323,7 +341,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.
  */
-export var getColumnDividerDecorations = function getColumnDividerDecorations(state, view) {
+export var getColumnDividerDecorations = function getColumnDividerDecorations(state, view, editorAnalyticsAPI) {
   var decorations = [];
   if (!view) {
     return decorations;
@@ -339,7 +357,7 @@ export var getColumnDividerDecorations = function getColumnDividerDecorations(st
           var colIndex = index;
           var widgetPos = pos + offset + 1; // position at the start of this column
           decorations.push(Decoration.widget(widgetPos, function () {
-            return createColumnDividerWidget(view, sectionPos, colIndex);
+            return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI);
           }, {
             side: -1,
             // place before the position

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

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

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