@atlaskit/editor-plugin-layout 11.0.3 → 11.1.0

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

@@ -14,7 +14,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 import { pluginKey } from './plugin-key';
 import { calculateDistribution, isDistributedUniformly, redistributeAfterDeletion, redistributeProportionally } from './utils/layout-column-distribution';
-import { getAllLayoutColumnsFromSelection, getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
+import { getAllLayoutColumnsFromSelection, getLayoutColumnsFromContentSelection, getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -571,12 +571,13 @@ export function getEffectiveMaxLayoutColumns() {
   return editorExperiment('advanced_layouts', true) ? MAX_LAYOUT_COLUMNS : MAX_STANDARD_LAYOUT_COLUMNS;
 }
 var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAPI) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref4) {
     var tr = _ref4.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    var selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -636,7 +637,7 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       attributes: {
         columnCount: redistributedWidths.length,
         endIndex: endIndex,
-        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod: inputMethod,
         selectedCount: selectedColumnCount,
         side: side,
         startIndex: startIndex
@@ -648,9 +649,10 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
   };
 };
 export var insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 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) {
@@ -791,25 +793,43 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
 };
 export var 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;
   };
 };
-export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+export var setLayoutColumnDangerPreview = function setLayoutColumnDangerPreview(show) {
   return function (_ref13) {
-    var _api$blockControls4;
+    var _selectedLayoutColumn;
     var tr = _ref13.tr;
+    var selectedLayoutColumnsResult = 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;
+  };
+};
+export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
+  return function (_ref15) {
+    var _api$blockControls4;
+    var tr = _ref15.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    var selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
     if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
@@ -826,7 +846,7 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI,
         attributes: {
           columnCount: columnCount,
           endIndex: endIndex,
-          inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+          inputMethod: inputMethod,
           selectedCount: selectedLayoutColumns.length,
           startIndex: startIndex
         },

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

@@ -0,0 +1,25 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, bindKeymapWithEditorCommand, deleteColumn, keymap } from '@atlaskit/editor-common/keymaps';
+import { deleteLayoutColumn, insertLayoutColumn } from './actions';
+var bindLayoutColumnShortcut = function bindLayoutColumnShortcut(shortcut, command, list) {
+  if (!shortcut) {
+    return;
+  }
+  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(addColumnBefore.common, insertLayoutColumn('left', api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(addColumnBeforeVO.common, insertLayoutColumn('left', api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(addColumnAfter.common, insertLayoutColumn('right', api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(addColumnAfterVO.common, insertLayoutColumn('right', api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(deleteColumn.common, deleteLayoutColumn(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, INPUT_METHOD.KEYBOARD), list);
+  return keymap(list);
+}
+export default keymapPlugin;

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

@@ -52,6 +52,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 [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 = getMaybeLayoutSection(state);
   var allowBreakout = options.allowBreakout || false;
@@ -67,9 +79,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 = getMaybeLayoutSection(action.state);
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+          selectedLayout: 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
@@ -116,28 +171,39 @@ export default (function (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 = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = 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 = getMaybeLayoutSection(newState);
-          var newPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
-            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
-            isResizing: isResizing,
-            selectedLayout: 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: {
@@ -147,14 +213,17 @@ export default (function (options, editorAnalyticsAPI) {
         if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
           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));
+          var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+          var allDecorations = [].concat(_toConsumableArray(selectedDecorations), _toConsumableArray(dividerDecorations), _toConsumableArray(_dangerPreviewDecorations));
           if (allDecorations.length > 0) {
             return DecorationSet.create(state.doc, allDecorations);
           }
           return undefined;
         }
-        if (layoutState.pos !== null) {
-          return 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 DecorationSet.create(state.doc, [].concat(_toConsumableArray(_selectedDecorations), _toConsumableArray(dangerPreviewDecorations)));
         }
         return undefined;
       },

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

@@ -22,7 +22,7 @@ var findLayoutColumnsFromLayoutSection = function findLayoutColumnsFromLayoutSec
     };
   });
 };
-export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutColumnsFromSelection(selection) {
+var getSelectedLayoutColumns = function getSelectedLayoutColumns(selection, isColumnSelected) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
     return undefined;
@@ -35,17 +35,15 @@ export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutCol
   }
   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,
@@ -55,6 +53,32 @@ export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutCol
     endIndex: endIndex
   };
 };
+export var 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 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;
+  });
+};
+export var getLayoutColumnsFromContentSelection = function getLayoutColumnsFromContentSelection(selection) {
+  return getSelectedLayoutColumns(selection, function (_ref3) {
+    var node = _ref3.node,
+      pos = _ref3.pos;
+    if (selection instanceof 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;
+  });
+};
 export var getAllLayoutColumnsFromSelection = function getAllLayoutColumnsFromSelection(selection) {
   var layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
@@ -73,8 +97,8 @@ export var getAllLayoutColumnsFromSelection = function getAllLayoutColumnsFromSe
   };
 };
 export var 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;
 };
 export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;
@@ -82,8 +106,8 @@ export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(
   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;

package/dist/esm/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js

@@ -1,23 +1,35 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { deleteColumn, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { DeleteIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
+  var _tooltip;
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = useSelectedLayoutColumns(api);
+  var setDangerPreview = useCallback(function (show) {
+    var _api$core, _api$layout;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.setLayoutColumnDangerPreview(show));
+  }, [api]);
+  var showDangerPreview = useCallback(function () {
+    setDangerPreview(true);
+  }, [setDangerPreview]);
+  var hideDangerPreview = useCallback(function () {
+    setDangerPreview(false);
+  }, [setDangerPreview]);
   var onClick = useCallback(function () {
-    var _api$layout, _api$core;
-    var deleteCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
-      var _api$layout2;
+    var _api$layout2, _api$core2;
+    var deleteCommand = api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.deleteLayoutColumn();
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (props) {
+      var _api$layout3;
       var tr = deleteCommand === null || deleteCommand === void 0 ? void 0 : deleteCommand(props);
       if (!tr) {
         return tr !== null && tr !== void 0 ? tr : null;
       }
-      api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 || _api$layout2.commands.toggleLayoutColumnMenu({
+      api === null || api === void 0 || (_api$layout3 = api.layout) === null || _api$layout3 === void 0 || _api$layout3.commands.toggleLayoutColumnMenu({
         isOpen: false
       })({
         tr: tr
@@ -30,11 +42,19 @@ var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
   }
   var selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    ariaKeyshortcuts: getAriaKeyshortcuts(deleteColumn),
     onClick: onClick,
+    onFocus: showDangerPreview,
+    onMouseEnter: showDangerPreview,
+    onBlur: hideDangerPreview,
+    onMouseLeave: hideDangerPreview,
     elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
       color: "currentColor",
       label: "",
       size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(layoutMessages.deleteColumn, {
     count: selectedColumnCount

package/dist/esm/ui/LayoutColumnMenu/InsertColumnDropdownItem.js

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { addColumnAfter, addColumnBefore, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { getEffectiveMaxLayoutColumns } from '../../pm-plugins/actions';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 var INSERT_COLUMN_OPTIONS = {
@@ -17,7 +18,7 @@ var INSERT_COLUMN_OPTIONS = {
   }
 };
 export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
-  var _selectedLayoutColumn, _selectedLayoutColumn2;
+  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
   var api = _ref.api,
     side = _ref.side;
   var _useIntl = useIntl(),
@@ -25,6 +26,7 @@ export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
   var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
     Icon = _INSERT_COLUMN_OPTION.Icon,
     label = _INSERT_COLUMN_OPTION.label;
+  var shortcut = side === 'left' ? addColumnBefore : addColumnAfter;
   var selectedLayoutColumns = useSelectedLayoutColumns(api);
   var columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 || (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
   var maxColumnCount = getEffectiveMaxLayoutColumns();
@@ -50,11 +52,15 @@ export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    ariaKeyshortcuts: getAriaKeyshortcuts(shortcut),
     elemBefore: /*#__PURE__*/React.createElement(Icon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(shortcut)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    }),
     onClick: onClick
   }, formatMessage(label));
 };