@atlaskit/editor-plugin-layout 11.1.7 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/editor-plugin-layout
 
+## 12.0.0
+
+### Major Changes
+
+- [`19c2b7d1cbc13`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19c2b7d1cbc13) -
+  Add analytics for layout column menu interactions
+
+### Minor Changes
+
+- [`f95240aab2e55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f95240aab2e55) -
+  Promote layout column vertical alignment in ADF schema
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.9
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.1.7
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -96,10 +96,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _schema.layoutSectionWithSingleColumnLocalId : _schema.layoutSectionWithSingleColumn : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutSectionWithLocalId : _adfSchema.layoutSection
       }, {
         name: 'layoutColumn',
-        node: (0, _expValEqualsNoExposure.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.
-        _adfSchema.layoutColumnStage0 : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
+        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
       }];
     },
     pmPlugins: function pmPlugins() {
@@ -390,22 +387,22 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       return _pluginKey.pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: function deleteLayoutColumn(inputMethod) {
+      deleteLayoutColumn: function deleteLayoutColumn(options) {
         var _api$analytics5;
-        return (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, inputMethod);
+        return (0, _actions.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 (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
       },
-      insertLayoutColumn: function insertLayoutColumn(side, inputMethod) {
+      insertLayoutColumn: function insertLayoutColumn(options) {
         var _api$analytics7;
-        return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api, inputMethod);
+        return (0, _actions.insertLayoutColumn)(options, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
       },
       setLayoutColumnDangerPreview: _actions.setLayoutColumnDangerPreview,
-      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+      setLayoutColumnValign: function setLayoutColumnValign(options) {
         var _api$analytics8;
-        return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
+        return (0, _actions.setLayoutColumnValign)(options, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
       },
       toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
     }

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

@@ -554,6 +554,18 @@ var formatLayoutName = function formatLayoutName(layout) {
   }
 };
 var LAYOUT_COLUMN_INSERT_META = exports.LAYOUT_COLUMN_INSERT_META = 'layoutColumnInsert';
+var getPreviousLayoutColumnValign = function getPreviousLayoutColumnValign(selectedLayoutColumns) {
+  var _selectedLayoutColumn;
+  var firstValign = (0, _layoutColumnSelection.getLayoutColumnValign)((_selectedLayoutColumn = selectedLayoutColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.node);
+  var hasMixedValign = selectedLayoutColumns.some(function (_ref4) {
+    var node = _ref4.node;
+    return (0, _layoutColumnSelection.getLayoutColumnValign)(node) !== firstValign;
+  });
+  return hasMixedValign ? 'mixed' : firstValign !== null && firstValign !== void 0 ? firstValign : _consts.DEFAULT_LAYOUT_COLUMN_VALIGN;
+};
+var hasLayoutColumnContent = function hasLayoutColumnContent(node) {
+  return !(0, _utils.isEmptyDocument)(node);
+};
 var mapLayoutColumnPreservedSelection = function mapLayoutColumnPreservedSelection(tr, api) {
   var insertMeta = tr.getMeta(LAYOUT_COLUMN_INSERT_META);
   if (insertMeta) {
@@ -582,8 +594,8 @@ function getEffectiveMaxLayoutColumns() {
 }
 var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAPI) {
   var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
-  return function (_ref4) {
-    var tr = _ref4.tr;
+  return function (_ref5) {
+    var tr = _ref5.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -645,9 +657,10 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: _analytics.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
@@ -658,10 +671,12 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
     return tr;
   };
 };
-var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI, api) {
-  var inputMethod = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
-  return function (_ref5) {
-    var tr = _ref5.tr;
+var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(_ref6, editorAnalyticsAPI, api) {
+  var side = _ref6.side,
+    _ref6$inputMethod = _ref6.inputMethod,
+    inputMethod = _ref6$inputMethod === void 0 ? _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref6$inputMethod;
+  return function (_ref7) {
+    var tr = _ref7.tr;
     var result = insertLayoutColumnAt(side, editorAnalyticsAPI, inputMethod)({
       tr: tr
     });
@@ -671,9 +686,12 @@ var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColum
     return result;
   };
 };
-var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI, api) {
-  return function (_ref6) {
-    var tr = _ref6.tr;
+var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(_ref8, editorAnalyticsAPI, api) {
+  var valign = _ref8.valign,
+    _ref8$inputMethod = _ref8.inputMethod,
+    inputMethod = _ref8$inputMethod === void 0 ? _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref8$inputMethod;
+  return function (_ref9) {
+    var tr = _ref9.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -681,20 +699,22 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
     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 (0, _layoutColumnSelection.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
       }));
@@ -704,8 +724,10 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
       actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
       attributes: {
+        columnCount: layoutSectionNode.childCount,
         endIndex: endIndex,
-        inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        inputMethod: inputMethod,
+        previousValign: previousValign,
         selectedCount: selectedLayoutColumns.length,
         startIndex: startIndex,
         updatedCount: updatedColumnCount,
@@ -720,13 +742,13 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
 };
 var distributeLayoutColumns = exports.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 ? _analytics.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 ? _analytics.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 (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
         return null;
       }
@@ -741,8 +763,8 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
       var existingWidths = (0, _utils.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 = (0, _layoutColumnDistribution.calculateDistribution)(selectedWidths);
@@ -774,9 +796,9 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
       });
 
       // 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]
@@ -791,7 +813,8 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
           endIndex: endIndex,
           inputMethod: inputMethod,
           selectedCount: selectedLayoutColumns.length,
-          startIndex: startIndex
+          startIndex: startIndex,
+          target: target
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       })(tr);
@@ -801,12 +824,12 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
     };
   };
 };
-var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref11) {
-  var anchorPos = _ref11.anchorPos,
-    isOpen = _ref11.isOpen,
-    openedViaKeyboard = _ref11.openedViaKeyboard;
-  return function (_ref12) {
-    var tr = _ref12.tr;
+var toggleLayoutColumnMenu = exports.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,
@@ -817,25 +840,29 @@ var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLay
   };
 };
 var setLayoutColumnDangerPreview = exports.setLayoutColumnDangerPreview = function setLayoutColumnDangerPreview(show) {
-  return function (_ref13) {
-    var _selectedLayoutColumn;
-    var tr = _ref13.tr;
+  return function (_ref16) {
+    var _selectedLayoutColumn2;
+    var tr = _ref16.tr;
     var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
-    var positions = show ? (_selectedLayoutColumn = selectedLayoutColumnsResult === null || selectedLayoutColumnsResult === void 0 ? void 0 : selectedLayoutColumnsResult.selectedLayoutColumns.map(function (_ref14) {
-      var pos = _ref14.pos;
+    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;
   };
 };
-var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
-  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
-  return function (_ref15) {
+var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn() {
+  var _ref18 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref18$inputMethod = _ref18.inputMethod,
+    inputMethod = _ref18$inputMethod === void 0 ? _analytics.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 (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -848,15 +875,21 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
       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: _analytics.ACTION.DELETED,
         actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: _analytics.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/cjs/pm-plugins/consts.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MIN_LAYOUT_COLUMN_WIDTH_PERCENT = exports.MAX_STANDARD_LAYOUT_COLUMNS = exports.MAX_LAYOUT_COLUMNS = exports.EVEN_DISTRIBUTED_COL_WIDTHS = void 0;
+exports.MIN_LAYOUT_COLUMN_WIDTH_PERCENT = exports.MAX_STANDARD_LAYOUT_COLUMNS = exports.MAX_LAYOUT_COLUMNS = exports.EVEN_DISTRIBUTED_COL_WIDTHS = exports.DEFAULT_LAYOUT_COLUMN_VALIGN = void 0;
 var MAX_STANDARD_LAYOUT_COLUMNS = exports.MAX_STANDARD_LAYOUT_COLUMNS = 3;
 var MAX_LAYOUT_COLUMNS = exports.MAX_LAYOUT_COLUMNS = 5;
 var MIN_LAYOUT_COLUMN_WIDTH_PERCENT = exports.MIN_LAYOUT_COLUMN_WIDTH_PERCENT = 5;
+var DEFAULT_LAYOUT_COLUMN_VALIGN = exports.DEFAULT_LAYOUT_COLUMN_VALIGN = 'top';
 var EVEN_DISTRIBUTED_COL_WIDTHS = exports.EVEN_DISTRIBUTED_COL_WIDTHS = {
   1: 100,
   2: 50,

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

@@ -21,11 +21,25 @@ function keymapPlugin(_ref) {
   var _api$analytics, _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
   var api = _ref.api;
   var list = {};
-  bindLayoutColumnShortcut(_keymaps.addColumnBefore.common, (0, _actions.insertLayoutColumn)('left', api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
-  bindLayoutColumnShortcut(_keymaps.addColumnBeforeVO.common, (0, _actions.insertLayoutColumn)('left', api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
-  bindLayoutColumnShortcut(_keymaps.addColumnAfter.common, (0, _actions.insertLayoutColumn)('right', api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
-  bindLayoutColumnShortcut(_keymaps.addColumnAfterVO.common, (0, _actions.insertLayoutColumn)('right', api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
-  bindLayoutColumnShortcut(_keymaps.deleteColumn.common, (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api, _analytics.INPUT_METHOD.KEYBOARD), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnBefore.common, (0, _actions.insertLayoutColumn)({
+    side: 'left',
+    inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnBeforeVO.common, (0, _actions.insertLayoutColumn)({
+    side: 'left',
+    inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnAfter.common, (0, _actions.insertLayoutColumn)({
+    side: 'right',
+    inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api), list);
+  bindLayoutColumnShortcut(_keymaps.addColumnAfterVO.common, (0, _actions.insertLayoutColumn)({
+    side: 'right',
+    inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api), list);
+  bindLayoutColumnShortcut(_keymaps.deleteColumn.common, (0, _actions.deleteLayoutColumn)({
+    inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+  }, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api), list);
   return (0, _keymaps.keymap)(list);
 }
 var _default = exports.default = keymapPlugin;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DEFAULT_LAYOUT = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -22,6 +23,7 @@ var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
 var _resizing = require("./resizing");
 var _utils3 = require("./utils");
+var _layoutColumnSelection = require("./utils/layout-column-selection");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_LAYOUT = exports.DEFAULT_LAYOUT = 'two_equal';
@@ -91,6 +93,28 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     dangerPreviewLayoutColumnPositions: undefined
   };
 };
+var fireLayoutColumnMenuOpenedAnalytics = function fireLayoutColumnMenuOpenedAnalytics(editorAnalyticsAPI, state, openedViaKeyboard) {
+  var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(state.selection);
+  if (!selectedLayoutColumnsResult) {
+    return;
+  }
+  var layoutSectionNode = selectedLayoutColumnsResult.layoutSectionNode,
+    selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns,
+    startIndex = selectedLayoutColumnsResult.startIndex,
+    endIndex = selectedLayoutColumnsResult.endIndex;
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent({
+    action: _analytics.ACTION.OPENED,
+    actionSubject: _analytics.ACTION_SUBJECT.LAYOUT_COLUMN_MENU,
+    attributes: {
+      columnCount: layoutSectionNode.childCount,
+      endIndex: endIndex,
+      inputMethod: openedViaKeyboard ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE,
+      selectedCount: selectedLayoutColumns.length,
+      startIndex: startIndex
+    },
+    eventType: _analytics.EVENT_TYPE.UI
+  });
+};
 var reduceLayoutColumnMenuState = function reduceLayoutColumnMenuState(pluginState, action) {
   switch (action.type) {
     case 'toggleLayoutColumnMenu':
@@ -183,10 +207,14 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
         var columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
         var dangerPreviewMeta = tr.getMeta('layoutColumnDangerPreview');
         if (columnMenuMeta) {
+          var 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/cjs/pm-plugins/utils/layout-column-selection.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getSelectedLayoutColumnsFromSelection = exports.getLayoutColumnsFromContentSelection = exports.getLayoutColumnValign = exports.getLayoutColumnMenuAnchorPos = exports.getAllLayoutColumnsFromSelection = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _consts = require("../consts");
 var findLayoutSectionFromSelection = function findLayoutSectionFromSelection(selection) {
   var layoutSection = selection.$from.doc.type.schema.nodes.layoutSection;
   // NodeSelection on the layoutSection node itself
@@ -104,7 +105,7 @@ var getAllLayoutColumnsFromSelection = exports.getAllLayoutColumnsFromSelection
 };
 var getLayoutColumnValign = exports.getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
   var _ref4;
-  return layoutColumn ? (_ref4 = layoutColumn.attrs.valign) !== null && _ref4 !== void 0 ? _ref4 : 'top' : undefined;
+  return layoutColumn ? (_ref4 = layoutColumn.attrs.valign) !== null && _ref4 !== void 0 ? _ref4 : _consts.DEFAULT_LAYOUT_COLUMN_VALIGN : undefined;
 };
 var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteColumnDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
@@ -30,7 +31,9 @@ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function Delet
   }, [setDangerPreview]);
   var onClick = (0, _react.useCallback)(function () {
     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();
+    var deleteCommand = api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.deleteLayoutColumn({
+      inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU
+    });
     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);

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 _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
@@ -41,7 +42,10 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
   var canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   var onClick = (0, _react.useCallback)(function () {
     var _api$layout, _api$core;
-    var insertCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn(side);
+    var insertCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn({
+      side: side,
+      inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU
+    });
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
       var _api$layout2;
       var tr = insertCommand === null || insertCommand === void 0 ? void 0 : insertCommand(props);

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

@@ -27,7 +27,9 @@ var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function Ver
   var Icon = _verticalAlignIcons.VERTICAL_ALIGN_ICONS[value];
   var onClick = (0, _react.useCallback)(function () {
     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.setLayoutColumnValign(value));
+    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.setLayoutColumnValign({
+      valign: value
+    }));
   }, [api, value]);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {

package/dist/es2019/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';
@@ -88,10 +88,7 @@ export const layoutPlugin = ({
         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() {
@@ -362,22 +359,22 @@ export const layoutPlugin = ({
       return pluginKey.getState(editorState);
     },
     commands: {
-      deleteLayoutColumn: inputMethod => {
+      deleteLayoutColumn: options => {
         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);
+        return deleteLayoutColumn(options, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api);
       },
       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, inputMethod) => {
+      insertLayoutColumn: options => {
         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, inputMethod);
+        return insertLayoutColumn(options, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
       },
       setLayoutColumnDangerPreview,
-      setLayoutColumnValign: valign => {
+      setLayoutColumnValign: options => {
         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);
+        return setLayoutColumnValign(options, api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
       },
       toggleLayoutColumnMenu
     }