@atlaskit/editor-plugin-layout 11.0.3 → 11.1.0

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

@@ -7,25 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteColumnDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 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); }
 var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
+  var _tooltip;
   var api = _ref.api;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
+  var setDangerPreview = (0, _react.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 = (0, _react.useCallback)(function () {
+    setDangerPreview(true);
+  }, [setDangerPreview]);
+  var hideDangerPreview = (0, _react.useCallback)(function () {
+    setDangerPreview(false);
+  }, [setDangerPreview]);
   var onClick = (0, _react.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
@@ -38,11 +50,19 @@ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function Delet
   }
   var selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.deleteColumn),
     onClick: onClick,
+    onFocus: showDangerPreview,
+    onMouseEnter: showDangerPreview,
+    onBlur: hideDangerPreview,
+    onMouseLeave: hideDangerPreview,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
       color: "currentColor",
       label: "",
       size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.layoutMessages.deleteColumn, {
     count: selectedColumnCount

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.InsertColumnDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _actions = require("../../pm-plugins/actions");
@@ -25,7 +26,7 @@ var INSERT_COLUMN_OPTIONS = {
   }
 };
 var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
-  var _selectedLayoutColumn, _selectedLayoutColumn2;
+  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
   var api = _ref.api,
     side = _ref.side;
   var _useIntl = (0, _reactIntl.useIntl)(),
@@ -33,6 +34,7 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
   var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
     Icon = _INSERT_COLUMN_OPTION.Icon,
     label = _INSERT_COLUMN_OPTION.label;
+  var shortcut = side === 'left' ? _keymaps.addColumnBefore : _keymaps.addColumnAfter;
   var selectedLayoutColumns = (0, _useSelectedLayoutColumns.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 = (0, _actions.getEffectiveMaxLayoutColumns)();
@@ -58,11 +60,15 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut),
     elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
       color: "currentColor",
       label: "",
       size: "small"
     }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(shortcut)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    }),
     onClick: onClick
   }, formatMessage(label));
 };

package/dist/cjs/ui/LayoutColumnMenu/index.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LayoutColumnMenu = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -21,6 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
 var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
+var NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
 
 /**
  * Returns the drag handle button for the selected layout column.
@@ -38,6 +41,9 @@ var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, s
   var dragHandleContainer = (_columnDomRef$parentE = columnDomRef.parentElement) === null || _columnDomRef$parentE === void 0 ? void 0 : _columnDomRef$parentE.querySelector(':scope > [data-blocks-drag-handle-container]');
   return dragHandleContainer === null || dragHandleContainer === void 0 ? void 0 : dragHandleContainer.querySelector(_styles.DRAG_HANDLE_SELECTOR);
 };
+var focusTrap = {
+  initialFocus: undefined
+};
 var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.memo(function LayoutColumnMenu(_ref) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   var api = _ref.api,
@@ -46,15 +52,17 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout', 'selection'], function (states) {
-      var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$selectionStat;
+      var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
       return {
         isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false,
         layoutColumnMenuAnchorPos: (_states$layoutState2 = states.layoutState) === null || _states$layoutState2 === void 0 ? void 0 : _states$layoutState2.layoutColumnMenuAnchorPos,
+        openedViaKeyboard: (_states$layoutState$l = (_states$layoutState3 = states.layoutState) === null || _states$layoutState3 === void 0 ? void 0 : _states$layoutState3.layoutColumnMenuOpenedViaKeyboard) !== null && _states$layoutState$l !== void 0 ? _states$layoutState$l : false,
         selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
       };
     }),
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
     layoutColumnMenuAnchorPos = _useSharedPluginState.layoutColumnMenuAnchorPos,
+    openedViaKeyboard = _useSharedPluginState.openedViaKeyboard,
     selection = _useSharedPluginState.selection;
   var closeLayoutColumnMenu = (0, _react.useCallback)(function () {
     var _api$core, _api$layout;
@@ -63,7 +71,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     }));
   }, [api]);
   var handleClickOutside = (0, _react.useCallback)(function (event) {
-    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest('[data-toolbar-nested-dropdown-menu]'))) {
+    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest(NESTED_DROPDOWN_MENU_SELECTOR))) {
       return;
     }
 
@@ -80,6 +88,38 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
+  var handleArrowKeyNavigationClose = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    closeLayoutColumnMenu();
+  }, [closeLayoutColumnMenu]);
+  var shouldDisableArrowKeyNavigation = (0, _react.useCallback)(function (event) {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      return false;
+    }
+    var target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+    return target.closest(NESTED_DROPDOWN_MENU_SELECTOR) !== null;
+  }, []);
+  var menuWrapperRef = (0, _react.useRef)(null);
+  var handleMenuKeyDown = (0, _react.useCallback)(function (event) {
+    // Keep menu keyboard events scoped to the menu while preserving Escape and
+    // ArrowUp/ArrowDown handling from Popup and ArrowKeyNavigationProvider.
+    if (event.key !== 'Escape' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      event.stopPropagation();
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    var menuWrapper = menuWrapperRef.current;
+    if (!isLayoutColumnMenuOpen || !menuWrapper) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(menuWrapper, {
+      type: 'keydown',
+      listener: handleMenuKeyDown
+    });
+  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_keys.LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var target = (0, _react.useMemo)(function () {
     return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
@@ -104,16 +144,23 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
-    handleEscapeKeydown: closeLayoutColumnMenu
+    handleEscapeKeydown: closeLayoutColumnMenu,
+    focusTrap: openedViaKeyboard ? focusTrap : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: menuWrapperRef
   }, /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
     api: api,
     userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    type: _uiMenu.ArrowKeyNavigationType.MENU,
+    handleClose: handleArrowKeyNavigationClose,
+    disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
   }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     components: components,
     fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: _keys.LAYOUT_COLUMN_MENU
-  }))));
+  }))))));
 });

package/dist/cjs/ui/LayoutSSRReactContextsProvider.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutSSRReactContextsProvider = LayoutSSRReactContextsProvider;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+/**
+ * Wraps the layout section nodeview children with the editor's actual
+ * IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
+ * descendants that call `useIntl()` (e.g. `BreakoutResizer`'s ARIA labels)
+ * have a valid intl context and do not throw during the static render pass.
+ *
+ * Outside of SSR streaming this is a no-op passthrough.
+ *
+ * Follows the same pattern as `MediaSSRReactContextsProvider` and
+ * `SyncBlockSSRReactContextsProvider`.
+ */
+function LayoutSSRReactContextsProvider(_ref) {
+  var children = _ref.children,
+    intl = _ref.intl;
+  if (!(0, _coreUtils.isSSRStreaming)() || !(0, _coreUtils.isSSR)()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactIntl.RawIntlProvider, {
+    value: intl
+  }, children);
+}

package/dist/cjs/ui/global-styles.js

@@ -19,6 +19,13 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
 var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
+var layoutColumnDangerPreviewStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror [data-layout-column].layout-column-danger-preview': {
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    boxShadow: "inset 0 0 0 2px ".concat("var(--ds-border-danger, #E2483D)")
+  }
+});
 var getPlaceholderStyle = function getPlaceholderStyle(message) {
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     return (0, _react2.css)((0, _defineProperty2.default)({}, "".concat(PLACEHOLDER_SELECTOR), {
@@ -56,7 +63,10 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
     var placeholderText = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _messages.layoutMessages.controlslayoutPlaceholder : _messages.layoutMessages.layoutPlaceholder;
     return getPlaceholderStyle(formatMessage(placeholderText));
   }, [formatMessage]);
+  var globalStyles = (0, _react.useMemo)(function () {
+    return [placeholderStyle, layoutColumnDangerPreviewStyle];
+  }, [placeholderStyle]);
   return (0, _react2.jsx)(_react2.Global, {
-    styles: placeholderStyle
+    styles: globalStyles
   });
 };

package/dist/es2019/layoutPlugin.js

@@ -11,7 +11,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { default as createLayoutKeymapPlugin } from './pm-plugins/keymap';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
@@ -52,7 +53,7 @@ export const layoutPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$analytics2, _api$analytics5;
+  var _api$analytics2;
   const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
@@ -101,13 +102,22 @@ export const layoutPlugin = ({
           return createLayoutPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
+      if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+        plugins.push({
+          name: 'layoutKeymap',
+          plugin: () => createLayoutKeymapPlugin({
+            api
+          })
+        });
+      }
       if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && editorExperiment('platform_editor_layout_column_resize_handle', true)) && api && editorExperiment('advanced_layouts', true)) {
         plugins.push({
           name: 'layoutResizing',
           plugin: ({
             portalProviderAPI,
-            eventDispatcher
-          }) => createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher)
+            eventDispatcher,
+            getIntl
+          }) => createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher, getIntl())
         });
       }
       return plugins;
@@ -352,15 +362,19 @@ export const layoutPlugin = ({
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
+      deleteLayoutColumn: inputMethod => {
+        var _api$analytics5;
+        return deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, inputMethod);
+      },
       distributeLayoutColumns: options => {
         var _api$analytics6;
         return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
       },
-      insertLayoutColumn: side => {
+      insertLayoutColumn: (side, inputMethod) => {
         var _api$analytics7;
-        return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
+        return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api, inputMethod);
       },
+      setLayoutColumnDangerPreview,
       setLayoutColumnValign: valign => {
         var _api$analytics8;
         return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);

package/dist/es2019/nodeviews/index.js

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

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

@@ -11,7 +11,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 const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -556,13 +556,13 @@ const mapLayoutColumnPreservedSelection = (tr, api) => {
 export function getEffectiveMaxLayoutColumns() {
   return editorExperiment('advanced_layouts', true) ? MAX_LAYOUT_COLUMNS : MAX_STANDARD_LAYOUT_COLUMNS;
 }
-const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
+const insertLayoutColumnAt = (side, editorAnalyticsAPI, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
   tr
 }) => {
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  const selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
   if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
     return null;
   }
@@ -624,7 +624,7 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
     attributes: {
       columnCount: redistributedWidths.length,
       endIndex,
-      inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+      inputMethod,
       selectedCount: selectedColumnCount,
       side,
       startIndex
@@ -634,10 +634,10 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const insertLayoutColumn = (side, editorAnalyticsAPI, api) => ({
+export const insertLayoutColumn = (side, editorAnalyticsAPI, api, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
   tr
 }) => {
-  const result = insertLayoutColumnAt(side, editorAnalyticsAPI)({
+  const result = insertLayoutColumnAt(side, editorAnalyticsAPI, inputMethod)({
     tr
   });
   if (result) {
@@ -777,25 +777,40 @@ export const distributeLayoutColumns = (editorAnalyticsAPI, api) => ({
 };
 export const toggleLayoutColumnMenu = ({
   anchorPos,
-  isOpen
+  isOpen,
+  openedViaKeyboard
 }) => ({
   tr
 }) => {
   tr.setMeta('toggleLayoutColumnMenu', {
     anchorPos,
-    isOpen
+    isOpen,
+    openedViaKeyboard
   });
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const deleteLayoutColumn = (editorAnalyticsAPI, api) => ({
+export const setLayoutColumnDangerPreview = show => ({
+  tr
+}) => {
+  var _selectedLayoutColumn;
+  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  const positions = show ? (_selectedLayoutColumn = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(({
+    pos
+  }) => pos)) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : [] : null;
+  tr.setMeta('layoutColumnDangerPreview', positions);
+  tr.setMeta('addToHistory', false);
+  tr.setMeta('scrollIntoView', false);
+  return tr;
+};
+export const deleteLayoutColumn = (editorAnalyticsAPI, api, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
   tr
 }) => {
   var _api$blockControls4;
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  const selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
   if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
     return null;
   }
@@ -814,7 +829,7 @@ export const deleteLayoutColumn = (editorAnalyticsAPI, api) => ({
       attributes: {
         columnCount,
         endIndex,
-        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod,
         selectedCount: selectedLayoutColumns.length,
         startIndex
       },

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

@@ -0,0 +1,26 @@
+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';
+const bindLayoutColumnShortcut = (shortcut, command, list) => {
+  if (!shortcut) {
+    return;
+  }
+  bindKeymapWithEditorCommand(shortcut, command, list);
+};
+
+/**
+ * Creates shortcut handlers for layout column actions.
+ */
+function keymapPlugin({
+  api
+}) {
+  var _api$analytics, _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
+  const list = {};
+  bindLayoutColumnShortcut(addColumnBefore.common, insertLayoutColumn('left', api === null || api === void 0 ? 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 ? 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 ? 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 ? 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 ? 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;