@atlaskit/editor-plugin-layout 11.1.10 → 12.0.1

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

@@ -8,10 +8,10 @@ import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 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 { DEFAULT_LAYOUT_COLUMN_VALIGN, 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, getLayoutColumnsFromContentSelection, getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
+import { getAllLayoutColumnsFromSelection, getLayoutColumnsFromContentSelection, getLayoutColumnValign, 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'];
@@ -530,6 +530,15 @@ const formatLayoutName = layout => {
   }
 };
 export const LAYOUT_COLUMN_INSERT_META = 'layoutColumnInsert';
+const getPreviousLayoutColumnValign = selectedLayoutColumns => {
+  var _selectedLayoutColumn;
+  const firstValign = getLayoutColumnValign((_selectedLayoutColumn = selectedLayoutColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.node);
+  const hasMixedValign = selectedLayoutColumns.some(({
+    node
+  }) => getLayoutColumnValign(node) !== firstValign);
+  return hasMixedValign ? 'mixed' : firstValign !== null && firstValign !== void 0 ? firstValign : DEFAULT_LAYOUT_COLUMN_VALIGN;
+};
+const hasLayoutColumnContent = node => !isEmptyDocument(node);
 const mapLayoutColumnPreservedSelection = (tr, api) => {
   const insertMeta = tr.getMeta(LAYOUT_COLUMN_INSERT_META);
   if (insertMeta) {
@@ -622,9 +631,10 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI, inputMethod = INPUT_METH
     actionSubject: ACTION_SUBJECT.DOCUMENT,
     actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
     attributes: {
-      columnCount: redistributedWidths.length,
       endIndex,
       inputMethod,
+      newColumnCount: redistributedWidths.length,
+      previousColumnCount: layoutSectionNode.childCount,
       selectedCount: selectedColumnCount,
       side,
       startIndex
@@ -634,7 +644,10 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI, inputMethod = INPUT_METH
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const insertLayoutColumn = (side, editorAnalyticsAPI, api, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
+export const insertLayoutColumn = ({
+  side,
+  inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU
+}, editorAnalyticsAPI, api) => ({
   tr
 }) => {
   const result = insertLayoutColumnAt(side, editorAnalyticsAPI, inputMethod)({
@@ -645,7 +658,10 @@ export const insertLayoutColumn = (side, editorAnalyticsAPI, api, inputMethod =
   }
   return result;
 };
-export const setLayoutColumnValign = (valign, editorAnalyticsAPI, api) => ({
+export const setLayoutColumnValign = ({
+  valign,
+  inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU
+}, editorAnalyticsAPI, api) => ({
   tr
 }) => {
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
@@ -656,13 +672,15 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI, api) => ({
     return null;
   }
   const {
+    layoutSectionNode,
     startIndex,
     endIndex,
     selectedLayoutColumns
   } = selectedLayoutColumnsResult;
+  const previousValign = getPreviousLayoutColumnValign(selectedLayoutColumns);
   const columnsToUpdate = selectedLayoutColumns.filter(({
     node
-  }) => node.attrs.valign !== valign);
+  }) => getLayoutColumnValign(node) !== valign);
   if (columnsToUpdate.length === 0) {
     return null;
   }
@@ -681,8 +699,10 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI, api) => ({
     actionSubject: ACTION_SUBJECT.DOCUMENT,
     actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
     attributes: {
+      columnCount: layoutSectionNode.childCount,
       endIndex,
-      inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+      inputMethod,
+      previousValign,
       selectedCount: selectedLayoutColumns.length,
       startIndex,
       updatedCount: updatedColumnCount,
@@ -767,7 +787,8 @@ export const distributeLayoutColumns = (editorAnalyticsAPI, api) => ({
       endIndex,
       inputMethod,
       selectedCount: selectedLayoutColumns.length,
-      startIndex
+      startIndex,
+      target
     },
     eventType: EVENT_TYPE.TRACK
   })(tr);
@@ -793,17 +814,19 @@ export const toggleLayoutColumnMenu = ({
 export const setLayoutColumnDangerPreview = show => ({
   tr
 }) => {
-  var _selectedLayoutColumn;
+  var _selectedLayoutColumn2;
   const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
-  const positions = show ? (_selectedLayoutColumn = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(({
+  const positions = show ? (_selectedLayoutColumn2 = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(({
     pos
-  }) => pos)) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : [] : null;
+  }) => pos)) !== null && _selectedLayoutColumn2 !== void 0 ? _selectedLayoutColumn2 : [] : 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) => ({
+export const deleteLayoutColumn = ({
+  inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU
+} = {}, editorAnalyticsAPI, api) => ({
   tr
 }) => {
   var _api$blockControls4;
@@ -821,15 +844,20 @@ export const deleteLayoutColumn = (editorAnalyticsAPI, api, inputMethod = INPUT_
     startIndex,
     endIndex
   } = selectedLayoutColumnsResult;
-  const emitDeleteColumnAnalytics = columnCount => {
+  const hadContent = selectedLayoutColumns.some(({
+    node
+  }) => hasLayoutColumnContent(node));
+  const emitDeleteColumnAnalytics = newColumnCount => {
     editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
       action: ACTION.DELETED,
       actionSubject: ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
       attributes: {
-        columnCount,
         endIndex,
+        hadContent,
         inputMethod,
+        newColumnCount,
+        previousColumnCount: layoutSectionNode.childCount,
         selectedCount: selectedLayoutColumns.length,
         startIndex
       },

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

@@ -1,6 +1,7 @@
 export const MAX_STANDARD_LAYOUT_COLUMNS = 3;
 export const MAX_LAYOUT_COLUMNS = 5;
 export const MIN_LAYOUT_COLUMN_WIDTH_PERCENT = 5;
+export const DEFAULT_LAYOUT_COLUMN_VALIGN = 'top';
 export const EVEN_DISTRIBUTED_COL_WIDTHS = {
   1: 100,
   2: 50,

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

@@ -16,11 +16,25 @@ function keymapPlugin({
 }) {
   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);
+  bindLayoutColumnShortcut(addColumnBefore.common, insertLayoutColumn({
+    side: 'left',
+    inputMethod: INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api), list);
+  bindLayoutColumnShortcut(addColumnBeforeVO.common, insertLayoutColumn({
+    side: 'left',
+    inputMethod: INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api), list);
+  bindLayoutColumnShortcut(addColumnAfter.common, insertLayoutColumn({
+    side: 'right',
+    inputMethod: INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api), list);
+  bindLayoutColumnShortcut(addColumnAfterVO.common, insertLayoutColumn({
+    side: 'right',
+    inputMethod: INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api), list);
+  bindLayoutColumnShortcut(deleteColumn.common, deleteLayoutColumn({
+    inputMethod: INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api), list);
   return keymap(list);
 }
 export default keymapPlugin;

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

@@ -1,3 +1,4 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter } from '@atlaskit/editor-common/utils';
@@ -13,6 +14,7 @@ import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './plugin-key';
 import { pluginKey as layoutResizingPluginKey } from './resizing';
 import { getMaybeLayoutSection } from './utils';
+import { getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
 export const DEFAULT_LAYOUT = 'two_equal';
 const isWholeSelectionInsideLayoutColumn = state => {
   // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves
@@ -85,6 +87,30 @@ const getInitialPluginState = (options, state) => {
     dangerPreviewLayoutColumnPositions: undefined
   };
 };
+const fireLayoutColumnMenuOpenedAnalytics = (editorAnalyticsAPI, state, openedViaKeyboard) => {
+  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(state.selection);
+  if (!selectedLayoutColumnsResult) {
+    return;
+  }
+  const {
+    layoutSectionNode,
+    selectedLayoutColumns,
+    startIndex,
+    endIndex
+  } = selectedLayoutColumnsResult;
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent({
+    action: ACTION.OPENED,
+    actionSubject: ACTION_SUBJECT.LAYOUT_COLUMN_MENU,
+    attributes: {
+      columnCount: layoutSectionNode.childCount,
+      endIndex,
+      inputMethod: openedViaKeyboard ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE,
+      selectedCount: selectedLayoutColumns.length,
+      startIndex
+    },
+    eventType: EVENT_TYPE.UI
+  });
+};
 const reduceLayoutColumnMenuState = (pluginState, action) => {
   switch (action.type) {
     case 'toggleLayoutColumnMenu':
@@ -181,10 +207,14 @@ export default ((options, editorAnalyticsAPI) => {
         const columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
         const dangerPreviewMeta = tr.getMeta('layoutColumnDangerPreview');
         if (columnMenuMeta) {
+          const wasLayoutColumnMenuOpen = nextPluginState.isLayoutColumnMenuOpen;
           nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {
             meta: columnMenuMeta,
             type: 'toggleLayoutColumnMenu'
           });
+          if (!wasLayoutColumnMenuOpen && nextPluginState.isLayoutColumnMenuOpen) {
+            fireLayoutColumnMenuOpenedAnalytics(editorAnalyticsAPI, newState, columnMenuMeta.openedViaKeyboard);
+          }
         }
         if (tr.getMeta('layoutColumnDangerPreview') !== undefined) {
           nextPluginState = reduceLayoutColumnMenuState(nextPluginState, {

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

@@ -1,5 +1,6 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findChildrenByType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { DEFAULT_LAYOUT_COLUMN_VALIGN } from '../consts';
 const findLayoutSectionFromSelection = selection => {
   const {
     layoutSection
@@ -102,7 +103,7 @@ export const getAllLayoutColumnsFromSelection = selection => {
 };
 export const getLayoutColumnValign = layoutColumn => {
   var _ref;
-  return layoutColumn ? (_ref = layoutColumn.attrs.valign) !== null && _ref !== void 0 ? _ref : 'top' : undefined;
+  return layoutColumn ? (_ref = layoutColumn.attrs.valign) !== null && _ref !== void 0 ? _ref : DEFAULT_LAYOUT_COLUMN_VALIGN : undefined;
 };
 export const getLayoutColumnMenuAnchorPos = (selection, anchorPosFromHandle) => {
   var _clickedSelectedColum, _selectedLayoutColumn;

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

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { deleteColumn, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
@@ -24,7 +25,9 @@ const DeleteColumnDropdownItem = ({
   }, [setDangerPreview]);
   const onClick = useCallback(() => {
     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();
+    const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.deleteLayoutColumn({
+      inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU
+    });
     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);

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

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addColumnBefore, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
@@ -36,7 +37,10 @@ export const InsertColumnDropdownItem = ({
   const canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   const onClick = useCallback(() => {
     var _api$layout, _api$core;
-    const insertCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn(side);
+    const insertCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn({
+      side,
+      inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU
+    });
     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;
       const tr = insertCommand === null || insertCommand === void 0 ? void 0 : insertCommand(props);

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

@@ -20,7 +20,9 @@ export const VerticalAlignDropdownItem = ({
   const Icon = VERTICAL_ALIGN_ICONS[value];
   const onClick = useCallback(() => {
     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.setLayoutColumnValign(value));
+    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.setLayoutColumnValign({
+      valign: value
+    }));
   }, [api, value]);
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(Icon, {

package/dist/esm/layoutPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { layoutColumn, layoutColumnStage0, layoutColumnWithLocalId, layoutSection, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
+import { layoutColumn, layoutColumnWithLocalId, layoutSection, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
@@ -89,10 +89,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         node: editorExperiment('advanced_layouts', true) ? fg('platform_editor_adf_with_localid') ? layoutSectionWithSingleColumnLocalId : layoutSectionWithSingleColumn : fg('platform_editor_adf_with_localid') ? layoutSectionWithLocalId : layoutSection
       }, {
         name: 'layoutColumn',
-        node: expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) ?
-        // `layoutColumnStage0` includes both `valign` and `localId` attrs, so it remains
-        // compatible with `platform_editor_adf_with_localid` when both flags are enabled.
-        layoutColumnStage0 : fg('platform_editor_adf_with_localid') ? layoutColumnWithLocalId : layoutColumn
+        node: fg('platform_editor_adf_with_localid') ? layoutColumnWithLocalId : layoutColumn
       }];
     },
     pmPlugins: function pmPlugins() {
@@ -383,22 +380,22 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: function deleteLayoutColumn(inputMethod) {
+      deleteLayoutColumn: function deleteLayoutColumn(options) {
         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);
+        return _deleteLayoutColumn(options, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api);
       },
       distributeLayoutColumns: function distributeLayoutColumns(options) {
         var _api$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, inputMethod) {
+      insertLayoutColumn: function insertLayoutColumn(options) {
         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, inputMethod);
+        return _insertLayoutColumn(options, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
       },
       setLayoutColumnDangerPreview: setLayoutColumnDangerPreview,
-      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+      setLayoutColumnValign: function setLayoutColumnValign(options) {
         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);
+        return _setLayoutColumnValign(options, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
       },
       toggleLayoutColumnMenu: toggleLayoutColumnMenu
     }

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

@@ -11,10 +11,10 @@ import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 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 { DEFAULT_LAYOUT_COLUMN_VALIGN, 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, getLayoutColumnsFromContentSelection, getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
+import { getAllLayoutColumnsFromSelection, getLayoutColumnsFromContentSelection, getLayoutColumnValign, 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'];
@@ -544,6 +544,18 @@ var formatLayoutName = function formatLayoutName(layout) {
   }
 };
 export var LAYOUT_COLUMN_INSERT_META = 'layoutColumnInsert';
+var getPreviousLayoutColumnValign = function getPreviousLayoutColumnValign(selectedLayoutColumns) {
+  var _selectedLayoutColumn;
+  var firstValign = getLayoutColumnValign((_selectedLayoutColumn = selectedLayoutColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.node);
+  var hasMixedValign = selectedLayoutColumns.some(function (_ref4) {
+    var node = _ref4.node;
+    return getLayoutColumnValign(node) !== firstValign;
+  });
+  return hasMixedValign ? 'mixed' : firstValign !== null && firstValign !== void 0 ? firstValign : DEFAULT_LAYOUT_COLUMN_VALIGN;
+};
+var hasLayoutColumnContent = function hasLayoutColumnContent(node) {
+  return !isEmptyDocument(node);
+};
 var mapLayoutColumnPreservedSelection = function mapLayoutColumnPreservedSelection(tr, api) {
   var insertMeta = tr.getMeta(LAYOUT_COLUMN_INSERT_META);
   if (insertMeta) {
@@ -572,8 +584,8 @@ export function getEffectiveMaxLayoutColumns() {
 }
 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;
+  return function (_ref5) {
+    var tr = _ref5.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -635,9 +647,10 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       actionSubject: ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
       attributes: {
-        columnCount: redistributedWidths.length,
         endIndex: endIndex,
         inputMethod: inputMethod,
+        newColumnCount: redistributedWidths.length,
+        previousColumnCount: layoutSectionNode.childCount,
         selectedCount: selectedColumnCount,
         side: side,
         startIndex: startIndex
@@ -648,10 +661,12 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
     return tr;
   };
 };
-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;
+export var insertLayoutColumn = function insertLayoutColumn(_ref6, editorAnalyticsAPI, api) {
+  var side = _ref6.side,
+    _ref6$inputMethod = _ref6.inputMethod,
+    inputMethod = _ref6$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref6$inputMethod;
+  return function (_ref7) {
+    var tr = _ref7.tr;
     var result = insertLayoutColumnAt(side, editorAnalyticsAPI, inputMethod)({
       tr: tr
     });
@@ -661,9 +676,12 @@ export var insertLayoutColumn = function insertLayoutColumn(side, editorAnalytic
     return result;
   };
 };
-export var setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI, api) {
-  return function (_ref6) {
-    var tr = _ref6.tr;
+export var setLayoutColumnValign = function setLayoutColumnValign(_ref8, editorAnalyticsAPI, api) {
+  var valign = _ref8.valign,
+    _ref8$inputMethod = _ref8.inputMethod,
+    inputMethod = _ref8$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref8$inputMethod;
+  return function (_ref9) {
+    var tr = _ref9.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -671,20 +689,22 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
     if (!selectedLayoutColumnsResult) {
       return null;
     }
-    var startIndex = selectedLayoutColumnsResult.startIndex,
+    var layoutSectionNode = selectedLayoutColumnsResult.layoutSectionNode,
+      startIndex = selectedLayoutColumnsResult.startIndex,
       endIndex = selectedLayoutColumnsResult.endIndex,
       selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
-    var columnsToUpdate = selectedLayoutColumns.filter(function (_ref7) {
-      var node = _ref7.node;
-      return node.attrs.valign !== valign;
+    var previousValign = getPreviousLayoutColumnValign(selectedLayoutColumns);
+    var columnsToUpdate = selectedLayoutColumns.filter(function (_ref0) {
+      var node = _ref0.node;
+      return getLayoutColumnValign(node) !== valign;
     });
     if (columnsToUpdate.length === 0) {
       return null;
     }
     var updatedColumnCount = columnsToUpdate.length;
-    columnsToUpdate.forEach(function (_ref8) {
-      var node = _ref8.node,
-        pos = _ref8.pos;
+    columnsToUpdate.forEach(function (_ref1) {
+      var node = _ref1.node,
+        pos = _ref1.pos;
       tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
         valign: valign
       }));
@@ -694,8 +714,10 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
       actionSubject: ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
       attributes: {
+        columnCount: layoutSectionNode.childCount,
         endIndex: endIndex,
-        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod: inputMethod,
+        previousValign: previousValign,
         selectedCount: selectedLayoutColumns.length,
         startIndex: startIndex,
         updatedCount: updatedColumnCount,
@@ -710,13 +732,13 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
 };
 export var distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI, api) {
   return function () {
-    var _ref9 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref9$inputMethod = _ref9.inputMethod,
-      inputMethod = _ref9$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref9$inputMethod,
-      _ref9$target = _ref9.target,
-      target = _ref9$target === void 0 ? 'selectedColumns' : _ref9$target;
-    return function (_ref0) {
-      var tr = _ref0.tr;
+    var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref10$inputMethod = _ref10.inputMethod,
+      inputMethod = _ref10$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref10$inputMethod,
+      _ref10$target = _ref10.target,
+      target = _ref10$target === void 0 ? 'selectedColumns' : _ref10$target;
+    return function (_ref11) {
+      var tr = _ref11.tr;
       if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         return null;
       }
@@ -731,8 +753,8 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
       var existingWidths = mapChildren(layoutSectionNode, function (column) {
         return column.attrs.width;
       });
-      var selectedWidths = selectedLayoutColumns.map(function (_ref1) {
-        var node = _ref1.node;
+      var selectedWidths = selectedLayoutColumns.map(function (_ref12) {
+        var node = _ref12.node;
         return node.attrs.width;
       });
       var distribution = calculateDistribution(selectedWidths);
@@ -764,9 +786,9 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
       });
 
       // Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
-      selectedLayoutColumns.forEach(function (_ref10, i) {
-        var node = _ref10.node,
-          pos = _ref10.pos;
+      selectedLayoutColumns.forEach(function (_ref13, i) {
+        var node = _ref13.node,
+          pos = _ref13.pos;
         var colIdx = startIndex + i;
         tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
           width: newWidths[colIdx]
@@ -781,7 +803,8 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
           endIndex: endIndex,
           inputMethod: inputMethod,
           selectedCount: selectedLayoutColumns.length,
-          startIndex: startIndex
+          startIndex: startIndex,
+          target: target
         },
         eventType: EVENT_TYPE.TRACK
       })(tr);
@@ -791,12 +814,12 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
     };
   };
 };
-export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref11) {
-  var anchorPos = _ref11.anchorPos,
-    isOpen = _ref11.isOpen,
-    openedViaKeyboard = _ref11.openedViaKeyboard;
-  return function (_ref12) {
-    var tr = _ref12.tr;
+export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref14) {
+  var anchorPos = _ref14.anchorPos,
+    isOpen = _ref14.isOpen,
+    openedViaKeyboard = _ref14.openedViaKeyboard;
+  return function (_ref15) {
+    var tr = _ref15.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       anchorPos: anchorPos,
       isOpen: isOpen,
@@ -807,25 +830,29 @@ export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref11) {
   };
 };
 export var setLayoutColumnDangerPreview = function setLayoutColumnDangerPreview(show) {
-  return function (_ref13) {
-    var _selectedLayoutColumn;
-    var tr = _ref13.tr;
+  return function (_ref16) {
+    var _selectedLayoutColumn2;
+    var tr = _ref16.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;
+    var positions = show ? (_selectedLayoutColumn2 = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(function (_ref17) {
+      var pos = _ref17.pos;
       return pos;
-    })) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : [] : null;
+    })) !== null && _selectedLayoutColumn2 !== void 0 ? _selectedLayoutColumn2 : [] : 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) {
+export var deleteLayoutColumn = function deleteLayoutColumn() {
+  var _ref18 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref18$inputMethod = _ref18.inputMethod,
+    inputMethod = _ref18$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref18$inputMethod;
+  var editorAnalyticsAPI = arguments.length > 1 ? arguments[1] : undefined;
+  var api = arguments.length > 2 ? arguments[2] : undefined;
+  return function (_ref19) {
     var _api$blockControls4;
-    var tr = _ref15.tr;
+    var tr = _ref19.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -838,15 +865,21 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI,
       selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns,
       startIndex = selectedLayoutColumnsResult.startIndex,
       endIndex = selectedLayoutColumnsResult.endIndex;
-    var emitDeleteColumnAnalytics = function emitDeleteColumnAnalytics(columnCount) {
+    var hadContent = selectedLayoutColumns.some(function (_ref20) {
+      var node = _ref20.node;
+      return hasLayoutColumnContent(node);
+    });
+    var emitDeleteColumnAnalytics = function emitDeleteColumnAnalytics(newColumnCount) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
         action: ACTION.DELETED,
         actionSubject: ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
         attributes: {
-          columnCount: columnCount,
           endIndex: endIndex,
+          hadContent: hadContent,
           inputMethod: inputMethod,
+          newColumnCount: newColumnCount,
+          previousColumnCount: layoutSectionNode.childCount,
           selectedCount: selectedLayoutColumns.length,
           startIndex: startIndex
         },

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

@@ -1,6 +1,7 @@
 export var MAX_STANDARD_LAYOUT_COLUMNS = 3;
 export var MAX_LAYOUT_COLUMNS = 5;
 export var MIN_LAYOUT_COLUMN_WIDTH_PERCENT = 5;
+export var DEFAULT_LAYOUT_COLUMN_VALIGN = 'top';
 export var EVEN_DISTRIBUTED_COL_WIDTHS = {
   1: 100,
   2: 50,