@atlaskit/editor-plugin-table 5.4.6 → 5.4.8

package/dist/es2019/plugins/table/commands/insert.js

@@ -5,13 +5,12 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { addColumnAt as addColumnAtPMUtils, addRowAt, createTable as createTableNode, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
-
-// #endregion
-
 function addColumnAtCustomStep(column) {
   return tr => {
     const table = findTable(tr.selection);
@@ -35,6 +34,11 @@ export function addColumnAt(getEditorContainerWidth) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
       }
+      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
+        updatedTr = updateRowOrColumnMovedTransform({
+          type: 'column'
+        }, 'addRowOrColumn')(view.state, updatedTr);
+      }
       updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
         name: TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN
       });
@@ -111,6 +115,11 @@ export const insertRow = (row, moveCursorToTheNewRow) => (state, dispatch) => {
     } else {
       tr.setSelection(selection.map(tr.doc, tr.mapping));
     }
+    if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
+      updateRowOrColumnMovedTransform({
+        type: 'row'
+      }, 'addRowOrColumn')(state, tr);
+    }
     dispatch(tr);
   }
   return true;

package/dist/es2019/plugins/table/commands/misc.js

@@ -1,5 +1,3 @@
-// #region Imports
-
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -26,7 +24,9 @@ export const setTableRef = ref => createCommand(state => {
   const tablePos = ref && foundTable ? foundTable.pos : undefined;
   const tableWrapperTarget = closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`) || undefined;
   const layout = tableNode ? tableNode.attrs.layout : undefined;
-  const decorationSet = updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+  const {
+    isDragAndDropEnabled
+  } = getPluginState(state);
   return {
     type: 'SET_TABLE_REF',
     data: {
@@ -38,7 +38,8 @@ export const setTableRef = ref => createCommand(state => {
       isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
       isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
       isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-      decorationSet,
+      // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+      decorationSet: !isDragAndDropEnabled ? updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
       resizeHandleRowIndex: undefined,
       resizeHandleColumnIndex: undefined
     }
@@ -159,6 +160,55 @@ export const transformSliceToRemoveColumnsWidths = (slice, schema) => {
     return maybeCell;
   });
 };
+export const countCellsInSlice = (slice, schema, type) => {
+  const {
+    tableHeader,
+    tableCell
+  } = schema.nodes;
+  let count = 0;
+  if (!type) {
+    return count;
+  }
+  slice.content.descendants(maybeCell => {
+    if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
+      count += type === 'row' ? maybeCell.attrs.colspan : maybeCell.attrs.rowspan;
+      return false;
+    }
+  });
+  return count;
+};
+export const getTableSelectionType = selection => {
+  if (selection instanceof CellSelection) {
+    return selection.isRowSelection() ? 'row' : selection.isColSelection() ? 'column' : undefined;
+  }
+};
+export const getTableElementMoveTypeBySlice = (slice, state) => {
+  if (!slice.content.firstChild) {
+    return;
+  }
+  const {
+    schema
+  } = state;
+
+  // if the slice only contains one table row, assume it's a row
+  if (slice.content.childCount === 1 && slice.content.firstChild.type === schema.nodes.tableRow) {
+    return 'row';
+  }
+  const table = findTable(state.tr.selection);
+  const map = TableMap.get(table.node);
+  const slicedMap = TableMap.get(slice.content.firstChild);
+  return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
+};
+export const isInsideFirstCellOfRowOrColumn = (selection, type) => {
+  const table = findTable(selection);
+  if (!table || !type) {
+    return;
+  }
+  const map = TableMap.get(table.node);
+  const cell = selectionCell(selection);
+  const index = map.map.findIndex(value => value === cell.pos - 1);
+  return type === 'row' ? index % map.width === 0 : index < map.width;
+};
 export const deleteTable = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeTable(state.tr));

package/dist/es2019/plugins/table/index.js

@@ -12,6 +12,8 @@ import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginConfig } from './create-plugin-config';
+import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
+import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { createPlugin as createDragAndDropPlugin, pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -19,7 +21,7 @@ import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers';
-import { createPlugin as createTableAnalyticsPlugin, pluginKey as tableAnalyticsPluginKey } from './pm-plugins/table-analytics';
+import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
@@ -182,15 +184,23 @@ const tablesPlugin = ({
           var _options$fullWidthEna;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
-      }, {
-        name: 'tableAnalyticsPlugin',
+      },
+      // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
+      {
+        name: 'tableOverflowAnalyticsPlugin',
         plugin: ({
           dispatch,
           dispatchAnalyticsEvent
         }) => {
           var _options$tableResizin;
-          return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
+          return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
         }
+      }, {
+        name: 'tableAnalyticsPlugin',
+        plugin: ({
+          dispatch,
+          dispatchAnalyticsEvent
+        }) => getBooleanFF('platform.editor.table.analytics-plugin-moved-event') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent) : undefined
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: () => {

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -4,10 +4,9 @@ import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { analyticsEventKey, browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -189,26 +188,23 @@ class TableComponent extends React.Component {
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
       var _this$state;
       const {
-        eventDispatcher,
+        dispatchAnalyticsEvent,
         containerWidth,
         options
       } = this.props;
-      const dispatch = createDispatch(eventDispatcher);
       const parentWidth = ((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.parentWidth) || 0;
       this.initialOverflowCaptureTimerId = setTimeout(() => {
-        dispatch(analyticsEventKey, {
-          payload: {
-            action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
-            actionSubject: ACTION_SUBJECT.TABLE,
-            actionSubjectId: null,
-            eventType: EVENT_TYPE.TRACK,
-            attributes: {
-              editorWidth: containerWidth.width || 0,
-              isOverflowing,
-              tableResizingEnabled: (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) || false,
-              width: this.node.attrs.width || 0,
-              parentWidth
-            }
+        dispatchAnalyticsEvent({
+          action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            editorWidth: containerWidth.width || 0,
+            isOverflowing,
+            tableResizingEnabled: (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) || false,
+            width: this.node.attrs.width || 0,
+            parentWidth
           }
         });
         this.isInitialOverflowSent = true;
@@ -537,9 +533,7 @@ class TableComponent extends React.Component {
     const tableRef = this.table || undefined;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
     const hasHeaderRow = containsHeaderRow(node);
-    const rowControls = /*#__PURE__*/React.createElement("div", {
-      className: ClassName.ROW_CONTROLS_WRAPPER
-    }, /*#__PURE__*/React.createElement(TableFloatingControls, {
+    const rowControls = /*#__PURE__*/React.createElement(TableFloatingControls, {
       editorView: view,
       tableRef: tableRef,
       tableNode: node,
@@ -559,7 +553,7 @@ class TableComponent extends React.Component {
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
       stickyHeader: this.state.stickyHeader
-    }));
+    });
     const colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
       editorView: view,
       tableRef: tableRef,

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -139,10 +139,10 @@ export const TableResizer = ({
         tr
       }
     } = editorView;
+    displayGapCursor(false);
     tr.setMeta(tableWidthPluginKey, {
       resizing: true
     });
-    displayGapCursor(false);
     tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -156,6 +156,7 @@ export default class TableView extends ReactNodeView {
           containerWidth: containerWidth,
           contentDOM: forwardRef,
           getEditorFeatureFlags: props.getEditorFeatureFlags,
+          dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
           pluginInjectionApi: props.pluginInjectionApi
         });
       }
@@ -217,7 +218,7 @@ export default class TableView extends ReactNodeView {
     super.destroy();
   }
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) => {
   const {
     pluginConfig,
     isBreakoutEnabled,
@@ -246,6 +247,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,
+    dispatchAnalyticsEvent,
     hasIntlContext,
     pluginInjectionApi
   }).init();

package/dist/es2019/plugins/table/pm-plugins/analytics/actions.js

@@ -0,0 +1,8 @@
+export let AnalyticPluginTypes = /*#__PURE__*/function (AnalyticPluginTypes) {
+  AnalyticPluginTypes[AnalyticPluginTypes["UpdateOverflowTriggerNameAction"] = 0] = "UpdateOverflowTriggerNameAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["UpdateRowOrColumnMovedAction"] = 1] = "UpdateRowOrColumnMovedAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["RemoveRowOrColumnMovedAction"] = 2] = "RemoveRowOrColumnMovedAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["RemoveOverFlowTriggerNameAction"] = 3] = "RemoveOverFlowTriggerNameAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["UpdateRowOrColumnMovedAndOverflowTrigger"] = 4] = "UpdateRowOrColumnMovedAndOverflowTrigger";
+  return AnalyticPluginTypes;
+}({});

package/dist/es2019/plugins/table/pm-plugins/analytics/commands.js

@@ -0,0 +1,33 @@
+import { AnalyticPluginTypes } from './actions';
+import { createCommand, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import { getMovedPayload } from './utils/moved-event';
+export const updateRowOrColumnMoved = (nextState, nextAction) => createCommand(state => {
+  const {
+    rowOrColumnMoved
+  } = getPluginState(state);
+  const data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
+  return {
+    type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+    data
+  };
+}, tr => tr.setMeta('addToHistory', false));
+
+// --- transforms, prefer these over commands to avoid an extra 'dispatch'
+export const resetRowOrColumnMovedTransform = () => tr => {
+  const payload = {
+    type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction
+  };
+  return tr.setMeta(pluginKey, payload);
+};
+export const updateRowOrColumnMovedTransform = (nextState, nextAction) => (state, tr) => {
+  const {
+    rowOrColumnMoved
+  } = getPluginState(state);
+  const data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
+  const payload = {
+    type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+    data
+  };
+  return tr.setMeta(pluginKey, payload);
+};

package/dist/es2019/plugins/table/pm-plugins/analytics/plugin-factory.js

@@ -0,0 +1,8 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pluginKey } from './plugin-key';
+import { reducer } from './reducer';
+export const {
+  createPluginState,
+  createCommand,
+  getPluginState
+} = pluginFactory(pluginKey, reducer);

package/dist/es2019/plugins/table/pm-plugins/analytics/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('tableAnalyticPlugin');

package/dist/es2019/plugins/table/pm-plugins/analytics/plugin.js

@@ -0,0 +1,72 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { countCellsInSlice, getTableElementMoveTypeBySlice, getTableSelectionType, isInsideFirstCellOfRowOrColumn } from '../../commands/misc';
+import { resetRowOrColumnMovedTransform, updateRowOrColumnMoved } from './commands';
+import { createPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import { defaultState } from './types';
+export const createPlugin = (dispatch, dispatchAnalyticsEvent) => new SafePlugin({
+  key: pluginKey,
+  state: createPluginState(dispatch, defaultState),
+  appendTransaction: (transactions, oldState, newState) => {
+    const tr = transactions.find(tr => {
+      var _tr$getMeta, _tr$getMeta$data, _tr$getMeta$data$curr;
+      return (_tr$getMeta = tr.getMeta(pluginKey)) === null || _tr$getMeta === void 0 ? void 0 : (_tr$getMeta$data = _tr$getMeta.data) === null || _tr$getMeta$data === void 0 ? void 0 : (_tr$getMeta$data$curr = _tr$getMeta$data.currentActions) === null || _tr$getMeta$data$curr === void 0 ? void 0 : _tr$getMeta$data$curr.includes('pasted');
+    });
+    if (tr) {
+      var _tr$getMeta2, _tr$getMeta2$data;
+      dispatchAnalyticsEvent({
+        action: TABLE_ACTION.ROW_OR_COLUMN_MOVED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          type: (_tr$getMeta2 = tr.getMeta(pluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : (_tr$getMeta2$data = _tr$getMeta2.data) === null || _tr$getMeta2$data === void 0 ? void 0 : _tr$getMeta2$data.type
+        }
+      });
+      return resetRowOrColumnMovedTransform()(tr);
+    }
+    return undefined;
+  },
+  props: {
+    handlePaste: ({
+      state,
+      dispatch
+    }, event, slice) => {
+      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
+        const {
+          schema
+        } = state;
+        const type = getTableElementMoveTypeBySlice(slice, state);
+
+        // if the selection wasn't in the first cell of a row or column, don't count it
+        if (!isInsideFirstCellOfRowOrColumn(state.selection, type)) {
+          return;
+        }
+        const count = countCellsInSlice(slice, schema, type);
+        updateRowOrColumnMoved({
+          numberOfCells: count,
+          type
+        }, 'pasted')(state, dispatch);
+      }
+    },
+    transformCopied: (slice, {
+      state,
+      dispatch
+    }) => {
+      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
+        const {
+          schema
+        } = state;
+        const type = getTableSelectionType(state.selection);
+        const count = countCellsInSlice(slice, schema, type);
+        updateRowOrColumnMoved({
+          numberOfCells: count,
+          type
+        }, 'copyOrCut')(state, dispatch);
+      }
+      return slice;
+    }
+  }
+});

package/dist/es2019/plugins/table/pm-plugins/analytics/reducer.js

@@ -0,0 +1,21 @@
+import { AnalyticPluginTypes } from './actions';
+import { defaultState } from './types';
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case AnalyticPluginTypes.UpdateRowOrColumnMovedAction:
+      return {
+        ...state,
+        rowOrColumnMoved: {
+          ...state.rowOrColumnMoved,
+          ...action.data
+        }
+      };
+    case AnalyticPluginTypes.RemoveRowOrColumnMovedAction:
+      return {
+        ...state,
+        rowOrColumnMoved: defaultState.rowOrColumnMoved
+      };
+    default:
+      return state;
+  }
+};

package/dist/es2019/plugins/table/pm-plugins/analytics/types.js

@@ -0,0 +1,7 @@
+export const defaultState = {
+  rowOrColumnMoved: {
+    type: undefined,
+    numberOfCells: undefined,
+    currentActions: []
+  }
+};

package/dist/es2019/plugins/table/pm-plugins/analytics/utils/moved-event.js

@@ -0,0 +1,30 @@
+import { defaultState } from '../types';
+const getNextActionType = (nextState, nextAction, prevState) => {
+  if (nextAction === 'pasted') {
+    if (prevState && prevState.currentActions.includes('copyOrCut') && prevState.currentActions.includes('addRowOrColumn') && prevState.numberOfCells === nextState.numberOfCells && prevState.type === nextState.type) {
+      return 'pasted';
+    }
+    return 'none';
+  }
+  return nextAction;
+};
+export const getMovedPayload = (nextState, nextAction, prevState) => {
+  const nextActionType = getNextActionType(nextState, nextAction, prevState);
+  if (nextActionType === 'none') {
+    return defaultState.rowOrColumnMoved;
+  }
+
+  // a new workflow has started in the opposite axis (e.g. inserted a row, but copied a column) remove old state
+  if (prevState.type !== nextState.type) {
+    return {
+      currentActions: [nextActionType],
+      numberOfCells: nextState === null || nextState === void 0 ? void 0 : nextState.numberOfCells,
+      type: nextState.type
+    };
+  }
+  return {
+    currentActions: prevState.currentActions.includes(nextActionType) ? prevState.currentActions : [...prevState.currentActions, nextActionType],
+    numberOfCells: (nextState === null || nextState === void 0 ? void 0 : nextState.numberOfCells) || prevState.numberOfCells,
+    type: nextState === null || nextState === void 0 ? void 0 : nextState.type
+  };
+};

package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -2,7 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
@@ -12,15 +11,21 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   var _tableWidthPluginKey$, _tableWidthPluginKey$2;
   const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
+  const {
+    isDragAndDropEnabled = false
+  } = tablePluginKey.getState(newState) || {};
   const changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
-  if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
+  if (isResizing) {
     return DecorationSet.empty;
   } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet,
-      tr
+      tr,
+      options: {
+        isDragAndDropEnabled
+      }
     });
   } else if (tr.selectionSet) {
     const isTransactionFromMouseClick = !tr.docChanged && tr.selectionSet && tr.getMeta('pointer');
@@ -39,6 +44,7 @@ export const createPlugin = () => {
       init: () => DecorationSet.empty,
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
+        // main table plugin --->
         const meta = tr.getMeta(tablePluginKey);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -25,8 +25,6 @@ const maybeUpdateColumnControlsDecoration = ({
   tr
 }) => {
   const table = findTable(tr.selection);
-
-  // avoid re-drawing state if dnd decorations don't need to be updated
   if (!table) {
     return decorationSet;
   }
@@ -52,8 +50,15 @@ export const maybeUpdateColumnControlsSelectedDecoration = ({
 };
 export const buildColumnControlsDecorations = ({
   decorationSet,
-  tr
+  tr,
+  options
 }) => {
+  if (options.isDragAndDropEnabled) {
+    return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration])({
+      decorationSet,
+      tr
+    });
+  }
   return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
     decorationSet,
     tr

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -227,7 +227,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         return false;
       },
       nodeViews: {
-        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi),
+        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi),
         tableRow: (node, view, getPos) => new TableRow(node, view, getPos, eventDispatcher),
         tableCell: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher, observer),
         tableHeader: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher, observer)

package/dist/es2019/plugins/table/pm-plugins/table-analytics.js

@@ -4,7 +4,7 @@
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export const pluginKey = new PluginKey('tableAnalyticsPlugin');
+export const pluginKey = new PluginKey('tableOverflowAnalyticsPlugin');
 export const META_KEYS = {
   OVERFLOW_TRIGGER: 'tableOverflowTrigger',
   OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged'

package/dist/es2019/plugins/table/types.js

@@ -79,7 +79,8 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_ROW_MARKER: `${tablePrefixSelector}-corner-controls__insert-row-marker`,
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
-  /** Controls with drag handle */
+  /** drag and drop controls */
+  DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
   DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
   DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -128,7 +128,10 @@ export default class TableFloatingControls extends Component {
       return null;
     }
     const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+    const wrapperClassName = isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
     return /*#__PURE__*/React.createElement("div", {
+      className: wrapperClassName
+    }, /*#__PURE__*/React.createElement("div", {
       onMouseDown: e => !isDragAndDropEnabled && e.preventDefault()
     }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
       editorView: editorView,
@@ -178,7 +181,7 @@ export default class TableFloatingControls extends Component {
       isResizing: isResizing,
       selectRow: this.selectRow,
       stickyTop: tableActive ? stickyTop : undefined
-    }))));
+    })))));
   }
 }
 _defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -173,23 +173,6 @@ const tableStickyHeaderFirefoxFixStyle = props => {
     `;
   }
 };
-const tableRowControlStyles = () => {
-  return getBooleanFF('platform.editor.table.drag-and-drop') ? css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          margin-top: ${tableMarginTop}px;
-          left: -${tableToolbarSize + 1}px;
-          z-index: ${rowControlsZIndex + 4};
-        }
-      ` : css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-          top: ${tableMarginTop - cornerControlHeight + 1}px;
-          left: -${tableToolbarSize}px;
-        }
-      `;
-};
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -463,7 +446,8 @@ export const tableStyles = props => {
     .less-padding {
       padding: 0 ${tablePadding}px;
 
-      .${ClassName.ROW_CONTROLS_WRAPPER} {
+      .${ClassName.DRAG_ROW_CONTROLS_WRAPPER},
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
 
         // https://product-fabric.atlassian.net/browse/ED-16386
@@ -935,8 +919,24 @@ export const tableStyles = props => {
         }
       }
     }
-    ${tableRowControlStyles()}
-    .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
+
+    // override for DnD controls
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      margin-top: ${tableMarginTop}px;
+      left: -${tableToolbarSize + 1}px;
+      z-index: ${rowControlsZIndex + 4};
+    }
+
+    .${ClassName.ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+      top: ${tableMarginTop - cornerControlHeight + 1}px;
+      left: -${tableToolbarSize}px;
+    }
+
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
+      .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
     }