@atlaskit/editor-plugin-table 5.5.2 → 5.5.4

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -16,6 +16,7 @@ type DragControlsProps = {
     canDrag?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
+    selectRows: (rowIndexes: number[]) => void;
     updateCellHoverLocation: (rowIndex: number) => void;
 };
 export declare const DragControls: React.FC<import("react-intl-next").WithIntlProps<DragControlsProps & WrappedComponentProps<"intl">>> & {

package/dist/types/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -42,6 +42,7 @@ export default class TableFloatingControls extends Component<Props, State> {
     componentWillUnmount(): void;
     render(): JSX.Element | null;
     private selectRow;
+    private selectRows;
     private hoverRows;
     private updateCellHoverLocation;
 }

package/dist/types-ts4.5/plugins/table/commands/index.d.ts

@@ -2,7 +2,7 @@ export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clear
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout, } from './toggle';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';

package/dist/types-ts4.5/plugins/table/commands/misc.d.ts

@@ -20,7 +20,9 @@ export declare const convertFirstRowToHeader: (schema: Schema) => (tr: Transacti
 export declare const moveCursorBackward: Command;
 export declare const setMultipleCellAttrs: (attrs: Object, targetCellPosition?: number) => Command;
 export declare const selectColumn: (column: number, expand?: boolean) => Command;
+export declare const selectColumns: (columnIndexes: number[]) => Command;
 export declare const selectRow: (row: number, expand?: boolean) => Command;
+export declare const selectRows: (rowIndexes: number[]) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -421,3 +421,4 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
+export type HandleTypes = 'hover' | 'selected';

package/dist/types-ts4.5/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -1,14 +1,9 @@
 /// <reference types="react" />
 type HandleIconProps = {
-    canDrag: boolean;
-    hasMergedCells: boolean;
-    direction: 'row' | 'column';
-    isDragMenuOpen: boolean | undefined;
+    forceDefaultHandle: boolean;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;
-    isCurrentRowSelected: boolean;
-    isCurrentColumnSelected: boolean;
-    dragMenuDirection: 'row' | 'column' | undefined;
+    hasMergedCells: boolean;
 };
 export declare const HandleIconComponent: (props: HandleIconProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -5,6 +5,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
+    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -16,5 +17,5 @@ type DragHandleProps = {
     editorView: EditorView;
     canDrag?: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -16,6 +16,7 @@ type DragControlsProps = {
     canDrag?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
+    selectRows: (rowIndexes: number[]) => void;
     updateCellHoverLocation: (rowIndex: number) => void;
 };
 export declare const DragControls: React.FC<import("react-intl-next").WithIntlProps<DragControlsProps & WrappedComponentProps<"intl">>> & {

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -42,6 +42,7 @@ export default class TableFloatingControls extends Component<Props, State> {
     componentWillUnmount(): void;
     render(): JSX.Element | null;
     private selectRow;
+    private selectRows;
     private hoverRows;
     private updateCellHoverLocation;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.5.2",
+  "version": "5.5.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -121,9 +121,6 @@
     "platform.editor.table-remove-update-resize-handles_djvab": {
       "type": "boolean"
     },
-    "platform.editor.table.overflow-state-analytics": {
-      "type": "boolean"
-    },
     "platform.editor.table.increase-shadow-visibility_lh89r": {
       "type": "boolean"
     },

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -74,6 +74,7 @@ describe('NumberColumn', () => {
           isTableHovered={true}
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
+          selectRows={jest.fn()}
           updateCellHoverLocation={jest.fn()}
           tableWidth={760}
         />
@@ -111,6 +112,7 @@ describe('NumberColumn', () => {
           }}
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
+          selectRows={jest.fn()}
           updateCellHoverLocation={jest.fn()}
           tableWidth={760}
         />

package/src/plugins/table/commands/index.ts

@@ -26,7 +26,9 @@ export {
   hideInsertColumnOrRowButton,
   moveCursorBackward,
   selectColumn,
+  selectColumns,
   selectRow,
+  selectRows,
   setCellAttr,
   setEditorFocus,
   setMultipleCellAttrs,

package/src/plugins/table/commands/misc.ts

@@ -30,8 +30,10 @@ import {
   isSelectionType,
   isTableSelected,
   removeTable,
+  selectColumns as selectColumnsTransform,
   selectColumn as selectColumnTransform,
   selectionCell,
+  selectRows as selectRowsTransform,
   selectRow as selectRowTransform,
   setCellAttrs,
 } from '@atlaskit/editor-tables/utils';
@@ -487,6 +489,53 @@ export const selectColumn = (column: number, expand?: boolean) =>
       selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false),
   );
 
+export const selectColumns = (columnIndexes: number[]) =>
+  createCommand(
+    (state) => {
+      if (!columnIndexes) {
+        return false;
+      }
+      const cells = columnIndexes
+        .map((column) => getCellsInColumn(column)(state.tr.selection))
+        .flat();
+      if (
+        !cells ||
+        !cells.length ||
+        cells.some((cell) => cell && typeof cell.pos !== 'number')
+      ) {
+        return false;
+      }
+      const decorations = createColumnSelectedDecoration(
+        selectColumnsTransform(columnIndexes)(state.tr),
+      );
+
+      const decorationSet = updatePluginStateDecorations(
+        state,
+        decorations,
+        TableDecorations.COLUMN_SELECTED,
+      );
+
+      const cellsInFirstColumn = getCellsInColumn(Math.min(...columnIndexes))(
+        state.tr.selection,
+      );
+      if (!cellsInFirstColumn || cellsInFirstColumn.length === 0) {
+        return false;
+      }
+      const targetCellPosition = cellsInFirstColumn[0].pos;
+
+      return {
+        type: 'SELECT_COLUMN',
+        data: { targetCellPosition, decorationSet },
+      };
+    },
+    (tr: Transaction) => {
+      return selectColumnsTransform(columnIndexes)(tr).setMeta(
+        'addToHistory',
+        false,
+      );
+    },
+  );
+
 export const selectRow = (row: number, expand?: boolean) =>
   createCommand(
     (state) => {
@@ -501,6 +550,35 @@ export const selectRow = (row: number, expand?: boolean) =>
     (tr) => selectRowTransform(row, expand)(tr).setMeta('addToHistory', false),
   );
 
+export const selectRows = (rowIndexes: number[]) =>
+  createCommand(
+    (state) => {
+      if (rowIndexes.length === 0) {
+        return false;
+      }
+      const cells = rowIndexes
+        .map((row) => getCellsInRow(row)(state.tr.selection))
+        .flat();
+      if (
+        !cells ||
+        !cells.length ||
+        cells.some((cell) => cell && typeof cell.pos !== 'number')
+      ) {
+        return false;
+      }
+      const cellsInFirstRow = getCellsInRow(Math.min(...rowIndexes))(
+        state.tr.selection,
+      );
+      if (!cellsInFirstRow || cellsInFirstRow.length === 0) {
+        return false;
+      }
+      const targetCellPosition = cellsInFirstRow[0].pos;
+
+      return { type: 'SET_TARGET_CELL_POSITION', data: { targetCellPosition } };
+    },
+    (tr) => selectRowsTransform(rowIndexes)(tr).setMeta('addToHistory', false),
+  );
+
 export const showInsertColumnButton = (columnIndex: number) =>
   createCommand(
     (_) =>

package/src/plugins/table/index.tsx

@@ -303,13 +303,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         {
           name: 'tableOverflowAnalyticsPlugin',
           plugin: ({ dispatch, dispatchAnalyticsEvent }) =>
-            getBooleanFF('platform.editor.table.overflow-state-analytics')
-              ? createTableOverflowAnalyticsPlugin(
-                  dispatch,
-                  dispatchAnalyticsEvent,
-                  options?.tableResizingEnabled ?? false,
-                )
-              : undefined,
+            createTableOverflowAnalyticsPlugin(
+              dispatch,
+              dispatchAnalyticsEvent,
+              options?.tableResizingEnabled ?? false,
+            ),
         },
         {
           name: 'tableAnalyticsPlugin',

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -263,13 +263,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     eventDispatcher.on((stickyHeadersPluginKey as any).key, this.onStickyState);
 
-    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-      const initialIsOveflowing =
-        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    const initialIsOveflowing =
+      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
-    }
+    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
   }
 
   componentWillUnmount() {
@@ -389,42 +387,37 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.handleTableResizingDebounced();
     }
 
-    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-      const newIsOverflowing =
-        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    const newIsOverflowing =
+      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-      const prevIsOverflowing =
-        prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-        prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+    const prevIsOverflowing =
+      prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+      prevState[ShadowEvent.SHOW_AFTER_SHADOW];
 
-      if (this.initialOverflowCaptureTimerId) {
-        clearTimeout(this.initialOverflowCaptureTimerId);
-      }
+    if (this.initialOverflowCaptureTimerId) {
+      clearTimeout(this.initialOverflowCaptureTimerId);
+    }
 
-      if (!this.isInitialOverflowSent) {
-        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-      }
+    if (!this.isInitialOverflowSent) {
+      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+    }
 
-      if (
-        this.isInitialOverflowSent &&
-        prevIsOverflowing !== newIsOverflowing
-      ) {
-        const {
-          dispatch,
-          state: { tr },
-        } = this.props.view;
-
-        dispatch(
-          tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-            isOverflowing: newIsOverflowing,
-            wasOverflowing: prevIsOverflowing,
-            editorWidth: this.props.containerWidth.width || 0,
-            width: this.node.attrs.width || 0,
-            parentWidth: this.state?.parentWidth || 0,
-          }),
-        );
-      }
+    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+      const {
+        dispatch,
+        state: { tr },
+      } = this.props.view;
+
+      dispatch(
+        tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+          isOverflowing: newIsOverflowing,
+          wasOverflowing: prevIsOverflowing,
+          editorWidth: this.props.containerWidth.width || 0,
+          width: this.node.attrs.width || 0,
+          parentWidth: this.state?.parentWidth || 0,
+        }),
+      );
     }
   }
 

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -235,6 +235,8 @@ export const createPlugin = (
                 targetAdjustedIndex + (direction === -1 ? 0 : -1),
                 tr,
               )(editorView.state, editorView.dispatch);
+
+              editorView.focus();
             });
           },
         }),

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -55,13 +55,11 @@ export const handleMouseDown = (
   }
   event.preventDefault();
 
-  if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-    const tr = view.state.tr;
-    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN,
-    });
-    dispatch(tr);
-  }
+  const tr = view.state.tr;
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN,
+  });
+  dispatch(tr);
 
   const mouseDownTime = event.timeStamp;
   const cell = state.doc.nodeAt(localResizeHandlePos);

package/src/plugins/table/types.ts

@@ -463,3 +463,5 @@ export interface DraggableData {
   targetClosestEdge: Edge;
   direction: 1 | -1;
 }
+
+export type HandleTypes = 'hover' | 'selected';

package/src/plugins/table/ui/DragHandle/HandleIconComponent.tsx

@@ -7,48 +7,23 @@ import {
 } from '../icons';
 
 type HandleIconProps = {
-  canDrag: boolean;
-  hasMergedCells: boolean;
-  direction: 'row' | 'column';
-  isDragMenuOpen: boolean | undefined;
+  forceDefaultHandle: boolean;
   isRowHandleHovered: boolean;
   isColumnHandleHovered: boolean;
-  isCurrentRowSelected: boolean;
-  isCurrentColumnSelected: boolean;
-  dragMenuDirection: 'row' | 'column' | undefined;
+  hasMergedCells: boolean;
 };
 
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
-    canDrag,
-    direction,
-    isDragMenuOpen,
+    forceDefaultHandle,
     isRowHandleHovered,
     isColumnHandleHovered,
     hasMergedCells,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection,
   } = props;
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
-  const isCurrentRowOrColumnSelected =
-    isCurrentRowSelected || isCurrentColumnSelected;
-  const isDragMenuOpenOnCurrentRowOrColumn =
-    isDragMenuOpen &&
-    dragMenuDirection === direction &&
-    isCurrentRowOrColumnSelected;
-
-  const isDragPossible = canDrag && !hasMergedCells;
-
-  const showNormalHandle = !isDragPossible ? (
-    <DragHandleDisabledIcon />
-  ) : (
-    <DragHandleIcon />
-  );
 
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (isHandleHovered || forceDefaultHandle) {
+    return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;
   }
 
   return <MinimisedHandleIcon />;

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -9,7 +9,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 
-import { getPluginState as getDragDropPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
@@ -23,6 +22,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
+  forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
   direction?: TableDirection;
@@ -40,6 +40,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -53,24 +54,11 @@ export const DragHandle = ({
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
-  const { hoveredColumns, hoveredRows, hoveredCell } = getPluginState(
-    editorView.state,
-  );
 
-  const { dragMenuDirection, isDragMenuOpen, dragMenuIndex } =
-    getDragDropPluginState(editorView.state);
+  const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
 
   const { selection } = editorView.state;
 
-  const isCurrentRowSelected =
-    isDragMenuOpen &&
-    direction === 'row' &&
-    hoveredCell.rowIndex === dragMenuIndex;
-  const isCurrentColumnSelected =
-    isDragMenuOpen &&
-    direction === 'column' &&
-    hoveredCell.colIndex === dragMenuIndex;
-
   const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
   const isColumnHandleHovered =
     direction === 'column' && hoveredColumns.length > 0;
@@ -84,15 +72,10 @@ export const DragHandle = ({
   );
 
   const handleIconProps = {
-    canDrag,
-    hasMergedCells,
-    direction,
-    isDragMenuOpen,
-    isRowHandleHovered,
+    forceDefaultHandle,
     isColumnHandleHovered,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection,
+    isRowHandleHovered,
+    hasMergedCells,
   };
 
   useEffect(() => {