@atlaskit/editor-plugin-table 5.3.33 → 5.3.35

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

@@ -53,4 +53,5 @@ export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export declare const dragMenuDropdownWidth = 240;
+export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

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

@@ -0,0 +1,2 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const combineTransforms: (transforms: ((tr: Transaction) => Transaction)[], tr: Transaction) => Transaction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.33",
+  "version": "5.3.35",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^0.24.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.7.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^1.10.0",
+    "@atlaskit/primitives": "^1.11.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^18.0.0",

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

@@ -587,7 +587,10 @@ export const withCellTracking =
     elementContentRects?: ElementContentRects,
   ) =>
   (view: EditorView, mouseEvent: Event): boolean => {
-    if (getPluginState(view.state).isDragAndDropEnabled) {
+    if (
+      getPluginState(view.state).isDragAndDropEnabled &&
+      !getDragDropPluginState(view.state).isDragging
+    ) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -2,6 +2,7 @@ import type {
   EditorState,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -18,6 +19,7 @@ import {
   createRowInsertLine,
   updateDecorations,
 } from '../../utils';
+import { combineTransforms } from '../../utils/transforms';
 
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
@@ -114,11 +116,31 @@ export const moveSource = (
         return tr.setMeta('addToHistory', false);
       }
 
+      const anchor = tr.selection.anchor;
+      const selectStartOfTable = (newTr: Transaction) =>
+        newTr.setSelection(TextSelection.create(newTr.doc, anchor));
+
       const isTableRow = sourceType === 'table-row';
-      const move = isTableRow ? moveRow : moveColumn;
-      const newTr = move(sourceIndex, targetIndex)(tr);
-      const select = isTableRow ? selectRow : selectColumn;
-      return select(targetIndex)(newTr);
+
+      if (isTableRow) {
+        return combineTransforms(
+          [
+            moveRow(sourceIndex, targetIndex),
+            selectStartOfTable,
+            selectRow(targetIndex),
+          ],
+          tr,
+        );
+      }
+
+      return combineTransforms(
+        [
+          moveColumn(sourceIndex, targetIndex),
+          selectStartOfTable,
+          selectColumn(targetIndex),
+        ],
+        tr,
+      );
     },
   );
 

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

@@ -39,6 +39,7 @@ export const createPlugin = (
       dropTargetIndex: 0,
       isDragMenuOpen: false,
       dragMenuIndex: 0,
+      isDragging: false,
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -160,11 +161,14 @@ export const createPlugin = (
             }
 
             const [sourceIndex] = sourceIndexes;
-            moveSource(
-              sourceType,
-              sourceIndex,
-              targetAdjustedIndex + (direction === -1 ? 0 : -1),
-            )(editorView.state, editorView.dispatch);
+
+            requestAnimationFrame(() => {
+              moveSource(
+                sourceType,
+                sourceIndex,
+                targetAdjustedIndex + (direction === -1 ? 0 : -1),
+              )(editorView.state, editorView.dispatch);
+            });
           },
         }),
       };

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

@@ -14,6 +14,7 @@ export default (
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index,
+        isDragging: true,
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
@@ -21,6 +22,7 @@ export default (
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
+        isDragging: false,
       };
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return {

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

@@ -11,4 +11,5 @@ export interface DragAndDropPluginState {
   isDragMenuOpen: boolean;
   dragMenuDirection?: TableDirection;
   dragMenuIndex: number;
+  isDragging: boolean;
 }

package/src/plugins/table/types.ts

@@ -291,6 +291,8 @@ export const TableCssClassName = {
 
   DRAG_CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__drag-insert-button`,
   DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
+  DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: `${tablePrefixSelector}-controls__drag-insert-button-inner-column`,
+  DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: `${tablePrefixSelector}-controls__drag-insert-button-inner-row`,
   DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
 
   CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,

package/src/plugins/table/ui/FloatingInsertButton/InsertButton.tsx

@@ -2,6 +2,7 @@
 import type { SyntheticEvent } from 'react';
 import React from 'react';
 
+import classnames from 'classnames';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
@@ -14,6 +15,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import type { TableDirection } from '../../types';
@@ -61,16 +63,19 @@ const getInsertLineWidth = (
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   const LINE_OFFSET = 4;
+  const DRAG_LINE_OFFSET = 6;
   const { parentElement, offsetWidth } = tableRef;
   const parentOffsetWidth = parentElement!.offsetWidth;
   const { scrollLeft } = parentElement!;
   const diff = offsetWidth - parentOffsetWidth;
   const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
+  const lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
+
   return (
     Math.min(
       offsetWidth + toolbarSize,
       parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0),
-    ) + LINE_OFFSET
+    ) + lineOffset
   );
 };
 
@@ -85,34 +90,42 @@ export const InsertButtonForDragAndDrop = ({
   intl: { formatMessage },
   hasStickyHeaders,
 }: ButtonProps & WrappedComponentProps) => {
+  const isRow = type === 'row';
+
   const content = (
     <Tooltip
       content={
         <ToolTipContent
-          description={formatMessage(tooltipMessageByType(type))}
-          keymap={type === 'row' ? addRowAfter : addColumnAfter}
+          description={formatMessage(
+            isRow ? messages.insertRowDrag : messages.insertColumnDrag,
+          )}
+          keymap={isRow ? addRowAfter : addColumnAfter}
         />
       }
       position="top"
     >
       <>
-        <div className={ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER}>
+        <div
+          className={classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, {
+            [ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow,
+            [ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN]: !isRow,
+          })}
+        >
           <button
             type="button"
             className={ClassName.DRAG_CONTROLS_INSERT_BUTTON}
             onMouseDown={onMouseDown}
           >
             <svg
-              width="10"
-              height="10"
-              viewBox="0 0 10 10"
+              className={ClassName.CONTROLS_BUTTON_ICON}
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M5.41667 4.58333V2.91667C5.41667 2.80616 5.37277 2.70018 5.29463 2.62204C5.21649 2.5439 5.11051 2.5 5 2.5C4.88949 2.5 4.78351 2.5439 4.70537 2.62204C4.62723 2.70018 4.58333 2.80616 4.58333 2.91667V4.58333H2.91667C2.80616 4.58333 2.70018 4.62723 2.62204 4.70537C2.5439 4.78351 2.5 4.88949 2.5 5C2.5 5.11051 2.5439 5.21649 2.62204 5.29463C2.70018 5.37277 2.80616 5.41667 2.91667 5.41667H4.58333V7.08333C4.58333 7.19384 4.62723 7.29982 4.70537 7.37796C4.78351 7.4561 4.88949 7.5 5 7.5C5.11051 7.5 5.21649 7.4561 5.29463 7.37796C5.37277 7.29982 5.41667 7.19384 5.41667 7.08333V5.41667H7.08333C7.19384 5.41667 7.29982 5.37277 7.37796 5.29463C7.4561 5.21649 7.5 5.11051 7.5 5C7.5 4.88949 7.4561 4.78351 7.37796 4.70537C7.29982 4.62723 7.19384 4.58333 7.08333 4.58333H5.41667Z"
+                d="M8.66667 7.33333V4.66667C8.66667 4.48986 8.59643 4.32029 8.47141 4.19526C8.34638 4.07024 8.17682 4 8 4C7.82318 4 7.65362 4.07024 7.52859 4.19526C7.40357 4.32029 7.33333 4.48986 7.33333 4.66667V7.33333H4.66667C4.48986 7.33333 4.32029 7.40357 4.19526 7.52859C4.07024 7.65362 4 7.82318 4 8C4 8.17682 4.07024 8.34638 4.19526 8.47141C4.32029 8.59643 4.48986 8.66667 4.66667 8.66667H7.33333V11.3333C7.33333 11.5101 7.40357 11.6797 7.52859 11.8047C7.65362 11.9298 7.82318 12 8 12C8.17682 12 8.34638 11.9298 8.47141 11.8047C8.59643 11.6797 8.66667 11.5101 8.66667 11.3333V8.66667H11.3333C11.5101 8.66667 11.6797 8.59643 11.8047 8.47141C11.9298 8.34638 12 8.17682 12 8C12 7.82318 11.9298 7.65362 11.8047 7.52859C11.6797 7.40357 11.5101 7.33333 11.3333 7.33333H8.66667Z"
                 fill="currentColor"
               />
             </svg>
@@ -122,23 +135,28 @@ export const InsertButtonForDragAndDrop = ({
           className={ClassName.CONTROLS_INSERT_LINE}
           style={
             type === 'row'
-              ? { width: getInsertLineWidth(tableRef, true), left: '14px' }
-              : { height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11 }
+              ? {
+                  width: getInsertLineWidth(tableRef, true),
+                  left: token('space.150', '12px'),
+                }
+              : {
+                  height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
+                  top: '-3px',
+                }
           }
         />
       </>
     </Tooltip>
   );
 
-  const floatingButtonClassName =
-    type === 'column'
-      ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
-      : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  const floatingButtonClassName = isRow
+    ? ClassName.CONTROLS_FLOATING_BUTTON_ROW
+    : ClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
 
   return (
     <div className={floatingButtonClassName}>
       <div
-        className={`${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
+        className={`${ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
       >
         {content}
       </div>

package/src/plugins/table/ui/common-styles.ts

@@ -764,11 +764,6 @@ export const tableStyles = (
       }
     }
 
-    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW}
-      .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
-      bottom: -1px;
-    }
-
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
       padding: 0;

package/src/plugins/table/ui/consts.ts

@@ -159,4 +159,5 @@ export const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 
 export const dragMenuDropdownWidth = 240;
+export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;

package/src/plugins/table/ui/ui-styles.ts

@@ -22,6 +22,7 @@ import {
   columnControlsDecorationHeight,
   columnControlsSelectedZIndex,
   columnControlsZIndex,
+  dragTableInsertColumnButtonSize,
   insertLineWidth,
   lineMarkerSize,
   resizeHandlerAreaWidth,
@@ -185,8 +186,16 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
     position: absolute;
     z-index: ${akEditorUnitZIndex + 10};
-    bottom: -5px;
-    left: 3px;
+  }
+
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN} {
+    bottom: -3px;
+    left: 2px;
+  }
+
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW} {
+    left: -3px;
+    bottom: -2px;
   }
 
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
@@ -198,6 +207,8 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
       '#C1C7D0',
     )};
     border-radius: 50%;
+    height: ${dragTableInsertColumnButtonSize}px;
+    width: ${dragTableInsertColumnButtonSize}px;
   `)}
   }
 
@@ -872,6 +883,7 @@ export const resizeHandle = (props: ThemeProps) => css`
   }
 `;
 
+// Drag and Drop: drop target insert line
 export const insertLine = (props: ThemeProps) => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {

package/src/plugins/table/utils/drag-menu.ts

@@ -194,11 +194,13 @@ export const getDragMenuConfig = (
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {
-          moveSource(
-            `table-${direction}`,
-            index!,
-            index! + offset,
-          )(state, dispatch);
+          requestAnimationFrame(() => {
+            moveSource(
+              `table-${direction}`,
+              index!,
+              index! + offset,
+            )(state, dispatch);
+          });
           return true;
         }
         return false;

package/src/plugins/table/utils/transforms.ts

@@ -0,0 +1,10 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+
+export const combineTransforms = (
+  transforms: Array<(tr: Transaction) => Transaction>,
+  tr: Transaction,
+) => {
+  return transforms.reduce((prev, curr) => {
+    return curr(prev);
+  }, tr);
+};