@atlaskit/editor-plugin-layout 11.0.3 → 11.1.0

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

@@ -53,6 +53,18 @@ const moveCursorToNextColumn = (state, dispatch) => {
 const getNodeDecoration = (pos, node) => [Decoration.node(pos, pos + node.nodeSize, {
   class: 'selected'
 })];
+const getDangerPreviewDecorations = (state, positions) => {
+  var _positions$flatMap;
+  return (_positions$flatMap = positions === null || positions === void 0 ? void 0 : positions.flatMap(pos => {
+    const 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 : [];
+};
 const getInitialPluginState = (options, state) => {
   const maybeLayoutSection = getMaybeLayoutSection(state);
   const allowBreakout = options.allowBreakout || false;
@@ -68,9 +80,58 @@ const getInitialPluginState = (options, state) => {
     allowSingleColumnLayout,
     isResizing: false,
     isLayoutColumnMenuOpen: false,
-    layoutColumnMenuAnchorPos: undefined
+    layoutColumnMenuOpenedViaKeyboard: false,
+    layoutColumnMenuAnchorPos: undefined,
+    dangerPreviewLayoutColumnPositions: undefined
   };
 };
+const reduceLayoutColumnMenuState = (pluginState, action) => {
+  switch (action.type) {
+    case 'toggleLayoutColumnMenu':
+      {
+        const {
+          anchorPos,
+          isOpen,
+          openedViaKeyboard
+        } = action.meta;
+        const nextIsOpen = isOpen !== null && isOpen !== void 0 ? isOpen : !pluginState.isLayoutColumnMenuOpen;
+        return {
+          ...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 {
+        ...pluginState,
+        dangerPreviewLayoutColumnPositions: action.positions
+      };
+    case 'clearDangerPreview':
+      return {
+        ...pluginState,
+        dangerPreviewLayoutColumnPositions: undefined
+      };
+    case 'setResizeState':
+      return {
+        ...pluginState,
+        isResizing: action.isResizing
+      };
+    case 'syncSelectionState':
+      {
+        const maybeLayoutSection = getMaybeLayoutSection(action.state);
+        return {
+          ...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
@@ -115,31 +176,39 @@ export default ((options, editorAnalyticsAPI) => {
     state: {
       init: (_, state) => getInitialPluginState(options, state),
       apply: (tr, pluginState, oldState, newState) => {
-        var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
+        var _tr$getMeta, _pluginKey$getState;
+        let nextPluginState = pluginState;
         const columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
-        const nextPluginState = columnMenuMeta ? {
-          ...pluginState,
-          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen,
-          layoutColumnMenuAnchorPos: columnMenuMeta.isOpen === false ? undefined : columnMenuMeta.anchorPos
-        } : pluginState;
+        const 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'
+          });
+        }
         const 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,
+          type: 'setResizeState'
+        });
         if (tr.docChanged || tr.selectionSet) {
-          const maybeLayoutSection = getMaybeLayoutSection(newState);
-          const newPluginState = {
-            ...nextPluginState,
-            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
-            isResizing,
-            selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            pluginState.selectedLayout)
-          };
-          return newPluginState;
+          return reduceLayoutColumnMenuState(nextPluginState, {
+            state: newState,
+            type: 'syncSelectionState'
+          });
         }
-        return {
-          ...nextPluginState,
-          isResizing
-        };
+        return nextPluginState;
       }
     },
     props: {
@@ -149,14 +218,17 @@ export default ((options, editorAnalyticsAPI) => {
         if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
           const dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
           const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
-          const allDecorations = [...selectedDecorations, ...dividerDecorations];
+          const dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+          const allDecorations = [...selectedDecorations, ...dividerDecorations, ...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)));
+        const dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
+        if (layoutState.pos !== null || dangerPreviewDecorations.length > 0) {
+          const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
+          return DecorationSet.create(state.doc, [...selectedDecorations, ...dangerPreviewDecorations]);
         }
         return undefined;
       },

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

@@ -1,3 +1,4 @@
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -14,6 +15,28 @@ export const pluginKey = new PluginKey('layoutResizingPlugin');
  * (e.g. setting flex-basis to give real-time visual feedback without dispatching
  * PM transactions) are not "corrected" back by ProseMirror's DOM reconciliation.
  */
+const isLayoutElementLike = element => {
+  if (isSSR() && isSSRStreaming()) {
+    // In SSR environments, `HTMLElement` is undefined globally so a plain
+    // `instanceof HTMLElement` check is always `false`. That makes the
+    // `DOMSerializer.renderSpec(...)` result get rejected by the guard below and
+    // the NodeView falls back to a bare `<div>`, losing every schema-defined
+    // attribute (`data-layout-column`, `style="flex-basis:..."`,
+    // `data-column-width`, plus the inner `<div data-layout-content="true">`
+    // wrapper) and breaking the layout's flex sizing in SSR output.
+    //
+    // To unblock SSR streaming without changing CSR semantics, we gate the check:
+    // - In SSR (and only when `platform_editor_editor_ssr_streaming` is enabled),
+    //   use a duck-typed check that mirrors `safe-plugin`'s `isHTMLElement`.
+    // - Everywhere else, keep the original `instanceof HTMLElement` check exactly
+    //   as it was so we don't accidentally widen acceptance in CSR.
+    if (element === null || element === undefined) {
+      return false;
+    }
+    return typeof element === 'object' && 'innerHTML' in element && 'style' in element && 'classList' in element;
+  }
+  return element instanceof HTMLElement;
+};
 class LayoutColumnView {
   constructor(node, view, getPos) {
     // Use the NodeSpec's own toDOM to produce the correct DOM structure and attributes.
@@ -31,7 +54,7 @@ class LayoutColumnView {
       dom,
       contentDOM
     } = DOMSerializer.renderSpec(document, nodeType.spec.toDOM(node));
-    if (!(dom instanceof HTMLElement) || !(contentDOM instanceof HTMLElement)) {
+    if (!isLayoutElementLike(dom) || !isLayoutElementLike(contentDOM)) {
       const fallbackDiv = document.createElement('div');
       this.dom = fallbackDiv;
       this.contentDOM = fallbackDiv;
@@ -56,7 +79,7 @@ class LayoutColumnView {
     return mutation.type === 'attributes' && mutation.attributeName === 'style';
   }
 }
-export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher) => new SafePlugin({
+export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher, intl) => new SafePlugin({
   key: pluginKey,
   props: {
     nodeViews: {
@@ -68,13 +91,20 @@ export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher
           portalProviderAPI,
           eventDispatcher,
           pluginInjectionApi,
-          options
+          options,
+          intl
         }).init();
       },
-      // Only register the column node view when the resize handle experiment is on.
-      // It exists solely to suppress style-attribute MutationObserver callbacks
-      // during drag, allowing direct flex-basis writes without PM interference.
-      ...(editorExperiment('platform_editor_layout_column_resize_handle', true) ? {
+      // Register the column node view when EITHER:
+      // 1. The resize handle experiment is on (its original purpose:
+      //    suppress style-attribute MutationObserver callbacks during
+      //    drag, allowing direct flex-basis writes without PM
+      //    interference).
+      // 2. SSR streaming is enabled — the column node view stamps
+      //    `container-type: inline-size` inline on each column dom so
+      //    that the SSR-rendered table inside the column constrains
+      //    its width to the column (see comment in the constructor).
+      ...(editorExperiment('platform_editor_layout_column_resize_handle', true) || isSSR() && isSSRStreaming() ? {
         layoutColumn: (node, view, getPos) => new LayoutColumnView(node, view, getPos)
       } : {})
     }

package/dist/es2019/pm-plugins/utils/layout-column-selection.js

@@ -22,7 +22,7 @@ const findLayoutColumnsFromLayoutSection = (layoutSectionNode, layoutSectionPos
     pos: pos + layoutSectionPos + 1
   }));
 };
-export const getSelectedLayoutColumnsFromSelection = selection => {
+const getSelectedLayoutColumns = (selection, isColumnSelected) => {
   const layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {
     return undefined;
@@ -37,18 +37,15 @@ export const getSelectedLayoutColumnsFromSelection = selection => {
   }
   let startIndex = -1;
   let endIndex = -1;
-  const selectedLayoutColumns = allLayoutColumns.filter(({
-    node,
-    pos
-  }, index) => {
-    const isSelected = selection.from <= pos && selection.to >= pos + node.nodeSize;
-    if (isSelected) {
+  const selectedLayoutColumns = allLayoutColumns.filter((column, index) => {
+    if (isColumnSelected(column, index)) {
       if (startIndex === -1) {
         startIndex = index;
       }
       endIndex = index;
+      return true;
     }
-    return isSelected;
+    return false;
   });
   return {
     layoutSectionNode,
@@ -58,6 +55,34 @@ export const getSelectedLayoutColumnsFromSelection = selection => {
     endIndex
   };
 };
+export const getSelectedLayoutColumnsFromSelection = selection => {
+  return getSelectedLayoutColumns(selection, ({
+    node,
+    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).
+    const nodeEndPos = pos + node.nodeSize;
+    return !selection.empty && selection.from <= pos && selection.to >= nodeEndPos;
+  });
+};
+export const getLayoutColumnsFromContentSelection = selection => {
+  return getSelectedLayoutColumns(selection, ({
+    node,
+    pos
+  }) => {
+    if (selection instanceof NodeSelection && selection.node === node) {
+      return true;
+    }
+    const nodeEndPos = pos + node.nodeSize;
+    return selection.empty ? selection.from > pos && selection.from < nodeEndPos : selection.from < nodeEndPos && selection.to > pos;
+  });
+};
 export const getAllLayoutColumnsFromSelection = selection => {
   const layoutSection = findLayoutSectionFromSelection(selection);
   if (!layoutSection) {

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

@@ -1,25 +1,37 @@
 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';
 const DeleteColumnDropdownItem = ({
   api
 }) => {
+  var _tooltip;
   const {
     formatMessage
   } = useIntl();
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
+  const setDangerPreview = useCallback(show => {
+    var _api$core, _api$layout;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.setLayoutColumnDangerPreview(show));
+  }, [api]);
+  const showDangerPreview = useCallback(() => {
+    setDangerPreview(true);
+  }, [setDangerPreview]);
+  const hideDangerPreview = useCallback(() => {
+    setDangerPreview(false);
+  }, [setDangerPreview]);
   const onClick = useCallback(() => {
-    var _api$layout, _api$core;
-    const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
-    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(props => {
-      var _api$layout2;
+    var _api$layout2, _api$core2;
+    const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.deleteLayoutColumn();
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(props => {
+      var _api$layout3;
       const 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 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
+      api === null || api === void 0 ? void 0 : (_api$layout3 = api.layout) === null || _api$layout3 === void 0 ? void 0 : _api$layout3.commands.toggleLayoutColumnMenu({
         isOpen: false
       })({
         tr
@@ -32,11 +44,19 @@ const DeleteColumnDropdownItem = ({
   }
   const 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/es2019/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';
 const INSERT_COLUMN_OPTIONS = {
@@ -20,7 +21,7 @@ export const InsertColumnDropdownItem = ({
   api,
   side
 }) => {
-  var _selectedLayoutColumn, _selectedLayoutColumn2;
+  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
   const {
     formatMessage
   } = useIntl();
@@ -28,6 +29,7 @@ export const InsertColumnDropdownItem = ({
     Icon,
     label
   } = INSERT_COLUMN_OPTIONS[side];
+  const shortcut = side === 'left' ? addColumnBefore : addColumnAfter;
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
   const columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
   const maxColumnCount = getEffectiveMaxLayoutColumns();
@@ -53,11 +55,15 @@ export const InsertColumnDropdownItem = ({
     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));
 };

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

@@ -1,7 +1,9 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { bind } from 'bind-event-listener';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -13,6 +15,7 @@ import { LAYOUT_COLUMN_MENU } from './keys';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 const TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
+const NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
 
 /**
  * Returns the drag handle button for the selected layout column.
@@ -30,6 +33,9 @@ const getLayoutColumnMenuTarget = (editorView, selection, anchorPosFromHandle) =
   const 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(DRAG_HANDLE_SELECTOR);
 };
+const focusTrap = {
+  initialFocus: undefined
+};
 export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu({
   api,
   editorView,
@@ -41,12 +47,14 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   const {
     isLayoutColumnMenuOpen,
     layoutColumnMenuAnchorPos,
+    openedViaKeyboard,
     selection
   } = useSharedPluginStateWithSelector(api, ['layout', 'selection'], 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
     };
   });
@@ -57,7 +65,7 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     }));
   }, [api]);
   const handleClickOutside = useCallback(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;
     }
 
@@ -74,6 +82,38 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
+  const handleArrowKeyNavigationClose = useCallback(event => {
+    event.preventDefault();
+    closeLayoutColumnMenu();
+  }, [closeLayoutColumnMenu]);
+  const shouldDisableArrowKeyNavigation = useCallback(event => {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      return false;
+    }
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+    return target.closest(NESTED_DROPDOWN_MENU_SELECTOR) !== null;
+  }, []);
+  const menuWrapperRef = useRef(null);
+  const handleMenuKeyDown = useCallback(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();
+    }
+  }, []);
+  useEffect(() => {
+    const menuWrapper = menuWrapperRef.current;
+    if (!isLayoutColumnMenuOpen || !menuWrapper) {
+      return;
+    }
+    return bind(menuWrapper, {
+      type: 'keydown',
+      listener: handleMenuKeyDown
+    });
+  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   const hasValidTarget = target instanceof HTMLElement;
@@ -96,16 +136,23 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
-    handleEscapeKeydown: closeLayoutColumnMenu
+    handleEscapeKeydown: closeLayoutColumnMenu,
+    focusTrap: openedViaKeyboard ? focusTrap : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: menuWrapperRef
   }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
     api: api,
     userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU,
+    handleClose: handleArrowKeyNavigationClose,
+    disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  }))));
+  }))))));
 });

package/dist/es2019/ui/LayoutSSRReactContextsProvider.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RawIntlProvider } from 'react-intl';
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+/**
+ * Wraps the layout section nodeview children with the editor's actual
+ * IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
+ * descendants that call `useIntl()` (e.g. `BreakoutResizer`'s ARIA labels)
+ * have a valid intl context and do not throw during the static render pass.
+ *
+ * Outside of SSR streaming this is a no-op passthrough.
+ *
+ * Follows the same pattern as `MediaSSRReactContextsProvider` and
+ * `SyncBlockSSRReactContextsProvider`.
+ */
+export function LayoutSSRReactContextsProvider({
+  children,
+  intl
+}) {
+  if (!isSSRStreaming() || !isSSR()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(RawIntlProvider, {
+    value: intl
+  }, children);
+}

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

@@ -10,6 +10,13 @@ import { useIntl } from 'react-intl';
 import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
+const layoutColumnDangerPreviewStyle = 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 ${"var(--ds-border-danger, #E2483D)"}`
+  }
+});
 const getPlaceholderStyle = message => {
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     return css({
@@ -52,7 +59,8 @@ export const GlobalStylesWrapper = () => {
     const placeholderText = editorExperiment('platform_editor_controls', 'variant1') ? messages.controlslayoutPlaceholder : messages.layoutPlaceholder;
     return getPlaceholderStyle(formatMessage(placeholderText));
   }, [formatMessage]);
+  const globalStyles = useMemo(() => [placeholderStyle, layoutColumnDangerPreviewStyle], [placeholderStyle]);
   return jsx(Global, {
-    styles: placeholderStyle
+    styles: globalStyles
   });
 };

package/dist/esm/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 as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign as _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';
@@ -50,7 +51,7 @@ export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
   return tr;
 };
 export var 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;
@@ -102,13 +103,24 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           return createLayoutPlugin(options, api === null || api === 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: function plugin() {
+            return createLayoutKeymapPlugin({
+              api: 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: function plugin(_ref2) {
             var portalProviderAPI = _ref2.portalProviderAPI,
-              eventDispatcher = _ref2.eventDispatcher;
-            return createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher);
+              eventDispatcher = _ref2.eventDispatcher,
+              getIntl = _ref2.getIntl;
+            return createLayoutResizingPlugin(options, api, portalProviderAPI, eventDispatcher, getIntl());
           }
         });
       }
@@ -371,15 +383,19 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: 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 _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 _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 _insertLayoutColumn(side, api === null || api === 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 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api, inputMethod);
       },
+      setLayoutColumnDangerPreview: setLayoutColumnDangerPreview,
       setLayoutColumnValign: function setLayoutColumnValign(valign) {
         var _api$analytics8;
         return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);