@atlaskit/editor-plugin-table 5.3.24 → 5.3.26

package/src/plugins/table/transforms/column-width.ts

@@ -78,71 +78,25 @@ export const updateColumnWidths =
     }
 
     // updating all cells with new attributes
-    if (getBooleanFF('platform.editor.update-table-cell-width-via-step')) {
-      const seen: { [key: number]: boolean } = {};
-      for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-        for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-          const mapIndex = rowIndex * map.width + columnIndex;
-          const pos = map.map[mapIndex];
-          const cell = table.nodeAt(pos);
-          if (!seen[pos] && cell) {
-            if (updatedCellsAttrs[pos]) {
-              tr.step(
-                new AttrStep(
-                  pos + start,
-                  'colwidth',
-                  updatedCellsAttrs[pos].colwidth,
-                ),
-              );
-            }
-            seen[pos] = true;
-          }
-        }
-      }
-    } else {
-      const rows: PMNode[] = [];
-      const seen: { [key: number]: boolean } = {};
-      for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-        const row = table.child(rowIndex);
-        const cells: PMNode[] = [];
-
-        for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-          const mapIndex = rowIndex * map.width + columnIndex;
-          const pos = map.map[mapIndex];
-          const cell = table.nodeAt(pos);
-          if (!seen[pos] && cell) {
-            cells.push(
-              cell.type.createChecked(
-                updatedCellsAttrs[pos] || cell.attrs,
-                cell.content,
-                cell.marks,
+    const seen: { [key: number]: boolean } = {};
+    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+        const mapIndex = rowIndex * map.width + columnIndex;
+        const pos = map.map[mapIndex];
+        const cell = table.nodeAt(pos);
+        if (!seen[pos] && cell) {
+          if (updatedCellsAttrs[pos]) {
+            tr.step(
+              new AttrStep(
+                pos + start,
+                'colwidth',
+                updatedCellsAttrs[pos].colwidth,
               ),
             );
-            seen[pos] = true;
           }
+          seen[pos] = true;
         }
-        rows.push(row.type.createChecked(row.attrs, cells, row.marks));
       }
-
-      const tablePos = start - 1;
-      const selectionBookmark = tr.selection.getBookmark();
-
-      tr.replaceWith(
-        tablePos,
-        tablePos + table.nodeSize,
-        table.type.createChecked(table.attrs, rows, table.marks),
-      );
-      /**
-       * We want to restore to the original selection but w/o applying the mapping. Function
-       * tr.replaceWith puts the selection after the inserted content. We need to manually
-       * set the selection back to original state. Mapping in this case doesn't quite work
-       * e.g. if we change the content before a selection. This is because mapping
-       * means moving it if the content in front of it changed. Instead we can get
-       * bookmark of selection.
-       *
-       * @see https://github.com/ProseMirror/prosemirror/issues/645
-       */
-      tr.setSelection(selectionBookmark.resolve(tr.doc));
     }
 
     return tr;

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -11,6 +11,7 @@ import {
 } from '@atlaskit/editor-common/ui-menu';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -23,6 +24,7 @@ import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import type { PluginConfig, TableDirection } from '../../types';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import type { DragMenuConfig } from '../../utils/drag-menu';
@@ -132,9 +134,39 @@ export const DragMenu = ({
 
   const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
 
+  /**
+   * This function is to check if the menu should be closed or not.
+   * As when continously clicking on drag handle on different rows/columns,
+   * should open the menu corresponding to the position of the drag handle.
+   * @returns true when the menu should be closed, false otherwise
+   */
+  const shouldCloseMenu = (state: EditorState) => {
+    let {
+      isDragMenuOpen: previousOpenState,
+      dragMenuDirection: previousDragMenuDirection,
+      dragMenuIndex: previousDragMenuIndex,
+    } = getPluginState(state);
+
+    // menu open but menu direction changed, means user clicked on drag handle of different row/column
+    // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+    // 2 scenarios above , menu should not be closed.
+    if (
+      (previousOpenState === true && previousDragMenuDirection !== direction) ||
+      (previousOpenState === true &&
+        previousDragMenuDirection === direction &&
+        previousDragMenuIndex !== index)
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  };
+
   const closeMenu = () => {
     const { state, dispatch } = editorView;
-    toggleDragMenu(false)(state, dispatch);
+    if (shouldCloseMenu(state)) {
+      toggleDragMenu(false, direction, index)(state, dispatch);
+    }
   };
 
   const handleMenuItemActivated = ({ item }: { item: MenuItem }) => {