@atlaskit/editor-plugin-table 10.4.4 → 10.4.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 10.4.6
+
+### Patch Changes
+
+- [#124950](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124950)
+  [`45961c4f4a9a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45961c4f4a9a3) -
+  [ux] ED-25485 Fixes issue where up/down arrow keys would move to the wrong cell in a table if
+  there was a node selection inside the table.
+
+## 10.4.5
+
+### Patch Changes
+
+- [#127253](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127253)
+  [`a2593d5c73ccb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2593d5c73ccb) -
+  [ux] Table overflow menu on floating toolbar
+- Updated dependencies
+
 ## 10.4.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -44,6 +44,9 @@
         {
             "path": "../../editor-plugin-editor-viewmode/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-extension/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-guideline/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-plugin-editor-viewmode/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-extension/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-guideline/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../editor-plugin-editor-viewmode/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-extension/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-guideline/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/nodeviews/TableRow.js

@@ -414,7 +414,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
     value: function shouldSticky() {
       if (
       // is Safari
-      navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome') && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_4')) {
+      navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome')) {
         var pos = this.getPos();
         if (typeof pos === 'number') {
           var $tableRowPos = this.view.state.doc.resolve(pos);

package/dist/cjs/pm-plugins/commands/go-to-next-cell.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.goToNextCell = void 0;
+exports.goToNextCellVertical = exports.goToNextCell = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _nesting = require("@atlaskit/editor-common/nesting");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _pluginFactory = require("../plugin-factory");
 var _columnResize = require("./column-resize");
 var _commandsWithAnalytics = require("./commands-with-analytics");
-// #region Constants
-
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
 var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify, getIntl) {
@@ -41,7 +41,7 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
       var firstCellPos = map.positionAt(0, 0, table.node) + table.start;
       var lastCellPos = map.positionAt(map.height - 1, map.width - 1, table.node) + table.start;
 
-      // when tabbing backwards at first cell (top left), insert row at the start of table
+      // When tabbing backwards at first cell (top left), insert row at the start of table
       if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
         (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD, {
           index: 0,
@@ -50,7 +50,7 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
         return true;
       }
 
-      // when tabbing forwards at last cell (bottom right), insert row at the end of table
+      // When tabbing forwards at last cell (bottom right), insert row at the end of table
       if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
         (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD, {
           index: map.height,
@@ -64,4 +64,94 @@ var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsA
       return true;
     };
   };
-};
+};
+
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+var goToNextCellVertical = exports.goToNextCellVertical = function goToNextCellVertical(direction) {
+  return function (state, dispatch) {
+    var selection = state.selection;
+    var nestedTableSelection = (0, _nesting.isSelectionTableNestedInTable)(state);
+    if (!(selection instanceof _state.NodeSelection) && !nestedTableSelection) {
+      return false; // Let ProseMirror handle other selection types
+    }
+    var table = (0, _utils2.findTable)(selection);
+    var cell = (0, _utils2.findCellClosestToPos)(state.doc.resolve(selection.from));
+    var selectionPos = selection.from;
+
+    // Handle when we have nested table fully selected
+    if (table && nestedTableSelection && (0, _utils2.isTableSelected)(selection)) {
+      var parentTablePos = table.pos;
+      table = (0, _utils2.findTableClosestToPos)(state.doc.resolve(parentTablePos));
+      cell = (0, _utils2.findCellClosestToPos)(state.doc.resolve(parentTablePos));
+      selectionPos = parentTablePos;
+    }
+    if (!table || !cell || !cell.pos) {
+      return false;
+    }
+    var _state$schema$nodes2 = state.schema.nodes,
+      tableCell = _state$schema$nodes2.tableCell,
+      tableHeader = _state$schema$nodes2.tableHeader;
+
+    // Let ProseMirror handle movement within the cell if content exists above/below
+    if (cellHasContentInDirection(cell.node, cell.pos, selectionPos, direction)) {
+      return false;
+    }
+
+    // Move to the next cell vertically
+    var map = _tableMap.TableMap.get(table.node);
+    var nextCellPos = map.nextCell(cell.pos - table.start, 'vert', direction);
+    if (dispatch && nextCellPos) {
+      var _$nextCell$nodeAfter, _$nextCell$nodeAfter2;
+      var nextCellStart = table.start + nextCellPos;
+      var $nextCell = state.doc.resolve(nextCellStart);
+      if ((_$nextCell$nodeAfter = $nextCell.nodeAfter) !== null && _$nextCell$nodeAfter !== void 0 && _$nextCell$nodeAfter.type && [tableCell, tableHeader].includes((_$nextCell$nodeAfter2 = $nextCell.nodeAfter) === null || _$nextCell$nodeAfter2 === void 0 ? void 0 : _$nextCell$nodeAfter2.type)) {
+        var contentPos = getTargetPositionInNextCell($nextCell.nodeAfter, nextCellStart, direction);
+        dispatch(state.tr.setSelection(_state.TextSelection.create(state.doc, contentPos)));
+        return true;
+      }
+      return false;
+    }
+    return false; // No next cell found
+  };
+};
+function cellHasContentInDirection(cellNode, cellPos, selectionPos, direction) {
+  var hasContent = false;
+  cellNode.content.forEach(function (node, offset) {
+    var nodeStart = cellPos + 1 + offset;
+    var nodeEnd = nodeStart + node.nodeSize;
+    if (direction === 1 && nodeStart > selectionPos && node.isBlock) {
+      hasContent = true; // Content below
+    } else if (direction === -1 && nodeEnd <= selectionPos && node.isBlock) {
+      hasContent = true; // Content above
+    }
+  });
+  return hasContent;
+}
+function getTargetPositionInNextCell(cellNode, nextCellStart, direction) {
+  var contentPos = nextCellStart + 1; // Default: just inside the cell
+  if (cellNode.content.size > 0) {
+    if (direction === 1) {
+      var firstChild = cellNode.firstChild;
+      if (firstChild && firstChild.isBlock) {
+        contentPos = nextCellStart + 1 + (firstChild.isLeaf ? 0 : 1); // Down: Start of first block
+      }
+    } else if (direction === -1) {
+      var lastBlock;
+      var lastOffset = 0;
+      cellNode.content.forEach(function (node, offset) {
+        if (node.isBlock) {
+          lastBlock = node;
+          lastOffset = offset;
+        }
+      });
+      if (lastBlock) {
+        contentPos = nextCellStart + 1 + lastOffset + (lastBlock.isLeaf ? 0 : lastBlock.nodeSize - 1);
+      }
+    }
+  }
+  return contentPos;
+}

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

@@ -15,6 +15,7 @@ var _commandsWithAnalytics = require("../pm-plugins/drag-and-drop/commands-with-
 var _commands2 = require("./commands");
 var _columnResize = require("./commands/column-resize");
 var _commandsWithAnalytics2 = require("./commands/commands-with-analytics");
+var _goToNextCell = require("./commands/go-to-next-cell");
 var _insert = require("./commands/insert");
 function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
@@ -163,6 +164,14 @@ function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, e
   (0, _keymaps.bindKeymapWithCommand)(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  _keymaps.moveDown.common, (0, _goToNextCell.goToNextCellVertical)(1), list);
+  (0, _keymaps.bindKeymapWithCommand)(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  _keymaps.moveUp.common, (0, _goToNextCell.goToNextCellVertical)(-1), list);
+  (0, _keymaps.bindKeymapWithCommand)(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   _keymaps.decreaseMediaSize.common, (0, _commandsWithAnalytics2.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, _analytics.INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   (0, _keymaps.bindKeymapWithCommand)(
   // Ignored via go/ees005

package/dist/cjs/ui/toolbar.js

@@ -12,8 +12,10 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _nesting = require("@atlaskit/editor-common/nesting");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -24,6 +26,7 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-image-center"));
 var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-image-left"));
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
@@ -454,6 +457,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
             onBlur: (0, _commands.clearHoverSelection)()
           }]
         };
+        var isNestedTable = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _nesting.isSelectionTableNestedInTable)(state);
         return {
           title: 'Table floating controls',
           getDomRef: getDomRef,
@@ -464,16 +468,59 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(alignmentMenu), [separator(alignmentMenu.length === 0)], (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), [
-          // TODO: ED-26961 - editor controls to move to overflow menu
-          {
+          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(alignmentMenu), [separator(alignmentMenu.length === 0)], (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
             type: 'extensions-placeholder',
             separator: 'end'
-          }], (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [copyButton, {
+          }, copyButton, {
             type: 'separator'
-          }, deleteButton] : [deleteButton, {
-            type: 'separator'
-          }, copyButton])),
+          }, deleteButton] : [{
+            type: 'overflow-dropdown',
+            dropdownWidth: 220,
+            options: [{
+              type: 'custom',
+              fallback: [],
+              render: function render(editorView, dropdownOptions) {
+                var _api$extension, _api$extension2, _api$extension3;
+                if (!editorView) {
+                  return null;
+                }
+                var extensionState = api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 || (_api$extension = _api$extension.sharedState) === null || _api$extension === void 0 ? void 0 : _api$extension.currentState();
+                var extensionApi = api === null || api === void 0 || (_api$extension2 = api.extension) === null || _api$extension2 === void 0 ? void 0 : _api$extension2.actions.api();
+                if (!extensionApi || !(extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider)) {
+                  return null;
+                }
+                return (0, _react.jsx)(_floatingToolbar.DropdownMenuExtensionItems, {
+                  node: tableObject.node,
+                  editorView: editorView,
+                  extension: {
+                    extensionProvider: extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider ? Promise.resolve(extensionState.extensionProvider) : undefined,
+                    extensionApi: api === null || api === void 0 || (_api$extension3 = api.extension) === null || _api$extension3 === void 0 ? void 0 : _api$extension3.actions.api()
+                  },
+                  dropdownOptions: dropdownOptions,
+                  disabled: function disabled(key) {
+                    return isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(key);
+                  }
+                });
+              }
+            }, {
+              title: intl.formatMessage(_messages.default.copyToClipboard),
+              onClick: function onClick() {
+                var _api$core, _api$floatingToolbar;
+                api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
+                api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(nodeType));
+                return true;
+              },
+              icon: (0, _react.jsx)(_copy.default, {
+                label: intl.formatMessage(_messages.default.copyToClipboard)
+              })
+            }, {
+              title: intl.formatMessage(_messages.default.delete),
+              onClick: (0, _commandsWithAnalytics.deleteTableWithAnalytics)(editorAnalyticsAPI),
+              icon: (0, _react.jsx)(_delete.default, {
+                label: intl.formatMessage(_messages.default.delete)
+              })
+            }]
+          }])),
           scrollable: true
         };
       }

package/dist/es2019/nodeviews/TableRow.js

@@ -375,7 +375,7 @@ export default class TableRow extends TableNodeView {
   shouldSticky() {
     if (
     // is Safari
-    navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome') && fg('platform_editor_advanced_layouts_post_fix_patch_4')) {
+    navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome')) {
       const pos = this.getPos();
       if (typeof pos === 'number') {
         const $tableRowPos = this.view.state.doc.resolve(pos);

package/dist/es2019/pm-plugins/commands/go-to-next-cell.js

@@ -1,9 +1,9 @@
-// #region Constants
-
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
+import { goToNextCell as baseGotoNextCell, findCellClosestToPos, findTable, findTableClosestToPos, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 import { insertRowWithAnalytics } from './commands-with-analytics';
@@ -34,7 +34,7 @@ export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => directi
   const firstCellPos = map.positionAt(0, 0, table.node) + table.start;
   const lastCellPos = map.positionAt(map.height - 1, map.width - 1, table.node) + table.start;
 
-  // when tabbing backwards at first cell (top left), insert row at the start of table
+  // When tabbing backwards at first cell (top left), insert row at the start of table
   if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
     insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
       index: 0,
@@ -43,7 +43,7 @@ export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => directi
     return true;
   }
 
-  // when tabbing forwards at last cell (bottom right), insert row at the end of table
+  // When tabbing forwards at last cell (bottom right), insert row at the end of table
   if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
     insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
       index: map.height,
@@ -55,4 +55,95 @@ export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => directi
     return baseGotoNextCell(direction)(state, dispatch);
   }
   return true;
-};
+};
+
+/**
+ * Moves the cursor vertically from a NodeSelection within a table cell.
+ * - If content exists above/below within the cell, lets ProseMirror handle it.
+ * - Otherwise, moves to the next cell (down to start, up to last line).
+ */
+export const goToNextCellVertical = direction => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const nestedTableSelection = isSelectionTableNestedInTable(state);
+  if (!(selection instanceof NodeSelection) && !nestedTableSelection) {
+    return false; // Let ProseMirror handle other selection types
+  }
+  let table = findTable(selection);
+  let cell = findCellClosestToPos(state.doc.resolve(selection.from));
+  let selectionPos = selection.from;
+
+  // Handle when we have nested table fully selected
+  if (table && nestedTableSelection && isTableSelected(selection)) {
+    const parentTablePos = table.pos;
+    table = findTableClosestToPos(state.doc.resolve(parentTablePos));
+    cell = findCellClosestToPos(state.doc.resolve(parentTablePos));
+    selectionPos = parentTablePos;
+  }
+  if (!table || !cell || !cell.pos) {
+    return false;
+  }
+  const {
+    tableCell,
+    tableHeader
+  } = state.schema.nodes;
+
+  // Let ProseMirror handle movement within the cell if content exists above/below
+  if (cellHasContentInDirection(cell.node, cell.pos, selectionPos, direction)) {
+    return false;
+  }
+
+  // Move to the next cell vertically
+  const map = TableMap.get(table.node);
+  const nextCellPos = map.nextCell(cell.pos - table.start, 'vert', direction);
+  if (dispatch && nextCellPos) {
+    var _$nextCell$nodeAfter, _$nextCell$nodeAfter2;
+    const nextCellStart = table.start + nextCellPos;
+    const $nextCell = state.doc.resolve(nextCellStart);
+    if ((_$nextCell$nodeAfter = $nextCell.nodeAfter) !== null && _$nextCell$nodeAfter !== void 0 && _$nextCell$nodeAfter.type && [tableCell, tableHeader].includes((_$nextCell$nodeAfter2 = $nextCell.nodeAfter) === null || _$nextCell$nodeAfter2 === void 0 ? void 0 : _$nextCell$nodeAfter2.type)) {
+      const contentPos = getTargetPositionInNextCell($nextCell.nodeAfter, nextCellStart, direction);
+      dispatch(state.tr.setSelection(TextSelection.create(state.doc, contentPos)));
+      return true;
+    }
+    return false;
+  }
+  return false; // No next cell found
+};
+function cellHasContentInDirection(cellNode, cellPos, selectionPos, direction) {
+  let hasContent = false;
+  cellNode.content.forEach((node, offset) => {
+    const nodeStart = cellPos + 1 + offset;
+    const nodeEnd = nodeStart + node.nodeSize;
+    if (direction === 1 && nodeStart > selectionPos && node.isBlock) {
+      hasContent = true; // Content below
+    } else if (direction === -1 && nodeEnd <= selectionPos && node.isBlock) {
+      hasContent = true; // Content above
+    }
+  });
+  return hasContent;
+}
+function getTargetPositionInNextCell(cellNode, nextCellStart, direction) {
+  let contentPos = nextCellStart + 1; // Default: just inside the cell
+  if (cellNode.content.size > 0) {
+    if (direction === 1) {
+      const firstChild = cellNode.firstChild;
+      if (firstChild && firstChild.isBlock) {
+        contentPos = nextCellStart + 1 + (firstChild.isLeaf ? 0 : 1); // Down: Start of first block
+      }
+    } else if (direction === -1) {
+      let lastBlock;
+      let lastOffset = 0;
+      cellNode.content.forEach((node, offset) => {
+        if (node.isBlock) {
+          lastBlock = node;
+          lastOffset = offset;
+        }
+      });
+      if (lastBlock) {
+        contentPos = nextCellStart + 1 + lastOffset + (lastBlock.isLeaf ? 0 : lastBlock.nodeSize - 1);
+      }
+    }
+  }
+  return contentPos;
+}

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

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveDown, moveLeft, moveRight, moveRowDown, moveRowUp, moveUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
@@ -8,6 +8,7 @@ import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/
 import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from './commands';
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from './commands/column-resize';
 import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from './commands/commands-with-analytics';
+import { goToNextCellVertical } from './commands/go-to-next-cell';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable, insertTableWithNestingSupport } from './commands/insert';
 export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
@@ -146,6 +147,14 @@ export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProvide
   bindKeymapWithCommand(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  moveDown.common, goToNextCellVertical(1), list);
+  bindKeymapWithCommand(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  moveUp.common, goToNextCellVertical(-1), list);
+  bindKeymapWithCommand(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   bindKeymapWithCommand(
   // Ignored via go/ees005

package/dist/es2019/ui/toolbar.js

@@ -7,8 +7,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { DropdownMenuExtensionItems } from '@atlaskit/editor-common/floating-toolbar';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
@@ -19,6 +21,7 @@ import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
 import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
 import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
@@ -426,6 +429,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
         onBlur: clearHoverSelection()
       }]
     };
+    const isNestedTable = fg('platform_editor_use_nested_table_pm_nodes') && isSelectionTableNestedInTable(state);
     return {
       title: 'Table floating controls',
       getDomRef,
@@ -436,16 +440,59 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
-      items: [menu, separator(menu.hidden), ...alignmentMenu, separator(alignmentMenu.length === 0), ...cellItems, ...columnSettingsItems, ...colorPicker,
-      // TODO: ED-26961 - editor controls to move to overflow menu
-      {
+      items: [menu, separator(menu.hidden), ...alignmentMenu, separator(alignmentMenu.length === 0), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(editorExperiment('platform_editor_controls', 'control') ? [{
         type: 'extensions-placeholder',
         separator: 'end'
-      }, ...(editorExperiment('platform_editor_controls', 'control') ? [copyButton, {
+      }, copyButton, {
         type: 'separator'
-      }, deleteButton] : [deleteButton, {
-        type: 'separator'
-      }, copyButton])],
+      }, deleteButton] : [{
+        type: 'overflow-dropdown',
+        dropdownWidth: 220,
+        options: [{
+          type: 'custom',
+          fallback: [],
+          render: (editorView, dropdownOptions) => {
+            var _api$extension, _api$extension$shared, _api$extension2, _api$extension3;
+            if (!editorView) {
+              return null;
+            }
+            const extensionState = api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : (_api$extension$shared = _api$extension.sharedState) === null || _api$extension$shared === void 0 ? void 0 : _api$extension$shared.currentState();
+            const extensionApi = api === null || api === void 0 ? void 0 : (_api$extension2 = api.extension) === null || _api$extension2 === void 0 ? void 0 : _api$extension2.actions.api();
+            if (!extensionApi || !(extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider)) {
+              return null;
+            }
+            return jsx(DropdownMenuExtensionItems, {
+              node: tableObject.node,
+              editorView: editorView,
+              extension: {
+                extensionProvider: extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider ? Promise.resolve(extensionState.extensionProvider) : undefined,
+                extensionApi: api === null || api === void 0 ? void 0 : (_api$extension3 = api.extension) === null || _api$extension3 === void 0 ? void 0 : _api$extension3.actions.api()
+              },
+              dropdownOptions: dropdownOptions,
+              disabled: key => {
+                return isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(key);
+              }
+            });
+          }
+        }, {
+          title: intl.formatMessage(commonMessages.copyToClipboard),
+          onClick: () => {
+            var _api$core, _api$floatingToolbar;
+            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute( // @ts-ignore
+            api === null || api === void 0 ? void 0 : (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(nodeType));
+            return true;
+          },
+          icon: jsx(CopyIcon, {
+            label: intl.formatMessage(commonMessages.copyToClipboard)
+          })
+        }, {
+          title: intl.formatMessage(commonMessages.delete),
+          onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
+          icon: jsx(DeleteIcon, {
+            label: intl.formatMessage(commonMessages.delete)
+          })
+        }]
+      }])],
       scrollable: true
     };
   }

package/dist/esm/nodeviews/TableRow.js

@@ -407,7 +407,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
     value: function shouldSticky() {
       if (
       // is Safari
-      navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome') && fg('platform_editor_advanced_layouts_post_fix_patch_4')) {
+      navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome')) {
         var pos = this.getPos();
         if (typeof pos === 'number') {
           var $tableRowPos = this.view.state.doc.resolve(pos);