@atlaskit/editor-plugin-table 7.3.7 → 7.3.9

package/dist/types/event-handlers.d.ts

@@ -6,6 +6,7 @@ export declare const handleBlur: (view: EditorView, event: Event) => boolean;
 export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseOver: (view: EditorView, mouseEvent: Event) => boolean;
+export declare const handleMouseUp: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types/pm-plugins/drag-and-drop/utils/monitor.d.ts

@@ -1,3 +1,3 @@
-import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import type { DraggableData } from '../../../types';
 export declare const getDraggableDataFromEvent: ({ location, source, }: ElementEventBasePayload) => DraggableData | undefined;

package/dist/types/types.d.ts

@@ -7,7 +7,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import type tablePlugin from './plugin';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';

package/dist/types-ts4.5/event-handlers.d.ts

@@ -6,6 +6,7 @@ export declare const handleBlur: (view: EditorView, event: Event) => boolean;
 export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseOver: (view: EditorView, mouseEvent: Event) => boolean;
+export declare const handleMouseUp: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types-ts4.5/pm-plugins/drag-and-drop/utils/monitor.d.ts

@@ -1,3 +1,3 @@
-import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import type { DraggableData } from '../../../types';
 export declare const getDraggableDataFromEvent: ({ location, source, }: ElementEventBasePayload) => DraggableData | undefined;

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

@@ -7,7 +7,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import type tablePlugin from './plugin';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.3.7",
+  "version": "7.3.9",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,26 +30,26 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.1",
     "@atlaskit/custom-steps": "^0.0.13",
-    "@atlaskit/editor-common": "^78.1.0",
+    "@atlaskit/editor-common": "^78.4.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
     "@atlaskit/editor-plugin-guideline": "^1.0.0",
-    "@atlaskit/editor-plugin-selection": "^1.0.0",
+    "@atlaskit/editor-plugin-selection": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.0.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.5.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.5",
     "@atlaskit/platform-feature-flags": "^0.2.1",
-    "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^2.0.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
+    "@atlaskit/primitives": "^2.1.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
-    "@atlaskit/tokens": "^1.37.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -108,6 +108,9 @@
     "platform.editor.table.column-controls-styles-updated": {
       "type": "boolean"
     },
+    "platform.editor.table.insert-last-column-btn-stays-in-place": {
+      "type": "boolean"
+    },
     "platform.editor.resizing-table-height-improvement": {
       "type": "boolean"
     },

package/src/event-handlers.ts

@@ -251,6 +251,42 @@ export const handleMouseOver = (
   return false;
 };
 
+export const handleMouseUp = (view: EditorView, mouseEvent: Event): boolean => {
+  if (
+    !getBooleanFF('platform.editor.table.insert-last-column-btn-stays-in-place')
+  ) {
+    return false;
+  }
+
+  if (!(mouseEvent instanceof MouseEvent)) {
+    return false;
+  }
+  const { state, dispatch } = view;
+  const { insertColumnButtonIndex, tableNode, tableRef } =
+    getPluginState(state);
+
+  if (
+    insertColumnButtonIndex !== undefined &&
+    tableRef &&
+    tableRef.parentElement &&
+    tableNode
+  ) {
+    const { width } = TableMap.get(tableNode);
+    const newInsertColumnButtonIndex = insertColumnButtonIndex + 1;
+    if (width === newInsertColumnButtonIndex) {
+      const tableWidth = tableRef.clientWidth;
+      tableRef.parentElement.scrollTo(tableWidth, 0);
+
+      return showInsertColumnButton(newInsertColumnButtonIndex)(
+        state,
+        dispatch,
+      );
+    }
+  }
+
+  return false;
+};
+
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
 export const handleMouseDown = (_: EditorView, event: Event) => {

package/src/nodeviews/ExternalDropTargets.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../types';
 import { dropTargetExtendedWidth, dropTargetsZIndex } from '../ui/consts';

package/src/nodeviews/TableComponent.tsx

@@ -31,8 +31,8 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';

package/src/nodeviews/TableResizer.tsx

@@ -586,6 +586,7 @@ export const TableResizer = ({
         snap={guidelineSnaps}
         handlePositioning="adjacent"
         isHandleVisible={isTableSelected}
+        needExtendedResizeZone={!isTableSelected}
         appearance={
           isTableSelected && isWholeTableInDanger ? 'danger' : undefined
         }

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

@@ -10,8 +10,8 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../../types';
 import {

package/src/pm-plugins/drag-and-drop/utils/monitor.ts

@@ -1,6 +1,6 @@
-import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type {
   DraggableData,

package/src/pm-plugins/main.ts

@@ -65,6 +65,7 @@ import {
   handleMouseMove,
   handleMouseOut,
   handleMouseOver,
+  handleMouseUp,
   handleTripleClick,
   whenTableInFocus,
   withCellTracking,
@@ -420,6 +421,7 @@ export const createPlugin = (
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
         mouseenter: handleMouseEnter,
+        mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick)),
       },
 

package/src/types.ts

@@ -14,7 +14,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 
 import type tablePlugin from './plugin';
 

package/src/ui/DragHandle/index.tsx

@@ -9,8 +9,8 @@ import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 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 { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { token } from '@atlaskit/tokens';
 
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';

package/src/ui/FloatingInsertButton/index.tsx

@@ -121,14 +121,15 @@ export class FloatingInsertButton extends React.Component<
     ) {
       return null;
     }
-
-    const cellPosition = this.getCellPosition(type);
-    if (!cellPosition) {
+    const tablePos = findTable(tr.selection);
+    if (!tablePos) {
       return null;
     }
 
-    const tablePos = findTable(editorView.state.selection);
-    if (!tablePos) {
+    // the tableNode props is not always latest (when you type some text in a cell, it's not updated yet)
+    // we need to get the latest one by calling findTable(tr.selection)
+    const cellPosition = this.getCellPosition(type, tablePos?.node);
+    if (!cellPosition) {
       return null;
     }
 
@@ -230,9 +231,11 @@ export class FloatingInsertButton extends React.Component<
     );
   }
 
-  private getCellPosition(type: 'column' | 'row'): number | null {
-    const { tableNode, insertColumnButtonIndex, insertRowButtonIndex } =
-      this.props;
+  private getCellPosition(
+    type: 'column' | 'row',
+    tableNode: PmNode,
+  ): number | null {
+    const { insertColumnButtonIndex, insertRowButtonIndex } = this.props;
     const tableMap = TableMap.get(tableNode!);
 
     if (type === 'column') {

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../../../types';
 

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -5,7 +5,7 @@ import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta, DraggableSourceData } from '../../types';

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -16,7 +16,7 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';

package/src/ui/TableFloatingControls/RowDropTarget/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../../../types';
 

package/src/ui/common-styles.ts

@@ -720,6 +720,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
         height: 4px;
         width: 4px;
         border-radius: 50%;
+        pointer-events: none;
       }
     }