@atlaskit/editor-plugin-layout 11.0.3 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-layout
 
+## 11.1.0
+
+### Minor Changes
+
+- [`5182f0ffac22f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5182f0ffac22f) -
+  Add keyboard shortcuts and danger preview to layout column menu actions.
+
+  Fix keyboard navigation in the layout column menu.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

@@ -19,6 +19,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
+var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
@@ -57,7 +58,7 @@ var selectIntoLayoutSection = exports.selectIntoLayoutSection = function selectI
   return tr;
 };
 var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
-  var _api$analytics2, _api$analytics5;
+  var _api$analytics2;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -109,13 +110,24 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           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 ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+        plugins.push({
+          name: 'layoutKeymap',
+          plugin: function plugin() {
+            return (0, _keymap.default)({
+              api: api
+            });
+          }
+        });
+      }
       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)) {
         plugins.push({
           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());
           }
         });
       }
@@ -378,15 +390,19 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       return _pluginKey.pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
+      deleteLayoutColumn: function deleteLayoutColumn(inputMethod) {
+        var _api$analytics5;
+        return (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, inputMethod);
+      },
       distributeLayoutColumns: function distributeLayoutColumns(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) {
+      insertLayoutColumn: function insertLayoutColumn(side, inputMethod) {
         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);
+        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, inputMethod);
       },
+      setLayoutColumnDangerPreview: _actions.setLayoutColumnDangerPreview,
       setLayoutColumnValign: function setLayoutColumnValign(valign) {
         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);

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/actions.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.fixColumnStructure = exports.fixColumnSizes = exports.distributeLayoutColumns = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = exports.LAYOUT_COLUMN_INSERT_META = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
 exports.getEffectiveMaxLayoutColumns = getEffectiveMaxLayoutColumns;
-exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
+exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.setLayoutColumnDangerPreview = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -581,12 +581,13 @@ function getEffectiveMaxLayoutColumns() {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) ? _consts.MAX_LAYOUT_COLUMNS : _consts.MAX_STANDARD_LAYOUT_COLUMNS;
 }
 var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAPI) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref4) {
     var tr = _ref4.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
+    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getLayoutColumnsFromContentSelection)(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -646,7 +647,7 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       attributes: {
         columnCount: redistributedWidths.length,
         endIndex: endIndex,
-        inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod: inputMethod,
         selectedCount: selectedColumnCount,
         side: side,
         startIndex: startIndex
@@ -658,9 +659,10 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
   };
 };
 var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref5) {
     var tr = _ref5.tr;
-    var result = insertLayoutColumnAt(side, editorAnalyticsAPI)({
+    var result = insertLayoutColumnAt(side, editorAnalyticsAPI, inputMethod)({
       tr: tr
     });
     if (result) {
@@ -801,25 +803,43 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
 };
 var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref11) {
   var anchorPos = _ref11.anchorPos,
-    isOpen = _ref11.isOpen;
+    isOpen = _ref11.isOpen,
+    openedViaKeyboard = _ref11.openedViaKeyboard;
   return function (_ref12) {
     var tr = _ref12.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       anchorPos: anchorPos,
-      isOpen: isOpen
+      isOpen: isOpen,
+      openedViaKeyboard: openedViaKeyboard
     });
     tr.setMeta('scrollIntoView', false);
     return tr;
   };
 };
-var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+var setLayoutColumnDangerPreview = exports.setLayoutColumnDangerPreview = function setLayoutColumnDangerPreview(show) {
   return function (_ref13) {
-    var _api$blockControls4;
+    var _selectedLayoutColumn;
     var tr = _ref13.tr;
+    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
+    var positions = show ? (_selectedLayoutColumn = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(function (_ref14) {
+      var pos = _ref14.pos;
+      return pos;
+    })) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : [] : null;
+    tr.setMeta('layoutColumnDangerPreview', positions);
+    tr.setMeta('addToHistory', false);
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
+};
+var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
+  return function (_ref15) {
+    var _api$blockControls4;
+    var tr = _ref15.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
+    var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getLayoutColumnsFromContentSelection)(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -836,7 +856,7 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
         attributes: {
           columnCount: columnCount,
           endIndex: endIndex,
-          inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+          inputMethod: inputMethod,
           selectedCount: selectedLayoutColumns.length,
           startIndex: startIndex
         },

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _actions = require("./actions");
+var bindLayoutColumnShortcut = function bindLayoutColumnShortcut(shortcut, command, list) {
+  if (!shortcut) {
+    return;
+  }
+  (0, _keymaps.bindKeymapWithEditorCommand)(shortcut, command, list);
+};
+
+/**
+ * Creates shortcut handlers for layout column actions.
+ */
+function keymapPlugin(_ref) {
+  var _api$analytics, _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
+  var api = _ref.api;
+  var list = {};
+  bindLayoutColumnShortcut(_keymaps.addColumnBefore.common, (0, _actions.insertLayoutColumn)('left', api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnBeforeVO.common, (0, _actions.insertLayoutColumn)('left', api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnAfter.common, (0, _actions.insertLayoutColumn)('right', api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnAfterVO.common, (0, _actions.insertLayoutColumn)('right', api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.deleteColumn.common, (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  return (0, _keymaps.keymap)(list);
+}
+var _default = exports.default = keymapPlugin;

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

@@ -59,6 +59,18 @@ var getNodeDecoration = function getNodeDecoration(pos, node) {
     class: 'selected'
   })];
 };
+var getDangerPreviewDecorations = function getDangerPreviewDecorations(state, positions) {
+  var _positions$flatMap;
+  return (_positions$flatMap = positions === null || positions === void 0 ? void 0 : positions.flatMap(function (pos) {
+    var node = state.doc.nodeAt(pos);
+    if (!node) {
+      return [];
+    }
+    return [_view2.Decoration.node(pos, pos + node.nodeSize, {
+      class: 'layout-column-danger-preview'
+    })];
+  })) !== null && _positions$flatMap !== void 0 ? _positions$flatMap : [];
+};
 var getInitialPluginState = function getInitialPluginState(options, state) {
   var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(state);
   var allowBreakout = options.allowBreakout || false;
@@ -74,9 +86,52 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowSingleColumnLayout: allowSingleColumnLayout,
     isResizing: false,
     isLayoutColumnMenuOpen: false,
-    layoutColumnMenuAnchorPos: undefined
+    layoutColumnMenuOpenedViaKeyboard: false,
+    layoutColumnMenuAnchorPos: undefined,
+    dangerPreviewLayoutColumnPositions: undefined
   };
 };
+var reduceLayoutColumnMenuState = function reduceLayoutColumnMenuState(pluginState, action) {
+  switch (action.type) {
+    case 'toggleLayoutColumnMenu':
+      {
+        var _action$meta = action.meta,
+          anchorPos = _action$meta.anchorPos,
+          isOpen = _action$meta.isOpen,
+          openedViaKeyboard = _action$meta.openedViaKeyboard;
+        var nextIsOpen = isOpen !== null && isOpen !== void 0 ? isOpen : !pluginState.isLayoutColumnMenuOpen;
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          isLayoutColumnMenuOpen: nextIsOpen,
+          layoutColumnMenuOpenedViaKeyboard: nextIsOpen ? openedViaKeyboard !== null && openedViaKeyboard !== void 0 ? openedViaKeyboard : false : false,
+          layoutColumnMenuAnchorPos: nextIsOpen ? anchorPos : undefined,
+          dangerPreviewLayoutColumnPositions: nextIsOpen ? pluginState.dangerPreviewLayoutColumnPositions : undefined
+        });
+      }
+    case 'setDangerPreview':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        dangerPreviewLayoutColumnPositions: action.positions
+      });
+    case 'clearDangerPreview':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        dangerPreviewLayoutColumnPositions: undefined
+      });
+    case 'setResizeState':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isResizing: action.isResizing
+      });
+    case 'syncSelectionState':
+      {
+        var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(action.state);
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+          selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node,
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          pluginState.selectedLayout)
+        });
+      }
+  }
+};
 
 // To prevent a single-column layout,
 // if a user attempts to delete a layout column and
@@ -123,28 +178,39 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
         return getInitialPluginState(options, state);
       },
       apply: function apply(tr, pluginState, oldState, newState) {
-        var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
+        var _tr$getMeta, _pluginKey$getState;
+        var nextPluginState = pluginState;
         var columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
-        var nextPluginState = columnMenuMeta ? _objectSpread(_objectSpread({}, pluginState), {}, {
-          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen,
-          layoutColumnMenuAnchorPos: columnMenuMeta.isOpen === false ? undefined : columnMenuMeta.anchorPos
-        }) : pluginState;
+        var dangerPreviewMeta = tr.getMeta('layoutColumnDangerPreview');
+        if (columnMenuMeta) {
+          nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+            meta: columnMenuMeta,
+            type: 'toggleLayoutColumnMenu'
+          });
+        }
+        if (tr.getMeta('layoutColumnDangerPreview') !== undefined) {
+          nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+            positions: dangerPreviewMeta !== null && dangerPreviewMeta !== void 0 ? dangerPreviewMeta : undefined,
+            type: 'setDangerPreview'
+          });
+        }
+        if (tr.docChanged) {
+          nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+            type: 'clearDangerPreview'
+          });
+        }
         var isResizing = (0, _experiments.editorExperiment)('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = _pluginKey.pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
+        nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
+          isResizing: isResizing,
+          type: 'setResizeState'
+        });
         if (tr.docChanged || tr.selectionSet) {
-          var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(newState);
-          var newPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
-            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
-            isResizing: isResizing,
-            selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            pluginState.selectedLayout)
+          return reduceLayoutColumnMenuState(nextPluginState, {
+            state: newState,
+            type: 'syncSelectionState'
           });
-          return newPluginState;
         }
-        return _objectSpread(_objectSpread({}, nextPluginState), {}, {
-          isResizing: isResizing
-        });
+        return nextPluginState;
       }
     },
     props: {
@@ -154,14 +220,17 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
         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, 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));
+          var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+          var allDecorations = [].concat((0, _toConsumableArray2.default)(selectedDecorations), (0, _toConsumableArray2.default)(dividerDecorations), (0, _toConsumableArray2.default)(_dangerPreviewDecorations));
           if (allDecorations.length > 0) {
             return _view2.DecorationSet.create(state.doc, allDecorations);
           }
           return undefined;
         }
-        if (layoutState.pos !== null) {
-          return _view2.DecorationSet.create(state.doc, getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)));
+        var dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+        if (layoutState.pos !== null || dangerPreviewDecorations.length > 0) {
+          var _selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
+          return _view2.DecorationSet.create(state.doc, [].concat((0, _toConsumableArray2.default)(_selectedDecorations), (0, _toConsumableArray2.default)(dangerPreviewDecorations)));
         }
         return undefined;
       },

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/pm-plugins/utils/layout-column-selection.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelectedLayoutColumnsFromSelection = exports.getLayoutColumnValign = exports.getLayoutColumnMenuAnchorPos = exports.getAllLayoutColumnsFromSelection = void 0;
+exports.getSelectedLayoutColumnsFromSelection = exports.getLayoutColumnsFromContentSelection = exports.getLayoutColumnValign = exports.getLayoutColumnMenuAnchorPos = exports.getAllLayoutColumnsFromSelection = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var findLayoutSectionFromSelection = function findLayoutSectionFromSelection(selection) {
@@ -28,7 +28,7 @@ var findLayoutColumnsFromLayoutSection = function findLayoutColumnsFromLayoutSec
     };
   });
 };
-var getSelectedLayoutColumnsFromSelection = exports.getSelectedLayoutColumnsFromSelection = function getSelectedLayoutColumnsFromSelection(selection) {
+var getSelectedLayoutColumns = function getSelectedLayoutColumns(selection, isColumnSelected) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
     return undefined;
@@ -41,17 +41,15 @@ var getSelectedLayoutColumnsFromSelection = exports.getSelectedLayoutColumnsFrom
   }
   var startIndex = -1;
   var endIndex = -1;
-  var selectedLayoutColumns = allLayoutColumns.filter(function (_ref2, index) {
-    var node = _ref2.node,
-      pos = _ref2.pos;
-    var isSelected = selection.from <= pos && selection.to >= pos + node.nodeSize;
-    if (isSelected) {
+  var selectedLayoutColumns = allLayoutColumns.filter(function (column, index) {
+    if (isColumnSelected(column, index)) {
       if (startIndex === -1) {
         startIndex = index;
       }
       endIndex = index;
+      return true;
     }
-    return isSelected;
+    return false;
   });
   return {
     layoutSectionNode: layoutSectionNode,
@@ -61,6 +59,32 @@ var getSelectedLayoutColumnsFromSelection = exports.getSelectedLayoutColumnsFrom
     endIndex: endIndex
   };
 };
+var getSelectedLayoutColumnsFromSelection = exports.getSelectedLayoutColumnsFromSelection = function getSelectedLayoutColumnsFromSelection(selection) {
+  return getSelectedLayoutColumns(selection, function (_ref2) {
+    var node = _ref2.node,
+      pos = _ref2.pos;
+    // NodeSelection on a layout column is clearly selected.
+    if (selection instanceof _state.NodeSelection && selection.node === node) {
+      return true;
+    }
+
+    // For TextSelection, only count columns that are fully contained within the selection
+    // (not partial text selections inside a column).
+    var nodeEndPos = pos + node.nodeSize;
+    return !selection.empty && selection.from <= pos && selection.to >= nodeEndPos;
+  });
+};
+var getLayoutColumnsFromContentSelection = exports.getLayoutColumnsFromContentSelection = function getLayoutColumnsFromContentSelection(selection) {
+  return getSelectedLayoutColumns(selection, function (_ref3) {
+    var node = _ref3.node,
+      pos = _ref3.pos;
+    if (selection instanceof _state.NodeSelection && selection.node === node) {
+      return true;
+    }
+    var nodeEndPos = pos + node.nodeSize;
+    return selection.empty ? selection.from > pos && selection.from < nodeEndPos : selection.from < nodeEndPos && selection.to > pos;
+  });
+};
 var getAllLayoutColumnsFromSelection = exports.getAllLayoutColumnsFromSelection = function getAllLayoutColumnsFromSelection(selection) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
@@ -79,8 +103,8 @@ var getAllLayoutColumnsFromSelection = exports.getAllLayoutColumnsFromSelection
   };
 };
 var getLayoutColumnValign = exports.getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
-  var _ref3;
-  return layoutColumn ? (_ref3 = layoutColumn.attrs.valign) !== null && _ref3 !== void 0 ? _ref3 : 'top' : undefined;
+  var _ref4;
+  return layoutColumn ? (_ref4 = layoutColumn.attrs.valign) !== null && _ref4 !== void 0 ? _ref4 : 'top' : undefined;
 };
 var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;
@@ -88,8 +112,8 @@ var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = functi
   if (!selectedLayoutColumns) {
     return undefined;
   }
-  var clickedSelectedColumn = selectedLayoutColumns.selectedLayoutColumns.find(function (_ref4) {
-    var pos = _ref4.pos;
+  var clickedSelectedColumn = selectedLayoutColumns.selectedLayoutColumns.find(function (_ref5) {
+    var pos = _ref5.pos;
     return pos === anchorPosFromHandle;
   });
   return (_clickedSelectedColum = clickedSelectedColumn === null || clickedSelectedColumn === void 0 ? void 0 : clickedSelectedColumn.pos) !== null && _clickedSelectedColum !== void 0 ? _clickedSelectedColum : (_selectedLayoutColumn = selectedLayoutColumns.selectedLayoutColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.pos;